AI导哈

浏览器自动化控制协议

通过Playwright与Cloudflare Workers实现的浏览器自动化控制协议，支持AI助手执行网页导航、输入、点击和截图等任务。

  • by nickvenne
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 nickvenne/browser-mcp-ai

使用说明

Cloudflare剧作家MCP示例

概述

此项目演示了如何使用 Cloudflare Workers的编剧 作为模型控制协议（MCP）服务器，使用 Cloudflare剧作家MCP.

它使人工智能助手能够通过一组工具控制浏览器，使他们能够执行导航、打字、点击和截图等网络自动化任务。

该服务器可用于各种AI平台，包括Cloudflare AI Playground、Claude Desktop和GitHub Copilot in VS Code。

部署

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

  1. 安装依赖项：
npm ci
  1. 部署到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一起使用

截至目前， 克劳德桌面 仅支持本地MCP服务器。使用 playground-mcp 使用Claude Desktop，我们可以 mcp遥控器，一种代理远程MCP服务器并在本地公开它们的工具。使用以下配置：

  1. 打开Claude Desktop的配置文件。
  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演示应用程序的会话示例，添加“购买柠檬”并进行截图，利用剧作家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代理。

相关 MCP