WebMCP

Alexandra Klepper
Alexandra Klepper
GitHub Bluesky

公開日: 2026 年 5 月 18 日

WebMCP は、AI エージェント用の構造化ツールを構築して公開するための ウェブ標準案です。WebMCP は JavaScript を提供し、HTML フォーム要素にアノテーションを付けて、エージェントがページ機能と正確にやり取りしてユーザー エクスペリエンスをサポートできるようにします。これにより、エージェントの動作のパフォーマンスと信頼性が大幅に向上します。

AI エージェントは新しいテクノロジーです。複雑で技術的なタスクを人間のユーザーがより適切に完了できるようにサポートします。WebMCP はエージェントによるタスク完了の精度を高め、プログレッシブ エンハンスメントとして追加できます。

WebMCP を選ぶ理由

WebMCP は、インタラクションのルールを提供することで、ウェブ アプリケーションとエージェントのギャップを埋め、効率、信頼性、タスク完了を向上させることができます。エージェントがボタンやフィールドなどの要素を確認してその目的を理解するのではなく、ウェブサイトが要素の目的を宣言するため、正しく使用されます。

これは、多数のステップがあり、各ステップがエージェントによる解釈に委ねられる可能性がある動作よりも信頼性が高くなります。

ウェブサイトは、ツール を定義することで、検索や購入などの明確な目的を共有できます。これらのツールはウェブページ上で目に見える形で実行されるため、ユーザーはタスクが期待どおりに完了することを信頼できます。また、ブランドと人間中心のデザインの選択肢も維持されます。

WebMCP は以下をサポートしています。

  • 検出: ページが checkout や filter_results などのツールをエージェントに登録するための標準的な方法。
  • JSON スキーマ: 幻覚や誤解を減らすための、入力と想定される出力の明確な定義。
  • 状態: 現在のページ コンテキストの共通認識。エージェントは、リアルタイムで操作できるリソースを把握できます。

Google の目標は、エージェント機能を備えた任意のブラウザが実装してメリットを得られる API を構築し、ユーザーがタスクをより簡単に完了できるようにすることです。このプロセスは GitHubで確認できます。

ユースケース

ウェブ上で WebMCP を使用する方法はたくさんあります。次に例を示します。

  • お客様のサポートを支援する 。お客様にソフトウェアを提供している場合、さまざまな質問に対応するための複雑なサポートフローが必要になることがあります。WebMCP を使用すると、エージェントが適切なフォームにすばやく移動し、ユーザーが提供した情報をフィールドに入力できます。
  • 旅行の予約を改善する 。エージェントが複雑な複数都市、複数人数の旅行を少ないステップで予約できるようにします。

購入など、一部のアクションは機密情報を含む場合があります。確認ダイアログでユーザー インタラクションをリクエストするコマンドを含めることができます。

実際には、ツールで次のタスクを実行できます。

  • 構造化フォームへの入力: submit_application ツールを作成して、エージェントがユーザーとの会話から収集したデータをフォーム フィールドに正しくマッピングできるようにします。たとえば、フィールドにフルネームが必要か、姓と名を別々に入力する必要があるかを区別できます。
  • 人間中心のインターフェースでのエージェントの操作をサポートする: 特定のフィールドは 人間のユーザー向けに設計されていますが、エージェントが理解できない場合があります。予約やイベントの予約で複雑な日時選択を可能にする date_pick ツールを作成できます。
  • アプリケーションのデバッグを迅速化する: デベロッパー設定ページに run_diagnostics ツールを作成すると、エージェントがネストされたメニューの背後に隠れている修正をトリガーできます。

ユースケースが見つからない場合または、WebMCP について共有したいアイデアがある場合 早期プレビュー プログラムに参加してフィードバックをお寄せください。

始める

WebMCP は、ローカル開発用の Chrome フラグとして利用できます。Chrome 149 のオリジン トライアルで利用できるようになります 。

WebMCP をローカルで有効にするには:

  1. Chrome を開き、chrome://flags/#enable-webmcp-testing に移動します。
  2. フラグを [有効] に設定します。
  3. Chrome を再起動して変更を適用します。

WebMCP API を使用する

ウェブサイトのツールを設定するには、次の 2 つの API を使用できます。

  • 命令型 API: フォーム入力、ナビゲーション ツール、状態 管理、その他の関数など、標準の JavaScript を使用してさまざまな種類の ツールを定義します。
  • 宣言型 API: 標準の HTML フォームにアノテーションを追加して、WebMCP ツールを作成します。

制限事項

WebMCP は、エージェントと人間にとって複雑なタスクを簡素化することを目的としていますが、いくつかの制限があります。

  • ブラウジング コンテキストが必要: ツール呼び出しは JavaScript で処理されるため、 表示可能なインターフェースと ブラウザ コンテキストを提供するには、ブラウザタブまたは WebView を開く必要があります。つまり、エージェントやユーザー補助ツールがヘッドレス状態でツールを呼び出すことはできません。
  • 複雑なインターフェースのオーバーヘッドが増加: サイトが非常に複雑な場合は、アプリケーションとインターフェースの状態を処理するために JavaScript のリファクタリングまたは追加が必要になる可能性があります。
  • ツールの検出可能性: クライアントとブラウザは、呼び出し可能なツールがあるかどうかを確認するために、サイトに直接アクセスする必要があります。

デモ

命令型と宣言型の両方の実装をカバーするデモの例を次に示します。

GitHub でデモのソースコードをGitHubすることもできます。

インスペクタ拡張機能を使用してエージェント チャットを模倣する

Model Context Tool Inspector Extension をインストールして、エージェントを試して、ライブデモや独自のアプリケーションで WebMCP ツールがどのように動作するかを確認します。自然言語プロンプトを入力して、エージェントが WebMCP ツールと正しくやり取りできるかどうかを確認できます。

この拡張機能を使用すると、次のことができます。

  • navigator.modelContext API をモニタリングして、ページに登録されているツールを確認します。
  • ツールを手動で呼び出して関数を実行します。
  • JSON スキーマが正しく定義されていることと、ブラウザがツールが想定する形式でデータを解析できることを確認します。
  • ツールから返された構造化出力またはエラー メッセージを表示して、エージェントが理解できるように、明確に記述され、正しくフォーマットされていることを確認します。

自然言語を使用してエージェントに話しかけ、適切な WebMCP ツールを正しく識別して呼び出すことができるかどうかを確認します。プロンプトは gemini-2.5-flash モデルに送信されます。

意見交換とフィードバックの提供

WebMCP は現在議論されており、今後変更される可能性があります。これらの API を試してフィードバックをお寄せください。