Cloudflare Browser Rendering Experiments & MCP Server

Cloudflare Browser Rendering 实验与 MCP 服务

本项目演示如何使用 Cloudflare Browser Rendering 提取网页内容，以供大模型作为上下文。本项目包含 REST API 和 Workers Binding API 的实验，以及一个可用于向大模型提供网页上下文的 MCP 服务实现。

项目结构

cloudflare-browser-rendering/
├── examples/                   # Example implementations and utilities
│   ├── basic-worker-example.js # Basic Worker with Browser Rendering
│   ├── minimal-worker-example.js # Minimal implementation
│   ├── debugging-tools/        # Tools for debugging
│   │   └── debug-test.js       # Debug test utility
│   └── testing/                # Testing utilities
│       └── content-test.js     # Content testing utility
├── experiments/                # Educational experiments
│   ├── basic-rest-api/         # REST API tests
│   ├── puppeteer-binding/      # Workers Binding API tests
│   └── content-extraction/     # Content processing tests
├── src/                        # MCP server source code
│   ├── index.ts                # Main entry point
│   ├── server.ts               # MCP server implementation
│   ├── browser-client.ts       # Browser Rendering client
│   └── content-processor.ts    # Content processing utilities
├── puppeteer-worker.js         # Cloudflare Worker with Browser Rendering binding
├── test-puppeteer.js           # Tests for the main implementation
├── wrangler.toml               # Wrangler configuration for the Worker
├── cline_mcp_settings.json.example # Example MCP settings for Cline
├── .gitignore                  # Git ignore file
└── LICENSE                     # MIT License

前置条件

• Node.js（v16 或更高版本）
• 已启用 Browser Rendering 的 Cloudflare 账户
• TypeScript
• Wrangler CLI（用于部署 Worker）

安装

1. 克隆仓库：

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

2. 安装依赖：

npm install

Cloudflare Worker 设置

1. 安装 Cloudflare Puppeteer 包：

npm install @cloudflare/puppeteer

2. 配置 Wrangler：

# wrangler.toml
name = "browser-rendering-api"
main = "puppeteer-worker.js"
compatibility_date = "2023-10-30"
compatibility_flags = ["nodejs_compat"]

[browser]
binding = "browser"

3. 部署 Worker：

npx wrangler deploy

4. 测试 Worker：

node test-puppeteer.js

运行实验

基本 REST API 实验

本实验演示如何使用 Cloudflare Browser Rendering REST API 获取和处理网页内容：

npm run experiment:rest

Puppeteer Binding API 实验

本实验演示如何将 Cloudflare Browser Rendering Workers Binding API 与 Puppeteer 配合使用，以实现更高级的浏览器自动化：

npm run experiment:puppeteer

内容提取实验

本实验演示如何专门提取和处理网页内容，以供大模型作为上下文：

npm run experiment:content

MCP 服务

此 MCP 服务提供用于使用 Cloudflare Browser Rendering 获取和处理网页内容的工具，以供大模型作为上下文。

构建 MCP 服务

npm run build

运行 MCP 服务

npm start

或者，用于开发时：

npm run dev

MCP 服务工具

此 MCP 服务提供以下工具：

1. fetch_page - 获取并处理网页，以供大模型作为上下文
2. search_documentation - 搜索 Cloudflare 文档并返回相关内容
3. extract_structured_content - 使用 CSS 选择器从网页提取结构化内容
4. summarize_content - 总结网页内容，使大模型上下文更简洁

配置

若要使用 Cloudflare Browser Rendering 端点，请设置 BROWSER_RENDERING_API 环境变量：

export BROWSER_RENDERING_API=https://YOUR_WORKER_URL_HERE

将 YOUR_WORKER_URL_HERE 替换为已部署的 Cloudflare Worker 的 URL。你需要在多个文件中替换此占位符：

1. 在测试文件中：test-puppeteer.js、examples/debugging-tools/debug-test.js、examples/testing/content-test.js
2. 在 MCP 服务配置中：cline_mcp_settings.json.example
3. 在浏览器客户端中：src/browser-client.ts（当未设置环境变量时用作回退值）

与 Cline 集成

若要将 MCP 服务与 Cline 集成，请将 cline_mcp_settings.json.example 文件复制到相应位置：

cp cline_mcp_settings.json.example ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

或者，将配置添加到现有的 cline_mcp_settings.json 文件中。

主要经验

1. Cloudflare Browser Rendering 需要使用 @cloudflare/puppeteer 包与浏览器绑定交互。
2. 使用浏览器绑定的正确模式是：

   import puppeteer from '@cloudflare/puppeteer';
   
   // Then in your handler:
   const browser = await puppeteer.launch(env.browser);
   const page = await browser.newPage();
   

3. 部署使用 Browser Rendering 绑定的 Worker 时，需要启用 nodejs_compat 兼容性标志。
4. 使用完毕后务必关闭浏览器，以避免资源泄漏。

许可证

MIT