Cloudflare Browser Rendering

Proporciona contexto web a los LLMs utilizando la API de Browser Rendering de Cloudflare.

Documentación

Servidor MCP de Cloudflare Browser Rendering

Este servidor MCP (Model Context Protocol) proporciona herramientas para obtener y procesar contenido web utilizando Cloudflare Browser Rendering para usarlo como contexto en LLMs. Está diseñado para funcionar tanto con entornos de cliente Claude como Cline.

cloudflare-browser-rendering-mcp MCP server

Características

Obtención de contenido web: Obtiene y procesa páginas web para contexto de LLM
Búsqueda en documentación: Busca en la documentación de Cloudflare y devuelve contenido relevante
Extracción de contenido estructurado: Extrae contenido estructurado de páginas web mediante selectores CSS
Resumen de contenido: Resume contenido web para un contexto de LLM más conciso
Captura de pantallas: Toma capturas de pantalla de páginas web

Requisitos previos

Node.js v18 o superior
Una cuenta de Cloudflare con acceso a la API de Browser Rendering
Un Cloudflare Worker desplegado utilizando el archivo puppeteer-worker.js proporcionado

Instalación

Instalación mediante Smithery

Para instalar Cloudflare Browser Rendering para Claude Desktop automáticamente mediante Smithery:

npx -y @smithery/cli install @amotivv/cloudflare-browser-rendering-mcp --client claude

Clona este repositorio:

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

Instala las dependencias:
```
npm install
```
Compila el proyecto:
```
npm run build
```

Configuración del Cloudflare Worker

Despliega el archivo puppeteer-worker.js en Cloudflare Workers usando Wrangler:
```
npx wrangler deploy
```
Asegúrate de configurar los siguientes enlaces en tu Cloudflare Worker:
- Enlace de Browser Rendering llamado browser
- Enlace de espacio de nombres KV llamado SCREENSHOTS
Anota la URL de tu worker desplegado (por ejemplo, https://browser-rendering-api.yourusername.workers.dev)

Configuración

Para Claude Desktop

Abre el archivo de configuración de Claude Desktop:

# macOS
code ~/Library/Application\ Support/Claude/claude_desktop_config.json

# Windows
code %APPDATA%\Claude\claude_desktop_config.json

Añade la configuración del servidor MCP:

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

Reinicia Claude Desktop

Para Cline

Abre el archivo de configuración de MCP de Cline:

# 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

Añade la configuración del servidor MCP:

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

Uso

Una vez configurado, el servidor MCP estará disponible tanto para Claude Desktop como para Cline. Puedes utilizar las siguientes herramientas:

fetch_page

Obtiene y procesa una página web para contexto de LLM.

Parámetros:

url (obligatorio): URL a obtener
maxContentLength (opcional): Longitud máxima del contenido a devolver

Ejemplo:

Can you fetch and summarize the content from https://developers.cloudflare.com/browser-rendering/?

search_documentation

Busca en la documentación de Cloudflare y devuelve contenido relevante.

Parámetros:

query (obligatorio): Consulta de búsqueda
maxResults (opcional): Número máximo de resultados a devolver

Ejemplo:

Search the Cloudflare documentation for information about "browser rendering API".

extract_structured_content

Extrae contenido estructurado de una página web mediante selectores CSS.

Parámetros:

url (obligatorio): URL de la que extraer contenido
selectors (obligatorio): Selectores CSS para extraer contenido

Ejemplo:

Extract the main heading and first paragraph from https://developers.cloudflare.com/browser-rendering/ using the selectors h1 and p.

summarize_content

Resume contenido web para un contexto de LLM más conciso.

Parámetros:

url (obligatorio): URL a resumir
maxLength (opcional): Longitud máxima del resumen

Ejemplo:

Summarize the content from https://developers.cloudflare.com/browser-rendering/ in 300 words or less.

take_screenshot

Toma una captura de pantalla de una página web.

Parámetros:

url (obligatorio): URL de la que tomar la captura de pantalla
width (opcional): Ancho del viewport en píxeles (predeterminado: 1280)
height (opcional): Alto del viewport en píxeles (predeterminado: 800)
fullPage (opcional): Si se debe tomar una captura de pantalla de la página completa o solo del viewport (predeterminado: false)

Ejemplo:

Take a screenshot of https://developers.cloudflare.com/browser-rendering/ with a width of 1024 pixels.

Solución de problemas

Registro de actividad

El servidor MCP utiliza un registro de actividad exhaustivo con los siguientes prefijos:

[Setup]: Inicialización y configuración
[API]: Solicitudes y respuestas de la API
[Error]: Manejo de errores y depuración

Para ver los registros:

Claude Desktop: Consulta los registros en ~/Library/Logs/Claude/mcp*.log (macOS) o %APPDATA%\Claude\Logs\mcp*.log (Windows)
Cline: Los registros aparecen en la consola de salida de la extensión de VSCode

Problemas comunes

"BROWSER_RENDERING_API environment variable is not set"
- Asegúrate de haber configurado la URL correcta de tu Cloudflare Worker en la configuración del servidor MCP
"Cloudflare worker API is unavailable or not configured"
- Verifica que tu Cloudflare Worker esté desplegado y en ejecución
- Comprueba que la URL sea correcta y accesible
"Browser binding is not available"
- Asegúrate de haber configurado el enlace de Browser Rendering en tu Cloudflare Worker
"SCREENSHOTS KV binding is not available"
- Asegúrate de haber configurado el enlace del espacio de nombres KV en tu Cloudflare Worker

Desarrollo

Estructura del proyecto

src/index.ts: Punto de entrada principal
src/server.ts: Implementación del servidor MCP
src/browser-client.ts: Cliente para interactuar con Cloudflare Browser Rendering
src/content-processor.ts: Procesa contenido web para contexto de LLM
puppeteer-worker.js: Implementación del Cloudflare Worker

Compilación

npm run build

Pruebas

El proyecto incluye un script de prueba exhaustivo que verifica que todas las herramientas MCP funcionen correctamente:

npm test

Esto:

Iniciará el servidor MCP
Probará cada herramienta con solicitudes de ejemplo
Verificará las respuestas
Proporcionará un resumen de los resultados de las pruebas

También puedes ejecutar pruebas individuales para componentes específicos:

# Test the Puppeteer integration
npm run test:puppeteer

Para que las pruebas funcionen correctamente, asegúrate de tener:

Compilado el proyecto con npm run build
Configurada la variable de entorno BROWSER_RENDERING_API con la URL de tu Cloudflare Worker
Desplegado el Cloudflare Worker con los enlaces necesarios

Licencia

MIT