Webpage Screenshot MCP Server

Screenshot der Webseite MCP-Server

Ein MCP-Server (Model Context Protocol), der mit Puppeteer Screenshots von Webseiten erstellt. Dieser Server ermöglicht es KI-Agenten, Webanwendungen visuell zu überprüfen und ihren Fortschritt bei der Generierung von Web-Apps zu verfolgen.

Merkmale

• Screenshots ganzer Seiten : Erfassen Sie ganze Webseiten oder nur den Ansichtsbereich
• Element-Screenshots : Zielen Sie mit CSS-Selektoren auf bestimmte Elemente
• Mehrere Formate : Unterstützung für die Formate PNG, JPEG und WebP
• Anpassbare Optionen : Festlegen der Ansichtsfenstergröße, Bildqualität, Wartebedingungen und Verzögerungen
• Base64-Kodierung : Gibt Screenshots als Base64-kodierte Bilder zurück, für eine einfache Integration
• Authentifizierungsunterstützung : Manuelle Anmeldung und Cookie-Persistenz
• Standardbrowserintegration : Verwenden Sie den Standardbrowser Ihres Systems für ein natürlicheres Erlebnis
• Sitzungspersistenz : Halten Sie Browsersitzungen für mehrstufige Workflows geöffnet

Installation

Verwendung

Werkzeuge

Dieser MCP-Server bietet mehrere Tools:

1. Anmelden und warten

Öffnet eine Webseite in einem sichtbaren Browserfenster zur manuellen Anmeldung, wartet, bis der Benutzer die Anmeldung abgeschlossen hat, und speichert dann Cookies.

• url (erforderlich): Die URL der Anmeldeseite
• waitMinutes (optional): Maximale Wartezeit in Minuten für die Anmeldung (Standard: 5)
• successIndicator (optional): CSS-Selektor oder URL-Muster, das eine erfolgreiche Anmeldung anzeigt
• useDefaultBrowser (optional): Ob der Standardbrowser des Systems verwendet werden soll (Standard: true)

2. Screenshot-Seite

Erstellt einen Screenshot einer bestimmten URL und gibt ihn als Base64-codiertes Bild zurück.

• url (erforderlich): Die URL der Webseite, von der ein Screenshot erstellt werden soll
• fullPage (optional): Ob die ganze Seite oder nur der Ansichtsbereich erfasst werden soll (Standard: true)
• width (optional): Ansichtsfensterbreite in Pixeln (Standard: 1920)
• height (optional): Höhe des Ansichtsfensters in Pixeln (Standard: 1080)
• format (optional): Bildformat – „png“, „jpeg“ oder „webp“ (Standard: „png“)
• quality (optional): Qualität des Bildes (0-100), gilt nur für JPEG und WebP
• waitFor (optional): Wann soll die Seite als geladen betrachtet werden – „load“, „domcontentloaded“, „networkidle0“ oder „networkidle2“ (Standard: „networkidle2“)
• delay (optional): Zusätzliche Verzögerung in Millisekunden nach dem Laden der Seite (Standard: 0)
• useSavedAuth (optional): Ob gespeicherte Cookies vom vorherigen Login verwendet werden sollen (Standard: true)
• reuseAuthPage (optional): Ob die vorhandene authentifizierte Seite verwendet werden soll (Standard: false)
• useDefaultBrowser (optional): Ob der Standardbrowser des Systems verwendet werden soll (Standard: false)
• visibleBrowser (optional): Ob das Browserfenster angezeigt werden soll (Standard: false)

3. Screenshot-Element

Erstellt mithilfe eines CSS-Selektors einen Screenshot eines bestimmten Elements auf einer Webseite.

• url (erforderlich): Die URL der Webseite
• selector (erforderlich): CSS-Selektor für das Element, für das ein Screenshot erstellt werden soll
• waitForSelector (optional): Ob auf das Erscheinen des Selektors gewartet werden soll (Standard: true)
• format (optional): Bildformat – „png“, „jpeg“ oder „webp“ (Standard: „png“)
• quality (optional): Qualität des Bildes (0-100), gilt nur für JPEG und WebP
• padding (optional): Abstand um das Element in Pixeln (Standard: 0)
• useSavedAuth (optional): Ob gespeicherte Cookies vom vorherigen Login verwendet werden sollen (Standard: true)
• useDefaultBrowser (optional): Ob der Standardbrowser des Systems verwendet werden soll (Standard: false)
• visibleBrowser (optional): Ob das Browserfenster angezeigt werden soll (Standard: false)

4. Authentifizierungscookies löschen

Löscht gespeicherte Authentifizierungscookies für eine bestimmte Domäne oder alle Domänen.

• url (optional): URL der Domäne, deren Cookies gelöscht werden sollen. Falls nicht angegeben, werden alle Cookies gelöscht.

Standardbrowsermodus

Im Standardbrowsermodus können Sie den regulären Browser Ihres Systems (Chrome, Edge usw.) anstelle des mitgelieferten Chromium von Puppeteer verwenden. Dies ist nützlich für:

1. Verwenden Ihrer vorhandenen Browsersitzungen und Erweiterungen
2. Manuelles Anmelden bei Websites mit Ihren gespeicherten Anmeldeinformationen
3. Ein natürlicheres Browsing-Erlebnis für mehrstufige Workflows
4. Testen Sie mit derselben Browserumgebung wie Ihre Benutzer

Um den Standardbrowsermodus zu aktivieren, legen Sie in Ihren Toolparametern useDefaultBrowser: true und visibleBrowser: true fest.

So funktioniert der Standardbrowsermodus

Wenn Sie den Standardbrowsermodus aktivieren:

1. Das Tool versucht, den Standardbrowser Ihres Systems (Chrome, Edge usw.) zu finden.
2. Es startet Ihren Browser mit aktiviertem Remote-Debugging auf einem zufälligen Port
3. Puppeteer verbindet sich mit dieser Browserinstanz, anstatt eine eigene zu starten
4. Ihre bestehenden Profile, Erweiterungen und Cookies sind während der Sitzung verfügbar
5. Das Browserfenster bleibt sichtbar, sodass Sie manuell damit interagieren können

Dieser Modus ist besonders nützlich für Workflows, die eine Authentifizierung oder komplexe Benutzerinteraktionen erfordern.

Browserpersistenz

Der MCP-Server kann eine dauerhafte Browsersitzung über mehrere Tool-Aufrufe hinweg aufrechterhalten:

1. Wenn Sie login-and-wait verwenden, bleibt die Browsersitzung geöffnet
2. Nachfolgende Aufrufe von screenshot-page oder screenshot-element mit reuseAuthPage: true verwenden dieselbe Seite
3. Dies ermöglicht mehrstufige Workflows ohne erneute Authentifizierung

Cookie-Verwaltung

Für jede von Ihnen besuchte Domain werden automatisch Cookies gespeichert:

1. Nach der Verwendung login-and-wait werden Cookies im Verzeichnis .mcp-screenshot-cookies in Ihrem Home-Ordner gespeichert
2. Diese Cookies werden beim erneuten Besuch derselben Domain mit useSavedAuth: true automatisch geladen.
3. Sie können Cookies mit dem Tool clear-auth-cookies löschen.

Beispiel-Workflow: Screenshots geschützter Seiten

Hier ist ein Beispiel-Workflow zum Erstellen von Screenshots von Seiten, die eine Authentifizierung erfordern:

1. Manuelle Anmeldephase

Dadurch wird Ihr Standardbrowser mit der Anmeldeseite geöffnet. Sie können sich manuell anmelden. Sobald die Anmeldung abgeschlossen ist (entweder durch Erkennen der Erfolgsanzeige oder nach Verlassen der Anmeldeseite), werden die Sitzungscookies gespeichert.

2. Screenshots mit gespeicherter Sitzung erstellen

Dadurch wird unter Verwendung Ihrer gespeicherten Authentifizierungs-Cookies im selben Browserfenster ein Screenshot der Kontoseite erstellt.

3. Machen Sie Screenshots von bestimmten Elementen

4. Cookies nach Abschluss löschen

Dieser Workflow ermöglicht Ihnen die Interaktion mit geschützten Seiten, als wären Sie ein normaler Benutzer, und führt den vollständigen Authentifizierungsablauf in Ihrem Standardbrowser durch.

Headless-Modus vs. sichtbarer Modus

• Headless-Modus ( visibleBrowser: false ): Schneller und besser geeignet für automatisierte Arbeitsabläufe, bei denen keine Benutzerinteraktion erforderlich ist.
• Sichtbarer Modus ( visibleBrowser: true ): Zeigt das Browserfenster an und ermöglicht Benutzerinteraktion und manuelle Überprüfung. Erforderlich für useDefaultBrowser: true .

Plattformunterstützung

Die Standardbrowsererkennung funktioniert auf:

• macOS : Erkennt Chrome, Edge und Safari
• Windows : Erkennt Chrome und Edge über die Registrierung oder allgemeine Installationspfade
• Linux : Erkennt Chrome und Chromium über Systembefehle

Fehlerbehebung

Häufige Probleme

1. Standardbrowser nicht gefunden : Wenn das System Ihren Standardbrowser nicht finden kann, wird auf das mitgelieferte Chromium von Puppeteer zurückgegriffen.
2. Verbindungsprobleme : Wenn beim Herstellen einer Verbindung zum Debug-Port des Browsers Probleme auftreten, prüfen Sie, ob dieser Port bereits von einer anderen Instanz verwendet wird.
3. Cookie-Probleme : Wenn die Authentifizierung nicht funktioniert, versuchen Sie, Cookies mit dem Tool clear-auth-cookies zu löschen.

Debuggen

Der MCP-Server protokolliert hilfreiche Fehlermeldungen in der Konsole, wenn Probleme auftreten. Überprüfen Sie diese Meldungen auf Informationen zur Fehlerbehebung.