WebMCP、
実際どうなの?

I/O Extendedで実装・登壇して分かったこと

田中博悠 / tanahiro2010

自己紹介

田中博悠の写真
  • 田中博悠 / tanahiro2010
  • 三田学園高等学校 1年生
  • GDG Greater Kwansai
  • Alpha+ Project
  • Web / AI / なんか気になったやつ

最近の課題

強制的にでも
一緒にバンジー飛んでくれる人を探してます
※ 技術的な話には関係ありません

WebMCPって、
知ってますか?

今日話すこと

MCP
→
WebMCP
→
Bridge
→
個人の感想
技術解説半分、実装してみた体験談半分でいきます

そもそもMCPとは?

AI Agentに外部ツールをつなぐための
共通インターフェースです

Agent

使えるtoolを見つける

Tool

必要な処理を実行する

Result

結果をAgentへ返す

WebMCPとは?

Webページの機能を
Agent向けtoolとして公開する仕組みです
  • 宣言型: HTMLフォームにアノテーションしてtool化
  • 命令型: JavaScriptからtoolを登録
  • どちらも「ページの機能」をAgentに伝えます

何がうれしい?

推測が減る

  • Agentがボタンや入力欄の意味を想像しなくていい
  • サイト側がtoolとして意図を宣言できる

実行が短くなる

  • クリックや入力を何手も再現しなくていい
  • tool callとして直接処理しやすい

MCPとWebMCPの違い

MCPWebMCP
対象AI Agent全般ブラウザ内蔵Agent中心
登録Agent起動時に登録ページを開いた時に登録
実行場所ローカル / サービスサーバーそのブラウザのそのページ内

つまり何が違う?

WebMCPは
「ページを開いている時だけ使える」

タブを開く

WebMCP toolが見える

タブを離れる

そのページのtoolは使えない

戻ってくる

また使えるようになる

2026年8月時点のWebMCP

提案中

GoogleがChrome docsで紹介しているWeb標準ドラフト

Origin Trial

Chrome 149から参加可能

ローカル検証

chrome://flags/#enable-webmcp-testing

APIは今後変更される可能性があります

で、ハンズオンでは
どうしたの?

作ったもの: WebMCP Bridge

WebMCP対応ページを
MCP経由で既存Agentから呼べるようにしました
やっていることは、わりとゴリ押しです

なぜBridgeが必要だったか

仕様の想定

WebMCPはブラウザAgent向け

ハンズオンの現実

既存Agentから呼びたい

解決策

Extension + MCP Serverで橋渡し

WebMCP Bridgeの流れ

Webページ
→
Extension
→
WebSocket
→
MCP Server
→
Agent
ページ内toolを検出して、Agentから呼べるtoolとして見せます

代表tool

webmcp_discover_tools

  • WebMCP対応タブを調べる
  • ページ上のtool一覧を返す

webmcp_call_tool

  • toolIdとargsを指定する
  • Extension経由でページ内実行する

ここまで作っておいて
言うのもなんですが

メリットはちゃんとある

推測が減る

画面を読ませて当てるより、toolとして意図を渡せる

実行時間が短い

手順をなぞらず、目的の処理を直接呼びやすい

目で確認できる

ブラウザ上で動くので、結果を人間が見られる

でも個人的には刺さらなかった

つらい

  • ブラウザ内蔵Agentを使う動機がまだ弱い
  • ページを開いている間だけ使える
  • 既存Agent + ブラウザ操作との差が体感では大きくない

惜しい

  • Agent全般から使えたら印象は変わりそう
  • WebがAgentに操作方法を名乗る思想は面白い

個人的には、
いらないと思うなぁ
(個人の感想)

ただし

ブラウザAgentを使い倒すドパガキには
かなり良いかも
推測が減る、実行時間が短くなる
この2つは普通に強いです

作ったもの

GDG Kwansai logo

宣伝

Thanks for listening