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

该项目演示了如何使用 Cloudflare 浏览器渲染为 LLM 上下文提取 Web 内容。它包含 REST API 和 Workers Binding API 的实验，以及可用于为 LLM 提供 Web 上下文的 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

Related MCP server: Fetch MCP Server

先决条件

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

安装

克隆存储库：

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

安装依赖项：

npm install

Cloudflare Worker 设置

安装 Cloudflare Puppeteer 包：

npm install @cloudflare/puppeteer

配置Wrangler：

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

[browser]
binding = "browser"

部署 Worker：

npx wrangler deploy

测试 Worker：

node test-puppeteer.js

运行实验

基本 REST API 实验

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

npm run experiment:rest

Puppeteer 绑定 API 实验

此实验演示了如何将 Cloudflare 浏览器渲染工作器绑定 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 服务器提供以下工具：

fetch_page - 获取并处理 LLM 上下文的网页
search_documentation - 搜索 Cloudflare 文档并返回相关内容
extract_structured_content - 使用 CSS 选择器从网页中提取结构化内容
summarize_content - 总结网络内容以获得更简洁的 LLM 上下文

配置

要使用 Cloudflare 浏览器渲染端点，请设置BROWSER_RENDERING_API环境变量：

export BROWSER_RENDERING_API=https://YOUR_WORKER_URL_HERE

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

在测试文件中： test-puppeteer.js 、 examples/debugging-tools/debug-test.js 、 examples/testing/content-test.js
在 MCP 服务器配置中： cline_mcp_settings.json.example
在浏览器客户端中： 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文件中。

关键学习

Cloudflare 浏览器渲染需要@cloudflare/puppeteer包与浏览器绑定进行交互。

使用浏览器绑定的正确模式是：

import puppeteer from '@cloudflare/puppeteer';

// Then in your handler:
const browser = await puppeteer.launch(env.browser);
const page = await browser.newPage();

部署使用浏览器渲染绑定的 Worker 时，需要启用nodejs_compat兼容性标志。
使用后请务必关闭浏览器，以避免资源泄漏。

执照

麻省理工学院

Web Content MCP Server