金大哥 - cloudflare-browser-rendering MCP 详情

article

README

🚀 Cloudflare 浏览器渲染实验及 MCP 服务器

本项目聚焦于利用 Cloudflare 浏览器渲染技术提取网络内容，将其作为大语言模型（LLM）的上下文。通过对 REST API 和 Workers Binding API 的实验，以及 MCP 服务器的实现，为 LLM 提供网页上下文支持。

🚀 快速开始

本项目致力于探索 Cloudflare 浏览器渲染技术在不同场景下的应用，借助实验和具体实现，深入研究 REST API 和 Workers Binding API，并提供完整的 MCP（管理控制平面）服务器，用于处理网页内容。

先决条件

Node.js（v16 或更高版本）
启用浏览器渲染的 Cloudflare 账户
TypeScript
Wrangler CLI（用于部署 Worker）

安装步骤

克隆项目仓库：

git clone [your-repository-url]
cd cloudflare-browser-rendering

安装依赖项：
```
npm install
```
启动 MCP 服务器：
```
npm start
```

✨ 主要特性

实验模块

基于 REST API 的浏览器渲染实验：
- 基本 Worker 示例（basic-worker-example.js）：展示在 Cloudflare Worker 中运用浏览器渲染技术抓取和解析网页内容。
- 最小化实现（minimal-worker-example.js）：精简版的浏览器渲染实现，便于快速验证功能。
Workers Binding API 实验：
- Puppeteer 绑定（puppeteer-binding/）：演示在 Cloudflare 环境中使用@cloudflare/puppeteer库操作浏览器上下文。
- 内容提取（content-extraction/）：针对不同网页结构的内容抓取和解析方法。

MCP 服务器实现

功能概述：作为管理和控制浏览器渲染任务的中枢，具备接收请求并分发到不同处理模块、管理浏览器上下文以避免资源泄漏、提供 API 接口供其他系统集成等功能。
详细配置：
- 环境变量：BROWSER_BINDING指定浏览器绑定服务的 URL（默认值为http://localhost:8080）。
- 日志记录：使用winston库进行日志输出，支持不同级别的日志记录和文件存储。

集成与部署

部署指南：
1. 配置环境变量：
```
export BROWSER_BINDING=http://your-binding-service-url:port
```
2. 构建和部署：
```
npm run build
npm start
```
3. 访问 API：
  - 基础 URL：http://localhost:3000
  - 可用接口：
    - POST /render：提交需要渲染的网页 URL。
    - GET /results：获取最近的渲染结果。

📦 安装指南

克隆项目仓库：

git clone [your-repository-url]
cd cloudflare-browser-rendering

安装依赖项：
```
npm install
```
启动 MCP 服务器：
```
npm start
```

💻 使用示例

基础用法

在克隆项目并安装依赖后，可通过以下命令启动 MCP 服务器：

npm start

高级用法

若需配置不同的浏览器绑定服务 URL，可按以下步骤操作：

配置环境变量：

export BROWSER_BINDING=http://your-binding-service-url:port

构建和部署：
```
npm run build
npm start
```

📚 详细文档

项目结构

cloudflare-browser-rendering/
├── examples/                   # 示例实现和工具
│   ├── basic-worker-example.js # 带浏览器渲染的基本Worker示例
│   ├── minimal-worker-example.js # 最小化实现示例
│   ├── debugging-tools/        # 调试工具
│   │   └── debug-test.js       # 调试测试工具
│   └── testing/                # 测试工具
│       └── content-test.js     # 内容测试工具
├── experiments/                # 教育实验
│   ├── basic-rest-api/         # REST API测试
│   ├── puppeteer-binding/      # Workers Binding API测试
│   └── content-extraction/     # 内容处理测试
├── src/                        # MCP服务器源代码
│   ├── index.ts                # 主入口点
│   ├── server.ts               # MCP服务器实现
│   ├── browser-client.ts       # 浏览器渲染客户端
│   └── content-processor.ts    # 内容处理工具
├── puppeteer-worker.js         # Cloudflare Worker的浏览器绑定示例
├── test-puppeteer.js           # 主实现测试
├── wrangler.toml               # Wrangler配置文件（用于部署Worker）
├── cline_mcp_settings.json.example # Cline使用的MCP设置示例
├── .gitignore                  # Git忽略文件
└── LICENSE                     # MIT许可证

🔧 技术细节

本项目主要涉及 Cloudflare 浏览器渲染技术，通过对 REST API 和 Workers Binding API 的实验，实现网页内容的提取和处理。MCP 服务器作为核心组件，负责管理和控制浏览器渲染任务，使用winston库进行日志记录，确保系统的稳定性和可维护性。

📄 许可证

本项目采用 MIT 许可证。

⚠️ 重要提示

资源管理：在 Worker 中使用浏览器上下文时，务必确保及时释放资源以避免泄漏。
错误处理：建议在每个关键步骤添加适当的错误处理机制，并记录详细的日志信息以便排查问题。
性能优化：根据实际需求调整渲染参数和并行处理能力，以达到最佳性能。

cloudflare-browser-rendering