AIエージェントにWebサイトを「理解」させる新常識 WebMCP 徹底解説

最近、AIエージェントがWebサイトを操作する様子を目にする機会が増えました。しかし、これまでのAIは画面のスクリーンショットを撮って、視覚モデルを通して「どこにボタンがあるか」を推測するという、非常に効率の悪い方法に頼っていました。この方法は動作が遅く、UIが数ピクセル動くだけで失敗する可能性がありました。

そんな中、GoogleやW3Cのコミュニティが中心となって提唱しているのが WebMCP （Web Model Context Protocol）です。今回は、次世代のWeb標準となる可能性を秘めた WebMCP について、その仕組みや使い方を分かりやすく解説します。

WebMCP とは何か

WebMCP は、WebサイトがAIエージェントに対して、自分たちが持っている機能やデータを「構造化されたツール」として直接伝えるためのオープンなプロトコルです。

これまでのAIエージェントは人間と同じようにUIを目で見て判断していましたが、WebMCP を使えば、Webサイト側から「このボタンは航空券の予約用です」「この入力欄には出発地を入れてください」とAIに直接、正確な情報を伝えることができます。WebMCP は、AIとWebサイトの間に直接的な通信チャネルを構築します。

WebMCP の実現原理：なぜ高性能なのか

WebMCP の最大の特徴は、従来の「視覚的な認識」から「構造的な対話」への転換にあります。

1. 直接的な通信: WebMCP は、AIが画像を処理する手間を省き、JSONベースのスキーマでやり取りします。これにより、計算コストを約67%削減し、タスクの精度を約98%にまで向上させることができます。
2. ブラウザが仲介: WebMCP はブラウザレベルの標準として動作します。ユーザーがブラウザでログインしているセッションやCookieをそのまま利用できるため、AIが改めてログインし直す必要がありません。
3. 安全性の確保: WebMCP は「許可制」を重視したプロトコルです。AIが航空券の予約などの重要な操作を実行する前に、ブラウザがユーザーに対して確認を求める仕組みになっています。

WebMCP 導入チュートリアル：サイトをAI対応にする方法

自分のWebサイトを WebMCP 対応にするには、主に2つのアプローチがあります。

1. 宣言的API（HTMLだけで対応）

既存のHTMLフォームに属性を追加するだけで、AIエージェントがその機能を理解できるようになります。

• 方法: <form> タグの中に toolname や tooldescription 属性を記述します。
• コード例:

  <form toolname="flight_booking" tooldescription="航空券を予約するツール">
    <input name="origin" type="text" toolparamdescription="出発地">
    <input name="destination" type="text" toolparamdescription="目的地">
    <button type="submit">予約</button>
  </form>
  

この属性を追加するだけで、ブラウザが自動的にスキーマを作成し、AIエージェントに伝えてくれます。また、AIが送信した場合は SubmitEvent.agentInvoked イベントが発生するため、人間による操作と区別することも可能です。

2. 命令的API（JavaScriptで柔軟に対応）

より複雑なワークフローや動的な操作が必要な場合は、JavaScript APIを使用します。

• 方法: navigator.modelContext.registerTool() メソッドを使用してツールを登録します。
• コード例:

  navigator.modelContext.registerTool({
    name: 'add_to_cart',
    description: '商品をショッピングカートに追加する',
    inputSchema: {
      type: 'object',
      properties: {
        productId: { type: 'string' },
        quantity: { type: 'number' }
      }
    },
    execute: async (args) => {
      // カート追加のロジックを実行
      return { success: true };
    }
  });
  

WebMCP を通じてこのようにツールを登録することで、AIエージェントはWebサイト内の特定の関数を直接呼び出せるようになります。

WebMCP の主な活用シーン

WebMCP の導入により、Web上でのAIエージェントの体験は劇的に向上します。

• Eコマース: ユーザーが「来週の旅行用に青いスニーカーを買っておいて」と頼むと、AIが WebMCP を通じて商品を検索し、オプションを選択してチェックアウトまで正確に進めます。
• カスタマーサポート: 技術的な詳細をAIが WebMCP 経由でサイトから自動的に取得し、不備のないサポートチケットを作成します。
• 旅行予約: 複雑なフィルタリングや検索条件を、WebMCP の構造化データを利用してAIが迅速に処理し、正確な予約を代行します。

まとめ

WebMCP は、Webサイトを単なる「画面」から、AIが使いこなせる「構造化されたツールボックス」へと進化させます。

現在、WebMCP は Chrome 146 以降の早期プレビュープログラム（EPP）で試用可能です。また、公式の対応を待たずに利用できる WebMCP ポリフィルも登場しています。AIエージェントを介してWebを利用する未来に向けて、今から WebMCP の導入を検討してみてはいかがでしょうか。