Web Content MCP Server

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

先决条件

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

安装

1. 克隆存储库：

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

1. 安装依赖项：

npm install

Cloudflare工作程序设置

1. 安装Cloudflare Puppeteer软件包：

npm install @cloudflare/puppeteer

1. 配置牧马人：

# 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. 测试工人：

node test-puppeteer.js

运行实验

REST API基础实验

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

npm run experiment:rest

木偶绑定API实验

本实验演示了如何使用Cloudflare浏览器渲染工人绑定API与Puppeteer实现更高级的浏览器自动化：

npm run experiment:puppeteer

内容提取实验

本实验演示了如何提取和处理专门用作LLM上下文的web内容：

npm run experiment:content

MCP服务器

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

构建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 -总结网络内容，以获得更简洁的法学硕士背景

配置

要使用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';

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

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

许可证

麻省理工学院