이 MCP(모델 컨텍스트 프로토콜) 서버는 LLM에서 컨텍스트로 사용할 웹 콘텐츠를 Cloudflare 브라우저 렌더링을 사용하여 가져오고 처리하는 도구를 제공합니다. Claude 및 Cline 클라이언트 환경 모두에서 작동하도록 설계되었습니다.
웹 콘텐츠 가져오기 : LLM 컨텍스트에 대한 웹 페이지 가져오기 및 처리
문서 검색 : Cloudflare 문서를 검색하고 관련 콘텐츠를 반환합니다.
구조화된 콘텐츠 추출 : CSS 선택기를 사용하여 웹 페이지에서 구조화된 콘텐츠 추출
콘텐츠 요약 : 보다 간결한 LLM 컨텍스트를 위해 웹 콘텐츠를 요약합니다.
스크린샷 캡처 : 웹 페이지의 스크린샷을 찍습니다
Related MCP server: turbowebfetch
Node.js v18 이상
브라우저 렌더링 API 액세스가 가능한 Cloudflare 계정
제공된 puppeteer-worker.js 파일을 사용하여 배포된 Cloudflare Worker
Smithery를 통해 Claude Desktop에 Cloudflare Browser Rendering을 자동으로 설치하려면 다음을 수행합니다.
지엑스피1
이 저장소를 복제하세요:
git clone https://github.com/yourusername/cloudflare-browser-rendering.git
cd cloudflare-browser-rendering종속성 설치:
npm install프로젝트를 빌드하세요:
npm run buildWrangler를 사용하여 Cloudflare Workers에 puppeteer-worker.js 파일을 배포합니다.
npx wrangler deployCloudflare Worker에서 다음 바인딩을 구성해야 합니다.
브라우저 렌더링 바인딩은 browser 라는 이름으로 지정됩니다.
KV 네임스페이스 바인딩이 SCREENSHOTS 로 명명됨
배포된 작업자의 URL을 기록해 두세요(예: https://browser-rendering-api.yourusername.workers.dev )
Claude Desktop 구성 파일을 엽니다.
# macOS
code ~/Library/Application\ Support/Claude/claude_desktop_config.json
# Windows
code %APPDATA%\Claude\claude_desktop_config.jsonMCP 서버 구성을 추가합니다.
{
"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": []
}
}
}Claude Desktop을 다시 시작하세요
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.jsonMCP 서버 구성을 추가합니다.
{
"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 확장 프로그램의 출력 콘솔에 나타납니다.
"BROWSER_RENDERING_API 환경 변수가 설정되지 않았습니다"
MCP 서버 구성에서 Cloudflare Worker에 올바른 URL을 설정했는지 확인하세요.
"Cloudflare Worker API를 사용할 수 없거나 구성되지 않았습니다."
Cloudflare Worker가 배포되어 실행 중인지 확인하세요.
URL이 올바르고 접근 가능한지 확인하세요
"브라우저 바인딩을 사용할 수 없습니다"
Cloudflare Worker에서 브라우저 렌더링 바인딩을 구성했는지 확인하세요.
"스크린샷 KV 바인딩을 사용할 수 없습니다"
Cloudflare Worker에서 KV 네임스페이스 바인딩을 구성했는지 확인하세요.
src/index.ts : 메인 진입점
src/server.ts : MCP 서버 구현
src/browser-client.ts : Cloudflare 브라우저 렌더링과 상호 작용하기 위한 클라이언트
src/content-processor.ts : LLM 컨텍스트에 대한 웹 콘텐츠를 처리합니다.
puppeteer-worker.js : Cloudflare Worker 구현
npm run build이 프로젝트에는 모든 MCP 도구가 올바르게 작동하는지 확인하는 포괄적인 테스트 스크립트가 포함되어 있습니다.
npm test이렇게 하면:
MCP 서버를 시작합니다
샘플 요청으로 각 도구를 테스트하세요
응답을 확인하세요
테스트 결과 요약을 제공하세요
특정 구성 요소에 대해 개별 테스트를 실행할 수도 있습니다.
# Test the Puppeteer integration
npm run test:puppeteer테스트가 제대로 작동하려면 다음 사항이 있는지 확인하세요.
npm run build 로 프로젝트를 빌드했습니다.
BROWSER_RENDERING_API 환경 변수를 Cloudflare Worker URL로 설정하세요.
필요한 바인딩으로 Cloudflare Worker를 배포했습니다.
MIT
Extracts structured content from a web page using CSS selectors
| Name | Required | Description | Default |
|---|---|---|---|
| selectors | Yes | CSS selectors to extract content | |
| url | Yes | URL to extract content from |
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.
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.
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.
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.
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.
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.
Fetches and processes a web page for LLM context
| Name | Required | Description | Default |
|---|---|---|---|
| maxContentLength | No | Maximum content length to return | |
| url | Yes | URL to fetch |
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.
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.
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.
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.
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.
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.
Searches Cloudflare documentation and returns relevant content
| Name | Required | Description | Default |
|---|---|---|---|
| maxResults | No | Maximum number of results to return | |
| query | Yes | Search query |
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.
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.
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.
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.
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.
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.
Summarizes web content for more concise LLM context
| Name | Required | Description | Default |
|---|---|---|---|
| maxLength | No | Maximum length of the summary | |
| url | Yes | URL to summarize |
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.
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.
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.
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.
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.
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.
Takes a screenshot of a web page and returns it as an image
| Name | Required | Description | Default |
|---|---|---|---|
| fullPage | No | Whether to take a screenshot of the full page or just the viewport (default: false) | |
| height | No | Height of the viewport in pixels (default: 800) | |
| url | Yes | URL to take a screenshot of | |
| width | No | Width of the viewport in pixels (default: 1280) |
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.
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.
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.
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.
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.
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.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0extract_structured_contentfetch_pagesearch_documentationsummarize_contenttake_screenshotScored across 5 tools
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.
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.
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.
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.
Turn any public website into an MCP server for agents to search, read and navigate.
MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.
Docs: https://docs.keenable.ai/mcp-server Keenable is a free, remote MCP server that gives agents access to the web index. Search the web with ranked results and date/site filters, then fetch any indexed page as clean markdown. Works out of the box with no account or API key.
Cloudflare Workers MCP server: ai-agent-scratchpad