cloudflare-browser-rendering

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.

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

• Node.js (v16 or later)
• A Cloudflare account with Browser Rendering enabled
• TypeScript
• Wrangler CLI (for deploying the Worker)

1. Clone the repository:

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

2. Install dependencies:

npm install

1. Install the Cloudflare Puppeteer package:

npm install @cloudflare/puppeteer

2. Configure Wrangler:

# wrangler.toml
name = "browser-rendering-api"
main = "puppeteer-worker.js"
compatibility_date = "2023-10-30"
compatibility_flags = ["nodejs_compat"]

[browser]
binding = "browser"

3. Deploy the Worker:

npx wrangler deploy

4. Test the Worker:

node test-puppeteer.js

This experiment demonstrates how to use the Cloudflare Browser Rendering REST API to fetch and process web content:

npm run experiment:rest

This experiment demonstrates how to use the Cloudflare Browser Rendering Workers Binding API with Puppeteer for more advanced browser automation:

npm run experiment:puppeteer

This experiment demonstrates how to extract and process web content specifically for use as context in LLMs:

npm run experiment:content

The MCP server provides tools for fetching and processing web content using Cloudflare Browser Rendering for use as context in LLMs.

npm run build

npm start

Or, for development:

npm run dev

The MCP server provides the following tools:

1. fetch_page - Fetches and processes a web page for LLM context
2. search_documentation - Searches Cloudflare documentation and returns relevant content
3. extract_structured_content - Extracts structured content from a web page using CSS selectors
4. summarize_content - Summarizes web content for more concise LLM context

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:

1. In test files: test-puppeteer.js, examples/debugging-tools/debug-test.js, examples/testing/content-test.js
2. In the MCP server configuration: cline_mcp_settings.json.example
3. In the browser client: src/browser-client.ts (as a fallback if the environment variable is not set)

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.

1. Cloudflare Browser Rendering requires the @cloudflare/puppeteer package to interact with the browser binding.
2. 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();

3. When deploying a Worker that uses the Browser Rendering binding, you need to enable the nodejs_compat compatibility flag.
4. Always close the browser after use to avoid resource leaks.

MIT