Cloudflare 浏览器渲染 MCP 服务器

此 MCP（模型上下文协议）服务器提供使用 Cloudflare 浏览器渲染获取和处理 Web 内容的工具，用于在 LLM 中用作上下文。它设计用于与 Claude 和 Cline 客户端环境兼容。

特征

• Web 内容获取：获取并处理 LLM 上下文的网页

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

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

• 内容摘要：总结网页内容，以获得更简洁的 LLM 上下文

• 截图：截取网页截图

先决条件

• Node.js v18 或更高版本

• 具有浏览器渲染 API 访问权限的 Cloudflare 帐户

• 使用提供的puppeteer-worker.js文件部署的 Cloudflare Worker

安装

通过 Smithery 安装

要通过Smithery自动安装适用于 Claude Desktop 的 Cloudflare 浏览器渲染：

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. 记下已部署工作器的 URL（例如， https://browser-rendering-api.yourusername.workers.dev ）

配置

对于克劳德桌面

1. 打开Claude桌面配置文件：

   # 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桌面

对于克莱恩

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。您可以使用以下工具：

获取页面

获取并处理 LLM 上下文的网页。

参数：

• url （必填）：要获取的 URL

• maxContentLength （可选）：返回的最大内容长度

例子：

搜索文档

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

参数：

• query （必填）：搜索查询

• maxResults （可选）：返回的最大结果数

例子：

提取结构化内容

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

参数：

• url （必填）：提取内容的 URL

• selectors （必需）：用于提取内容的 CSS 选择器

例子：

总结内容

总结网络内容以获得更简洁的 LLM 背景。

参数：

• url （必填）：需要汇总的 URL

• maxLength （可选）：摘要的最大长度

例子：

截屏

截取网页的屏幕截图。

参数：

• url （必填）：需要截取屏幕截图的 URL

• width （可选）：视口宽度（以像素为单位）（默认值：1280）

• height （可选）：视口高度（以像素为单位）（默认值：800）

• fullPage （可选）：是否截取整个页面的屏幕截图或仅截取视口的屏幕截图（默认值：false）

例子：

故障排除

日志记录

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 工作 API 不可用或未配置”

   • 验证您的 Cloudflare Worker 是否已部署并正在运行

   • 检查 URL 是否正确且可访问

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

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

4. “屏幕截图 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 实现

建筑

测试

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

这将：

1. 启动 MCP 服务器

2. 使用示例请求测试每个工具

3. 验证响应

4. 提供测试结果摘要

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

为了使测试正常运行，请确保您已：

1. 使用npm run build构建项目

2. 将BROWSER_RENDERING_API环境变量设置为您的 Cloudflare Worker URL

3. 部署 Cloudflare Worker 并进行必要的绑定

执照

麻省理工学院