amotivv 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.

• 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

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

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

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:

   • Browser Rendering binding named browser
   • KV namespace binding named SCREENSHOTS

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

1. Open the Claude Desktop configuration file:

   # macOS
   code ~/Library/Application\ Support/Claude/claude_desktop_config.json
   
   # Windows
   code %APPDATA%\Claude\claude_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

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%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_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": []
       }
     }
   }

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

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/?

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".

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.

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.

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.

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%\Claude\Logs\mcp*.log (Windows)
• Cline: Logs appear in the output console of the VSCode extension

1. "BROWSER_RENDERING_API environment variable is not set"

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

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

   • Verify that your Cloudflare Worker is deployed and running
   • Check that the URL is correct and accessible

3. "Browser binding is not available"

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

4. "SCREENSHOTS KV binding is not available"

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

• 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

npm run build

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

MIT