Googleが発表した新Web標準ドラフト――WebMCP。実際どうなの？ IO Extendedで実装・登壇して分かったこと

2026/08/17 ここで登壇
https://rayven.connpass.com/event/402806/

Transcript

1. 、 実際どうなの？ WebMCP で実装・登壇して分かったこと I/O Extended 田中博悠 / tanahiro2010
2. 自己紹介 田中博悠 / tanahiro2010 GDG Greater Kwansai Alpha+ Project なんか気になったやつ / とあるサイトで契約作家 Web / AI / 2 Google I/O Extended Osaka 2026
3. 最近の課題 強制的にでも 一緒にバンジー飛んでくれる人を探して ます 技術的な話には関係ありません ※ 3 Google I/O Extended Osaka 2026
4. って、 知ってますか？ WebMCP 4 Google I/O Extended Osaka 2026
5. 今日話すこと MCP → WebMCP → Bridge → 個人の感想 技術解説半分、実装してみた体験談半分でいきます 5 Google I/O Extended Osaka 2026
6. そもそもMCPとは？ に外部ツールをつなぐための 共通インターフェースです AI Agent Agent Tool Result 使えるtoolを見つける 必要な処理を実行する 結果をAgentへ返す 6 Google I/O Extended Osaka 2026
7. とは？ WebMCP ページの機能を Agent向け として公開する仕組みです Web tool 宣言型: HTMLフォームにアノテーションしてtool化 命令型: JavaScriptからtoolを登録 どちらも「ページの機能」をAgentに伝えます 7 Google I/O Extended Osaka 2026
8. 何がうれしい？ 推測が減る Agentがボタンや入力欄の意味を想像 しなくていい サイト側がtoolとして意図を宣言でき る 実行が短くなる クリックや入力を何手も再現しなくて いい tool callとして直接処理しやすい 8 Google I/O Extended Osaka 2026
9. と の違い MCP WebMCP 対象 登録 実行場所 MCP WebMCP 全般 Agent起動時に登録 ローカル / サービスサーバー ブラウザ内蔵Agent中心 ページを開いた時に登録 そのブラウザのそのページ内 AI Agent 9 Google I/O Extended Osaka 2026
10. つまり何が違う？ は 「ページを開いている時だけ使える」 WebMCP タブを開く WebMCP tool が見える タブを離れる そのページのtoolは使えな い 戻ってくる また使えるようになる 10 Google I/O Extended Osaka 2026
11. 年 月時点のWebMCP 2026 8 提案中 Origin Trial がChrome で紹介しているWeb標 準ドラフト Google docs Chrome 149 API から参加可能 ローカル検証 chrome://flags/#enabl e-webmcp-testing は今後変更される可能性があります 11 Google I/O Extended Osaka 2026
12. で、ハンズオンでは どうしたの？ 12 Google I/O Extended Osaka 2026
13. 作ったもの: WebMCP Bridge 対応ページを MCP経由で既存 から呼べるように しました やっていることは、わりとゴリ押しです WebMCP Agent 13 Google I/O Extended Osaka 2026
14. なぜBridgeが必要だったか 仕様の想定 WebMCP 向け はブラウザAgent ハンズオンの現実 既存Agentから呼びたい 解決策 Extension + MCP Server で橋渡し 14 Google I/O Extended Osaka 2026
15. の流れ WebMCP Bridge Web ページ → Extension → WebSocket → MCP Server → Agent ページ内toolを検出して、Agentから呼べるtoolとして見せます 15 Google I/O Extended Osaka 2026
16. 代表tool webmcp_discover_tools 対応タブを調べる ページ上のtool一覧を返す WebMCP webmcp_call_tool とargsを指定する Extension経由でページ内実行する toolId 16 Google I/O Extended Osaka 2026
17. ここまで作っておいて 言うのもなんですが 17 Google I/O Extended Osaka 2026
18. メリットはちゃんとある 推測が減る 画面を読ませて当てるより 、toolとして意図を渡せる 実行時間が短い 手順をなぞらず、 目的の処理を直接呼びやす い 目で確認できる ブラウザ上で動くので、 結果を人間が見られる 18 Google I/O Extended Osaka 2026
19. でも個人的には刺さらなかった つらい ブラウザ内蔵Agentを使う動機がまだ 弱い ページを開いている間だけ使える 既存Agent + ブラウザ操作との差が体感では大きく ない 惜しい Agent そう 全般から使えたら印象は変わり がAgentに操作方法を名乗る思想 は面白い Web 19 Google I/O Extended Osaka 2026
20. 個人的には、 いらないと思うなぁ （個人の感想） 20 Google I/O Extended Osaka 2026
21. ただし ブラウザAgentを使い倒すドパガキには かなり良いかも 推測が減る、実行時間が短くなる この2つは普通に強いです 21 Google I/O Extended Osaka 2026
22. 作ったもの Codelab WebMCP Bridge MCP learn.gdgs.jp/webmcp-agent github.com/tanahiro2010/webmcp-bridge -mcp WebMCP Bridge Extension connpass github.com/tanahiro2010/webmcp-bridge gdgkwansai.connpass.com/event/391029 -extension Google I/O Extended Osaka 2026 22
23. Thanks for listening 23 Google I/O Extended Osaka 2026