AI导哈

浏览器自动化工具

通过Playwright与Cloudflare Workers结合，实现AI助手控制浏览器进行导航、输入、点击和截图等自动化任务。

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

使用说明

Cloudflare Playwright MCP 示例

概述

这个项目展示了如何使用 使用 Cloudflare Workers 的 Playwright（或：结合 Cloudflare Workers 的 Playwright） 作为模型控制协议（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 这是使用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。
用户 删除已完成的待办事项条目
助手 运行 browser_clickt 工具
“清除已完成”按钮已被点击。页面快照显示了页面更新后的内容，其中已完成的待办事项“波莉想要一块饼干”已被移除。
用户 拍摄最终截图
助手 运行浏览器截图工具
已截取当前页面的最终截图。截图格式为PNG，大小为50KB。

与Claude Desktop配合使用

截至目前， Claude Desktop（可译为“Claude桌面版”或保持原样，若“Desktop”在此处不特指某种桌面应用而是泛指某种版本或形式，也可根据上下文灵活处理） 仅支持本地MCP服务器。要使用 playground-mcp 使用 Claude Desktop，我们得以利用 mcp-remote 翻译成中文是“远程MCP（多点控制单元）”或“MCP远程控制”。这里，“MCP”通常指的是“Multi-Point Control Unit”，即多点控制单元，广泛应用于视频会议系统中，用于控制多个视频会议终端的连接和管理。而“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"}'

安装完成后，您将在 VS Code 中能够使用 Playwright MCP 服务器与您的 GitHub Copilot 代理进行交互。

相关 MCP