Safari Screenshot MCP Server

local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

  • Uses macOS' native screencapture for taking high-quality screenshots

  • Allows taking screenshots of websites using Safari on macOS

Captura de pantalla de Safari

Un servidor MCP Node.js para capturar capturas de pantalla usando Safari en macOS.

Características

  • Capturar capturas de pantalla de ventanas en tamaños específicos
  • Admite diferentes niveles de zoom
  • Tiempos de espera configurables para la carga de la página
  • Limpiar después de la captura
  • Calidad de captura de pantalla nativa de macOS

Uso

import { takeScreenshot } from './screenshot.js'; // Basic window screenshot await takeScreenshot({ url: 'https://www.apple.com', outputPath: './screenshot.png', width: 1024, // Optional: window width (default: 1024) height: 768, // Optional: window height (default: 768) waitTime: 3, // Optional: seconds to wait for load (default: 3) zoomLevel: 1, // Optional: page zoom level (default: 1) }); // Responsive design testing await takeScreenshot({ url: 'https://www.apple.com', outputPath: './mobile.png', width: 375, // iPhone SE width height: 667, // iPhone SE height zoomLevel: 1, }); // High-resolution capture await takeScreenshot({ url: 'https://www.apple.com', outputPath: './desktop-hd.png', width: 1920, // Full HD width height: 1080, // Full HD height waitTime: 5, // Wait longer for HD content zoomLevel: 0.8, // Zoom out slightly });

Requisitos

  • macOS
  • Safari
  • Node.js >= 14.0.0
  • El terminal necesita permisos de accesibilidad (Preferencias del Sistema → Seguridad y Privacidad → Privacidad → Accesibilidad)

Instalación

npm install safari-screenshot

Opciones

OpciónTipoPor defectoDescripción
URLcadenarequeridoLa URL para capturar
ruta de salidacadenaautoDónde guardar la captura de pantalla (predeterminado: ./screenshots/[nombre de host]-[marca de tiempo].png)
anchonúmero1024Ancho de la ventana en píxeles
alturanúmero768Altura de la ventana en píxeles
tiempo de esperanúmero3Segundos de espera para la carga de la página
nivel de zoomnúmero1Nivel de zoom de la página (1 = 100%)

Tamaños de ventana gráfica comunes

El módulo se prueba con estos tamaños de ventana gráfica comunes:

  • Escritorio: 1920×1080 (Full HD)
  • Portátil: 1366×768
  • Tableta horizontal: 1024×768
  • Tableta vertical: 768×1024
  • Móvil grande: 428×926 (iPhone 12 Pro Max)
  • Móvil Medio: 390×844 (iPhone 12 Pro)
  • Móvil pequeño: 375×667 (iPhone SE)

Cómo funciona

  1. Abre Safari con el tamaño de ventana especificado
  2. Carga la URL y espera a que se cargue la página.
  3. Aplica nivel de zoom si se especifica
  4. Utiliza la captura de pantalla nativa de macOS para obtener resultados con píxeles perfectos.
  5. Verifica que la captura de pantalla se haya realizado correctamente
  6. Limpia las ventanas de Safari

Permisos

Este paquete requiere permisos de Eventos del sistema para funcionar:

  1. Abra Preferencias del Sistema > Seguridad y privacidad > Privacidad > Accesibilidad
  2. Agregue Terminal (o su IDE) a la lista de aplicaciones permitidas

Uso con cursor

Configuración en el cursor

  1. Cursor abierto
  2. Vaya a configuración, "Agregar servidor MCP"
  3. En el cuadro de diálogo de configuración:
    • Nombre: safari-screenshot
    • Tipo: command
    • Comando: npx -y @rogerheykoop/mcp-safari-screenshot

    O para el desarrollo local:

    • Comando: npx -y /path/to/mcp-safari-screenshot/server.js

Comandos de ejemplo

Después de conectarse al servidor en Cursor, puede utilizar estos comandos:

Take a screenshot of https://apple.com at desktop size

Respuesta: Capturará a 1920×1080

Capture https://apple.com on iPhone 12 Pro

Respuesta: Capturará a 390×844

Screenshot github.com at 50% zoom

Respuesta: Capturará con zoomNivel: 0,5

Parámetros admitidos

El servidor MCP entiende estos conceptos:

  • Nombres de dispositivos (por ejemplo, "iPhone", "iPad", "escritorio")
  • Dimensiones (por ejemplo, "1024x768")
  • Niveles de zoom (por ejemplo, "zoom 50%", "zoom 2x")
  • Tiempos de espera (por ejemplo, "esperar 5 segundos")

Flujos de trabajo de ejemplo

  1. Pruebas de respuesta
    Take screenshots of apple.com on iPhone, iPad, and desktop
  2. Prueba de Zoom
    Capture github.com at 75% zoom and 125% zoom
  3. Tamaño personalizado
    Screenshot example.com at 1440x900

Consejos

  • Las capturas de pantalla se guardan en el directorio screenshots de forma predeterminada.
  • Los nombres de los dispositivos establecen automáticamente las dimensiones apropiadas
  • El servidor se encarga de la limpieza de las ventanas de Safari.
  • Utilice "esperar X segundos" para páginas de carga lenta

Solución de problemas

Si encuentra problemas:

  1. Comprobar que la terminal tiene permisos de accesibilidad
  2. Verificar que Safari no esté en modo de navegación privada
  3. Asegúrese de que el directorio de trabajo sea escribible
  4. Verifique la consola de Cursor para ver si hay mensajes de error

Licencia

Instituto Tecnológico de Massachusetts (MIT)

Pruebas locales

Puede probar la implementación de MCP directamente:

# Test discovery echo '{"type":"discover"}' | npx -y ./server.js # Test screenshot echo '{"type":"execute","tool":"take_screenshot","input":"Take a screenshot of https://apple.com","requestId":"123"}' | npx -y ./server.js

Respuestas esperadas:

  1. Discover recuperará las capacidades
  2. Se ejecutará:
    • Registrar el progreso en stderr
    • Devuelve el resultado JSON a la salida estándar
    • Guardar captura de pantalla en ./screenshots/

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

Permite capturar capturas de pantalla nativas de macOS de alta calidad usando Safari a través de un servidor Node.js, admitiendo varios tamaños, niveles de zoom y tiempos de espera de carga.

  1. Features
    1. Usage
      1. Requirements
        1. Installation
          1. Options
            1. Common Viewport Sizes
              1. How It Works
                1. Permissions
                  1. Using with Cursor
                    1. Setup in Cursor
                    2. Example Commands
                    3. Supported Parameters
                    4. Example Workflows
                    5. Tips
                    6. Troubleshooting
                  2. License
                    1. Testing Locally
                      ID: q6bgsw64aw