AI导哈

浏览器自动化工具

Cloudflare Playwright MCP 示例项目展示了如何利用Playwright与Cloudflare Workers作为模型控制协议（MCP）服务器，实现AI助手控制浏览器进行网页自动化任务，如导航、输入、点击和截图等。

  • by andrewkoumoudjian
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 andrewkoumoudjian/playwright-mcp-server

使用说明

Cloudflare Playwright MCP 示例

概述

这个项目展示了如何使用 使用 Cloudflare Workers 的 Playwright（或：基于 Cloudflare Workers 的 Playwright） 作为模型控制协议（MCP）服务器使用 Cloudflare Playwright MCP（注：MCP在此上下文中可能是一个特定项目、功能或模块的缩写，但没有具体上下文，我们只能将其直译为“Cloudflare Playwright MCP”，实际含义需根据具体语境确定）。

它使人工智能助手能够通过一系列工具控制浏览器，从而执行网页自动化任务，如导航、输入、点击和截屏。

该服务器可与多种AI平台配合使用，包括Cloudflare AI Playground、Claude Desktop以及VS Code中的GitHub Copilot。

部署

按照以下步骤设置并部署项目：

  1. 安装依赖项：
npm ci
  1. 部署到 Cloudflare Workers：
npx wrangler deploy

与Cloudflare AI Playground配合使用

Cloudflare playground AI 翻译为中文是：“Cloudflare 实验室AI”或“Cloudflare 试炼场AI”，具体翻译可能根据上下文和语境有所调整。这里，“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”。页面快照显示了页面内容，包括一个标题、一个文本框和几个链接。
用户 创建一些待办事项条目
助手 运行浏览器类型工具
已创建一个新的待办事项条目“购买杂货”。页面快照显示了页面的更新内容，包括这个新的待办事项条目。
用户 很好。现在以鹦鹉的风格创建一个待办事项
助手 运行浏览器类型工具
以鹦鹉风格创建了一个新的待办事项条目：“波莉想要一片饼干”。页面快照显示了页面的更新内容，其中包括这个新的待办事项条目。
用户 并以尤达风格创建另一个待办事项
助手 运行 browser_type 工具
以尤达（Yoda）风格创建了一个新的待办事项条目：“我必须去散步”。页面快照显示了页面的更新内容，包括这个新的待办事项条目。
用户 截图
助手 运行浏览器截图工具
已截取当前页面的截图。截图格式为PNG，大小为56KB。
用户 现在点击鹦鹉待办事项条目的复选框
助手 运行 browser_clickt 工具
鹦鹉待办事项条目“波莉想要一片饼干”的复选框已被点击。页面快照显示了页面更新后的内容，复选框现在已被勾选。
用户 截图
助手 运行浏览器截图工具
已截取当前页面的截图。截图格式为PNG，大小为58KB。
用户 移除已完成的待办事项条目
助手 运行浏览器点击工具
“清除已完成”按钮已被点击。页面快照显示了页面更新后的内容，已完成的待办事项“波莉想要一片饼干”已被移除。
用户 拍摄最终截图
助手 运行浏览器截图工具
已截取当前页面的最终截图。截图格式为PNG，大小为50KB。

与Claude桌面版一起使用

截至目前， Claude Desktop（可译为“Claude桌面版”或保持原样，根据上下文判断是否需要具体化为某款软件或平台的名称） 仅支持本地MCP服务器。要使用 playground-mcp 使用Claude Desktop，我们能够利用 mcp-remote 翻译为中文是“MCP远程（控制/访问）”。不过，具体翻译可能根据上下文有所调整，因为“mcp-remote”可能指的是某个特定系统、设备或软件中的远程功能或模块。在没有具体上下文的情况下，最通用的翻译就是“MCP远程”一个工具，用于代理远程MCP服务器并在本地暴露它们。使用以下配置：

  1. 打开Claude桌面版的配置文件。
  2. 在以下位置添加以下JSON片段 mcpServers 部分/章节：
{
  "mcpServers": {
    "cloudflare-playwright-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://[my-mcp-url].workers.dev/sse"
      ]
    }
  }
}
  1. 保存配置文件并 重启 在 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"}'

安装完成后，Playwright MCP 服务器将可在 VS Code 中与您的 GitHub Copilot 代理一起使用。

相关 MCP