Servidor MCP de renderizado del navegador Cloudflare

Este servidor MCP (Protocolo de Contexto de Modelo) proporciona herramientas para obtener y procesar contenido web mediante la representación del navegador de Cloudflare para su uso como contexto en LLM. Está diseñado para funcionar con los entornos de cliente Claude y Cline.

Características

• Obtención de contenido web : obtenga y procese páginas web para el contexto LLM

• Búsqueda de documentación : Busque documentación de Cloudflare y obtenga contenido relevante

• Extracción de contenido estructurado : extraiga contenido estructurado de páginas web mediante selectores CSS

• Resumen de contenido : resuma el contenido web para un contexto LLM más conciso

• Captura de pantalla : toma capturas de pantalla de páginas web

Prerrequisitos

• Node.js v18 o superior

• Una cuenta de Cloudflare con acceso a la API de renderizado del navegador

• Un Cloudflare Worker implementado que utiliza el archivo puppeteer-worker.js proporcionado

Instalación

Instalación mediante herrería

Para instalar Cloudflare Browser Rendering para Claude Desktop automáticamente a través de Smithery :

1. Clonar este repositorio:

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

2. Instalar dependencias:

   npm install

3. Construir el proyecto:

   npm run build

Configuración de Cloudflare Worker

1. Implemente el archivo puppeteer-worker.js en Cloudflare Workers usando Wrangler:

   npx wrangler deploy

2. Asegúrate de configurar los siguientes enlaces en tu Cloudflare Worker:

   • Enlace de representación del navegador llamado browser

   • Enlace del espacio de nombres KV denominado SCREENSHOTS

3. Anote la URL de su trabajador implementado (por ejemplo, https://browser-rendering-api.yourusername.workers.dev )

Configuración

Para Claude Desktop

1. Abra 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

2. Agregue 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": [] } } }

3. Reiniciar Claude Desktop

Para Cline

1. Abra el archivo de configuración de Cline MCP:

   # 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

2. Agregue 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. Puede usar las siguientes herramientas:

página de búsqueda

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

Parámetros:

• url (obligatorio): URL para obtener

• maxContentLength (opcional): longitud máxima del contenido a devolver

Ejemplo:

búsqueda_documentación

Busca documentación de Cloudflare y devuelve contenido relevante.

Parámetros:

• query (obligatoria): Consulta de búsqueda

• maxResults (opcional): Número máximo de resultados a devolver

Ejemplo:

extraer_contenido_estructurado

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

Parámetros:

• url (obligatorio): URL de la que extraer el contenido

• selectors (obligatorios): Selectores CSS para extraer contenido

Ejemplo:

resumir_contenido

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

Parámetros:

• url (obligatorio): URL para resumir

• maxLength (opcional): Longitud máxima del resumen

Ejemplo:

tomar captura de pantalla

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

Parámetros:

• url (obligatorio): URL para tomar una captura de pantalla

• width (opcional): Ancho de la ventana gráfica en píxeles (predeterminado: 1280)

• height (opcional): altura de la ventana gráfica en píxeles (valor predeterminado: 800)

• fullPage (opcional): si se debe tomar una captura de pantalla de la página completa o solo de la ventana gráfica (predeterminado: falso)

Ejemplo:

Solución de problemas

Explotación florestal

El servidor MCP utiliza un registro completo con los siguientes prefijos:

• [Setup] : Inicialización y configuración

• [API] : Solicitudes y respuestas de API

• [Error] : Manejo de errores y depuración

Para ver los registros:

• Escritorio de Claude : Verifique 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 VSCode

Problemas comunes

1. "La variable de entorno BROWSER_RENDERING_API no está configurada"

   • Asegúrese de haber configurado la URL correcta para su Cloudflare Worker en la configuración del servidor MCP

2. La API de Cloudflare Worker no está disponible o no está configurada.

   • Verifique que su Cloudflare Worker esté implementado y en ejecución

   • Compruebe que la URL sea correcta y accesible

3. "La vinculación del navegador no está disponible"

   • Asegúrese de haber configurado el enlace de representación del navegador en su Cloudflare Worker

4. "El enlace KV de SCREENPHOTOS no está disponible"

   • Asegúrese de haber configurado el enlace del espacio de nombres KV en su 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 la representación del navegador de Cloudflare

• src/content-processor.ts : Procesa contenido web para el contexto LLM

• puppeteer-worker.js : Implementación de Cloudflare Worker

Edificio

Pruebas

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

Esto hará lo siguiente:

1. Iniciar el servidor MCP

2. Pruebe cada herramienta con solicitudes de muestra

3. Verificar las respuestas

4. Proporcionar un resumen de los resultados de las pruebas

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

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

1. Construí el proyecto con npm run build

2. Establezca la variable de entorno BROWSER_RENDERING_API en la URL de su trabajador de Cloudflare

3. Se implementó Cloudflare Worker con los enlaces necesarios

Licencia

Instituto Tecnológico de Massachusetts (MIT)