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

Schnelle, effiziente Erstellung von Webseiten-Screenshots – optimiert für CLI-Coding-Tools. Kachelt vollständige Seiten automatisch in 1072x1072-Blöcke für eine optimale Verarbeitung.

Übersicht

Dieses Tool wurde speziell für KI-Vision-Workflows entwickelt und erstellt hochwertige Screenshots mit automatischer Auflösungsbegrenzung und Kachelung für eine optimale Verarbeitung durch die Claude Vision API und andere KI-Modelle. Es stellt sicher, dass Screenshots für maximale Kompatibilität perfekt auf 1072x1072 Pixel (1,15 Megapixel) skaliert sind.

Related MCP server: ScreenshotOne MCP Server

Funktionen

• 📸 Schnelle Screenshot-Erstellung mit dem Puppeteer Headless-Browser

• 🎯 Optimiert für Claude Vision mit automatischer Auflösungsbegrenzung (1072x1072 für optimale 1,15 Megapixel)

• 🔲 Automatische Kachelung – Vollständige Seiten werden automatisch in 1072x1072-Kacheln unterteilt

• 🎬 Screencast-Aufnahme – Aufzeichnung von Screenshot-Serien über Zeiträume mit konfigurierbaren Intervallen

• 🔄 Immer aktuelle Inhalte – Kein Caching stellt sicher, dass die Screenshots aktuell sind

• 📱 Konfigurierbare Viewports für Responsive-Tests

• ⏱️ Wartestrategien für dynamische Inhalte (networkidle, benutzerdefinierte Verzögerungen)

• 📄 Vollständige Seitenaufnahme standardmäßig für komplette Webseiten-Screenshots

• 🎥 Animierter WebP-Export – Speichern von Screencasts als hochwertige animierte WebP-Dateien

• 💉 JavaScript-Injektion – Ausführen von benutzerdefiniertem JS vor der Screencast-Aufnahme

• 📦 Minimale Abhängigkeiten für schnelle npm-Installationen

• 🔌 MCP-Integration für nahtlose KI-Workflows

• 🪟 Windows-kompatibler Launcher für die Nutzung von per npm installierten MCPs

• 🔋 Ressourceneffizient – Automatische Browser-Bereinigung nach 60 Sekunden Inaktivität

• 🧹 Speicherverwaltung – Seiten werden nach jedem Screenshot geschlossen, um Lecks zu vermeiden

Installation

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=

JetBrains IDEs

Einstellungen → Tools → AI Assistant → Model Context Protocol (MCP) → Hinzufügen

Wählen Sie "As JSON" und fügen Sie Folgendes ein:

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

Raw JSON (funktioniert in jedem MCP-Client)

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

Fügen Sie dies in die mcp.json Ihres Clients ein (z. B. .vscode/mcp.json, ~/.cursor/mcp.json oder .mcp.json für Claude).

Voraussetzungen

• Node.js 20.x oder höher

• npm oder npx

• Chrome/Chromium (wird automatisch von Puppeteer heruntergeladen)

Schnellstart

MCP-Server-Nutzung

Sobald die Installation in Ihrer IDE erfolgt ist, stehen folgende Tools zur Verfügung:

Verfügbare Tools

• take_screenshot – Erstellt einen hochwertigen Screenshot einer Webseite

  • Parameter:

    • url (erforderlich): Die HTTP/HTTPS-URL für die Aufnahme

    • width (optional): Viewport-Breite in Pixeln (max. 1072, Standard: 1072)

    • height (optional): Viewport-Höhe in Pixeln (max. 1072, Standard: 1072)

    • fullPage (optional): Screenshot der gesamten Seite mit Kachelung (Standard: true)

    • waitUntil (optional): Warten bis Ereignis: load, domcontentloaded, networkidle0, networkidle2 (Standard: domcontentloaded)

    • waitFor (optional): Zusätzliche Wartezeit in Millisekunden

    • directory (optional): Verzeichnis zum Speichern der Screenshots – gibt Dateipfade anstelle von base64-Bildern zurück

• capture_selector – Erstellt einen Screenshot eines spezifischen DOM-Elements, das durch einen CSS-Selektor gefunden wird

  • Parameter:

    • url (erforderlich): Die HTTP/HTTPS-URL für die Aufnahme

    • selector (erforderlich): CSS-Selektor für das aufzunehmende Element

    • width (optional): Viewport-Breite in Pixeln (max. 1072, Standard: 1072)

    • height (optional): Viewport-Höhe in Pixeln (max. 1072, Standard: 1072)

    • waitUntil (optional): Warten bis Ereignis: load, domcontentloaded, networkidle0, networkidle2 (Standard: domcontentloaded)

    • waitForMS (optional): Zusätzliche Wartezeit in Millisekunden

    • selectorTimeoutMS (optional): Wie lange auf das Erscheinen des Selektors gewartet werden soll, bevor abgebrochen wird (Standard: 5000)

Nutzungsbeispiele

Standardnutzung (gibt base64-Bilder zurück):

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

In Verzeichnis speichern (gibt Dateipfade zurück):

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

Ein spezifisches Element aufnehmen:

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

Bei Verwendung des directory-Parameters:

• Screenshots werden als PNG-Dateien mit Zeitstempeln gespeichert

• Dateipfade werden anstelle von base64-Daten zurückgegeben

• Bei gekachelten Screenshots wird jede Kachel als separate Datei gespeichert

• Das Verzeichnis wird automatisch erstellt, falls es nicht existiert

take_screencast

Erstellt eine Serie von Screenshots über einen Zeitraum, um einen Screencast zu erzeugen. Erfasst nur die oberste Kachel (1072x1072) des Viewports.

Parameter

• url (erforderlich): Die URL für die Aufnahme

• duration (optional): Gesamtdauer in Sekunden (Standard: 10)

• interval (optional): Intervall zwischen Screenshots in Sekunden (Standard: 2)

• jsEvaluate (optional): JavaScript-Code, der zu Beginn ausgeführt werden soll

• waitUntil (optional): Wartestrategie: 'load', 'domcontentloaded', 'networkidle0', 'networkidle2'

• waitForMS (optional): Zusätzliche Wartezeit vor dem Start

• directory (optional): Als animiertes WebP im Verzeichnis speichern (erfasst jede Sekunde)

Nutzungsbeispiele

Einfacher Screencast (5 Frames über 10 Sekunden):

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

Benutzerdefiniertes Timing:

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

Mit JavaScript-Ausführung:

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

Als animiertes WebP speichern:

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

Bei Verwendung des directory-Parameters:

• Ein animiertes WebP wird mit 1-Sekunden-Intervallen erstellt

• Einzelne Frames werden ebenfalls als PNG-Dateien gespeichert

• Die Animation läuft standardmäßig in einer Endlosschleife

• WebP bietet exzellente Qualität:

  • Volle Farbuntersützung (keine 256-Farben-Beschränkung)

  • Effiziente Komprimierung für Web-Animationen

  • Perfekt für Verlaufs-Hintergründe und flüssige Animationen

  • Kleinere Dateigrößen im Vergleich zu GIF bei besserer Qualität

Entwicklung

Installation

npm install
npm run build

Screenshot erstellen

# 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

CLI-Optionen

• -w, --width <pixels> - Viewport-Breite (max. 1072, Standard: 1072)

• -h, --height <pixels> - Viewport-Höhe (max. 1072, Standard: 1072)

• --no-full-page - Deaktiviert die Aufnahme der gesamten Seite und die Kachelung

• --wait-until <event> - Warten bis Ereignis: load, domcontentloaded, networkidle0, networkidle2

• --wait-for <ms> - Zusätzliche Wartezeit in Millisekunden

• -o, --output <path> - Ausgabedateipfad (erforderlich für gekachelte Ausgabe)

Auto-Restart-Funktion

Der MCP-Server enthält standardmäßig eine automatische Neustartfunktion für verbesserte Zuverlässigkeit:

• Startet den Server automatisch neu, wenn er abstürzt

• Behandelt unbehandelte Ausnahmen und Promise-Rejections

• Implementiert exponentielles Backoff (max. 10 Versuche in 1 Minute)

• Protokolliert alle Neustartversuche zur Überwachung

• Behandelt Shutdown-Signale (SIGINT, SIGTERM) ordnungsgemäß

Für Entwicklung/Debugging ohne automatischen Neustart:

# Run directly without restart wrapper
npm run serve:dev

Architektur

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

Entwicklung

# 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

Warum dieses Tool?

Speziell für KI-Vision-Workflows entwickelt:

1. Optimiert für Claude Vision API - Automatische Auflösungsbegrenzung auf 1072x1072 Pixel (1,15 Megapixel)

2. Automatische Kachelung - Vollständige Seiten werden für die KI-Verarbeitung in perfekte Blöcke unterteilt

3. Immer frisch - Kein Caching stellt sicher, dass Sie die neuesten Inhalte erhalten

4. MCP-nativ - Erstklassige Integration in KI-Entwicklungstools

5. Einfache API - Saubere, unkomplizierte Schnittstelle für die Screenshot-Erstellung

Mitwirken

Beiträge sind willkommen! Bitte:

1. Forken Sie das Repository

2. Erstellen Sie einen Feature-Branch

3. Fügen Sie Tests für neue Funktionen hinzu

4. Senden Sie einen Pull Request

Fehlerbehebung

Puppeteer-Probleme

• Stellen Sie sicher, dass Chrome/Chromium heruntergeladen werden kann

• Überprüfen Sie die Firewall-Einstellungen

• Versuchen Sie, PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true zu setzen und eine benutzerdefinierte ausführbare Datei anzugeben

Screenshot-Qualität

• Passen Sie die Viewport-Dimensionen an

• Verwenden Sie geeignete Wartestrategien

• Prüfen Sie, ob die Seite eine Authentifizierung erfordert

Timeout-Fehler

• Erhöhen Sie die Wartezeit mit dem --wait-for-Flag

• Verwenden Sie andere --wait-until-Strategien

• Prüfen Sie, ob die Seite erreichbar ist

Lizenz

MIT