Servidor MCP de WebsiteScreenshot.online

Un servidor de Model Context Protocol que envuelve la API REST de WebsiteScreenshot.online y la expone como tres herramientas MCP que cualquier host compatible con MCP (Claude Desktop, Claude Code, Cursor, Cline, Continue, Zed, Raycast, …) puede invocar directamente.

⚡ La mayoría de los usuarios no necesitan este paquete

Si solo quieres que tu asistente de IA tome capturas de pantalla y grabe vídeos, usa el endpoint alojado — sin instalación, una línea de JSON:

https://websitescreenshot.online/api/mcp

Consulta los fragmentos de configuración por host para Claude Code, Claude Desktop, Cursor, Cline, Codex CLI, Gemini CLI, Continue, Windsurf y Zed.

Solo necesitas este paquete npm si se aplica una de las siguientes condiciones:

• 🛰️ Red aislada o restringida — tu host de IA no puede alcanzar websitescreenshot.online directamente.

• 🏠 WebsiteScreenshot autoalojado — ejecutas tu propia instancia y necesitas que SCREENSHOT_API_BASE apunte a ella.

• 🔧 Quieres auditar / modificar el servidor — este es el mismo código que ejecuta el endpoint alojado, solo que sin el envoltorio de Next.js.

En cualquier otro caso, el endpoint alojado es estrictamente mejor (sin dependencia de Node, actualizaciones automáticas, sin carga de mantenimiento).

Related MCP server: MCP Browser Screenshot Server

1. Requisitos previos

• Node.js ≥ 18.18 (se recomienda LTS)

• Una cuenta gratuita o de pago en WebsiteScreenshot.online

• Una clave de API de WebsiteScreenshot.online (consulta § 2)

2. Obtener una clave de API

1. Regístrate en https://websitescreenshot.online (OAuth de GitHub o correo electrónico).

2. Cambia a tu idioma si es necesario (p. ej. /en/dashboard/api-keys, /zh-CN/dashboard/api-keys).

3. Abre Panel de control → Claves de API → Crear nueva clave.

4. Copia la clave. Empieza con ws_ seguida de 64 caracteres hexadecimales (p. ej. ws_<tu-clave-aquí>) y se muestra una sola vez — guárdala en un lugar seguro.

El servidor MCP solo lee la clave del entorno. Nunca se registra, nunca se envía al modelo y este paquete nunca la escribe en disco.

3. Instalación y compilación

git clone https://github.com/Website-Screenshot-Online/websitescreenshot-mcp.git
cd websitescreenshot-mcp
npm install
npm run build

Eso es todo — build/index.js es un ejecutable autocontenido que puedes conectar a cualquier host MCP.

4. Configurar tu host MCP

Claude Desktop — claude_desktop_config.json

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) o %APPDATA%/Claude/claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "websitescreenshot": {
      "command": "node",
      "args": ["/absolute/path/to/websitescreenshot-mcp/build/index.js"],
      "env": {
        "SCREENSHOT_API_KEY": "ws_replace_with_your_real_api_key",
        "SCREENSHOT_REQUEST_TIMEOUT_MS": "60000"
      }
    }
  }
}

Claude Code — ~/.claude.json

{
  "mcpServers": {
    "websitescreenshot": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/websitescreenshot-mcp/build/index.js"],
      "env": {
        "SCREENSHOT_API_KEY": "ws_replace_with_your_real_api_key"
      }
    }
  }
}

Cursor / VS Code (.cursor/mcp.json)

{
  "mcpServers": {
    "websitescreenshot": {
      "command": "node",
      "args": ["/absolute/path/to/websitescreenshot-mcp/build/index.js"],
      "env": { "SCREENSHOT_API_KEY": "ws_replace_with_your_real_api_key" }
    }
  }
}

Cline / Continue / Zed / Raycast

Todos aceptan la misma forma de command + args + env — solo tienes que apuntarlos a build/index.js y pasar SCREENSHOT_API_KEY a través de env.

Reinicia el host después de editar su configuración y las tres herramientas aparecerán en su paleta de herramientas.

5. WebsiteScreenshot autoalojado

Si ejecutas tu propia instancia de WebsiteScreenshot, apunta el servidor a ella:

"env": {
  "SCREENSHOT_API_KEY": "ws_replace_with_your_real_api_key",
  "SCREENSHOT_API_BASE": "https://your-self-hosted.example.com"
}

6. Ejemplos de uso

No escribes JSON manualmente — lo hace el modelo. Estos son los payloads que el modelo enviará realmente.

Captura de pantalla — viewport de una página de aterrizaje

take_screenshot({
  url: "https://example.com",
  resolution: { width: 1440, height: 900 },
  format: "png",
  fullSize: false,
  blockAds: true,
  blockCookiesGdpr: true,
  delay: 1
})

Captura de pantalla — PDF de página completa para archivo

take_screenshot({
  url: "https://news.ycombinator.com",
  fullSize: true,
  format: "pdf"
})

Vídeo síncrono (≤ 6 min)

record_website_video({
  url: "https://stripe.com",
  format: "mp4",
  scrollMode: "smooth",
  smoothScrollSpeed: "normal",
  resolution: { width: 1280, height: 720 }
})

Vídeo asíncrono + sondeo de estado

record_website_video({ url: "https://stripe.com", async: true })
// → { "success": true, "requestId": "f7c1..." }

check_video_status({ requestId: "f7c1..." })
// → { "status": "pending", ... }  // poll again
// → { "status": "completed", "videoUrl": "https://...", ... }

7. Referencia de herramientas

take_screenshot

Forma de la respuesta:

{
  "success": true,
  "imageUrl": "https://websitescreenshot.online/screenshots/abc.png",
  "filename": "abc.png"
}

record_website_video

Los mismos campos que arriba más:

Respuesta síncrona:

{ "success": true, "videoUrl": "https://…/abc.webm", "filename": "abc.webm" }

Respuesta asíncrona:

{ "success": true, "requestId": "f7c1…" }

check_video_status

Respuesta:

{
  "status": "completed",
  "siteUrl": "https://…",
  "result": { "success": true, "videoUrl": "https://…", "filename": "abc.webm" },
  "updatedAt": 1730000000000
}

status es uno de pending | completed | error. Los resultados se conservan durante 24 horas y luego se eliminan.

8. Gestión de errores

Cada error de la API se asigna a un resultado MCP con isError: true que contiene los campos code, status y error. Códigos comunes:

Límites de velocidad: 10 capturas / min y 5 vídeos / min por clave de API.

9. Variables de entorno

10. Desarrollo

npm run dev       # tsx, hot reload stdio
npm run lint      # type-check only
npm run build     # emit build/index.js

Para apuntar el servidor de desarrollo a una API autoalojada:

SCREENSHOT_API_BASE=http://localhost:3000 \
SCREENSHOT_API_KEY=ws_dev_replace_me \
npm run dev

11. Licencia

MIT © Crownbyte LTD — consulta LICENSE.

Sitio web: https://websitescreenshot.online MCP alojado: https://websitescreenshot.online/api/mcp Documentación: https://websitescreenshot.online/en/docs/mcp Soporte: support@websitescreenshot.online