Cloudflare Browser Rendering

🚀 Cloudflare Browser Rendering Experiments and MCP Server

This project demonstrates how to use Cloudflare browser rendering to extract web content as context for LLMs. 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 page context for LLMs.

🚀 Quick Start

This project aims to explore the application of Cloudflare browser rendering technology in different scenarios through experiments and implementations. It includes in - depth research on the REST API and Workers Binding API and provides a complete MCP (Management Control Plane) server implementation to demonstrate how to use these technologies to process web page content.

✨ Features

• Conduct experiments on Cloudflare's REST API and Workers Binding API.
• Provide a complete MCP server implementation for processing web page content.
• Include various example implementations, debugging, and testing tools.

📦 Installation

Prerequisites

• Node.js (v16 or higher)
• A Cloudflare account with browser rendering enabled
• TypeScript
• Wrangler CLI (for deploying Workers)

Steps

1. Clone the project repository:

   git clone [your - repository - url]
   cd cloudflare-browser-rendering
   

2. Install dependencies:

   npm install
   

3. Start the MCP server:

   npm start
   

💻 Usage Examples

Project Structure

cloudflare-browser-rendering/
├── examples/                   # Example implementations and tools
│   ├── basic-worker-example.js # Basic Worker example with browser rendering
│   ├── minimal-worker-example.js # Minimal implementation example
│   ├── debugging-tools/        # Debugging tools
│   │   └── debug-test.js       # Debugging test tool
│   └── testing/                # Testing tools
│       └── content-test.js     # Content testing tool
├── experiments/                # Educational experiments
│   ├── basic-rest-api/         # REST API testing
│   ├── puppeteer-binding/      # Workers Binding API testing
│   └── content-extraction/     # Content processing testing
├── 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 tool
├── puppeteer-worker.js         # Browser binding example for Cloudflare Worker
├── test-puppeteer.js           # Main implementation test
├── wrangler.toml               # Wrangler configuration file (for deploying Workers)
├── cline_mcp_settings.json.example # Example MCP settings for Cline
├── .gitignore                  # Git ignore file
└── LICENSE                     # MIT License

Experiment Modules

1. REST API - based Browser Rendering Experiment

• Basic Worker Example (basic - worker - example.js): Demonstrates how to use browser rendering technology in a Cloudflare Worker to crawl and parse web page content.
• Minimal Implementation (minimal - worker - example.js): A streamlined browser rendering implementation for quick functionality verification.

2. Workers Binding API Experiment

• Puppeteer Binding (puppeteer - binding/): Demonstrates how to use the @cloudflare/puppeteer library in a Cloudflare environment to operate the browser context.
• Content Extraction (content - extraction/): Methods for crawling and parsing content from different web page structures.

MCP Server Implementation

Function Overview

The MCP server is a central hub for managing and controlling browser rendering tasks. It provides the following functions:

1. Receive requests and distribute them to different processing modules.
2. Manage browser contexts to avoid resource leakage.
3. Provide API interfaces for integration with other systems.

Detailed Configuration

• Environment Variables:
  • BROWSER_BINDING: Specifies the URL of the browser binding service (default value is http://localhost:8080).
• Logging:
  • Uses the winston library for log output, supporting different levels of log recording and file storage.

Integration and Deployment

Deployment Guide

1. Configure environment variables:

   export BROWSER_BINDING=http://your - binding - service - url:port
   

2. Build and deploy:

   npm run build
   npm start
   

3. Access the API:
   • Base URL: http://localhost:3000
   • Available interfaces:
     • POST /render: Submit the URL of the web page to be rendered.
     • GET /results: Get the latest rendering results.

🔧 Technical Details

Resource Management

When using the browser context in a Worker, ensure that resources are released in a timely manner to avoid leakage.

Error Handling

It is recommended to add appropriate error - handling mechanisms at each critical step and record detailed log information for troubleshooting.

Performance Optimization

Adjust rendering parameters and parallel processing capabilities according to actual needs to achieve optimal performance.

📄 License

This project is licensed under the MIT license.