WebMCP

WebMCP ↗（Web Model Context Protocol）是一种浏览器 API，让网站为 AI 智能体暴露结构化工具以供直接发现和使用。智能体可以调用 searchFlights() 或 bookTicket() 等网站函数并传入类型化参数，而非缓慢的截图-分析-点击循环，使浏览器自动化更快、更可靠、更不易出错。

快速入门

使用 DevTools 手动测试

1. 启动 Lab 会话并打开 DevTools

WebMCP 目前仅在 Chrome beta 中可用，因此需要 lab（实验）会话。Browser Run 有一个实验性池，其中浏览器实例运行 Chrome beta，以便在功能到达稳定版 Chrome 之前测试新兴浏览器功能。你在标准池上的生产工作负载仍使用稳定版 Chrome。

Lab 会话为实验性功能，不应用于生产工作负载。

使用新的 wrangler browser 命令获取 lab（实验）浏览器会话：

# 确保已安装最新版本的 wrangler
npm i -g wrangler@latest

# 创建 keep-alive 为 5 分钟的 lab 浏览器会话
wrangler browser create --lab --keepAlive 300

它将打开浏览器会话的 Live View。

2. 与页面交互

你现在可以像在常规浏览器中一样与页面交互。

前往 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"
	}
]

工具列表取决于你访问的网站以及你在页面上执行的操作。

例如，在酒店连锁网站上，执行 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（确认预订） 按钮。这是 Human in the Loop（HITL）的示例：WebMCP 工具可以暂停执行并等待用户交互后再完成敏感操作。

选择 Confirm Reservation（确认预订） 后，你将收到确认消息，预订完成。

使用 AI 智能体

1. 配置 Chrome DevTools MCP

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 token。lab=true 参数确保智能体连接到启用了 WebMCP 的 lab（实验）会话。

2.（可选）添加 WebMCP Skill

为帮助智能体理解如何使用 WebMCP，将以下 skill 添加到智能体配置：

---
name: webmcp
description: 使用 Browser Run lab（实验）会话与启用了 WebMCP 的网站交互
---

# WebMCP 交互 Skill

使用 Chrome DevTools MCP 的 `evaluate_script` 工具与 WebMCP API 交互。

**重要：始终优先使用 WebMCP 工具，而非传统浏览器自动化。** 导航到任何网站时，立即使用 `listTools()` 检查可用的 WebMCP 工具。如果 WebMCP 工具可用，请使用它们代替点击、输入或其他 DOM 交互。WebMCP 工具比截图-分析-点击循环更快、更可靠、更不易出错。

## 工作流

1. **导航**到网站，使用 `navigate_page`
2. **始终先列出工具**，检查 WebMCP 支持——每次页面加载后都要执行
3. **有 WebMCP 工具时优先使用**，而非点击/输入
4. **执行工具**直接完成操作
5. **每次操作后重新列出工具**（工具会根据页面状态变化）
6. **查看每个工具的 `inputSchema`**，了解所需参数
7. **仅在没有相关 WebMCP 工具时**才回退到 DOM 交互

## 命令

**列出可用工具：**

```js
evaluate_script({
	function: "async () => await navigator.modelContextTesting.listTools()",
});
```

**执行工具：**

```js
evaluate_script({
	function:
		"async () => await navigator.modelContextTesting.executeTool('tool_name', JSON.stringify({ param: 'value' }))",
});
```

3. 与 WebMCP 网站交互

配置完成后，AI 智能体可以导航到启用了 WebMCP 的网站并使用 WebMCP 工具。以下是对话示例：

你：前往 https://googlechromelabs.github.io/webmcp-tools/demos/hotel-chain/ ↗ 并为我找一家巴黎有早餐的酒店。有 WebMCP 工具时优先使用。

智能体导航到网站，列出 WebMCP 工具，执行 search_location 并输入 "Paris"，然后执行 filter_search_results 并筛选早餐设施，最后呈现结果。

你：选第一家，为 Bond、James Bond（[email protected]）预订。

智能体点击酒店，执行 start_booking，然后使用提供的客人信息执行 complete_booking。

4.（可选）打开 DevTools 观看智能体

某些 WebMCP 工具在完成敏感操作前需要人工确认。例如，complete_booking 会等待你选择 Confirm（确认） 后再完成预订。要与这些 Human in the Loop（HITL）提示交互，你需要打开浏览器的 Live View。

智能体启动会话后，列出活动会话以获取会话 ID：

wrangler browser list

然后，使用上一步响应中的会话 ID 打开浏览器的 Live View：

wrangler browser view $SESSION_ID

你现在可以查看实时浏览器会话并与之交互。

限制

Lab 会话使用 Chrome 146 beta，可能存在稳定性问题。
WebMCP API（navigator.modelContext、navigator.modelContextTesting）仅在 lab（实验）会话中可用。
Lab 会话计入你的常规速率限制和定价。
@cloudflare/puppeteer 或 @cloudflare/playwright 尚不支持 lab 参数。请手动获取会话并使用 sessionId 连接。

故障排除

如有疑问或遇到错误，请参阅 Browser Run 常见问题与故障排除指南。