cloudflare-playwright-mcp

Cloudflare Playwright MCP 示例

概述

本项目演示了如何使用 Playwright with Cloudflare Workers 作为模型控制协议（MCP）服务器，基于 Cloudflare Playwright MCP。

它使 AI 助手能够通过一组工具控制浏览器，从而执行导航、输入、点击和截图等 Web 自动化任务。

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

部署

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

1. 安装依赖：

npm ci

2. 部署到 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 Servers 中，将 URL 设置为 https://[my-mcp-url].workers.dev/sse

• 点击 Connect

• 状态应更新为 Connected，并应列出 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 演示应用，添加“buy lemons”并截图，利用 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 代理。