cloudflare-browser-rendering-mcp

你是否曾经希望自己的AI助手能够直接“看到”网页内容，而不仅仅是阅读文字？今天要介绍的开源项目cloudflare-browser-rendering-mcp，正是为了满足这个需求而诞生的。它利用Cloudflare的浏览器渲染能力，让AI能够获取、处理、甚至截取网页内容，从而在对话中提供更丰富的上下文信息。

项目基本信息

一、项目介绍

cloudflare-browser-rendering-mcp 是一个基于MCP协议的服务器，它通过Cloudflare Workers提供的浏览器渲染API，让AI助手能够以编程方式获取、处理和截图网页内容。与传统的HTTP请求不同，它使用真实的浏览器环境来渲染页面，这意味着它可以执行JavaScript、加载动态内容，并捕获页面完全加载后的状态。

这个项目的特别之处在于，它将Cloudflare的分布式浏览器渲染能力与MCP协议结合起来。你不需要自己维护一个浏览器实例或担心资源消耗，Cloudflare会处理这些底层细节。你只需要通过简单的MCP工具调用，就能让AI获得任何网页的完整内容、结构化数据或截图。

二、核心优势

基于Cloudflare的分布式架构

利用Cloudflare的全球网络和浏览器渲染API，无需自己部署和管理浏览器实例，具有良好的可扩展性和稳定性。

功能全面

提供了5个实用的MCP工具，覆盖了从内容获取到截图的各种需求：

• 获取网页内容
• 搜索Cloudflare文档
• 结构化内容提取
• 内容摘要生成
• 网页截图捕获

无缝集成主流客户端

专门为Claude Desktop和Cline（VS Code扩展）进行了优化，配置简单，开箱即用。

内置测试框架

项目包含完整的测试脚本，可以验证所有工具是否正常工作，这对于生产环境部署非常有价值。

开源且采用MIT协议

代码完全公开，采用宽松的MIT开源协议，可自由使用和修改。

三、适用场景

开发者学习和参考

对于想学习如何将Cloudflare Workers与MCP协议结合的开发者，这是一个很好的参考实现。项目结构清晰，分为服务器实现、浏览器客户端、内容处理器等模块。

个人项目使用和集成

如果你正在开发需要处理动态网页内容的AI应用，可以直接集成这个MCP服务器。例如：

• 一个能够抓取单页应用（SPA）内容的智能爬虫
• 一个能监控网页视觉变化并发出警报的工具
• 一个能自动提取网页特定区域信息的助手

企业级应用开发

在企业环境中，可以用它来构建自动化报告系统或竞品分析平台。例如，每天定时截取关键数据仪表盘，提取结构化数据并存入数据库。

日常工作和效率提升

对于普通用户，可以通过AI助手快速获取和处理网页信息：

• “帮我获取这个页面并总结主要内容”
• “提取这篇文章的标题和所有子标题”
• “截取这个网站首页的完整截图”

四、安装教程

系统要求

详细安装步骤

整个安装过程分为两个主要部分：部署Cloudflare Worker和配置MCP服务器。

第一步：克隆项目并安装依赖

git clone https://github.com/amotivv/cloudflare-browser-rendering.git
cd cloudflare-browser-rendering
npm install
npm run build

第二步：部署Cloudflare Worker

项目包含一个puppeteer-worker.js文件，需要用Wrangler部署到Cloudflare Workers。

# 登录Cloudflare账户（如果尚未登录）
npx wrangler login

# 部署Worker
npx wrangler deploy puppeteer-worker.js

在部署过程中，需要配置以下绑定：

• 浏览器渲染绑定：名为browser，用于调用Cloudflare的浏览器渲染API
• KV命名空间绑定：名为SCREENSHOTS，用于存储截图

记录下部署后的Worker URL，例如https://browser-rendering-api.yourusername.workers.dev。

第三步：配置MCP客户端

对于Claude Desktop，找到配置文件：

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

添加以下配置：

{
  "mcpServers": {
    "cloudflare-browser-rendering": {
      "command": "node",
      "args": ["/你的绝对路径/cloudflare-browser-rendering/dist/index.js"],
      "env": {
        "BROWSER_RENDERING_API": "https://你的worker-url.workers.dev"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

注意：请将/你的绝对路径/和https://你的worker-url.workers.dev替换为实际值。

对于Cline（VS Code扩展），配置文件位于：

• macOS: ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
• Windows: %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json

添加相同配置即可。

第四步：重启客户端

保存配置文件后，重启Claude Desktop或重新加载VS Code窗口，即可开始使用。

五、使用示例

配置完成后，你就可以在MCP客户端中使用自然语言来调用各种工具了。

示例1：获取并处理网页内容

用户指令：“请帮我获取并总结https://developers.cloudflare.com/browser-rendering/的内容。”

AI会调用fetch_page工具，获取页面内容，然后自动进行总结。

示例2：搜索Cloudflare文档

用户指令：“搜索Cloudflare文档中关于‘browser rendering API’的信息。”

AI会调用search_documentation工具，返回相关文档片段。

示例3：提取结构化内容

用户指令：“使用CSS选择器h1和p，从https://example.com提取主标题和第一段。”

AI会调用extract_structured_content工具，参数如下：

{
  "url": "https://example.com",
  "selectors": ["h1", "p:first-of-type"]
}

示例4：生成内容摘要

用户指令：“用300字以内总结这篇文章：https://blog.cloudflare.com/workers-ai/”

AI会调用summarize_content工具，并指定maxLength为300。

示例5：截取网页截图

用户指令：“截取https://github.com的完整页面截图，宽度为1024像素。”

AI会调用take_screenshot工具：

{
  "url": "https://github.com",
  "width": 1024,
  "fullPage": true
}

示例6：运行测试验证

项目包含一个测试脚本，可以验证所有工具是否正常工作：

npm test

这将会启动MCP服务器，使用示例请求测试每个工具，并提供测试结果摘要。

六、常见问题

问题1：部署Worker时提示“browser binding not available”

解决方案：请确保你的Cloudflare账户有Browser Rendering功能的访问权限。这通常需要特定的套餐或申请。你可以登录Cloudflare控制台，检查Workers & Pages -> 浏览器渲染是否可用。

问题2：启动MCP服务器时提示“BROWSER_RENDERING_API环境变量未设置”

解决方案：请检查配置文件中的env部分是否正确设置了BROWSER_RENDERING_API变量，并且Worker URL是有效的。确保没有拼写错误。

问题3：Claude Desktop中无法连接到服务器

解决方案：

• 确认配置文件中的路径是绝对路径，并且dist/index.js文件存在
• 检查JSON格式是否正确（例如没有多余的逗号）
• 查看Claude Desktop的日志文件（macOS: ~/Library/Logs/Claude/mcp*.log）以获取详细错误信息

问题4：截图功能返回空或错误

解决方案：确保在Cloudflare Worker中正确配置了SCREENSHOTS KV命名空间绑定。截图会存储在这个KV空间中，如果绑定缺失，截图功能会失败。

问题5：fetch_page返回的内容不完整

解决方案：某些网页可能有懒加载或需要用户交互的内容。可以尝试调整maxContentLength参数，或者使用take_screenshot配合视觉模型来分析页面。

七、总结

cloudflare-browser-rendering-mcp是一个设计周全、功能丰富的MCP服务器。它将Cloudflare强大的浏览器渲染能力与MCP协议完美结合，为AI助手打开了通往动态网页世界的大门。

这个项目最值得称赞的地方在于它的完整性：不仅有清晰的代码结构，还提供了详细的文档、测试脚本和故障排除指南。无论你是想直接使用，还是作为学习MCP服务器开发的参考，都能从中受益。

如果你需要让AI处理动态网页内容、截图或结构化提取，并且希望有一个稳定、可扩展的解决方案，那么cloudflare-browser-rendering-mcp非常值得一试。 虽然部署Cloudflare Worker需要一些初始配置，但一旦完成，你将获得一个强大的、无需自己维护浏览器实例的网页处理能力。