云flare浏览器渲染mcp

Name: 云flare浏览器渲染mcp
Author: amotivv

作者：amotivv10 星标更新：2025-03-14

安装使用来源：spider==github.com

项目介绍

Cloudflare 浏览器渲染 MCP 服务器

此 MCP（模型上下文协议）服务器提供了使用 Cloudflare 浏览器渲染获取和处理网页内容的工具，以便在大语言模型中作为上下文使用。它设计用于与 Claude 和 Cline 客户端环境一起工作。

功能

网页内容获取：获取并处理网页以供大语言模型使用
文档搜索：搜索 Cloudflare 文档并返回相关内容
结构化内容提取：使用 CSS 选择器从网页中提取结构化内容
内容总结：总结网页内容以提供更简洁的大语言模型上下文
截图捕获：捕获网页的截图

预备条件

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

安装

通过 Smithery 安装

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

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

克隆此仓库：

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

安装依赖项：
```
npm install
```
构建项目：
```
npm run build
```

Cloudflare Worker 设置

使用 Wrangler 将 puppeteer-worker.js 文件部署到 Cloudflare Workers：
```
npx wrangler deploy
```
确保在您的 Cloudflare Worker 中配置以下绑定：
- 名为 browser 的浏览器渲染绑定
- 名为 SCREENSHOTS 的 KV 命名空间绑定
注意您已部署的 worker 的 URL（例如，https://browser-rendering-api.yourusername.workers.dev）

配置

对于 Claude Desktop

打开 Claude Desktop 配置文件：

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

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

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

打开 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

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

获取并处理网页以供大语言模型使用。

参数：

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

示例：

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

search_documentation

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

参数：

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

示例：

搜索 Cloudflare 文档以获取有关“浏览器渲染 API”的信息。

extract_structured_content

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

参数：

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

示例：

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

summarize_content

总结网页内容以提供更简洁的大语言模型上下文。

参数：

url（必需）：要总结的 URL
maxLength（可选）：摘要的最大长度

示例：

将 https://developers.cloudflare.com/browser-rendering/ 的内容总结为 300 字或更少。

take_screenshot

捕获网页的截图。

参数：

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 扩展的输出控制台中

常见问题

"BROWSER_RENDERING_API 环境变量未设置"
- 确保您已在 MCP 服务器配置中设置了正确的 Cloudflare Worker URL
"Cloudflare worker API 无法访问或未配置"
- 验证您的 Cloudflare Worker 已部署并正在运行
- 检查 URL 是否正确且可访问
"浏览器绑定不可用"
- 确保您已在 Cloudflare Worker 中配置了浏览器渲染绑定
"SCREENSHOTS KV 绑定不可用"
- 确保您已在 Cloudflare Worker 中配置了 KV 命名空间绑定

开发

项目结构

src/index.ts：主入口点
src/server.ts：MCP 服务器实现
src/browser-client.ts：与 Cloudflare 浏览器渲染交互的客户端
src/content-processor.ts：处理网页内容以供大语言模型使用
puppeteer-worker.js：Cloudflare Worker 实现

构建

npm run build

测试

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

npm test

这将：

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

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

# 测试 Puppeteer 集成
npm run test:puppeteer

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

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

许可证

MIT