@just-every/mcp-screenshot-website-fast

Captura rápida y eficiente de capturas de pantalla de páginas web, optimizada para herramientas de codificación CLI. Divide automáticamente las páginas completas en fragmentos de 1072x1072 para un procesamiento óptimo.

Descripción general

Diseñada específicamente para flujos de trabajo de visión por IA, esta herramienta captura capturas de pantalla de alta calidad con limitación automática de resolución y mosaicos para un procesamiento óptimo por parte de la API de Claude Vision y otros modelos de IA. Asegura que las capturas de pantalla tengan un tamaño perfecto de 1072x1072 píxeles (1.15 megapíxeles) para una máxima compatibilidad.

Related MCP server: ScreenshotOne MCP Server

Características

• 📸 Captura rápida de pantalla usando el navegador headless Puppeteer

• 🎯 Optimizado para Claude Vision con limitación automática de resolución (1072x1072 para 1.15 megapíxeles óptimos)

• 🔲 Mosaico automático - Las páginas completas se dividen automáticamente en mosaicos de 1072x1072

• 🎬 Captura de screencast - Graba series de capturas de pantalla a lo largo del tiempo con intervalos configurables

• 🔄 Contenido siempre fresco - Sin caché para asegurar capturas de pantalla actualizadas

• 📱 Viewports configurables para pruebas responsivas

• ⏱️ Estrategias de espera para contenido dinámico (networkidle, retrasos personalizados)

• 📄 Captura de página completa por defecto para capturas de pantalla completas

• 🎥 Exportación WebP animada - Guarda screencasts como archivos WebP animados de alta calidad

• 💉 Inyección de JavaScript - Ejecuta JS personalizado antes de la captura del screencast

• 📦 Dependencias mínimas para instalaciones rápidas de npm

• 🔌 Integración MCP para flujos de trabajo de IA fluidos

• 🪟 Lanzador compatible con Windows para uso de MCP instalado vía npm

• 🔋 Eficiente en recursos - Limpieza automática del navegador después de 60 segundos de inactividad

• 🧹 Gestión de memoria - Las páginas se cierran después de cada captura de pantalla para evitar fugas

Instalación

Claude Code

claude mcp add screenshot-website-fast -s user -- npx -y @just-every/mcp-screenshot-website-fast

VS Code

code --add-mcp '{"name":"screenshot-website-fast","command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}'

Cursor

cursor://anysphere.cursor-deeplink/mcp/install?name=screenshot-website-fast&config=eyJzY3JlZW5zaG90LXdlYnNpdGUtZmFzdCI6eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBqdXN0LWV2ZXJ5L21jcC1zY3JlZW5zaG90LXdlYnNpdGUtZmFzdCJdfX0=

IDEs de JetBrains

Configuración → Herramientas → Asistente de IA → Protocolo de Contexto de Modelo (MCP) → Agregar

Elija "Como JSON" y pegue:

{"command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}

JSON sin procesar (funciona en cualquier cliente MCP)

{
  "mcpServers": {
    "screenshot-website-fast": {
      "command": "npx",
      "args": ["-y", "@just-every/mcp-screenshot-website-fast"]
    }
  }
}

Coloque esto en el archivo mcp.json de su cliente (por ejemplo, .vscode/mcp.json, ~/.cursor/mcp.json, o .mcp.json para Claude).

Requisitos previos

• Node.js 20.x o superior

• npm o npx

• Chrome/Chromium (descargado automáticamente por Puppeteer)

Inicio rápido

Uso del servidor MCP

Una vez instalado en su IDE, las siguientes herramientas están disponibles:

Herramientas disponibles

• take_screenshot - Captura una captura de pantalla de alta calidad de una página web

  • Parámetros:

    • url (obligatorio): La URL HTTP/HTTPS a capturar

    • width (opcional): Ancho del viewport en píxeles (máx 1072, por defecto: 1072)

    • height (opcional): Alto del viewport en píxeles (máx 1072, por defecto: 1072)

    • fullPage (opcional): Captura de pantalla de página completa con mosaicos (por defecto: true)

    • waitUntil (opcional): Esperar hasta el evento: load, domcontentloaded, networkidle0, networkidle2 (por defecto: domcontentloaded)

    • waitFor (opcional): Tiempo de espera adicional en milisegundos

    • directory (opcional): Directorio para guardar capturas de pantalla - devuelve rutas de archivo en lugar de imágenes base64

• capture_selector - Captura una captura de pantalla de un elemento DOM específico coincidente con un selector CSS

  • Parámetros:

    • url (obligatorio): La URL HTTP/HTTPS a capturar

    • selector (obligatorio): Selector CSS para el elemento a capturar

    • width (opcional): Ancho del viewport en píxeles (máx 1072, por defecto: 1072)

    • height (opcional): Alto del viewport en píxeles (máx 1072, por defecto: 1072)

    • waitUntil (opcional): Esperar hasta el evento: load, domcontentloaded, networkidle0, networkidle2 (por defecto: domcontentloaded)

    • waitForMS (opcional): Tiempo de espera adicional en milisegundos

    • selectorTimeoutMS (opcional): Cuánto tiempo esperar a que aparezca el selector antes de fallar (por defecto: 5000)

Ejemplos de uso

Uso predeterminado (devuelve imágenes base64):

take_screenshot(url="https://example.com")

Guardar en directorio (devuelve rutas de archivo):

take_screenshot(url="https://example.com", directory="/path/to/screenshots")

Capturar un elemento específico:

capture_selector(url="https://example.com", selector="#main")

Al usar el parámetro directory:

• Las capturas de pantalla se guardan como archivos PNG con marcas de tiempo

• Se devuelven rutas de archivo en lugar de datos base64

• Para capturas de pantalla en mosaico, cada mosaico se guarda como un archivo separado

• El directorio se crea automáticamente si no existe

take_screencast

Captura una serie de capturas de pantalla a lo largo del tiempo para crear un screencast. Solo captura el mosaico superior (1072x1072) del viewport.

Parámetros

• url (obligatorio): La URL a capturar

• duration (opcional): Duración total en segundos (por defecto: 10)

• interval (opcional): Intervalo entre capturas de pantalla en segundos (por defecto: 2)

• jsEvaluate (opcional): Código JavaScript a ejecutar al inicio

• waitUntil (opcional): Estrategia de espera: 'load', 'domcontentloaded', 'networkidle0', 'networkidle2'

• waitForMS (opcional): Tiempo de espera adicional antes de comenzar

• directory (opcional): Guardar como WebP animado en el directorio (captura cada 1 segundo)

Ejemplos de uso

Screencast básico (5 fotogramas en 10 segundos):

take_screencast(url="https://example.com")

Temporización personalizada:

take_screencast(url="https://example.com", duration=15, interval=3)

Con ejecución de JavaScript:

take_screencast(
  url="https://example.com",
  jsEvaluate="document.body.style.backgroundColor = 'red';"
)

Guardar como WebP animado:

take_screencast(url="https://example.com", directory="/path/to/output")

Al usar el parámetro directory:

• Se crea un WebP animado con intervalos de 1 segundo

• Los fotogramas individuales también se guardan como archivos PNG

• La animación se repite para siempre por defecto

• WebP proporciona una calidad excelente:

  • Soporte de color completo (sin limitación de 256 colores)

  • Compresión eficiente para animaciones web

  • Perfecto para fondos degradados y animaciones suaves

  • Tamaños de archivo más pequeños en comparación con GIF con mejor calidad

Uso en desarrollo

Instalar

npm install
npm run build

Capturar captura de pantalla

# Full page with automatic tiling (default)
npm run dev capture https://example.com -o screenshot.png

# Viewport-only screenshot  
npm run dev capture https://example.com --no-full-page -o screenshot.png

# Wait for specific conditions
npm run dev capture https://example.com --wait-until networkidle0 --wait-for 2000 -o screenshot.png

Opciones de CLI

• -w, --width <píxeles> - Ancho del viewport (máx 1072, por defecto: 1072)

• -h, --height <píxeles> - Alto del viewport (máx 1072, por defecto: 1072)

• --no-full-page - Deshabilitar la captura de página completa y el mosaico

• --wait-until <evento> - Esperar hasta el evento: load, domcontentloaded, networkidle0, networkidle2

• --wait-for <ms> - Tiempo de espera adicional en milisegundos

• -o, --output <ruta> - Ruta del archivo de salida (obligatorio para salida en mosaico)

Característica de reinicio automático

El servidor MCP incluye capacidad de reinicio automático por defecto para una mayor fiabilidad:

• Reinicia automáticamente el servidor si falla

• Maneja excepciones no controladas y rechazos de promesas

• Implementa retroceso exponencial (máx 10 intentos en 1 minuto)

• Registra todos los intentos de reinicio para monitoreo

• Maneja con elegancia las señales de apagado (SIGINT, SIGTERM)

Para desarrollo/depuración sin reinicio automático:

# Run directly without restart wrapper
npm run serve:dev

Arquitectura

mcp-screenshot-website-fast/
├── src/
│   ├── internal/       # Core screenshot capture logic
│   ├── utils/          # Logger and utilities
│   ├── index.ts        # CLI entry point
│   ├── serve.ts        # MCP server entry point
│   └── serve-restart.ts # Auto-restart wrapper

Desarrollo

# Run in development mode
npm run dev capture https://example.com -o screenshot.png

# Build for production
npm run build

# Run tests
npm test

# Type checking
npm run typecheck

# Linting
npm run lint

¿Por qué esta herramienta?

Diseñada específicamente para flujos de trabajo de visión por IA:

1. Optimizado para la API de Claude Vision - Limitación automática de resolución a 1072x1072 píxeles (1.15 megapíxeles)

2. Mosaico automático - Páginas completas divididas en fragmentos perfectos para el procesamiento de IA

3. Siempre fresco - Sin caché para asegurar que obtenga el contenido más reciente

4. Nativo de MCP - Integración de primera clase con herramientas de desarrollo de IA

5. API simple - Interfaz limpia y directa para capturar capturas de pantalla

Contribuyendo

¡Las contribuciones son bienvenidas! Por favor:

1. Bifurque el repositorio

2. Cree una rama de características

3. Agregue pruebas para la nueva funcionalidad

4. Envíe una solicitud de extracción (pull request)

Solución de problemas

Problemas con Puppeteer

• Asegúrese de que Chrome/Chromium se pueda descargar

• Verifique la configuración del firewall

• Intente establecer PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true y proporcione un ejecutable personalizado

Calidad de la captura de pantalla

• Ajuste las dimensiones del viewport

• Use estrategias de espera apropiadas

• Verifique si el sitio requiere autenticación

Errores de tiempo de espera (Timeout)

• Aumente el tiempo de espera con la bandera --wait-for

• Use diferentes estrategias --wait-until

• Verifique si el sitio es accesible

Licencia

MIT