Cloudflare Browser Rendering MCP

Cloudflare浏览器渲染MCP服务器

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

特性

• Web内容获取：获取和处理LLM上下文的网页
• 文档搜索：搜索Cloudflare文档并返回相关内容
• 结构化内容提取：使用CSS选择器从网页中提取结构化内容
• 内容概述：总结网络内容，以获得更简洁的法学硕士背景
• 电脑屏幕截图工具：截取网页截图

先决条件

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

安装

通过Smithery安装

通过以下方式自动安装Cloudflare Browser Rendering for Claude Desktop 史密瑟里:

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

1. 安装依赖项：

   npm install

1. 构建项目：

   npm run build

Cloudflare工作程序设置

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

   npx wrangler deploy

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

- 浏览器渲染绑定命名 browser - KV命名空间绑定已命名 SCREENSHOTS

1. 注意你部署的worker的URL（例如。， https://browser-rendering-api.yourusername.workers.dev)

配置

适用于克劳德桌面

1. 打开Claude Desktop配置文件：

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

   # Windows
   code %APPDATA%\Claude\claude_desktop_config.json

1. 添加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": []
       }
     }
   }

1. 重新启动克劳德桌面

对于克莱恩

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

1. 添加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

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

参数：

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

例子：

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

搜索文档

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

参数：

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

例子：

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

提取结构化内容

使用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.

总结内容

总结网络内容，以获得更简洁的法学硕士背景。

参数：

• 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]：错误处理和调试

要查看日志，请执行以下操作：

• 克劳德桌面：检查登录 ~/Library/Logs/Claude/mcp*.log （macOS）或 %APPDATA%\Claude\Logs\mcp*.log （Windows）
• 克莱恩：日志显示在VSCode扩展的输出控制台中

常见问题

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

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

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

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

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

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

1. “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. 提供测试结果摘要

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

# Test the Puppeteer integration
npm run test:puppeteer

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

1. 用以下方式构建项目 npm run build
2. 设置 BROWSER_RENDERING_API Cloudflare Worker URL的环境变量
3. 使用必要的绑定部署Cloudflare Worker

许可证

麻省理工学院