Experimentos de renderizado del navegador Cloudflare y servidor MCP

Este proyecto demuestra cómo usar la renderización del navegador de Cloudflare para extraer contenido web para el contexto LLM. Incluye experimentos con la API REST y la API de enlace de trabajadores, así como una implementación de servidor MCP que puede utilizarse para proporcionar contexto web a los LLM.

Estructura del proyecto

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

Related MCP server: Fetch MCP Server

Prerrequisitos

• Node.js (v16 o posterior)

• Una cuenta de Cloudflare con la representación del navegador habilitada

• Mecanografiado

• CLI de Wrangler (para implementar el trabajador)

Instalación

1. Clonar el repositorio:

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

2. Instalar dependencias:

npm install

Configuración de Cloudflare Worker

1. Instalar el paquete Puppeteer de Cloudflare:

npm install @cloudflare/puppeteer

2. Configurar Wrangler:

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

[browser]
binding = "browser"

3. Implementar el trabajador:

npx wrangler deploy

4. Pon a prueba al trabajador:

node test-puppeteer.js

Ejecución de los experimentos

Experimento básico de API REST

Este experimento demuestra cómo utilizar la API REST de representación del navegador de Cloudflare para obtener y procesar contenido web:

npm run experiment:rest

Experimento de API de enlace de Puppeteer

Este experimento demuestra cómo usar la API de enlace de trabajadores de representación del navegador de Cloudflare con Puppeteer para una automatización más avanzada del navegador:

npm run experiment:puppeteer

Experimento de extracción de contenido

Este experimento demuestra cómo extraer y procesar contenido web específicamente para su uso como contexto en LLM:

npm run experiment:content

Servidor MCP

El servidor MCP proporciona herramientas para obtener y procesar contenido web mediante Cloudflare Browser Rendering para su uso como contexto en LLM.

Construyendo el servidor MCP

npm run build

Ejecución del servidor MCP

npm start

O, para el desarrollo:

npm run dev

Herramientas del servidor MCP

El servidor MCP proporciona las siguientes herramientas:

1. fetch_page : obtiene y procesa una página web para el contexto LLM

2. search_documentation : busca la documentación de Cloudflare y devuelve contenido relevante.

3. extract_structured_content : extrae contenido estructurado de una página web mediante selectores CSS

4. summarize_content - Resume el contenido web para un contexto LLM más conciso

Configuración

Para utilizar el punto final de representación del navegador de Cloudflare, configure la variable de entorno BROWSER_RENDERING_API :

export BROWSER_RENDERING_API=https://YOUR_WORKER_URL_HERE

Reemplace YOUR_WORKER_URL_HERE con la URL de su Cloudflare Worker implementado. Deberá reemplazar este marcador de posición en varios archivos:

1. En los archivos de prueba: test-puppeteer.js , examples/debugging-tools/debug-test.js , examples/testing/content-test.js

2. En la configuración del servidor MCP: cline_mcp_settings.json.example

3. En el cliente del navegador: src/browser-client.ts (como alternativa si la variable de entorno no está configurada)

Integración con Cline

Para integrar el servidor MCP con Cline, copie el archivo cline_mcp_settings.json.example en la ubicación adecuada:

cp cline_mcp_settings.json.example ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

O agregue la configuración a su archivo cline_mcp_settings.json existente.

Aprendizajes clave

1. La representación del navegador de Cloudflare requiere el paquete @cloudflare/puppeteer para interactuar con el enlace del navegador.

2. El patrón correcto para utilizar el enlace del navegador es:

   import puppeteer from '@cloudflare/puppeteer';
   
   // Then in your handler:
   const browser = await puppeteer.launch(env.browser);
   const page = await browser.newPage();

3. Al implementar un Worker que utiliza el enlace de representación del navegador, debe habilitar el indicador de compatibilidad nodejs_compat .

4. Cierre siempre el navegador después de usarlo para evitar fugas de recursos.

Licencia

Instituto Tecnológico de Massachusetts (MIT)