要点まとめ

このガイドでやることは、次の3つです。

Chromeの試験的な設定で、WebMCPツールを登録できる状態にします。
document.modelContext.registerTool()で、検索ツールを登録します。
通常の検索フォームと処理を共有し、未対応のブラウザでも動くようにします。

1. 準備する

Chrome公式ドキュメントで、対象バージョンと検証方法を確認します。ローカル検証用フラグは試験的な機能です。業務で使うChromeプロファイルと分けると安全です。

検証用Chromeを用意する
chrome://flags/#enable-webmcp-testingを確認する
DevToolsのWebMCP表示で登録結果を確認する

2. ツールを登録する

ツール名は短く動詞から始め、説明には「何をするか」「いつ使うか」「何が変わるか」を書きます。AIから渡される値は、種類（文字列か数値か）だけでなく、長さや許容できる値の範囲も検証します。

JavaScriptImperative API

const controller = new AbortController();

await document.modelContext.registerTool(
  {
    name: "search_guides",
    title: "WebMCPガイドを検索",
    description:
      "公開済みの日本語ガイドを検索する。変更や送信は行わない。",
    inputSchema: {
      type: "object",
      properties: {
        query: {
          type: "string",
          description: "検索するトピック"
        }
      },
      required: ["query"],
      additionalProperties: false
    },
    annotations: {
      readOnlyHint: true,
      untrustedContentHint: false
    },
    execute: async ({ query }) => {
      if (typeof query !== "string" || query.length > 80) {
        throw new Error("queryは80文字以内で指定してください");
      }

      const results = await searchGuides(query);
      renderSearchResults(results);
      return { count: results.length, results };
    }
  },
  { signal: controller.signal }
);

通常UIと処理を共有する

searchGuides()を検索フォームとWebMCPの両方から呼びます。WebMCPだけが特別なデータへアクセスする構成を避けると、結果の不一致とセキュリティ差を減らせます。

不要になったら登録解除する

controller.abort();

画面遷移や権限変更で使えなくなったツールは、速やかに登録解除します。

3. 検証する

正しい依頼でツールが選ばれる
空文字、長すぎる文字列、不正な型を拒否する
画面と返り値が一致する
未対応ブラウザでも通常UIが動く
登録解除後はツールが利用できない

4. 本番化する前に

機密情報をSchemaや返り値に含めない

認証済み画面でも、ツールに必要な最小限の情報だけを渡します。監査ログ内の個人情報もマスキングします。

まず検索や候補取得などの読み取りから始めます。送信や予約確定へ広げる場合は、同じ処理が二重に実行されない工夫（冪等性）、不正な送信を防ぐ対策（CSRF対策）、権限の確認、人間による最終確認を個別に設計してください。

安全なツール設計の基本

副作用のある操作を公開する前の判断基準を確認します。

安全設計へ

Chromeで動かす、WebMCP最小実装。