Cloudflare Browser Rendering Experiments & MCP Server
This project demonstrates how to use Cloudflare Browser Rendering to extract web content for LLM context. It includes experiments with the REST API and Workers Binding API, as well as an MCP server implementation that can be used to provide web context to LLMs.
Project Structure
cloudflare-browser-rendering/
├── examples/ # Example implementations and utilities
│ ├── basic-worker-example.js # Basic Worker with Browser Rendering
│ ├── minimal-worker-example.js # Minimal implementation
│ ├── debugging-tools/ # Tools for debugging
│ │ └── debug-test.js # Debug test utility
│ └── testing/ # Testing utilities
│ └── content-test.js # Content testing utility
├── experiments/ # Educational experiments
│ ├── basic-rest-api/ # REST API tests
│ ├── puppeteer-binding/ # Workers Binding API tests
│ └── content-extraction/ # Content processing tests
├── src/ # MCP server source code
│ ├── index.ts # Main entry point
│ ├── server.ts # MCP server implementation
│ ├── browser-client.ts # Browser Rendering client
│ └── content-processor.ts # Content processing utilities
├── puppeteer-worker.js # Cloudflare Worker with Browser Rendering binding
├── test-puppeteer.js # Tests for the main implementation
├── wrangler.toml # Wrangler configuration for the Worker
├── cline_mcp_settings.json.example # Example MCP settings for Cline
├── .gitignore # Git ignore file
└── LICENSE # MIT License
Prerequisites
- Node.js (v16 or later)
- A Cloudflare account with Browser Rendering enabled
- TypeScript
- Wrangler CLI (for deploying the Worker)
Installation
- Clone the repository:
git clone https://github.com/yourusername/cloudflare-browser-rendering.git
cd cloudflare-browser-rendering
- Install dependencies:
npm install
Cloudflare Worker Setup
- Install the Cloudflare Puppeteer package:
npm install @cloudflare/puppeteer
- Configure Wrangler:
# wrangler.toml
name = "browser-rendering-api"
main = "puppeteer-worker.js"
compatibility_date = "2023-10-30"
compatibility_flags = ["nodejs_compat"]
[browser]
binding = "browser"
- Deploy the Worker:
npx wrangler deploy
- Test the Worker:
node test-puppeteer.js
Running the Experiments
Basic REST API Experiment
This experiment demonstrates how to use the Cloudflare Browser Rendering REST API to fetch and process web content:
npm run experiment:rest
Puppeteer Binding API Experiment
This experiment demonstrates how to use the Cloudflare Browser Rendering Workers Binding API with Puppeteer for more advanced browser automation:
npm run experiment:puppeteer
Content Extraction Experiment
This experiment demonstrates how to extract and process web content specifically for use as context in LLMs:
npm run experiment:content
MCP Server
The MCP server provides tools for fetching and processing web content using Cloudflare Browser Rendering for use as context in LLMs.
Building the MCP Server
npm run build
Running the MCP Server
npm start
Or, for development:
npm run dev
MCP Server Tools
The MCP server provides the following tools:
fetch_page- Fetches and processes a web page for LLM contextsearch_documentation- Searches Cloudflare documentation and returns relevant contentextract_structured_content- Extracts structured content from a web page using CSS selectorssummarize_content- Summarizes web content for more concise LLM context
Configuration
To use your Cloudflare Browser Rendering endpoint, set the BROWSER_RENDERING_API environment variable:
export BROWSER_RENDERING_API=https://YOUR_WORKER_URL_HERE
Replace YOUR_WORKER_URL_HERE with the URL of your deployed Cloudflare Worker. You'll need to replace this placeholder in several files:
- In test files:
test-puppeteer.js,examples/debugging-tools/debug-test.js,examples/testing/content-test.js - In the MCP server configuration:
cline_mcp_settings.json.example - In the browser client:
src/browser-client.ts(as a fallback if the environment variable is not set)
Integrating with Cline
To integrate the MCP server with Cline, copy the cline_mcp_settings.json.example file to the appropriate location:
cp cline_mcp_settings.json.example ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
Or add the configuration to your existing cline_mcp_settings.json file.
Key Learnings
- Cloudflare Browser Rendering requires the
@cloudflare/puppeteerpackage to interact with the browser binding. - The correct pattern for using the browser binding is:
import puppeteer from '@cloudflare/puppeteer'; // Then in your handler: const browser = await puppeteer.launch(env.browser); const page = await browser.newPage(); - When deploying a Worker that uses the Browser Rendering binding, you need to enable the
nodejs_compatcompatibility flag. - Always close the browser after use to avoid resource leaks.
License
MIT