AI导哈

浏览器渲染内容处理服务

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

  • by amotivv
  • TypeScript
  • 本地部署
  • 11 星标
  • 更新于
在 GitHub 查看 amotivv/cloudflare-browser-rendering-mcp

使用说明

Cloudflare浏览器渲染MCP服务器

此MCP（模型上下文协议）服务器提供了使用Cloudflare浏览器渲染获取和处理web内容的工具，以用作LLM中的上下文。它旨在与Claude和Cline客户端环境一起使用。

特性

  • Web内容获取：获取和处理LLM上下文的网页
  • 文档搜索：搜索Cloudflare文档并返回相关内容
  • 结构化内容提取：使用CSS选择器从网页中提取结构化内容
  • 内容概述：总结网络内容，以获得更简洁的法学硕士背景
  • 电脑屏幕截图工具：截取网页截图

先决条件

  • Node.js v18或更高版本
  • 具有浏览器渲染API访问权限的Cloudflare帐户
  • 已部署的Cloudflare Worker使用提供的 puppeteer-worker.js 文件

安装

通过Smithery安装

通过以下方式自动安装Cloudflare Browser Rendering for Claude Desktop 史密瑟里:

npx -y @smithery/cli install @amotivv/cloudflare-browser-rendering-mcp --client claude

  1. 克隆此存储库：

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

  2. 安装依赖项：

    npm install

  3. 构建项目：

    npm run build

Cloudflare工作程序设置

  1. 部署 puppeteer-worker.js 使用Wrangler将文件发送到Cloudflare Workers：

    npx wrangler deploy

  2. 请确保在Cloudflare Worker中配置以下绑定：

    • 浏览器渲染绑定命名 browser
    • KV命名空间绑定已命名 SCREENSHOTS

  3. 注意你部署的worker的URL（例如。， https://browser-rendering-api.yourusername.workers.dev)

配置

适用于克劳德桌面

  1. 打开Claude Desktop配置文件：

    # macOS
code ~/Library/Application\ Support/Claude/claude_desktop_config.json

# Windows
code %APPDATA%\Claude\claude_desktop_config.json

  2. 添加MCP服务器配置：

    {
  "mcpServers": {
    "cloudflare-browser-rendering": {
      "command": "node",
      "args": ["/path/to/cloudflare-browser-rendering/dist/index.js"],
      "env": {
        "BROWSER_RENDERING_API": "https://your-worker-url.workers.dev"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

  3. 重新启动克劳德桌面

对于克莱恩

  1. 打开Cline MCP设置文件：

    # macOS
code ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

# Windows
code %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json

  2. 添加MCP服务器配置：

    {
  "mcpServers": {
    "cloudflare-browser-rendering": {
      "command": "node",
      "args": ["/path/to/cloudflare-browser-rendering/dist/index.js"],
      "env": {
        "BROWSER_RENDERING_API": "https://your-worker-url.workers.dev"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

用法

配置后，MCP服务器将可供Claude Desktop和Cline使用。您可以使用以下工具：

fetch_page

获取并处理LLM上下文的网页。

参数：

  • url （必填）：要获取的URL
  • maxContentLength （可选）：返回的最大内容长度

例子：

Can you fetch and summarize the content from https://developers.cloudflare.com/browser-rendering/?

搜索文档

搜索Cloudflare文档并返回相关内容。

参数：

  • query （必填）：搜索查询
  • maxResults （可选）：返回的最大结果数

例子：

Search the Cloudflare documentation for information about "browser rendering API".

提取结构化内容

使用CSS选择器从网页中提取结构化内容。

参数：

  • url （必填）：从中提取内容的URL
  • selectors （必填）：用于提取内容的CSS选择器

例子：

Extract the main heading and first paragraph from https://developers.cloudflare.com/browser-rendering/ using the selectors h1 and p.

总结内容

总结网络内容，以获得更简洁的法学硕士背景。

参数：

  • url （必填）：用于汇总的URL
  • maxLength （可选）：摘要的最大长度

例子：

Summarize the content from https://developers.cloudflare.com/browser-rendering/ in 300 words or less.

take_screenshot

对网页进行截图。

参数：

  • url （必填）：用于截图的URL
  • width （可选）：视口宽度（像素）（默认值：1280）
  • height （可选）：视口高度（像素）（默认值：800）
  • fullPage （可选）：是截取整个页面的屏幕截图还是只截取视口的屏幕截图（默认值：false）

例子：

Take a screenshot of https://developers.cloudflare.com/browser-rendering/ with a width of 1024 pixels.

故障排除

日志记录

MCP服务器使用具有以下前缀的综合日志记录：

  • [Setup]：初始化和配置
  • [API]：API请求和响应
  • [Error]：错误处理和调试

要查看日志，请执行以下操作：

  • 克劳德桌面：检查登录 ~/Library/Logs/Claude/mcp*.log （macOS）或 %APPDATA%\Claude\Logs\mcp*.log （Windows）
  • 克莱恩：日志显示在VSCode扩展的输出控制台中

常见问题

  1. “未设置BROWSER_RENDERING_API环境变量”

    • 确保您在MCP服务器配置中为Cloudflare Worker设置了正确的URL

  2. “Cloudflare worker API不可用或未配置”

    • 验证您的Cloudflare Worker是否已部署并正在运行
    • 检查URL是否正确且可访问

  3. “浏览器绑定不可用”

    • 确保您已在Cloudflare Worker中配置了浏览器渲染绑定

  4. “SCREENSHOTS KV绑定不可用”

    • 确保您已在Cloudflare Worker中配置了KV命名空间绑定

发展

项目结构

  • src/index.ts：主要入口点
  • src/server.ts：MCP服务器实现
  • src/browser-client.ts：用于与Cloudflare浏览器渲染交互的客户端
  • src/content-processor.ts：处理LLM上下文的web内容
  • puppeteer-worker.js：Cloudflare Worker实施

建筑

npm run build

测试

该项目包括一个全面的测试脚本，用于验证所有MCP工具是否正常工作：

npm test

这将：

  1. 启动MCP服务器
  2. 根据样品请求测试每个工具
  3. 验证响应
  4. 提供测试结果摘要

您还可以对特定组件运行单独的测试：

# Test the Puppeteer integration
npm run test:puppeteer

为了使测试正常工作，请确保您具备：

  1. 用以下方式构建项目 npm run build
  2. 设置 BROWSER_RENDERING_API Cloudflare Worker URL的环境变量
  3. 使用必要的绑定部署Cloudflare Worker

许可证

麻省理工学院

相关 MCP