WebMCPとは?ブラウザツールの実装例と検証方法

February 21, 2026
特集記事
WebMCPの宣言型フォームとdocument.modelContextを理解し、現在のコード例で実装とブラウザ検証を進めるためのガイドです。
WebMCPとは?ブラウザツールの実装例と検証方法
webmcp
aiエージェント
web開発
chrome 146
w3c

2026年10月11日更新。WebMCPは、ウェブサイトの操作をブラウザ内のエージェントに構造化ツールとして公開するAPI提案です。対応するエージェントは用途、入力、実行方法を確認できます。使いやすいHTMLを補完するもので、WebMCPを実装していないサイトも通常の画面操作で利用される場合があります。

WebMCPが提供するもの

現在の編集者草案はブラウザのインターフェースを定義しています。正式なW3C Recommendationではなく、ブラウザ実装とエージェントの対応状況は異なる場合があります。アプリケーションを外部ツールやデータサービスに接続するMCPとも役割が違います。

ツールは記事検索、在庫確認、設定変更などの実際の機能に対応させます。何を変更し、何を返すかを説明し、入力検証、権限確認、必要な確認手順はアプリケーションとサーバーで実装します。

宣言型と命令型の選び方

方式適した出発点用意するもの
宣言型フォーム既存の検索・送信フォームツール属性、ラベルと名前のある入力、動作する送信処理
命令型JavaScriptアプリケーションロジックが必要な操作名前、説明、入力schema、executeコールバック

片方だけを使うことが不適合を意味するわけではありません。点数のために用途のない登録経路を追加する必要はありません。

宣言型の検索フォーム

以下は既存の/search処理があることを前提とします。通常の訪問者や未対応ブラウザも元のフォームを使えます。

<form action="/search" method="get"
      toolname="searchSite"
      tooldescription="Search the public articles on this website by keyword">
  <label for="site-query">Search articles</label>
  <input id="site-query" name="q" type="search" required>
  <button type="submit">Search</button>
</form>

toolnameは操作を識別し、tooldescriptionは用途を説明します。toolautosubmitは任意です。操作の影響とテスト環境に合わせて判断してください。認可の代わりにはならず、エージェントがユーザー確認を省くことも保証しません。

命令型の読み取り専用例

見出しのあるページで一度だけ読み込みます。APIがない環境では普通のページを保ち、外部サービスを使わずにページの文字列を返します。

async function registerPageTools() {
  const context = document.modelContext;
  if (!context) return; // Keep the normal page available.
  const registration = new AbortController();
  await context.registerTool({
    name: "getPageHeading",
    description: "Read the first h1 or h2 heading on this page. No data is changed.",
    inputSchema: {
      type: "object",
      properties: {
        level: { type: "string", enum: ["h1", "h2"], description: "Heading level to read" }
      },
      additionalProperties: false
    },
    annotations: { readOnlyHint: true, untrustedContentHint: false, consequentialHint: false },
    execute: async ({ level = "h1" }) => {
      if (!["h1", "h2"].includes(level)) throw new Error("Invalid heading level");
      return { heading: document.querySelector(level)?.textContent?.trim() || "" };
    }
  }, { signal: registration.signal });
  window.addEventListener("pagehide", () => registration.abort(), { once: true });
}
void registerPageTools();

現在の草案はdocument.modelContextとexecuteを使います。古い例のnavigator.modelContext、handler、callbackは対象バージョンを確認してください。単一ページアプリではビューやコンポーネントのライフサイクルに登録の解除を結び付けます。

ブラウザ対応とテスト

Googleは2026年2月10日に早期プレビューを発表しました。バージョン番号だけでは対応を判断できません。実際のAPIを確認し、互換クライアントで発見と実行を別々に検証します。ブラウザ対応ガイドを参照してください。

有効な入力、無効な入力、未対応環境、人が使う元の操作をテストします。登録に成功しても、実行成功の証明にはなりません。状態を変更する操作では権限と失敗処理も確認します。

セッション、安全性、検索

ブラウザでの実行は既存のサイトセッションを利用できますが、無制限の権限を与えるものではありません。アプリとサーバーで認可を維持してください。ツールが返す情報はエージェントによってブラウザ外で処理される可能性があり、WebMCPだけでプライバシーは保証されません。

安全なコンテキストを使い、CSPを維持し、nonce、hash、許可した外部スクリプトで自分のコードを実行します。すべてのインラインスクリプトを許可したり、フレーム埋め込み対策を外したりする必要はありません。

対応状況やスコアはGoogle順位の保証ではありません。GoogleのAI検索ガイドは、クロール可能で読める有用なページを重視しています。

実装を確認する

無料スキャンで各項目の証拠を確認できます。スキャナーはページと登録を観察し、対象ツールを実行しません。ブラウザでの実行テストも行ってください。採点方法と現在のアノテーションも参考になります。

WebMCPとは?ブラウザツールの実装例と検証方法 | WebMCP Verify