ScreenshotOne MCP-Server

Was macht der “ScreenshotOne” MCP-Server?

Der ScreenshotOne MCP (Model Context Protocol) Server ist eine offizielle Implementierung, die als Brücke zwischen KI-Assistenten und der ScreenshotOne API fungiert. Durch die Anbindung an diesen Server können KI-Agenten und Tools den Prozess der Website-Screenshot-Erstellung automatisieren und so visuellen Kontext und Referenz für Entwicklungs-, QA-, Reporting- und Dokumentationsworkflows bereitstellen. Über das MCP-Protokoll können Entwickler KI-Assistenten befähigen, in Echtzeit Website-Snapshots zu erstellen, visuelle Assets in ihre Konversationen oder Berichte zu integrieren und das Teilen sowie Archivieren von Webinhalten zu vereinfachen. Dieser Server ermöglicht es, Screenshot-Anfragen sicher und einfach in größere KI-gestützte oder automatisierte Pipelines einzubinden.

Liste der Prompts

Im Repository sind keine Prompt-Vorlagen dokumentiert.

Liste der Ressourcen

Im Repository sind keine expliziten MCP-Ressourcen dokumentiert.

Liste der Tools

• render-website-screenshot: Erstellt einen Screenshot einer Website und gibt ihn als Bild zurück.

Anwendungsfälle dieses MCP-Servers

• Automatisiertes Website-QA: Erfassen und vergleichen Sie Website-Screenshots sofort für Regressionstests oder visuelles QA, um UI-Änderungen oder Rendering-Fehler zu erkennen.
• Dokumentationserstellung: Betten Sie aktuelle Screenshots einfach in technische oder Marketing-Dokumentationen ein, um sicherzustellen, dass Anleitungen und Handbücher die aktuelle Website-Oberfläche widerspiegeln.
• Visuelles Bug-Reporting: Ermöglichen Sie Nutzern oder KI-Assistenten, aktuelle Webseiten-Screenshots an Bug-Reports anzuhängen und verbessern Sie so die Kommunikation zwischen QA und Entwicklung.
• Inhaltsarchivierung: Automatisieren Sie das Erfassen und Archivieren von Website-Zuständen für Compliance, Audits oder historische Referenzen.
• Echtzeit-Sharing: Lassen Sie KI-gestützte Chatbots Webseiten-Visualisierungen in Konversationen bereitstellen, um Klarheit und Engagement zu steigern.

Einrichtung

Windsurf

Keine spezifischen Einrichtungsanweisungen für Windsurf.

Claude

1. Voraussetzung: Stellen Sie sicher, dass Node.js installiert ist.
2. Konfigurationsdatei suchen: Finden Sie ~/Library/Application Support/Claude/claude_desktop_config.json.
3. ScreenshotOne MCP-Server-Konfiguration hinzufügen:

   {
       "mcpServers": {
           "screenshotone": {
               "command": "node",
               "args": ["path/to/screenshotone/mcp/build/index.js"],
               "env": {
                   "SCREENSHOTONE_API_KEY": "<your api key>"
               }
           }
       }
   }
   

4. Datei speichern.
5. Claude neu starten, um die Änderungen zu übernehmen.
6. Überprüfen Sie die Funktion, indem Sie das Screenshot-Tool in Claude verwenden.

Sicherheit von API-Schlüsseln

Speichern Sie Ihren ScreenshotOne API-Schlüssel im Bereich env der Konfiguration, nicht im Code.

Beispiel:

"env": {
    "SCREENSHOTONE_API_KEY": "<your api key>"
}

Cursor

Keine spezifischen Einrichtungsanweisungen für Cursor.

Cline

Keine spezifischen Einrichtungsanweisungen für Cline.

Standalone

1. Voraussetzung: Stellen Sie sicher, dass Node.js installiert ist.
2. Abhängigkeiten installieren und bauen:

   npm install && npm run build
   

3. Server mit Ihrem API-Schlüssel starten:

   SCREENSHOTONE_API_KEY=your_api_key && node build/index.js
   

Nutzung dieses MCP in Flows

MCP in FlowHunt verwenden

Um MCP-Server in Ihren FlowHunt-Workflow zu integrieren, fügen Sie zunächst die MCP-Komponente zu Ihrem Flow hinzu und verbinden diese mit Ihrem KI-Agenten:

Klicken Sie auf die MCP-Komponente, um das Konfigurationspanel zu öffnen. Im Bereich System-MCP-Konfiguration fügen Sie die Details Ihres MCP-Servers in diesem JSON-Format ein:

{
  "screenshotone": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Nach der Konfiguration kann der KI-Agent diesen MCP als Tool mit allen Funktionen und Möglichkeiten nutzen. Denken Sie daran, “screenshotone” durch den tatsächlichen Namen Ihres MCP-Servers zu ersetzen und die URL durch Ihre eigene MCP-Server-URL auszutauschen.

Übersicht

Unsere Meinung

Dieser MCP-Server ist fokussiert und praktisch, aber die Dokumentation ist außerhalb des Kernanwendungsfalls minimal. Die Einrichtung für Claude ist einfach, detaillierte Anleitungen für andere Plattformen fehlen jedoch und es werden keine Prompt-Vorlagen oder Ressourcen bereitgestellt. Die Existenz eines einzigen, gut dokumentierten Tools und der sichere Umgang mit API-Schlüsseln sind Stärken, der Umfang ist jedoch begrenzt.

MCP-Score