WebMCP: ウェブサイトにAIエージェントとの対話能力を教える

AIエージェントがレストランのウェブサイトでテーブルを予約しようとしている状況を想像してみてください。現在、これは非常に忍耐強く、少し混乱したインターンのようなものです。エージェントはページをロードし、生のHTMLを読み取り、40個の<div>要素のどれが日付ピッカーであるかを特定しようとし、緑色のボタンはおそらく「確認」を意味すると推測し、それをクリックし、待機し、画面全体を再読み取りして何かが起こったかを確認します。来週そのボタンを移動させると、エージェントは壊れます。CSSクラスの名前を変更すると壊れます。その上にクッキーバナーを追加すると、完全に間違ったものをクリックしてしまいます。 これが現在、ほとんどすべての「ウェブサイトを使用するエージェント」が機能する方法です。画面スクレイピングと祈りです。これは、電話でスクリーンショットを説明することによってコンピューターを操作する自動化の同等物です。 WebMCPは、より健全なものを提案します。エージェントがウェブサイトを見て何ができるかを推測する代わりに、ウェブサイトは、エージェントが直接呼び出すことができる一連のクリーンで構造化されたツールとして、何ができるかを宣言します。「ここにbook_tableツールがあります。日付、時刻、人数を受け取ります。それを呼び出してください。」ピクセルを読む必要はありません。推測する必要もありません。そして最良の部分は、それがすでにChromeでトライアルで実行されており、最初のツールを追加するのに約10分かかることです。全体像を説明しましょう。 中心的なシフト：スクレイピングから宣言へ アイデア全体は1つの比較に収まります。同じタスク、2つの世界。 今日：エージェントはスクレイピングします 1. 全てのDOMを読み取る 2. 日付フィールドがどれかを推測する 3. 入力とクリックをシミュレートする 4. 確認のために全体を再読み取りする 5. レイアウト変更で壊れる WebMCP：サイトが宣言する 1. ページがbook_tableツールを登録する 2. エージェントがツールのスキーマを読む 3. エージェントが構造化された引数でそれを呼び出す 4. ツールが実際のJavaScriptを実行し、結果を返す 5. 再設計に耐える：ツールが契約である 左の列は、エージェントが毎回UIをリバースエンジニアリングするため、壊れやすいです。右の列は、実際のインターフェイスを提供したため、安定しています。レイアウトは、名前とスキーマが同じであるツールの下に自由に配置できます。 以前のMCPに関する投稿、AIが世界に触れることを可能にしたポートを読んだことがあるなら、これは馴染み深く感じるはずです。MCPはAIにサーバー上のツールを呼び出す標準的な方法を提供しました。WebMCPは、その同じアイデアをブラウザにもたらします。ウェブページ自体がツールを提供する場所になり、すでに開いているタブで、すでにログインしているセッションで実行されます。 実際には何であるか WebMCPは、Google（Chrome）とMicrosoft（Edge）がW3C Web Machine Learning Community Groupで共同開発した提案されているウェブ標準であり、ウェブページに小さなJavaScript APIを提供して、AIエージェントが発見して呼び出すことができるツールを登録できるようにします。GoogleはChromeドキュメントでそれを平易に説明しています。エージェントが「どのように相互作用するかを正確に知る」ようにサイトが自身の機能を注釈付けする、「AIエージェントのために構造化されたツールを構築して公開する」方法です。 成熟度について正確に言うと、これはコミュニティグループのドラフトであり、完成したW3C標準ではなく、まだ標準トラックに乗っていません。だからこそ、今それを学び、形作る時なのです。それを理解するのに役立つ3つのことがあります。 発見：ページが「チェックアウトやfilter_resultsのようなツールを提供しています」と言う標準的な方法。これにより、エージェントはそれらをリストできます。 スキーマ：各ツールはJSONスキーマとして入出力​​を宣言するため、エージェントは正確に何を渡すかを知っており、幻覚や誤読の余地ははるかに少なくなります。 状態：現在ページに何があるかについての共有された理解。これにより、エージェントは何を実際に操作できるかを知ることができます。 現在の状況 WebMCPは現実的で実行可能ですが、初期段階です。Chrome 149以降のChromeオリジン試用版として利用可能であり、フラグchrome://flags/#enable-webmcp-testingでローカルで有効にできます。提案はgithub.com/webmachinelearning/webmcpにあります。Angularはすでに実験的なサポートを持っており、Chromeはデモサイト（ピザメーカー、旅行検索、レストラン予約）を公開しています。Google自身の言葉では、「活発な議論の下にあり、変更される可能性があります。」したがって、これは「本番環境にデプロイする」瞬間ではなく、「試して形作る」瞬間であり、だからこそ今学ぶ価値があるのです。 呼び出しが実際にどのように流れるか これは、ページからエージェント、そしてその逆への完全なループです。エキゾチックなことは何も起こりません。ページがツールを登録し、エージェントがそれらをリストし、1つを選択し、構造化された引数で呼び出し、実際のJavaScriptがページ内で作業を行います。 ページ ツールを登録する あなたのJSはbook_table、searchなどを宣言します → エージェント 発見する ページのツールとそのスキーマをリストします → エージェント 引数で呼び出す スキーマに一致する構造化されたJSON → ページ execute()を実行する あなたの実際のJSを実行します。ログイン済みのページで → エージェント 結果を取得する 構造化された回答。タブで表示されます ツールのexecute関数は、実際のページ内で、既存のJavaScript、状態、およびユーザー自身のログイン済みセッションを使用して実行されます。それはタブ内で目に見えるように発生し、見えないヘッドレスブラウザではありません。そのため、ユーザーはそれを監視し、信頼することができます。 「すでにログインしているページで実行される」という詳細は大きな意味を持ちます。エージェントは、盗まれた資格情報でどこかにログインする別のボットではありません。それは、あなたがすでに持っているセッションを使用して、開いている認証済みのタブで関数を呼び出しています。サイトは公開するものを制御し続け、ユーザーはそれが起こるのを見ることができます。 呼び出しが発生するのを見る 具体的には、ブラウザ内エージェントにWebMCP対応サイトで何かを行うように依頼すると、次のようになります。あなたのリクエスト、エージェントが宣言されたツールを選択する、ツールが実行される、結果。 あなた › 今夜8時に4名でテーブルを予約する エージェント › このページでbook_tableツールを見つけました エージェント › book_table({ date: "today", time: "20:00", party: 4 }) を呼び出しています ページ › 予約済み。午後8時、4名様、確認番号 #A17。 その交換でDOMの推測は一切ありません。エージェントは型指定された引数を持つ名前付き関数を呼び出し、ページは独自のコードで残りを処理しました。これは、エージェントがあなたのサイトを操作しているのか、それともあなたのサイトの写真（スクリーンショット）を操作しているのかの違いです。コードは本当に小さいです。 これは人々が試してみたくなる部分です。ツールの登録は1回の呼び出しです。Chromeドキュメントの現在の命令型APIを使用して、ToDoサイトに「アイテムを追加」ツールを追加することは、基本的に次のようになります。 register a WebMCP tool (imperative API) await document.modelContext.registerTool({ name: 'add_todo', description: 'Add an item to the to-do list', inputSchema: { type: 'object', properties: { text: { type: 'string' } }, required: ['text'] }, execute: async ({ text }) => { addTodoToPage(text); // your own existing function return `Added to-do: ${text}`; } }); それが全てです。ツールに名前、説明、入力スキーマ、そしてすでに書いたコードを呼び出す実行関数を提供します。エージェントはgetTools()でそれを発見し、関連性がなくなった場合はAbortControllerでツールをプルバックできます。JavaScriptを書く代わりにHTMLフォームを注釈付けする宣言的な方法もあります。 executeが何をするかに注目してください。それは、サイトにすでに存在する関数addTodoToPageを呼び出します。WebMCPは、あなたが何かを再構築することを求めているのではありません。あなたは、エージェントがクリーンに到達できるように、サイトがすでにできるアクションを薄い宣言されたインターフェイスでラップしています。だからこそ、10分という主張は現実なのです。 1つの正確さの注意点として、APIは若く、移動しているため、エントリーポイントは最近navigator.modelContext（元の名前、現在は非推奨）からdocument.modelContextに移動しました。ツールは本当にドキュメントに属するものであり、ブラウザ全体に属するものではないからです。古いチュートリアルでnavigatorを示している場合は、それが理由です。古いチュートリアルでnavigatorを示している場合、それが理由です。const mc = document.modelContext || navigator.modelContextという1行のシムは、変更がロールアウトされる間、両方をブリッジします。このようないくつかのエッジがさらにシフトすると予想されます。それはドラフトです。 実際に機能する本物の例 公式のWebMCPデモはすべて「ツールを1つ呼び出して完了」というものです。ピザを注文する、テーブルを予約する。便利ですが、アイデアを過小評価しています。なぜなら、WebMCPの興味深い部分は単一のツール呼び出しではないからです。それは、AIが重要な部分に人間によるゲートを設けて、実際の作業を行うためにツールを連鎖させることです。そのため、おもちゃの代わりに、この投稿に合わせて実際のものを構築してデプロイしました。このセクションは、抽象的な例よりもモデル全体をより良く教えるため、正直なウォークスルーです。Career Copilotはe