Cloudflare Playwright MCP 示例
概述
它使人工智能助手能够通过一系列工具控制浏览器，从而执行网页自动化任务，如导航、输入文字、点击以及截取屏幕截图。
该服务器可与多种人工智能平台配合使用，包括Cloudflare AI Playground、Claude Desktop以及VS Code中的GitHub Copilot。
部署
按照以下步骤设置和部署项目：
- 安装依赖项：
npm ci- 部署到 Cloudflare Workers：
npx wrangler deploy与Cloudflare AI Playground一起使用
Cloudflare Playground AI 这是使用Workers AI中提供的大型语言模型（LLM）来测试MCP服务器的一个绝佳方法。
- 导航至 https://playground.ai.cloudflare.com/
- 确保模型设置为
llama-3.3-70b-instruct-fp8-fast - 在 MCP 服务器，设定 URL 到
https://[my-mcp-url].workers.dev/sse - 点击 连接
- 状态应更新为 已连接 并且它应该列出14个可用的工具
现在，您可以开始与模型进行交互，它将运行必要的工具来完成您所请求的任务。
\[!提示\] 为了获得最佳效果，请给出包含单一动作的简单指令，例如：“创建一个新的待办事项条目”，“访问Cloudflare网站”，“截取屏幕截图”
对话示例：
| 角色 | 信息 |
|---|---|
| 用户 | 访问 demo.playwright.dev/todomvc |
| 助手 | *运行浏览器导航工具* |
| 页面已导航至 https://demo.playwright.dev/todomvc/。页面标题为“React • TodoMVC”。页面快照显示了页面内容，包括一个标题、一个文本框和几个链接。 | |
| 用户 | 创建一些待办事项条目 |
| 助手 | *运行浏览器类型工具* |
| 已创建一个新的待办事项条目“购买杂货”。页面快照显示了页面的更新内容，其中包括这个新的待办事项条目。 | |
| 用户 | 好的。现在以鹦鹉的风格创建一个待办事项 |
| 助手 | *运行浏览器类型工具* |
| 以鹦鹉风格创建了一个新的待办事项条目：“波莉想要一片饼干”。页面快照显示了页面的更新内容，包括这个新的待办事项条目。 | |
| 用户 | 并以尤达风格创建另一个待办事项 |
| 助手 | *运行浏览器类型工具* |
| 以尤达（Yoda）风格创建了一个新的待办事项条目：“我必须去散步”。页面快照显示了页面的更新内容，包括这个新的待办事项条目。 | |
| 用户 | 截图 |
| 助手 | *运行浏览器截图工具* |
| 已截取当前页面的截图。截图格式为PNG，大小为56KB。 | |
| 用户 | 现在点击鹦鹉待办事项条目的复选框 |
| 助手 | *运行 browser_clickt 工具* |
| 鹦鹉待办事项条目“波莉想要一片饼干”的复选框已被点击。页面快照显示了页面更新后的内容，复选框现在已被选中。 | |
| 用户 | 截图 |
| 助手 | *运行浏览器截图工具* |
| 已截取当前页面的截图。截图格式为PNG，大小为58KB。 | |
| 用户 | 移除已完成的待办事项条目 |
| 助手 | *运行 browser_clickt 工具* |
| “清除已完成”按钮已被点击。页面快照显示了页面的更新内容，其中已完成的待办事项“波莉想要一块饼干”已被移除。 | |
| 用户 | 拍摄最终截图 |
| 助手 | *运行浏览器截图工具* |
| 已截取当前页面的最终截图。截图格式为PNG，大小为50KB。 |
与Claude Desktop配合使用
- 打开Claude桌面版的配置文件。
- 在以下位置添加以下JSON代码片段：
mcpServers部分/章节：
{
"mcpServers": {
"cloudflare-playwright-mcp": {
"command": "npx",
"args": [
"mcp-remote",
"https://[my-mcp-url].workers.dev/sse"
]
}
}
}- 保存配置文件并 重启 在 Claude Desktop 上应用更改。
此设置确保Claude Desktop能够与Cloudflare Playwright MCP服务器进行通信。
以下是一个会话示例，展示了如何打开TODO演示应用，添加“购买柠檬”任务，并进行截图操作，这里利用了playwright-mcp工具和浏览器渲染功能：
在VSCode中进行配置
您可以使用以下方式安装 Playwright MCP 服务器： VS Code 命令行界面 (CLI)：
# For VS Code
code --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'# For VS Code Insiders
code-insiders --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'安装完成后，您可以在 VS Code 中使用 Playwright MCP 服务器与您的 GitHub Copilot 代理进行交互。