Cloudflare Playwright MCP

Cloudflare Playwright MCP 示例

概述

该项目演示了如何使用Cloudflare Playwright MCP将Playwright 与 Cloudflare Workers用作模型控制协议 (MCP) 服务器。

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

该服务器可与各种 AI 平台一起使用，包括 Cloudflare AI Playground、Claude Desktop 和 VS Code 中的 GitHub Copilot。

部署

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

1. 安装依赖项：

npm ci

2. 部署到 Cloudflare Workers：

npx wrangler deploy

与 Cloudflare AI Playground 一起使用

Cloudflare 游乐场 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 种可用工具

您现在可以开始与模型交互，它将运行必要的工具来完成所请求的任务。

[!TIP] 为获得最佳效果，请提供由单个操作组成的简单指令，例如“创建新的待办事项条目”、“转到 Cloudflare 网站”、“截取屏幕截图”

对话示例：

与 Claude Desktop 一起使用

截至目前， Claude Desktop仅支持本地 MCP 服务器。为了将playground-mcp与 Claude Desktop 结合使用，我们需要使用mcp-remote工具，它可以代理远程 MCP 服务器并将其公开到本地。请使用以下配置：

1. 打开 Claude Desktop 的配置文件。

2. 在mcpServers部分下添加以下 JSON 代码片段：

{
  "mcpServers": {
    "cloudflare-playwright-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://[my-mcp-url].workers.dev/sse"
      ]
    }
  }
}

3. 保存配置文件并重新启动Claude Desktop 以应用更改。

此设置确保 Claude Desktop 可以与 Cloudflare Playwright MCP 服务器通信。

下面是一个会话打开 TODO 演示应用程序的示例，添加了“购买柠檬”并进行了截图，利用了 playwright-mcp 工具和浏览器渲染：

在 VSCode 中配置

您可以使用VS Code CLI安装 Playwright MCP 服务器：

# 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 代理一起使用。