mcpField
W
webmcp-gen

webmcp-gen

github.com/browserbase開発3.7k570 回インストール8 週間前に更新
リポジトリ

webmcp-gen について

webmcp-genは、サイト固有のWebMCPツールを作成するスキルです。manifestを基準に初期化スクリプトを生成し、Chromeでのツール登録と呼び出しを検証します。

主な機能

  1. 01manifestから初期化スクリプトを生成
  2. 02browse CLIでページを調査
  3. 03Stagehandのサンプルを生成
  4. 04ツール登録と呼び出しを検証
  5. 05検証レポートに基づきmanifestを修正

活用シーン

  1. 01サイト向けの呼び出し可能なWebMCPツールを定義
  2. 02Chromeでツールの登録と実行を確認

MCP 対応

WebMCPツールを登録する初期化スクリプトを生成し、Chromeで登録と呼び出しを検証します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/browserbase/skills --skill webmcp-gen

インストール後、Claude Code で/webmcp-genを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

.gitignore
LICENSE.txt
package.json
pnpm-lock.yaml
scripts/
compile.mjs
generate-stagehand-example.mjs
scaffold.mjs
validate.mjs

詳細

WebMCP Gen

マニフェストを作成して WebMCP ツールをウェブサイトごとに作成し、初期化スクリプトにコンパイルして、Chrome がツールを登録して呼び出すことを検証します。

このスキルでは、ネストされたエージェントを呼び出しません。ページの調査、manifest.json の作成、検証結果に基づく反復作業は、ご自身で行ってください。

セットアップの確認

スキルのディレクトリから、まだインストールされていない場合は依存関係をインストールします。

cd skills/webmcp-gen
pnpm install

これにより、固定バージョンの Stagehand パッケージと、生成された stagehand-example.ts の実行に使う TypeScript ツールチェーン（tsx、typescript、@types/node）がインストールされます。

ワークフロー

  1. スラッシュがちょうど 1 つ含まれるアーティファクトのスラッグを選びます。
<domain>/<task>

例：

example.com/page-context
  1. アーティファクトをひな形から作成します。
node scripts/scaffold.mjs example.com/page-context --url https://example.com
  1. browse CLI で対象ページを調査します。
browse open https://example.com --local
browse snapshot
browse get title
browse get url
browse get text body
browse get html body

視覚的なレイアウトが重要な場合を除き、スクリーンショットよりも browse snapshot、ページのテキスト、DOM の調査を優先してください。調査が完了したら browse stop を使用します。

  1. artifacts/<domain>/<task>/manifest.json を編集します。マニフェストが信頼できる唯一の情報源です。

  2. コンパイルします。

node scripts/compile.mjs artifacts/example.com/page-context
  1. 実行可能な Stagehand の例（stagehand-example.ts）を生成し、tsx で実行します。
node scripts/generate-stagehand-example.mjs artifacts/example.com/page-context
npx tsx artifacts/example.com/page-context/stagehand-example.ts
  1. 検証します。
node scripts/validate.mjs artifacts/example.com/page-context
  1. 検証に失敗した場合は、eval.json と eval-report.md を確認し、manifest.json を修正してから、再度コンパイルして検証します。

マニフェストの仕様

{
  "domain": "example.com",
  "task": "page-context",
  "url": "https://example.com",
  "generatedAt": "2026-06-04T00:00:00.000Z",
  "tools": [
    {
      "name": "example_com_page_context",
      "description": "Returns page context.",
      "inputSchema": {
        "type": "object",
        "properties": {},
        "required": []
      },
      "implementation": {
        "kind": "dom",
        "source": "return { success: true, title: document.title, url: location.href };"
      },
      "fixtureInput": {}
    }
  ]
}

作成時のルール

  • implementation.source は async (input) => { ... } の内部に挿入されます。関数全体のラッパーではなく、JavaScript の文を記述してください。
  • JSON にシリアライズ可能なオブジェクトを返してください。
  • WebMCP のコードはブラウザーのページ内で実行されます。document、location、navigator、同一オリジンの fetch など、ブラウザー標準の API を使用してください。
  • implementation.source 内では、Playwright、Puppeteer、Stagehand、XPath ヘルパー、エージェント／ブラウザーのコマンドを使用しないでください。
  • document.querySelector と querySelectorAll には、有効なブラウザー CSS セレクターのみを渡してください。
  • 表示されているテキストを探すには、Array.from(document.querySelectorAll(...)).find((el) => (el.textContent || "").includes("...")) を使用してください。
  • API キー、ベアラートークン、Cookie、localStorage 内のシークレット、ユーザー認証情報を含めないでください。
  • eval または new Function を使用しないでください。
  • ユーザーから明示的に依頼されていない限り、破壊的な操作は避けてください。
  • 実装では問題に備えてください。要素が見つからない場合は確認し、{ success: false, error: "..." } 形式の構造化されたレスポンスを返してください。
  • 生成された初期化スクリプトは、トップフレームでのみ WebMCP ツールを登録します。

出力レイアウト

artifacts/<domain>/<task>/
  manifest.json
  webmcp.init.js
  stagehand-example.ts
  eval.json
  eval-report.md

この例をスタンドアロンのプロジェクトにするには、npx create-browser-app で Stagehand アプリをひな形から作成し、生成された webmcp.init.js をその中に配置します（page.addInitScript({ path: "webmcp.init.js" }) で読み込みます）。

コメント

Markdown 対応