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

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

<a href="https://glama.ai/mcp/servers/wg9fikq571"> <img width="380" height="200" src="https://glama.ai/mcp/servers/wg9fikq571/badge" alt="Web Content Server MCP server" /> </a>

项目结构

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（版本 16 或更高）
• 启用了浏览器渲染功能的 Cloudflare 账户
• TypeScript
• Wrangler CLI（用于部署 Worker）

安装

1. 克隆仓库：

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

1. 安装依赖项：

npm install

Cloudflare Worker 设置

1. 安装 Cloudflare Puppeteer 包：

npm install @cloudflare/puppeteer

1. 配置 Wrangler：

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

[browser]
binding = "browser"

1. 部署 Worker：

npx wrangler deploy

1. 测试 Worker：

node test-puppeteer.js

运行实验

基本 REST API 实验

此实验展示了如何使用 Cloudflare 浏览器渲染 REST API 来获取和处理网页内容：

npm run experiment:rest

Puppeteer 绑定 API 实验

此实验展示了如何使用 Cloudflare 浏览器渲染 Workers 绑定 API 结合 Puppeteer 来进行更高级的浏览器自动化：

npm run experiment:puppeteer

内容提取实验

此实验展示了如何提取并处理网页内容以特别作为 LLMs 的上下文使用：

npm run experiment:content

MCP 服务器

MCP 服务器提供了利用 Cloudflare 浏览器渲染获取和处理网页内容的工具，这些内容可作为 LLMs 的上下文使用。

构建 MCP 服务器

npm run build

运行 MCP 服务器

npm start

或者，在开发模式下运行：

npm run dev

MCP 服务器工具

MCP 服务器提供以下工具：

1. fetch_page - 为 LLM 上下文抓取并处理网页
2. search_documentation - 搜索 Cloudflare 文档并返回相关内容
3. extract_structured_content - 使用 CSS 选择器从网页中提取结构化内容
4. summarize_content - 概括网页内容以生成更简洁的 LLM 上下文

配置

要使用您的 Cloudflare 浏览器渲染端点，请设置 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 浏览器渲染需要 @cloudflare/puppeteer 包来与浏览器绑定进行交互。
2. 使用浏览器绑定的正确模式是：

   import puppeteer from '@cloudflare/puppeteer';
   
   // 然后在你的处理函数中:
   const browser = await puppeteer.launch(env.browser);
   const page = await browser.newPage();
   

3. 当部署使用了浏览器渲染绑定的 Worker 时，你需要启用 nodejs_compat 兼容性标志。
4. 使用完毕后总是要关闭浏览器以避免资源泄漏。

许可证

MIT