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

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

## WebMCP とは {#what-webmcp-is}

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

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

```js
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 ではフラグの裏で使えます。まだどのブラウザでも既定では有効になっていません。

## ゲームにとっての意味 {#what-it-does-for-games}

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

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

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

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

## debuff の取り込み方 {#how-debuff-will-integrate-it}

### 1. 開発ビルド：ゲームの開発ツールがエージェントのツールになる {#_1-dev-builds-your-game-s-dev-tools-become-agent-tools}

`@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：ドキュメントとプレイグラウンド {#_2-debuff-jp-docs-and-the-playground}

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

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

### 3. 公開済みのゲーム：検討中、オプトインのみ {#_3-shipped-games-maybe-and-only-opt-in}

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

## 安全性 {#safety}

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

## いつ出るか {#when}

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

続報を追いたい方や、すでに WebMCP ツールを呼べるエージェントをお持ちの方は、[debuff Discord](https://discord.gg/jshbDHSpCY) で教えてください。