WebMCP と debuff：ページがエージェントにツールを渡すとき

WebMCP は、Web ページがブラウザの AI エージェントにツールを直接渡せるようにする、提案中のブラウザ API です。MCP サーバー、設定ファイル、Node プロセスは要りません。ゲーム開発者にとっては、ゲーム自身がエージェントに「状態の読み方、キーの押し方、スクリーンショットの撮り方はこれです」と伝えられるということです。debuff はすでにこれらのツールを MCP 経由で Claude Code などのエージェントに提供しています。その WebMCP 版を作って Chrome Canary で試しました。ブラウザのエージェントがページのツールを呼ぶようになったら出荷します。この記事では、WebMCP とは何か、何ができるようになるか、debuff がどう使うかを説明します。

WebMCP とは

今のところ、エージェントが Web ページを扱う方法は 2 つです。人と同じようにページを読む（スクリーンショット、DOM、座標でのクリック）か、外からブラウザを操作する MCP サーバーを誰かが用意するかです。前者は遅く、推測に頼ります。後者はインストールと設定が必要です。

WebMCP は 3 つ目の方法を加えます。ページが自分でツールを登録するのです。

document.modelContext.registerTool({
  name: "game_state",
  description: "Current scene, tick and the scene's inspect() data.",
  annotations: { readOnlyHint: true, debugging: true },
  execute: async () => ({ content: [{ type: "text", text: JSON.stringify(state()) }] }),
});

ツールには名前、説明、入力の JSON Schema、実行する関数があり、MCP のツールと同じ形です。ブラウザのエージェントは一覧を見て、作業に合うツールを呼びます。エージェントに何を許すかはページが決め、呼び出しのたびに推測のクリックではなくページのコードが動きます。

仕様は W3C Community Group のドラフトです。Chrome Canary ではフラグの裏で使えます。まだどのブラウザでも既定では有効になっていません。

ゲームにとっての意味

ページを読むエージェントにとって、ゲームは難しい相手です。キャンバスはピクセルの壁で、状態は JavaScript の中にあり、すべてが 1 秒に 60 回動きます。スクリーンショットではプレイヤーの速度はわかりませんし、座標のクリックではキーをちょうど 40 フレーム押し続けることもできません。ツールならどちらもできます。

WebMCP があれば、ブラウザのエージェントは次のことができます。

• 開いているゲームをテストプレイする。 一時停止、1 フレームずつの進行、キーの長押し、位置の読み取り、スクリーンショット。どれも今見ているタブの上で行います。
• 手触りをその場で調整する。 ゲームの調整用パラメータを読み、見ている前でジャンプの高さや走る速さを変え、印象ではなく数値で報告します。
• デバッグする。 説明付きのランタイムエラーや、開発オーバーレイで印を付けた場面を読みます。

これらはすべて debuff の MCP サーバーですでに動いていますが、エディタやターミナルに MCP 対応のエージェントを用意する必要があります。WebMCP は同じツールをページの中に移すので、どのブラウザエージェントも設定なしで使えます。

debuff の取り込み方

1. 開発ビルド：ゲームの開発ツールがエージェントのツールになる

@debuffjp/dev は、ブラウザが対応していれば、ゲームの開発フックを WebMCP ツールとして登録します。

game_state、game_step、game_pause、game_input、game_command、game_params、game_set_param、game_capture、game_errors、game_notes

名前と引数が debuff の MCP サーバーと同じなので、エージェントスキルやプロンプトはそのまま使えます。テストで両者がずれないようにしています。開発オーバーレイには、エージェントがツールを呼ぶたびに光るチップを表示する予定です。エージェントが実際に何をしているかが常に見えます。

これは開発中だけ動きます。devTools() は import.meta.env.DEV の裏にあるので本番バンドルは変わらず、devTools({ webmcp: false }) で無効にできます。

この部分はできています。フラグを有効にした Canary 158 で 10 個のツールがすべて登録されます。状態の読み取り、600 フレームの右キー長押し、走る速さの変更、キャプチャというテストプレイの流れが、ブラウザ自身の executeTool で動きます。ノートパソコンで、600 フレームの進行はページ内で約 400 ms です。

2. debuff.jp：ドキュメントとプレイグラウンド

debuff.jp はすでにエージェント向けの MCP サーバーを動かしています。WebMCP があれば、同じツールをページの中で提供できます。

• ドキュメントのページは search_docs、get_api、get_doc を登録します。ブラウザのエージェントはページを読み取る代わりに、正確な API の答えを得られます。
• プレイグラウンドは write_game、read_game、上のゲーム用ツール、share_link を登録します。ブラウザのエージェントが、何もインストールせずにゲームを書いて動かし、見て直してリンクを渡せるようになります。

3. 公開済みのゲーム：検討中、オプトインのみ

ゲームの作者がエージェントに公開する安全な操作をいくつか選べる、小さな本番用 API も考えています。「新しいランを始める」「スコアは？」「画面を説明して」といったものです。アクセシビリティやデプロイ済みビルドの QA に役立つかもしれません。一方で、ランキングや、エージェントが人の代わりにゲームを遊ぶことについて本当の問題もあります。そのため既定ではオフ、ゲームごとのオプトインで、使わなければツリーシェイクで消えるようにします。これはまだ決めていません。

安全性

開発ツールは、エージェントがもともと届かなかったものを何も与えません。ツールを呼べるものは、すでに window.__DEBUFF_DEV__ も呼べます。ほかのオリジンには登録されず、どのツールもタブの外には届きません（WebMCP のスクリーンショットはファイルを書けません）。プレイヤーやテスターが入力したテキストを返すツールには WebMCP の untrustedContentHint を付け、エージェントがその文を指示ではなくデータとして扱うようにします。

いつ出るか

ページ側の準備はできています。足りないのはエージェントです。私たちのテストでは、Claude in Chrome と Gemini in Chrome のどちらも、まだページの WebMCP ツールを自分から使いませんでした。どれかが使うようになり次第、開発ビルドの統合を出荷し、ドキュメントとプレイグラウンドのツールが続きます。

続報を追いたい方や、すでに WebMCP ツールを呼べるエージェントをお持ちの方は、debuff Discord で教えてください。