Cloudflare Playwright MCP 示例

部署到 Cloudflare

概述

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

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

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

部署

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

安装依赖项：

npm ci

部署到 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 网站”、“截取屏幕截图”

对话示例：

角色	信息
用户	前往 demo.playwright.dev/todomvc
助手	运行 browser_navigate 工具，页面导航至 https://demo.playwright.dev/todomvc/ 。页面标题为“React • TodoMVC”。页面快照显示了页面内容，包括标题、文本框和多个链接。
用户	创建一些待办事项
助手	运行 browser_type 工具，新建了一条待办事项“购买杂货”。页面快照显示了页面的更新内容，包括新增的待办事项。
用户	很好。现在用鹦鹉风格创建待办事项
助手	运行 browser_type 工具，以 parrot 风格创建了一个新的待办事项条目“Polly wants a cracker”。页面快照显示了页面的更新内容，包括新的待办事项条目。
用户	并以尤达风格创建另一个待办事项
助手	运行 browser_type 工具，以尤达风格创建了一条新的待办事项“我必须去散步”。页面快照显示了页面的更新内容，包括新的待办事项。
用户	截取屏幕截图
助手	运行 browser_take_screenshot 工具当前页面已截图。截图为 PNG 格式，大小为 56KB。
用户	现在单击鹦鹉待办事项条目的复选框
助手	运行 browser_clickt 工具， Parrot 待办事项条目“Polly wants a cracker”的复选框已被选中。页面快照显示了页面的更新内容，复选框现已选中。
用户	截取屏幕截图
助手	运行 browser_take_screenshot 工具当前页面已截图。截图为 PNG 格式，大小为 58KB。
用户	删除已完成的待办事项
助手	运行 browser_clickt 工具，点击了“清除已完成”按钮。页面快照显示了更新后的页面内容，已完成的待办事项“Polly wants a cracker”已被删除。
用户	最后截取屏幕截图
助手	运行 browser_take_screenshot 工具当前页面的最终屏幕截图已截取。屏幕截图为 PNG 格式，大小为 50KB。