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

该项目展示了如何使用Cloudflare浏览器渲染来提取网络内容作为LLM的上下文。它包括对REST API和Workers Binding API的实验，以及一个可以用于为LLM提供网页上下文的MCP服务器实现。

项目结构

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许可证

先决条件

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

项目简介

本项目旨在通过实验和实现，探索Cloudflare浏览器渲染技术在不同场景下的应用。它包括对REST API和Workers Binding API的深入研究，并提供了一个完整的MCP（管理控制平面）服务器实现，用于展示如何利用这些技术来处理网页内容。

安装说明

1. 克隆项目仓库：

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

2. 安装依赖项：

   npm install
   

3. 启动MCP服务器：

   npm start
   

实验模块

1. 基于REST API的浏览器渲染实验

• 基本Worker示例 (basic-worker-example.js)：展示了如何在Cloudflare Worker中使用浏览器渲染技术来抓取和解析网页内容。

• 最小化实现 (minimal-worker-example.js)：一个精简版的浏览器渲染实现，用于快速验证功能。

2. Workers Binding API实验

• Puppeteer绑定 (puppeteer-binding/)：演示如何在Cloudflare环境中使用@cloudflare/puppeteer库来操作浏览器上下文。

• 内容提取 (content-extraction/)：针对不同网页结构的内容抓取和解析方法。

MCP服务器实现

功能概述

MCP服务器是一个用于管理和控制浏览器渲染任务的中枢，它提供了以下功能：

1. 接收请求并分发到不同的处理模块。
2. 管理浏览器上下文以避免资源泄漏。
3. 提供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: 获取最近的渲染结果。

注意事项

1. 资源管理：在Worker中使用浏览器上下文时，务必确保及时释放资源以避免泄漏。

2. 错误处理：建议在每个关键步骤添加适当的错误处理机制，并记录详细的日志信息以便排查问题。

3. 性能优化：根据实际需求调整渲染参数和并行处理能力，以达到最佳性能。

许可证

MIT