WebMCP ってなんですか？

エンガワ AI x XR 第3回で発表したスライドです

Transcript

1. WebMCP ってなんですか カンソクインダストリーズ / よりひろいフロントエンド 原 一浩 (Kazuhiro Hara) / @kara_d AI + XR Hack #3 @本八幡 Copyright © 2026 Yorihiroi Frontend.
2. 出演 原 一浩 (Kazuhiro Hara) @kara_d カンソクインダストリーズ 代表 よりひろいフロントエンド 主催 エンガワ AI x XR主催 生粋の OpenAI ファン (課金開始時より個人で 課金) visionOS + Codex CLI / App の自律的コーディングを補助する MCP / Skills
3. 構成 • • • WebMCP のキホン : WebMCP ってなんなの しくみ : AI との通信で何がおきているのか 実装 : どうやると実現できるのか
4. WebMCPのキホン
5. WebMCP の図
6. WebMCP とは Webページの機能を、AI が呼び出せる形で公開するウェブ標準 • • • 公開する操作を「Tool」と呼ぶ 商品検索やカートへの追加など、サイトの機能を用意できる 人と AI が、同じ Web アプリを使って作業できる 2026年9月時点では策定中の仕様
7. 商品検索の例 利用者の依頼 「このサイトでカメラを探して」 サイトが公開する Tool search_products AI が渡す入力 { "query": "camera" } サイトが返す結果 商品の名前・価格・URLなど
8. 画面操作と Tool 画面を操作する場合 検索欄やボタンを見つけ、 入力してクリックする 操作ミスする可能性もある Tool を使う場合 「商品を検索する」という機能に、 検索語を渡す Web アプリ側が、操作の名前・目的・入力形式を明示できる。
9. 仕事につながる？ 1. 2. 3. 4. これから人類はもっと AI を通じてインターネットをするでしょう Web のアクセシビリティは高いですが WebMCP でもっと高くできます ほとんどの Web サイトは WebMCP に対応してません 仕事がいっぱいうまれる可能性あり？！
10. しくみ
11. WebMCP の登場人物 Webページ 使ってほしい機能を Tool として登録し、 処理を実装する ブラウザ Tool の情報を仲介し、 ページ内の処理を呼び出す AI (エージェント ) 利用者の依頼に応じて Tool と入力を選び、結果を使う
12. Toolが動くまで 1. 2. 3. 4. 5. 6. Webページが Tool を定義する registerTool() でブラウザへ登録する ブラウザが AI に Tool の情報を伝える AI が Tool と入力を選ぶ ブラウザがページの execute() を呼ぶ 処理の結果を AI へ返す
13. MCPとの違い • MCP：AI アプリと MCP サーバーを接続 ◦ ◦ • Tool はサーバーやローカルプロセスで実行する。 通信方法として stdio や Streamable HTTP を定める。 WebMCP：Web ページがブラウザへ Tool を公開 ◦ ◦ Tool はページ内の JavaScript で実行する。 表示中のページや既存のログイン状態を利用できる。
14. WebMCP が定める範囲 Web ページとブラウザの間の API を定める。 • • • 入口は document.modelContext Tool の登録と実行に必要なインターフェースを提供する ブラウザから AI へどう伝えるかは、実装に委ねる MCP の stdio や Streamable HTTP に相当する通信方式は定めない。
15. 実装
16. 実装方法は 2つ • Imperative API：JavaScriptで登録する ◦ ◦ • 入力形式と execute() を自分で定義する 独自の処理や既存のアプリの機能を公開しやすい Declarative API：HTMLフォームに属性を付ける ◦ ◦ フォーム名や入力項目からブラウザが Tool の情報を作る 既存のフォームを活用したい場合に使える
17. Declarative API の例 フォームの入力項目を、Tool の引数として使う。 <form toolname="search_products" tooldescription="Search products by keyword" action="/search"> <label for="query">Keyword</label> <input id="query" name="query" required> <button type="submit">Search</button> </form> Chrome の実装例。仕様 Draft の詳細は引き続き策定中。
18. Imperative API : Tool を構成する 4要素 JavaScript で登録する Tool の基本形 • • • • name：Tool を識別する名前 description：何をする Tool かの説明 inputSchema：受け取る入力の形式 execute：呼び出されたときに動く処理
19. JavaScript で Tool を登録 await document.modelContext.registerTool({ name: "search_products", description: "Search products by keyword", inputSchema: { type: "object", properties: { query: { type: "string" } }, required: ["query"] }, execute: async ({ query }, { signal }) => { return await searchProducts(query, signal); } });
20. 既存の検索処理につなぐ execute()から、アプリ側の関数や API を呼び出す。 async function searchProducts(query, signal) { const params = new URLSearchParams({ query }); const response = await fetch(`/api/products?${params}`, { signal }); if (!response.ok) throw new Error("Search failed"); return await response.json(); }
21. 動作確認のポイント • • • • 対応環境で Tool が登録され、AI から見つかるか 入力を渡すと、期待する結果を返すか 通信失敗や不正な入力を適切に扱えるか セキュリティは問題ないか、AI へのインジェクションがないか
22. 便利ツールがあります • • Chrome Dev Tools に 内蔵のもの Chrome 拡張機能
23. 参考資料 WebMCP Draft：API全体とブラウザの役割 Chrome Imperative API：JavaScriptでの登録 Chrome Declarative API：HTMLフォームでの公開 MCP Transports：stdioとStreamable HTTP WebMCP - Model Context Tool Inspector
24. なにからはじめる？ • まずは、情報を返すだけの Tool をつくってみる ◦ • 次は何かしらの処理を行う Tool を試してみる ◦ • 固定の情報を返すとか 診断や占いをしてみるとか 続いて、 ◦ ◦ ◦ ◦ 情報を保存してみる 画面の表示を変えてみる 認証系を試してみる etc...
25. まとめ • • • • WebMCPは、Webページの機能を AI 向けに公開できます ブラウザを通じて、AI が Web ページの Tool を実行します JavaScriptで登録する方法と、HTMLフォームを使う方法があります 既存のアプリの処理を活かして、小さな Tool から導入できます