Cloudflare剧作家MCP示例
概述
它使人工智能助手能够通过一组工具控制浏览器，使他们能够执行导航、打字、点击和截图等网络自动化任务。
该服务器可用于各种AI平台，包括Cloudflare AI Playground、Claude Desktop和GitHub Copilot in VS Code。
部署
按照以下步骤设置和部署项目：
- 安装依赖项：
npm ci- 部署到Cloudflare Workers：
npx wrangler deploy与Cloudflare AI游乐场一起使用
Cloudflare游乐场AI 是使用Workers AI中可用的LLM模型测试MCP服务器的好方法。
- 导航至https://playground.ai.cloudflare.com/
- 确保模型设置为
llama-3.3-70b-instruct-fp8-fast - 在 MCP服务器，set 统一资源定位符 到
https://[my-mcp-url].workers.dev/sse - 点击 连接
- 状态应更新为 连接 它应该列出14个可用的工具
现在，您可以开始与模型交互，它将运行必要的工具来完成所请求的任务。
\[！提示\] 为了获得最佳效果，给出由一个动作组成的简单说明，例如“创建新的待办事项条目”、“转到cloudflare网站”、“截图”
对话示例：
| 角色 | 消息 |
|---|---|
| 用户 | 转到demo.playwright.dev/todomvc |
| 助手 | *运行浏览器导航工具* |
| 页面已导航到https://demo.playwright.dev/todomvc/.页面标题为“React•TodoMVC”。页面快照显示页面的内容，包括标题、文本框和几个链接。 | |
| 用户 | 创建一些待办事项条目 |
| 助手 | *运行browser_type工具* |
| 一个新的待办事项条目“购买杂货”已经创建。页面快照显示页面的更新内容，包括新的todo条目。 | |
| 用户 | 不错。现在创建一个鹦鹉风格的todo |
| 助手 | *运行browser_type工具* |
| 以鹦鹉风格创建了一个新的todo条目“Polly想要饼干”。页面快照显示页面的更新内容，包括新的todo条目。 | |
| 用户 | 创造另一个yoda风格的todo |
| 助手 | *运行browser_type工具* |
| 以尤达风格创建了一个新的待办事项条目“A walk，I must take”。页面快照显示页面的更新内容，包括新的todo条目。 | |
| 用户 | 截图 |
| 助手 | *运行browser_take_screenshot工具* |
| 已拍摄当前页面的屏幕截图。屏幕截图为PNG格式，大小为56KB。 | |
| 用户 | 现在单击鹦鹉todo条目的复选框 |
| 助手 | *运行浏览器点击工具* |
| 鹦鹉todo条目“波莉想要饼干”的复选框已被点击。页面快照显示了页面的更新内容，复选框现在已选中。 | |
| 用户 | 截图 |
| 助手 | *运行browser_take_screenshot工具* |
| 已拍摄当前页面的屏幕截图。屏幕截图为PNG格式，大小为58KB。 | |
| 用户 | 删除已完成的待办事项条目 |
| 助手 | *运行浏览器点击工具* |
| 已单击“清除完成”按钮。页面快照显示了页面的更新内容，删除了已完成的todo条目“Polly想要一个饼干”。 | |
| 用户 | 最后截图 |
| 助手 | *运行browser_take_screenshot工具* |
| 当前页面的最终截图已经完成。屏幕截图为PNG格式，大小为50KB。 |
与Claude Desktop一起使用
- 打开Claude Desktop的配置文件。
- 在下面添加以下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演示应用程序的会话示例，添加“购买柠檬”并进行截图，利用剧作家mcp工具和浏览器渲染：
在VSCode中配置
您可以使用安装Playwright MCP服务器 VS代码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"}'安装后，Playwright MCP服务器将可用于VS Code中的GitHub Copilot代理。