与 MCP 客户端配合使用（CDP）

你可以通过 Model Context Protocol (MCP) ↗ 将 CDP 端点与 AI 编码智能体配合使用。chrome-devtools-mcp ↗ 包提供 MCP 服务器，允许 AI 助手控制和检查浏览器会话。

开始之前，请创建自定义 API Token，并授予 Browser Rendering - Edit 权限。

什么是 MCP？

Model Context Protocol (MCP) 是一种开放协议，使 AI 助手能够与外部工具和服务交互。通过为 Browser Run 配置 MCP 客户端，你的 AI 编码智能体可以执行浏览器自动化任务，如导航到页面、截取屏幕截图、运行性能审计和调试 JavaScript。

前提条件

Node.js v20.19 或更高版本
兼容 MCP 的 AI 客户端（例如 Claude Desktop、Claude Code、Cursor、OpenCode）
具有 Browser Rendering - Edit 权限的 Browser Run API token

配置 MCP 客户端

将以下配置添加到 MCP 客户端设置文件（确切位置取决于你的客户端）：

Claude Desktop 和 Claude Code

添加到 claude_desktop_config.json（Claude Desktop）或 ~/.claude.json（Claude Code）：

{
	"mcpServers": {
		"browser-rendering": {
			"command": "npx",
			"args": [
				"-y",
				"chrome-devtools-mcp@latest",
				"--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?keep_alive=600000",
				"--wsHeaders={\"Authorization\":\"Bearer <API_TOKEN>\"}"
			]
		}
	}
}

OpenCode

添加到 .opencode.jsonc：

{
	"mcp": {
		"browser-rendering": {
			"type": "local",
			"command": [
				"npx",
				"-y",
				"chrome-devtools-mcp@latest",
				"--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?keep_alive=600000",
				"--wsHeaders={\"Authorization\":\"Bearer <API_TOKEN>\"}"
			],
			"enabled": true
		}
	}
}

Cursor

添加到 ~/.cursor/mcp.json：

{
	"mcpServers": {
		"browser-rendering": {
			"command": "npx",
			"args": [
				"-y",
				"chrome-devtools-mcp@latest",
				"--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?keep_alive=600000",
				"--wsHeaders={\"Authorization\":\"Bearer <API_TOKEN>\"}"
			]
		}
	}
}

将 ACCOUNT_ID 替换为你的 Cloudflare 账户 ID，将 API_TOKEN 替换为你的 Browser Run API token。这些可以从 Cloudflare 仪表板获取。

对于其他 MCP 客户端，请参阅 chrome-devtools-mcp 文档 ↗。

使用示例

配置 MCP 客户端后，你可以要求 AI 智能体执行浏览器任务：

前往 https://example.com 并截取首页的屏幕截图

检查当前页面的控制台消息是否有错误

对 https://developers.cloudflare.com 运行 Lighthouse 审计

工作原理

MCP 服务器通过 CDP 协议使用 WebSocket 连接到 Browser Run：

WebSocket 端点 - --wsEndpoint URL 连接到 Browser Run 服务
身份验证 - --wsHeaders 参数包含用于身份验证的 API token
Keep-alive - keep_alive 查询参数（毫秒）指定会话保持活动的时间
MCP 协议 - 服务器将 MCP 工具调用转换为 CDP 命令

其他资源

chrome-devtools-mcp 仓库 ↗ - Chrome DevTools 的官方 MCP 服务器
Model Context Protocol 文档 ↗ - 了解更多关于 MCP 的信息
Claude Desktop MCP 设置 ↗ - 在 Claude Desktop 中配置 MCP 服务器
Claude Code MCP 设置 ↗ - 在 Claude Code 中配置 MCP 服务器
Cursor MCP 设置 ↗ - 在 Cursor 中配置 MCP 服务器
OpenCode MCP 设置 ↗ - 在 OpenCode 中配置 MCP 服务器

故障排除

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