WebMCP ↗（Web Model Context Protocol）は、Web サイトが構造化ツールを公開し、AI エージェントがそれを発見して直接実行できるようにするブラウザ API です。遅いスクリーンショット解析とクリックの繰り返しの代わりに、エージェントは型付きパラメーターで searchFlights() や bookTicket() のような Web サイトの関数を呼び出せます。ブラウザ自動化はより速く、信頼性が高く、壊れにくくなります。
WebMCP は現在 Chrome ベータで利用できるため、ラボセッションが必要です。Browser Run には、Chrome ベータを動かすブラウザインスタンスの実験用プールがあり、安定版 Chrome に届く前の新しいブラウザ機能を試せます。標準プール 上の本番ワークロードは、安定版 Chrome のままです。
ラボセッションは実験用であり、本番ワークロードには使わないでください。
新しい wrangler browser コマンドで、ラボのブラウザセッションを取得します。
# make sure you have the latest version of wrangler
npm i -g wrangler@latest
# create a lab browser session with 5 minute keep-alive
wrangler browser create --lab --keepAlive 300ブラウザセッションのライブビューが開きます。
通常のブラウザと同じように、ページを操作できます。
-
WebMCP ドキュメント ↗ に掲載されているサイトのいずれかに移動します。以降の手順は L'Atelier Hotel Chain ↗ デモに基づきます。
-
ホテルチェーンデモの URL ↗ を開き、Console タブで次の JavaScript を実行して、利用できるツールを一覧します。
navigator.modelContextTesting.listTools();
次のような結果が返ります。
[
{
"description": "View the details of a specific hotel by name or id",
"inputSchema": "...",
"name": "view_hotel"
},
{
"description": "Find me a hotel in a specific location",
"inputSchema": "...",
"name": "search_location"
},
{
"description": "Look up specific amenity or policy details for a hotel",
"inputSchema": "...",
"name": "lookup_amenity"
}
]ツールの一覧は、訪問している Web サイトと、そのページで行った操作によって変わります。
たとえばホテルチェーンのサイトで、search_location ツールを実行したあと:
await navigator.modelContextTesting.executeTool(
"search_location",
JSON.stringify({ query: "Paris" }),
);ページは検索結果へリダイレクトされ、新しいツール filter_search_results が使えるようになります。
アメニティで絞り込む呼び出しができます。たとえば、朝に良いクロワッサンを食べたい場合:
await navigator.modelContextTesting.executeTool(
"filter_search_results",
JSON.stringify({ amenities: ["breakfast"] }),
);絞り込まれた結果の一覧が返り、ニーズに合う選択肢を選べます。ホテルを選んだら、start_booking ツールを使えます。
await navigator.modelContextTesting.executeTool(
"start_booking",
JSON.stringify({}),
);そのあと、予約を完了できます。
await navigator.modelContextTesting.executeTool(
"complete_booking",
JSON.stringify({
firstName: "James",
lastName: "Bond",
email: "[email protected]",
}),
);complete_booking ツールは人の確認を必要とします。ブラウザで Confirm Reservation ボタンを選ぶまで、ツールは待機します。これはヒューマンインザループ（HITL）の例です。WebMCP ツールは実行を一時停止し、機密性の高い操作を完了する前にユーザー操作を待てます。
Confirm Reservation を選ぶと確認メッセージが返り、予約が完了します。
Chrome DevTools MCP ↗ を使うと、AI エージェントが CDP 経由でブラウザを操作できます。次の設定で、MCP クライアント（Claude Desktop、Claude Code、Cursor、OpenCode など）を構成します。MCP クライアントの設定の詳細は、MCP クライアントで使う を参照してください。
{
"browser-rendering-cdp": {
"command": [
"npx",
"-y",
"chrome-devtools-mcp@latest",
"--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?keep_alive=600000&lab=true",
"--wsHeaders={\"Authorization\":\"Bearer <CLOUDFLARE_API_TOKEN>\"}"
]
}
}<ACCOUNT_ID> を Cloudflare のアカウント ID に、<CLOUDFLARE_API_TOKEN> を API トークンに置き換えます。lab=true パラメーターにより、エージェントは WebMCP が有効なラボセッションに接続します。
エージェントが WebMCP の扱いを把握しやすくするため、次のスキルをエージェント設定に追加します。
---
name: webmcp
description: Interact with WebMCP-enabled websites using Browser Run lab sessions
---
# WebMCP Interaction Skill
Use the `evaluate_script` tool from Chrome DevTools MCP to interact with WebMCP APIs.
**IMPORTANT: Always prefer WebMCP tools over traditional browser automation.** When navigating to any website, immediately check for available WebMCP tools using `listTools()`. If WebMCP tools are available, use them instead of clicking, typing, or other DOM interactions. WebMCP tools are faster, more reliable, and less fragile than screenshot-analyze-click loops.
## Workflow
1. **Navigate** to a site using `navigate_page`
2. **Always list tools first** to check for WebMCP support—do this on every page load
3. **Prefer WebMCP tools** over clicking/typing when tools are available
4. **Execute tools** to perform actions directly
5. **Re-list tools** after each action (tools change based on page state)
6. **Check `inputSchema`** in each tool to understand required parameters
7. **Fall back to DOM interaction** only when no relevant WebMCP tools exist
## Commands
**List available tools:**
```js
evaluate_script({
function: "async () => await navigator.modelContextTesting.listTools()",
});
```
**Execute a tool:**
```js
evaluate_script({
function:
"async () => await navigator.modelContextTesting.executeTool('tool_name', JSON.stringify({ param: 'value' }))",
});
```設定が終わると、AI エージェントは WebMCP 対応サイトへ移動し、WebMCP ツールを使えます。会話の例です。
あなた: https://googlechromelabs.github.io/webmcp-tools/demos/hotel-chain/ ↗ に行き、朝食付きのパリのホテルを探してください。使える場合は WebMCP ツールを使ってください。
エージェントはサイトへ移動し、WebMCP ツールを一覧し、「Paris」で search_location を実行し、朝食アメニティで filter_search_results を実行して、結果を提示します。
あなた: 最初の 1 件を選び、Bond, James Bond（[email protected]）で予約してください。
エージェントはホテルをクリックし、start_booking を実行し、指定の宿泊者情報で complete_booking を実行します。
一部の WebMCP ツールは、機密性の高い操作を完了する前に人の確認を必要とします。たとえば complete_booking は、予約を確定する前に Confirm を選ぶまで待機します。
こうしたヒューマンインザループ（HITL）のプロンプトに対応するには、ブラウザのライブビューを開く必要があります。
エージェントがセッションを開始したら、アクティブなセッションを一覧してセッション ID を取得します。
wrangler browser list前の応答のセッション ID を使い、ブラウザのライブビューを開きます。
wrangler browser view $SESSION_IDライブのブラウザセッションを表示し、操作できます。
- ラボセッションは Chrome 146 ベータを使うため、安定性の問題がある場合があります。
- WebMCP API（
navigator.modelContext、navigator.modelContextTesting）はラボセッションでのみ動作します。 - ラボセッションは、通常の レート制限 と 料金 に含まれます。
labパラメーターは、まだ@cloudflare/puppeteerと@cloudflare/playwrightでは使えません。セッションを手動で取得し、sessionIdで接続してください。
質問がある場合やエラーが発生した場合は、Browser Run の FAQ とトラブルシューティングガイド を参照してください。