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

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

<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/                   # 示例实现和实用程序
│   ├── 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               # Worker 的 Wrangler 配置
├── cline_mcp_settings.json.example # Cline 的示例 MCP 设置
├── .gitignore                  # Git 忽略文件
└── LICENSE                     # MIT 许可证

前提条件

• Node.js (v16 或更高版本)
• 启用了浏览器渲染的 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 浏览器渲染 REST API 来获取和处理 Web 内容：

npm run experiment:rest

Puppeteer Binding API 实验

此实验演示了如何将 Cloudflare 浏览器渲染 Workers Binding API 与 Puppeteer 结合使用，以实现更高级的浏览器自动化：

npm run experiment:puppeteer

内容提取实验

此实验演示了如何提取和处理 Web 内容，专门用于作为 LLM 中的上下文：

npm run experiment:content

MCP 服务器

MCP 服务器提供了使用 Cloudflare 浏览器渲染获取和处理 Web 内容的工具，用于作为 LLM 中的上下文。

构建 MCP 服务器

npm run build

运行 MCP 服务器

npm start

或者，用于开发：

npm run dev

MCP 服务器工具

MCP 服务器提供以下工具：

1. fetch_page - 获取和处理 Web 页面，用于 LLM 上下文
2. search_documentation - 搜索 Cloudflare 文档并返回相关内容
3. extract_structured_content - 使用 CSS 选择器从 Web 页面提取结构化内容
4. summarize_content - 总结 Web 内容，以获得更简洁的 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