Skip to main content
Glama
amotivv

cloudflare-browser-rendering-mcp

by amotivv

Cloudflare 浏览器渲染 MCP 服务器

铁匠徽章

此 MCP(模型上下文协议)服务器提供使用 Cloudflare 浏览器渲染获取和处理 Web 内容的工具,用于在 LLM 中用作上下文。它设计用于与 Claude 和 Cline 客户端环境兼容。

特征

  • Web 内容获取:获取并处理 LLM 上下文的网页

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

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

  • 内容摘要:总结网页内容,以获得更简洁的 LLM 上下文

  • 截图:截取网页截图

Related MCP server: turbowebfetch

先决条件

  • Node.js v18 或更高版本

  • 具有浏览器渲染 API 访问权限的 Cloudflare 帐户

  • 使用提供的puppeteer-worker.js文件部署的 Cloudflare Worker

安装

通过 Smithery 安装

要通过Smithery自动安装适用于 Claude Desktop 的 Cloudflare 浏览器渲染:

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 Worker 设置

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

    npx wrangler deploy
  2. 确保在 Cloudflare Worker 中配置以下绑定:

    • 名为browser的浏览器渲染绑定

    • 名为SCREENSHOTS的 KV 命名空间绑定

  3. 记下已部署工作器的 URL(例如, https://browser-rendering-api.yourusername.workers.dev )

配置

对于克劳德桌面

  1. 打开Claude桌面配置文件:

    # 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. 重启Claude桌面

对于克莱恩

  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。您可以使用以下工具:

获取页面

获取并处理 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.

总结内容

总结网络内容以获得更简洁的 LLM 背景。

参数:

  • url (必填):需要汇总的 URL

  • maxLength (可选):摘要的最大长度

例子:

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

截屏

截取网页的屏幕截图。

参数:

  • 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] :错误处理和调试

查看日志:

  • Claude Desktop :检查~/Library/Logs/Claude/mcp*.log (macOS) 或%APPDATA%\Claude\Logs\mcp*.log (Windows) 中的日志

  • Cline :日志出现在 VSCode 扩展的输出控制台中

常见问题

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

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

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

    • 验证您的 Cloudflare Worker 是否已部署并正在运行

    • 检查 URL 是否正确且可访问

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

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

  4. “屏幕截图 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 并进行必要的绑定

执照

麻省理工学院

Available Tools

5 tools
extract_structured_contentC

Extracts structured content from a web page using CSS selectors

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorsYesCSS selectors to extract content
urlYesURL to extract content from

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It states what the tool does but lacks critical behavioral details: it doesn't specify if it fetches the page internally, handles errors, requires internet access, has rate limits, or what the output format is. For a tool with no annotations, this leaves significant gaps in understanding its operation.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is extremely concise and front-loaded: a single sentence that directly states the tool's function without any fluff. Every word earns its place by conveying essential information about extraction, content type, source, and method. It's efficiently structured for quick understanding.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity of web extraction (involving network calls, parsing, and structured data output), the description is incomplete. There's no output schema, and the description doesn't explain return values, error handling, or behavioral traits. With no annotations and only basic parameter coverage, it fails to provide enough context for effective use in real-world scenarios.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema description coverage is 100%, meaning the input schema already documents both parameters ('url' and 'selectors') with descriptions. The tool description adds no additional meaning beyond what's in the schema—it doesn't explain parameter interactions, provide examples, or clarify semantics. With high schema coverage, the baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'Extracts structured content from a web page using CSS selectors'. It specifies the verb ('extracts'), resource ('structured content'), and method ('CSS selectors'), which is specific and actionable. However, it doesn't explicitly differentiate from sibling tools like 'fetch_page' or 'summarize_content', which would require a 5.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention scenarios where extraction is preferred over fetching the whole page, searching documentation, summarizing, or taking a screenshot. Without any context or exclusions, users must infer usage from the purpose alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

fetch_pageC

Fetches and processes a web page for LLM context

ParametersJSON Schema
NameRequiredDescriptionDefault
maxContentLengthNoMaximum content length to return
urlYesURL to fetch

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions 'fetches and processes' but doesn't specify what processing entails (e.g., cleaning HTML, extracting text, handling errors), whether it requires authentication, rate limits, or what happens with invalid URLs. This leaves significant gaps for a tool that interacts with external resources.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that front-loads the core purpose without unnecessary details. Every word earns its place, making it easy for an agent to quickly grasp the tool's function.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity of web fetching (external calls, potential errors) and lack of annotations or output schema, the description is insufficient. It doesn't explain return values, error handling, or processing behavior, leaving the agent with incomplete information for reliable tool invocation in varied contexts.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, with clear descriptions for both parameters ('url' and 'maxContentLength'). The description adds no additional parameter semantics beyond what the schema provides, such as format details for URLs or units for content length. Baseline 3 is appropriate since the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('fetches and processes') and resource ('a web page'), with the purpose being to provide 'LLM context'. It distinguishes from siblings like 'take_screenshot' (visual capture) and 'summarize_content' (summarization), though it doesn't explicitly differentiate from 'extract_structured_content' or 'search_documentation' which might have overlapping functionality.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives like 'extract_structured_content' or 'search_documentation'. The description implies usage for web page retrieval for LLM context, but lacks explicit when/when-not instructions or prerequisites, leaving the agent to infer based on tool names alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

search_documentationC

Searches Cloudflare documentation and returns relevant content

ParametersJSON Schema
NameRequiredDescriptionDefault
maxResultsNoMaximum number of results to return
queryYesSearch query

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool searches and returns content, but doesn't describe important behaviors like whether it performs web searches, accesses a local database, requires authentication, has rate limits, or what format the returned content takes (e.g., text snippets, links, full documents).

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that gets straight to the point without unnecessary words. It's appropriately sized for a simple search tool, though it could potentially be more structured with additional context.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a search tool with no annotations and no output schema, the description is incomplete. It doesn't explain what kind of content is returned (snippets, full pages, metadata), how results are ranked, whether authentication is needed, or any limitations. Given the lack of structured fields, the description should provide more operational context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, clearly documenting both parameters ('query' and 'maxResults'). The description doesn't add any meaningful parameter semantics beyond what the schema already provides, such as search syntax examples or result format details.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose with a specific verb ('Searches') and resource ('Cloudflare documentation'), making it immediately understandable. However, it doesn't distinguish this tool from its sibling tools like 'fetch_page' or 'extract_structured_content', which might also retrieve documentation content in different ways.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention any prerequisites, constraints, or compare it to sibling tools like 'fetch_page' (which might retrieve a specific page) or 'summarize_content' (which might process content).

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

summarize_contentC

Summarizes web content for more concise LLM context

ParametersJSON Schema
NameRequiredDescriptionDefault
maxLengthNoMaximum length of the summary
urlYesURL to summarize

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool 'summarizes web content' but doesn't describe how it works (e.g., extraction method, processing time, error handling), what limitations exist (e.g., supported content types, rate limits), or what the output looks like. This leaves significant gaps in understanding the tool's behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence with zero waste. It's front-loaded with the core purpose and includes a clear goal, making it appropriately sized and well-structured for quick understanding.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity of summarizing web content, no annotations, and no output schema, the description is incomplete. It doesn't explain the return format, potential errors, or behavioral traits like content processing methods. For a tool with 2 parameters and significant operational implications, more context is needed.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, clearly documenting both parameters ('url' and 'maxLength'). The description adds no additional parameter semantics beyond what the schema provides, such as format details for 'url' or typical values for 'maxLength'. Baseline 3 is appropriate when the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose with a specific verb ('summarizes') and resource ('web content'), and it provides the goal ('for more concise LLM context'). However, it doesn't explicitly differentiate from sibling tools like 'extract_structured_content' or 'fetch_page', which might have overlapping functionality.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives like 'extract_structured_content' or 'fetch_page'. It doesn't mention prerequisites, exclusions, or specific contexts where this summarization tool is preferred over other content-handling siblings.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

take_screenshotB

Takes a screenshot of a web page and returns it as an image

ParametersJSON Schema
NameRequiredDescriptionDefault
fullPageNoWhether to take a screenshot of the full page or just the viewport (default: false)
heightNoHeight of the viewport in pixels (default: 800)
urlYesURL to take a screenshot of
widthNoWidth of the viewport in pixels (default: 1280)

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden but lacks behavioral details. It doesn't disclose potential issues like authentication needs for restricted pages, rate limits, performance impacts, or what happens with invalid URLs. The phrase 'returns it as an image' hints at output but doesn't specify format (e.g., PNG, JPEG) or handling of errors.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that front-loads the core purpose. Every word earns its place, with no redundant or vague phrasing. It's appropriately sized for a straightforward tool.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (capturing web pages with 4 parameters) and lack of annotations or output schema, the description is incomplete. It doesn't cover error cases, output format details, or prerequisites (e.g., network access). For a tool that interacts with external resources and returns binary data, more context is needed.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The description adds no parameter-specific information beyond what's in the schema, which has 100% coverage. It doesn't explain interactions between parameters (e.g., how 'fullPage' affects 'height'/'width') or provide usage examples. Since schema coverage is high, the baseline is 3, but no extra value is added.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('takes a screenshot') and resource ('of a web page'), with the specific output format ('returns it as an image'). It distinguishes from sibling tools like 'fetch_page' (which likely retrieves HTML) and 'extract_structured_content' (which processes content rather than capturing visuals).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives. It doesn't mention scenarios like needing visual verification, capturing dynamic content, or comparing with text-based tools like 'summarize_content' or 'fetch_page'. The description only states what it does, not when it's appropriate.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 5 tool updatesv1.0.0
    • First observedextract_structured_content
    • First observedfetch_page
    • First observedsearch_documentation
    • First observedsummarize_content
    • First observedtake_screenshot

TDQS

A3.5/5.0

Scored across 5 tools

Disambiguation5/5

Each tool has a clearly distinct purpose with no overlap: extract_structured_content targets specific elements, fetch_page retrieves full pages, search_documentation queries documentation, summarize_content condenses content, and take_screenshot captures visual output. An agent can easily differentiate between these functions.

Naming Consistency5/5

All tools follow a consistent verb_noun pattern with snake_case naming (e.g., extract_structured_content, fetch_page, search_documentation). This uniformity makes the toolset predictable and easy to understand for an agent.

Tool Count5/5

With 5 tools, this server is well-scoped for browser rendering and content processing tasks. Each tool earns its place by covering distinct aspects like fetching, extracting, searching, summarizing, and screenshotting, without being overly sparse or bloated.

Completeness4/5

The toolset covers core browser rendering workflows (fetching, extracting, summarizing, screenshotting) and includes a domain-specific search function. A minor gap exists in advanced interactions like form submission or navigation, but agents can work around this for most use cases.

Maintenance

ActivityInactive
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    F
    maintenance
    An MCP server that provides LLMs with stealth browser automation capabilities via CloakBrowser to bypass bot detection services like Cloudflare and reCAPTCHA. It supports full page interaction, content extraction, and human-like behavior through 30 specialized tools.
    20
    54 PyPI
    13
    Apache 2.0
  • A
    license
    A
    quality
    B
    maintenance
    MCP server that lets Claude Code fetch web content using real Chrome browsers. Renders JavaScript-heavy pages, handles bot mitigation, and runs up to 14 parallel browsers locally with zero API keys. Makes outbound HTTP requests only to URLs the user explicitly asks Claude to fetch.
    2
    14 npm
    91
    MIT