Cloudflare Browser Rendering MCP Server

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:

   • 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)

Configuration

For Claude Desktop

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

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

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

... [View full README on GitHub](https://github.com/amotivv/cloudflare-browser-rendering-mcp#readme)