基本能力
产品定位
Cloudflare Browser Rendering MCP Server 是一个用于网页内容获取和处理的工具，旨在为 LLM 提供高质量的上下文信息。
核心功能
- Web Content Fetching: 获取并处理网页内容，供 LLM 使用。
- Documentation Search: 搜索 Cloudflare 文档并返回相关内容。
- Structured Content Extraction: 使用 CSS 选择器从网页中提取结构化内容。
- Content Summarization: 对网页内容进行摘要，生成更简洁的上下文信息。
- Screenshot Capture: 对网页进行截图。
适用场景
- 为 LLM 提供实时的网页内容作为上下文。
- 快速搜索和提取 Cloudflare 文档中的相关信息。
- 从网页中提取特定部分的内容（如标题、段落等）。
- 生成网页内容的摘要，提高 LLM 的处理效率。
- 获取网页的截图，用于可视化分析或存档。
工具列表
- fetch_page: 获取并处理网页内容。
- 参数:
url（必填）,maxContentLength（可选）。 - search_documentation: 搜索 Cloudflare 文档。
- 参数:
query（必填）,maxResults（可选）。 - extract_structured_content: 使用 CSS 选择器提取结构化内容。
- 参数:
url（必填）,selectors（必填）。 - summarize_content: 对网页内容进行摘要。
- 参数:
url（必填）,maxLength（可选）。 - take_screenshot: 对网页进行截图。
- 参数:
url（必填）,width（可选）,height（可选）,fullPage（可选）。
常见问题解答
- "BROWSER_RENDERING_API environment variable is not set": 确保在 MCP 服务器配置中设置了正确的 Cloudflare Worker URL。
- "Cloudflare worker API is unavailable or not configured": 检查 Cloudflare Worker 是否已部署并运行，URL 是否正确且可访问。
- "Browser binding is not available": 确保在 Cloudflare Worker 中配置了 Browser Rendering 绑定。
- "SCREENSHOTS KV binding is not available": 确保在 Cloudflare Worker 中配置了 KV 命名空间绑定。
使用教程
使用依赖
- Node.js v18 或更高版本。
- 拥有 Cloudflare 账户并开通 Browser Rendering API 访问权限。
- 已部署使用
puppeteer-worker.js文件的 Cloudflare Worker。
安装教程
- 通过 Smithery 安装:
bash
npx -y @smithery/cli install @amotivv/cloudflare-browser-rendering-mcp --client claude - 手动安装:
- 克隆仓库:
bash
git clone https://github.com/yourusername/cloudflare-browser-rendering.git
cd cloudflare-browser-rendering - 安装依赖:
bash
npm install - 构建项目:
bash
npm run build
Cloudflare Worker 设置
- 使用 Wrangler 部署
puppeteer-worker.js:
bash
npx wrangler deploy - 配置 Cloudflare Worker 绑定:
- Browser Rendering 绑定名为
browser。 - KV 命名空间绑定名为
SCREENSHOTS。 - 记录部署的 Worker URL（如
https://browser-rendering-api.yourusername.workers.dev）。
配置
对于 Claude Desktop
- 打开配置文件:
```bash
# macOS
code ~/Library/Application\ Support/Claude/claude_desktop_config.json
# Windows
code %APPDATA%\Claude\claude_desktop_config.json
2. 添加 MCP 服务器配置:json
{
"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
- 打开 MCP 设置文件:
```bash
# 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 服务器配置:json
{
"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: 检查
~/Library/Logs/Claude/mcp*.log（macOS）或%APPDATA%\Claude\Logs\mcp*.log（Windows）。 - Cline: 日志显示在 VSCode 扩展的输出控制台中。
- 测试:
bash
npm test
或运行特定测试:
bash
npm run test:puppeteer
