Cloudflare剧作家MCP
概述
该项目利用Playwright进行自动化浏览器测试，并与Cloudflare Workers集成， 浏览器渲染 和 @cloudflare/playwright 部署。
构建和部署
按照以下步骤设置和部署项目：
- 安装依赖项：
BASH``` 1npm ci
1. 构建：
BASH```
1
2cd cloudflare
npm run build- 部署到Cloudflare Workers：
BASH``` 1 2 3cd cloudflare/example npm ci npx wrangler deploy
### 与Cloudflare AI游乐场一起使用
[Cloudflare游乐场AI](https://playground.ai.cloudflare.com/) 是使用Workers AI中可用的LLM模型测试MCP服务器的好方法。
- 导航到[https://playground.ai.cloudflare.com/](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”。页面快照显示页面的内容，包括标题、文本框和几个链接。](https://demo.playwright.dev/todomvc/.%E9%A1%B5%E9%9D%A2%E6%A0%87%E9%A2%98%E4%B8%BA%E2%80%9CReact%E2%80%A2TodoMVC%E2%80%9D%E3%80%82%E9%A1%B5%E9%9D%A2%E5%BF%AB%E7%85%A7%E6%98%BE%E7%A4%BA%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%86%85%E5%AE%B9%EF%BC%8C%E5%8C%85%E6%8B%AC%E6%A0%87%E9%A2%98%E3%80%81%E6%96%87%E6%9C%AC%E6%A1%86%E5%92%8C%E5%87%A0%E4%B8%AA%E9%93%BE%E6%8E%A5%E3%80%82) |
| **用户** | 创建一些待办事项条目 |
| **助手** | *运行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一起使用
截至目前， [克劳德桌面版](https://claude.ai/download) 仅支持本地MCP服务器。使用 `playground-mcp` 使用Claude Desktop，我们可以 [mcp遥控器](https://github.com/geelen/mcp-remote)，一种代理远程MCP服务器并在本地公开它们的工具。使用以下配置：
1. 打开Claude Desktop的配置文件。
2. 在下面添加以下JSON代码段 `mcpServers` 章节：
JSON```
1
2
3
4
5
6
7
8
9
10
11{
"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:
BASH``` 1 2# For VS Code code —add-mcp ’{“name”:“cloudflare-playwright”,“type”:“sse”,“url”:“https://[my-mcp-url].workers.dev/sse”}’
BASH```
1
2# 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代理。
与光标一起使用
默认情况下，当 imageResponses 设置为 "auto"，服务器将禁用Cursor客户端的内联图像响应。要在Cursor中启用内联屏幕截图，您需要覆盖此行为：
如果您正在运行自己的Cloudflare Worker，请通过 imageResponses: "allow" 创建MCP代理时：
TYPESCRIPT``` 1 2 3export const PlaywrightMCP = createMcpAgent(env.BROWSER, { imageResponses: ‘allow’, } as any);
### 工具模式
这些工具有两种模式：
1. **快照模式** （默认）：使用可访问性快照以获得更好的性能和可靠性
2. **视觉模式**：使用屏幕截图进行基于视觉的交互
视觉模式与能够使用以下方式与元素交互的计算机使用模型配合使用效果最佳
X Y坐标空间，基于提供的屏幕截图。
Interactions
- **浏览器快照**
- 标题：页面快照
- 描述：捕获当前页面的可访问性快照，这比截图更好
- 参数：无
- 只读： **真**
- **浏览器点击**
- 标题：点击
- 说明：在网页上执行点击操作
- 参数：
- `element` （string）：人类可读的元素描述，用于获得与元素交互的权限
- `ref` （string）：页面快照中的精确目标元素引用
- `doubleClick` （布尔值，可选）：是否执行双击而不是单击
- 只读： **错误的**
- **browser_drag**
- 标题：拖动鼠标
- 说明：在两个元素之间执行拖放操作
- 参数：
- `startElement` （string）：人类可读的源元素描述，用于获得与元素交互的权限
- `startRef` （string）：页面快照中的精确源元素引用
- `endElement` （string）：人类可读的目标元素描述，用于获得与元素交互的权限
- `endRef` （string）：页面快照中的精确目标元素引用
- 只读： **错误的**
- **浏览器切换**
- 标题：鼠标悬停
- 描述：将鼠标悬停在页面上的元素上
- 参数：
- `element` （string）：人类可读的元素描述，用于获得与元素交互的权限
- `ref` （string）：页面快照中的精确目标元素引用
- 只读： **真**
- **浏览器类型**
- 标题：键入文本
- 说明：在可编辑元素中键入文本
- 参数：
- `element` （string）：人类可读的元素描述，用于获得与元素交互的权限
- `ref` （string）：页面快照中的精确目标元素引用
- `text` （string）：要在元素中键入的文本
- `submit` （布尔值，可选）：是否提交输入的文本（之后按Enter键）
- `slowly` （boolean，可选）：是否一次键入一个字符。可用于触发页面中的密钥处理程序。默认情况下，一次填写整个文本。
- 只读： **错误的**
- **浏览器选择选项**
- 标题：选择选项
- 说明：在下拉列表中选择一个选项
- 参数：
- `element` （string）：人类可读的元素描述，用于获得与元素交互的权限
- `ref` （string）：页面快照中的精确目标元素引用
- `values` （array）：在下拉列表中选择的值数组。这可以是单个值或多个值。
- 只读： **错误的**
- **browser_press_key**
- 标题：按键
- 说明：按键盘上的一个键
- 参数：
- `key` （string）：要按的键的名称或要生成的字符，例如 `ArrowLeft` 或 `a`
- 只读： **错误的**
- **浏览器等待**
- 标题：等待
- 描述：等待文本出现或消失或经过指定时间
- 参数：
- `time` （数字，可选）：等待时间（秒）
- `text` （string，可选）：等待的文本
- `textGone` （string，可选）：等待消失的文本
- 只读： **真**
- **浏览器文件上传**
- 标题：上传文件
- 说明：上传一个或多个文件
- 参数：
- `paths` （array）：要上传的文件的绝对路径。可以是单个文件或多个文件。
- 只读： **错误的**
- **浏览器处理对话框**
- 标题：处理对话框
- 描述：处理对话框
- 参数：
- `accept` （boolean）：是否接受对话。
- `promptText` （string，可选）：提示对话框中的提示文本。
- 只读： **错误的**
Navigation
- **浏览器导航**
- 标题：导航到URL
- 描述：导航到URL
- 参数：
- `url` （string）：要导航到的URL
- 只读： **错误的**
- **浏览器导航返回**
- 标题：返回
- 说明：返回上一页
- 参数：无
- 只读： **真**
- **浏览器导航转发**
- 标题：前进
- 说明：转到下一页
- 参数：无
- 只读： **真**
Resources
- **browser_take_screenshot**
- 标题：截图
- 描述：截取当前页面的屏幕截图。您无法根据屏幕截图执行操作，请使用browser_snapshot进行操作。
- 参数：
- `raw` （boolean，可选）：是否返回不压缩（PNG格式）。默认值为false，返回JPEG图像。
- `filename` （string，可选）：保存截图的文件名。默认为 `page-{timestamp}.{png|jpeg}` 如果没有指定。
- `element` （string，可选）：人类可读的元素描述，用于获得对元素进行截图的权限。如果没有提供，将对视口进行截图。如果提供了元素，也必须提供ref。
- `ref` （string，可选）：页面快照中的精确目标元素引用。如果没有提供，将对视口进行截图。若提供了ref，则也必须提供元素。
- 只读： **真**
- **浏览器_pdf_save**
- 标题：另存为PDF
- 说明：将页面另存为PDF
- 参数：
- `filename` （字符串，可选）：用于保存pdf的文件名。默认为 `page-{timestamp}.pdf` 如果没有指定。
- 只读： **真**
- **浏览器网络请求**
- 标题：列出网络请求
- 描述：返回自加载页面以来的所有网络请求
- 参数：无
- 只读： **真**
- **browser_console_消息**
- 标题：获取控制台消息
- 说明：返回所有控制台消息
- 参数：无
- 只读： **真**
Utilities
- **浏览器安装**
- 标题：安装配置中指定的浏览器
- 说明：安装配置中指定的浏览器。如果您收到浏览器未安装的错误，请调用此命令。
- 参数：无
- 只读： **错误的**
- **浏览器_关闭**
- 标题：关闭浏览器
- 说明：关闭页面
- 参数：无
- 只读： **真**
- **浏览器大小**
- 标题：调整浏览器窗口大小
- 说明：调整浏览器窗口大小
- 参数：
- `width` （数字）：浏览器窗口的宽度
- `height` （数字）：浏览器窗口的高度
- 只读： **真**
Tabs
- **browser_tab_list**
- 标题：列表选项卡
- 说明：列出浏览器选项卡
- 参数：无
- 只读： **真**
- **browser_tab_new**
- 标题：打开新选项卡
- 说明：打开一个新选项卡
- 参数：
- `url` （字符串，可选）：在新选项卡中导航到的URL。如果没有提供，新选项卡将为空。
- 只读： **真**
- **浏览器选项卡选择**
- 标题：选择选项卡
- 说明：按索引选择选项卡
- 参数：
- `index` （数字）：要选择的选项卡的索引
- 只读： **真**
- **browser_tab_close**
- 标题：关闭选项卡
- 说明：关闭选项卡
- 参数：
- `index` （数字，可选）：要关闭的选项卡的索引。如果未提供，则关闭当前选项卡。
- 只读： **错误的**
Testing
- **浏览器生成剧作家测试**
- 标题：生成剧作家测试
- 描述：为给定场景生成剧作家测试
- 参数：
- `name` （string）：测试的名称
- `description` （string）：测试的描述
- `steps` （array）：测试步骤
- 只读： **真**
Vision mode
- **浏览器屏幕捕获**
- 标题：截图
- 描述：截取当前页面的屏幕截图
- 参数：无
- 只读： **真**
- **浏览器_屏幕_move_mouse**
- 标题：移动鼠标
- 说明：将鼠标移动到给定位置
- 参数：
- `element` （string）：人类可读的元素描述，用于获得与元素交互的权限
- `x` （数字）：X坐标
- `y` （数字）：Y坐标
- 只读： **真**
- **浏览器_屏幕_点击**
- 标题：点击
- 说明：点击鼠标左键
- 参数：
- `element` （string）：人类可读的元素描述，用于获得与元素交互的权限
- `x` （数字）：X坐标
- `y` （数字）：Y坐标
- 只读： **错误的**
- **浏览器屏幕拖动**
- 标题：拖动鼠标
- 说明：拖动鼠标左键
- 参数：
- `element` （string）：人类可读的元素描述，用于获得与元素交互的权限
- `startX` （数字）：开始X坐标
- `startY` （数字）：开始Y坐标
- `endX` （数字）：结束X坐标
- `endY` （数字）：结束Y坐标
- 只读： **错误的**
- **浏览器屏幕类型**
- 标题：键入文本
- 说明：键入文本
- 参数：
- `text` （string）：要在元素中键入的文本
- `submit` （布尔值，可选）：是否提交输入的文本（之后按Enter键）
- 只读： **错误的**
- **browser_press_key**
- 标题：按键
- 说明：按键盘上的一个键
- 参数：
- `key` （string）：要按的键的名称或要生成的字符，例如 `ArrowLeft` 或 `a`
- 只读： **错误的**
- **浏览器等待**
- 标题：等待
- 描述：等待文本出现或消失或经过指定时间
- 参数：
- `time` （数字，可选）：等待时间（秒）
- `text` （string，可选）：等待的文本
- `textGone` （string，可选）：等待消失的文本
- 只读： **真**
- **浏览器文件上传**
- 标题：上传文件
- 说明：上传一个或多个文件
- 参数：
- `paths` （array）：要上传的文件的绝对路径。可以是单个文件或多个文件。
- 只读： **错误的**
- **浏览器处理对话框**
- 标题：处理对话框
- 描述：处理对话框
- 参数：
- `accept` （boolean）：是否接受对话。
- `promptText` （string，可选）：提示对话框中的提示文本。
- 只读： **错误的**