Cloudflare 浏览器渲染 MCP 服务器

此 MCP (模型上下文协议) 服务器提供用于获取和处理 Web 内容的工具，该内容使用 Cloudflare 浏览器渲染，以便在 LLM 中用作上下文。它旨在与 Claude 和 Cline 客户端环境一起使用。

<a href="https://glama.ai/mcp/servers/35u5mo3dm5"> <img width="380" height="200" src="https://glama.ai/mcp/servers/35u5mo3dm5/badge" alt="cloudflare-browser-rendering-mcp MCP server" /> </a>

功能

• Web 内容获取: 获取和处理 Web 页面以用于 LLM 上下文
• 文档搜索: 搜索 Cloudflare 文档并返回相关内容
• 结构化内容提取: 使用 CSS 选择器从 Web 页面提取结构化内容
• 内容摘要: 摘要 Web 内容以获得更简洁的 LLM 上下文
• 屏幕截图捕获: 拍摄 Web 页面的屏幕截图

前提条件

• Node.js v18 或更高版本
• 具有浏览器渲染 API 访问权限的 Cloudflare 帐户
• 使用提供的 puppeteer-worker.js 文件部署的 Cloudflare Worker

安装

通过 Smithery 安装

要通过 Smithery 自动为 Claude Desktop 安装 Cloudflare 浏览器渲染：

npx -y @smithery/cli install @amotivv/cloudflare-browser-rendering-mcp --client claude

1. 克隆此存储库：

   git clone https://github.com/yourusername/cloudflare-browser-rendering.git
   cd cloudflare-browser-rendering
   

2. 安装依赖项：

   npm install
   

3. 构建项目：

   npm run build
   

Cloudflare Worker 设置

1. 使用 Wrangler 将 puppeteer-worker.js 文件部署到 Cloudflare Workers：

   npx wrangler deploy
   

2. 确保在 Cloudflare Worker 中配置以下绑定：

   • 名为 browser 的浏览器渲染绑定
   • 名为 SCREENSHOTS 的 KV 命名空间绑定

3. 记下已部署 worker 的 URL（例如，https://browser-rendering-api.yourusername.workers.dev）

配置

对于 Claude Desktop

1. 打开 Claude Desktop 配置文件：

   # macOS
   code ~/Library/Application\ Support/Claude/claude_desktop_config.json
   
   # Windows
   code %APPDATA%\Claude\claude_desktop_config.json
   

2. 添加 MCP 服务器配置：

   {
     "mcpServers": {
       "cloudflare-browser-rendering": {
         "command": "node",
         "args": ["/path/to/cloudflare-browser-rendering/dist/index.js"],
         "env": {
           "BROWSER_RENDERING_API": "https://your-worker-url.workers.dev"
         },
         "disabled": false,
         "autoApprove": []
       }
     }
   }
   

3. 重启 Claude Desktop

对于 Cline

1. 打开 Cline MCP 设置文件：

   # macOS
   code ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
   
   # Windows
   code %APPDATA%\Code\User\globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
   

2. 添加 MCP 服务器配置：

   {
     "mcpServers": {
       "cloudflare-browser-rendering": {
         "command": "node",
         "args": ["/path/to/cloudflare-browser-rendering/dist/index.js"],
         "env": {
           "BROWSER_RENDERING_API": "https://your-worker-url.workers.dev"
         },
         "disabled": false,
         "autoApprove": []
       }
     }
   }
   

用法

配置完成后，MCP 服务器将可用于 Claude Desktop 和 Cline。您可以使用以下工具：

fetch_page

获取和处理 Web 页面以用于 LLM 上下文。

参数：

• url (必需): 要获取的 URL
• maxContentLength (可选): 要返回的最大内容长度

示例：

你能获取并总结来自 https://developers.cloudflare.com/browser-rendering/ 的内容吗？

search_documentation

搜索 Cloudflare 文档并返回相关内容。

参数：

• query (必需): 搜索查询
• maxResults (可选): 要返回的最大结果数

示例：

在 Cloudflare 文档中搜索有关“browser rendering API”的信息。

extract_structured_content

使用 CSS 选择器从 Web 页面提取结构化内容。

参数：

• url (必需): 要从中提取内容的 URL
• selectors (必需): 用于提取内容的 CSS 选择器

示例：

使用选择器 h1 和 p 从 https://developers.cloudflare.com/browser-rendering/ 提取主标题和第一段。

summarize_content

摘要 Web 内容以获得更简洁的 LLM 上下文。

参数：

• url (必需): 要摘要的 URL
• maxLength (可选): 摘要的最大长度

示例：

以 300 字或更少的内容摘要来自 https://developers.cloudflare.com/browser-rendering/ 的内容。

take_screenshot

拍摄 Web 页面的屏幕截图。

参数：

• url (必需): 要拍摄屏幕截图的 URL
• width (可选): 视口的宽度（以像素为单位）（默认值：1280）
• height (可选): 视口的高度（以像素为单位）（默认值：800）
• fullPage (可选): 是拍摄整个页面的屏幕截图还是仅拍摄视口的屏幕截图（默认值：false）

示例：

拍摄 https://developers.cloudflare.com/browser-rendering/ 的屏幕截图，宽度为 1024 像素。

故障排除

日志记录

MCP 服务器使用带有以下前缀的全面日志记录：

• [Setup]: 初始化和配置
• [API]: API 请求和响应
• [Error]: 错误处理和调试

要查看日志：

• Claude Desktop: 检查 ~/Library/Logs/Claude/mcp*.log (macOS) 或 %APPDATA%\Claude\Logs\mcp*.log (Windows) 中的日志
• Cline: 日志显示在 VSCode 扩展的输出控制台中

常见问题

1. “BROWSER_RENDERING_API 环境变量未设置”

   • 确保您已在 MCP 服务器配置中设置了 Cloudflare Worker 的正确 URL

2. “Cloudflare worker API 不可用或未配置”

   • 验证您的 Cloudflare Worker 是否已部署并正在运行
   • 检查 URL 是否正确且可访问

3. “浏览器绑定不可用”

   • 确保您已在 Cloudflare Worker 中配置了浏览器渲染绑定

4. “SCREENSHOTS KV 绑定不可用”

   • 确保您已在 Cloudflare Worker 中配置了 KV 命名空间绑定

开发

项目结构

• src/index.ts: 主要入口点
• src/server.ts: MCP 服务器实现
• src/browser-client.ts: 用于与 Cloudflare 浏览器渲染交互的客户端
• src/content-processor.ts: 处理用于 LLM 上下文的 Web 内容
• puppeteer-worker.js: Cloudflare Worker 实现

构建

npm run build

测试

该项目包含一个全面的测试脚本，用于验证所有 MCP 工具是否正常工作：

npm test

这将：

1. 启动 MCP 服务器
2. 使用示例请求测试每个工具
3. 验证响应
4. 提供测试结果的摘要

您还可以为特定组件运行单独的测试：

# 测试 Puppeteer 集成
npm run test:puppeteer

为了使测试正常工作，请确保您已：

1. 使用 npm run build 构建了项目
2. 将 BROWSER_RENDERING_API 环境变量设置为您的 Cloudflare Worker URL
3. 使用必要的绑定部署了 Cloudflare Worker

许可证

MIT