cloudflare browser rendering mcp

This MCP (Model Context Protocol) server provides tools for fetching and processing web content using Cloudflare Browser Rendering for use as context in LLMs. It's designed to work with both Claude and Cline client environments.

Features

• Web Content Fetching: Fetch and process web pages for LLM context
• Documentation Search: Search Cloudflare documentation and return relevant content
• Structured Content Extraction: Extract structured content from web pages using CSS selectors
• Content Summarization: Summarize web content for more concise LLM context
• Screenshot Capture: Take screenshots of web pages

Prerequisites

• Node.js v18 or higher
• A Cloudflare account with Browser Rendering API access
• A deployed Cloudflare Worker using the provided puppeteer-worker.js file

Installation

Installing via Smithery

To install Cloudflare Browser Rendering for Claude Desktop automatically via Smithery:

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

1. Clone this repository:

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

2. Install dependencies:

   npm install

3. Build the project:

   npm run build

Cloudflare Worker Setup

1. Deploy the puppeteer-worker.js file to Cloudflare Workers using Wrangler:

   npx wrangler deploy

2. Make sure to configure the following bindings in your Cloudflare Worker:

3. Browser Rendering binding named browser

4. KV namespace binding named SCREENSHOTS

5. Note the URL of your deployed worker (e.g., https://browser-rendering-api.yourusername.workers.dev)

Configuration

For Claude Desktop

1. Open the Claude Desktop configuration file:

   # macOS
   code ~/Library/Application Support/Claude/claude_desktop_config.json
   
   # Windows
   code %APPDATA%Claudeclaude_desktop_config.json

2. Add the MCP server configuration:

   {
     "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. Restart Claude Desktop

For Cline

1. Open the Cline MCP settings file:

   # macOS
   code ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
   
   # Windows
   code %APPDATA%CodeUserglobalStoragesaoudrizwan.claude-devsettingscline_mcp_settings.json

2. Add the MCP server configuration:

   {
     "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": []
       }
     }
   }

Usage

Once configured, the MCP server will be available to both Claude Desktop and Cline. You can use the following tools:

fetch_page

Fetches and processes a web page for LLM context.

Parameters: - url (required): URL to fetch - maxContentLength (optional): Maximum content length to return

Example:

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

search_documentation

Searches Cloudflare documentation and returns relevant content.

Parameters: - query (required): Search query - maxResults (optional): Maximum number of results to return

Example:

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

extract_structured_content

Extracts structured content from a web page using CSS selectors.

Parameters: - url (required): URL to extract content from - selectors (required): CSS selectors to extract content

Example:

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

summarize_content

Summarizes web content for more concise LLM context.

Parameters: - url (required): URL to summarize - maxLength (optional): Maximum length of the summary

Example:

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

take_screenshot

Takes a screenshot of a web page.

Parameters: - url (required): URL to take a screenshot of - width (optional): Width of the viewport in pixels (default: 1280) - height (optional): Height of the viewport in pixels (default: 800) - fullPage (optional): Whether to take a screenshot of the full page or just the viewport (default: false)

Example:

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

Troubleshooting

Logging

The MCP server uses comprehensive logging with the following prefixes:

• [Setup]: Initialization and configuration
• [API]: API requests and responses
• [Error]: Error handling and debugging

To view logs:

• Claude Desktop: Check the logs in ~/Library/Logs/Claude/mcp*.log (macOS) or %APPDATA%ClaudeLogsmcp*.log (Windows)
• Cline: Logs appear in the output console of the VSCode extension

Common Issues

1. "BROWSER_RENDERING_API environment variable is not set"

2. Make sure you've set the correct URL to your Cloudflare Worker in the MCP server configuration

3. "Cloudflare worker API is unavailable or not configured"

4. Verify that your Cloudflare Worker is deployed and running

5. Check that the URL is correct and accessible

6. "Browser binding is not available"

7. Ensure that you've configured the Browser Rendering binding in your Cloudflare Worker

8. "SCREENSHOTS KV binding is not available"

9. Ensure that you've configured the KV namespace binding in your Cloudflare Worker

Development

Project Structure

• src/index.ts: Main entry point
• src/server.ts: MCP server implementation
• src/browser-client.ts: Client for interacting with Cloudflare Browser Rendering
• src/content-processor.ts: Processes web content for LLM context
• puppeteer-worker.js: Cloudflare Worker implementation

Building

npm run build

Testing

The project includes a comprehensive test script that verifies all MCP tools are working correctly:

npm test

This will: 1. Start the MCP server 2. Test each tool with sample requests 3. Verify the responses 4. Provide a summary of test results

You can also run individual tests for specific components:

# Test the Puppeteer integration
npm run test:puppeteer

For the tests to work properly, make sure you have: 1. Built the project with npm run build 2. Set the BROWSER_RENDERING_API environment variable to your Cloudflare Worker URL 3. Deployed the Cloudflare Worker with the necessary bindings

License

MIT