Cloudflare Browser Rendering MCP Server

Cloudflare Browser Rendering MCP 服务

此 MCP（Model Context Protocol）服务提供了一组工具，可使用 Cloudflare Browser Rendering 获取和处理网页内容，供大模型用作上下文。它旨在同时适用于 Claude 和 Cline 客户端环境。

功能

• 网页内容获取：获取和处理网页，为大模型提供上下文
• 文档搜索：搜索 Cloudflare 文档并返回相关内容
• 结构化内容提取：使用 CSS 选择器从网页中提取结构化内容
• 内容摘要：概括网页内容，为大模型提供更精简的上下文
• 截取屏幕截图：截取网页屏幕截图

先决条件

• Node.js v18 或更高版本
• 拥有 Browser Rendering API 访问权限的 Cloudflare 账户
• 使用提供的 puppeteer-worker.js 文件部署的 Cloudflare Worker

安装

通过 Smithery 安装

通过 Smithery 自动为 Claude Desktop 安装 Cloudflare Browser Rendering：

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 的 Browser Rendering 绑定
   • 名为 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": []
       }
     }
   }
   

使用方法

配置完成后，Claude Desktop 和 Cline 均可使用此 MCP 服务。你可以使用以下工具：

fetch_page

获取并处理网页，为大模型提供上下文。

参数：

• url（必需）：要获取的 URL
• maxContentLength（可选）：要返回的最大内容长度

示例：

Can you fetch and summarize the content from https://developers.cloudflare.com/browser-rendering/?

search_documentation

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

参数：

• query（必需）：搜索查询
• maxResults（可选）：要返回的最大结果数

示例：

Search the Cloudflare documentation for information about "browser rendering API".

extract_structured_content

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

参数：

• url（必需）：要从中提取内容的 URL
• selectors（必需）：用于提取内容的 CSS 选择器

示例：

Extract the main heading and first paragraph from https://developers.cloudflare.com/browser-rendering/ using the selectors h1 and p.

summarize_content

概括网页内容，为大模型提供更精简的上下文。

参数：

• url（必需）：要概括的 URL
• maxLength（可选）：摘要的最大长度

示例：

Summarize the content from https://developers.cloudflare.com/browser-rendering/ in 300 words or less.

take_screenshot

截取网页的屏幕截图。

参数：

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

示例：

Take a screenshot of https://developers.cloudflare.com/browser-rendering/ with a width of 1024 pixels.

故障排除

日志记录

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. “Browser binding 不可用”

   • 确保已在 Cloudflare Worker 中配置 Browser Rendering 绑定

4. “SCREENSHOTS KV binding 不可用”

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

开发

项目结构

• src/index.ts：主入口
• src/server.ts：MCP 服务实现
• src/browser-client.ts：与 Cloudflare Browser Rendering 交互的客户端
• src/content-processor.ts：处理网页内容，以便作为大模型上下文
• puppeteer-worker.js：Cloudflare Worker 实现

构建

npm run build

测试

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

npm test

此脚本将：

1. 启动 MCP 服务
2. 使用示例请求测试每个工具
3. 验证响应
4. 汇总测试结果

你也可以针对特定组件运行单项测试：

# Test the Puppeteer integration
npm run test:puppeteer

要确保测试正常运行，请确认你已：

1. 使用 npm run build 构建项目
2. 将 BROWSER_RENDERING_API 环境变量设置为 Cloudflare Worker URL
3. 部署带有所需绑定的 Cloudflare Worker

许可证

MIT