WebMCPを使用すると、Reactアプリは構造化されたツールAPIをAIエージェントに直接公開できるようになり、壊れやすいUIスクレイピングに代わって、UIに依存しない信頼性の高い呼び出しが可能になります。この機能はChrome 149以降のorigin trialで利用可能であり、chrome://flags/#enable-webmcp-testingから有効にできます。

エージェントにクリックを教える際の問題点

現在、AIエージェントにウェブページを操作させようとする試みの多くは、視覚的な手がかりに依存しています。エージェントはDOMを解析し、どの要素がボタンであるかを推測し、クリックやスクロールをシミュレートし、フォームフィールドを入力します。しかし、ボタンが移動したり、ラベルが変更されたり、レイアウトが微調整されたりした瞬間に、スクリプトは失敗します。また、このアプローチは各ステップのブラウザによるレンダリングを待つ必要があるため低速であり、ルーチン的なデザイン変更によって自動化パイプライン全体が壊れてしまうこともあります。

WebMCPはモデルを刷新する

WebMCPは、Google Chromeによって導入された新しいウェブ標準です。エージェントが探索するための視覚的なインターフェースを公開する代わりに、ページは「ツール」（ページが実行可能な、名前と型を持つ操作）のセットを広告します。AIエージェントはまず「どのようなツールが利用可能か？」と尋ね、ページは「searchProducts」や「checkout」といったリストで回答します。次に、エージェントはツールの宣言された入力スキーマに一致するJSONペイロードを送信することで、ツールを呼び出します（例：searchProducts(query: "jacket")）。ブラウザはリクエストをページのJavaScriptに直接ルーティングし、UIを介さずに基盤となるロジックを実行します。

その結果、インタラクションは即時的になり、CSSの変更に関わらず動作し、ツールの定義が安定している限り機能し続けます。

開発者にとって重要なメリット

  • 速度 – 通信がブラウザのメッセージングシステム内にとどまるため、クリックのレンダリングやページ更新の待機といった往復プロセスが排除されます。
  • 信頼性 – ツールはサイトが自身のUIですでに使用しているものと同じ関数を呼び出すため、デザイン変更によってAPIが壊れることがありません。
  • コントロール – どの操作を公開するか、どのようなパラメータを受け入れるか、そしてエージェントがレスポンス内で何を見ることができるかを開発者が決定できます。
  • UIへの非依存性 – スタイリング、レイアウト、またはコンポーネントのリファクタリングが、機能の呼び出し能力に影響を与えることはなくなります。

WebMCPは、サーバーサイドで使用されている既存のMCP（Message-Channel-Protocol）に取って代わるものではありません。MCPは重いデータの取得やバックエンドのオーケストレーションを引き続き担当し、WebMCPはタブ内でのライブなインタラクションを担当します。

React開発者が始める方法

Reactコードは、命令的なJavaScript APIまたは宣言的なHTMLフォームベースのAPIのいずれかを使用してツールを登録できます。一般的なパターンは、カスタムフック内に登録処理をラップすることです。

  1. ツールの名前と短い説明とともに登録関数を呼び出します。
  2. 入力スキーマ（例えば、必須フィールドを記述したJSONスキーマ）を提供します。
  3. 既存のビジネスロジックを実行するexecuteコールバックを提供します。これは、多くの場合、ボタンのクリックによってトリガーされるものと同じ関数です。

フックが実行されると、ブラウザはそのツールをページのWebMCPマニフェストに追加します。マニフェストを検出したAIエージェントは、DOMに一切触れることなくツールを呼び出すことができます。

登録はコンポーネントのマウント時に行われるため、ツールを特定のルートやフィーチャーフラグにスコープさせることができ、チームは本番環境とテスト環境でAIができることを細かく制御できます。

注意事項と留意点

WebMCPはまだorigin trialの段階です。Chrome 149以降でのみ動作し、フラグを介して手動で有効にする必要があります。

次のステップ

Googleは、AIネイティブなウェブ体験を試したい開発者に向けて、この試行を公開しています。興味のある方は、以下の手順に進んでください。

  • Chromeでフラグを有効にし、対象のサイトをリロードします。
  • Reactコンポーネントにシンプルなツール登録を追加し、ブラウザのDevToolsにマニフェストが表示されることを確認します。
  • AIクライアント（例えば、WebMCPプロトコルに従うローカルスクリプトなど）を使用してツールを呼び出し、レスポンスを検証します。
  • 本格的なリリースに関する最新情報を、trialのステータスページで確認してください。

まとめ: WebMCPは、React開発者が自身のアプリをAIエージェントから直接呼び出し可能にする手段を提供し、UI要素を安定した型定義済みのサービスへと変貌させます。この転換により、スクリーンスクレイピングのメンテナンスという悪夢が解消され、チームが実験的なChrome環境での作業に抵抗がなければ、真のAIネイティブなウェブアプリケーションへの道が開かれます。