Puppeteer Vision MCP Server

Was macht der “Puppeteer Vision” MCP Server?

Der Puppeteer Vision MCP Server ermöglicht es KI-Assistenten, Webseiten mit Puppeteer, Readability und Turndown zu scrapen und in das Markdown-Format umzuwandeln. Mit fortschrittlicher, KI-gestützter Interaktion werden Webelemente wie Cookie-Banner, CAPTCHAs, Paywalls und mehr automatisch behandelt, sodass eine robuste Inhaltsextraktion selbst auf interaktiven oder geschützten Seiten möglich ist. Über das Model Context Protocol (MCP) steht diese Funktionalität für die einfache Integration in KI-Entwicklungs-Workflows zur Verfügung. So können Aufgaben wie automatisiertes Web Scraping, Inhaltszusammenfassung und Datenaufnahme nahtlos von LLMs erledigt werden. Der Server ist einfach per npx einsetzbar, benötigt nur minimale Konfiguration und unterstützt sowohl stdio- als auch SSE-Kommunikation für flexible Integration.

Liste der Prompts

Im Repository oder in der Dokumentation werden keine Prompt-Templates erwähnt.

Liste der Ressourcen

Es sind keine spezifischen MCP-Ressourcen im Repository oder in der Dokumentation aufgeführt oder beschrieben.

Liste der Tools

• scrape-webpage: Scrapt eine Webseite an einer angegebenen URL, nutzt KI für die Interaktion und Umgehung interaktiver Elemente (wie Cookie-Banner oder CAPTCHAs), extrahiert den Hauptinhalt mit Readability und wandelt das Ergebnis in Markdown um. Parameter:
  • url (string, erforderlich): Die zu scrapende Webseite.
  • autoInteract (boolean, optional, Standard: true): Ob interaktive Elemente automatisch behandelt werden sollen.
  • maxInteractionAttempts (number, optional, Standard: 3): Maximale KI-Interaktionsversuche.
  • waitForNetworkIdle (boolean, optional, Standard: true): Warten, bis das Netzwerk inaktiv ist, bevor gescrapt wird.

Anwendungsfälle dieses MCP Servers

• Automatisiertes Web Scraping zur Wissensaufnahme
  Entwickler können lesbare, gut formatierte Markdown-Inhalte aus beliebigen Webseiten extrahieren und diese einfach in KI-Workflows, Datenbanken oder Wissensbasen einpflegen.
• Umgehung interaktiver Barrieren
  Die KI-gesteuerte Interaktion kann CAPTCHAs, Cookie-Banner und andere interaktive Hürden automatisch umgehen und ermöglicht so eine reibungslose Inhaltsextraktion auch dort, wo Automatisierung sonst blockiert würde.
• Zusammenfassung und Inhaltsanalyse
  Extrahiertes Markdown kann von LLMs für Zusammenfassungen, Sentiment-Analysen oder Klassifikationen genutzt werden, was Recherche und Datenverarbeitung vereinfacht.
• Echtzeit-Browserautomatisierung
  Entwickler können das Tool im sichtbaren (nicht-headless) Modus ausführen – für Debugging, Demonstrationen oder wenn eine visuelle Kontrolle der Browseraktivität erforderlich ist.
• Integration in LLM-Orchestrierungs-Pipelines
  Als MCP Server kann er als Komponente in Orchestratoren wie Windsurf, Claude, Cursor und Cline genutzt werden und erweitert die Fähigkeiten von KI-Agenten zur Interaktion mit dem Live-Web.

Einrichtung

Windsurf

1. Voraussetzungen: Node.js und npm installieren.

2. Umgebung einrichten: .env-Datei erstellen oder die benötigten Umgebungsvariablen, darunter OPENAI_API_KEY, exportieren.

3. Konfiguration bearbeiten: Die Konfigurationsdatei von Windsurf suchen.

4. Puppeteer Vision MCP hinzufügen: Fügen Sie folgenden JSON-Abschnitt ein:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

5. Speichern/Neustarten: Datei speichern und Windsurf neu starten.

6. Überprüfen: Logs oder Oberfläche prüfen, ob der MCP Server läuft.

API-Keys absichern:
Geheimnisse in Umgebungsvariablen speichern (z.B. .env):

"env": {
  "OPENAI_API_KEY": "${OPENAI_API_KEY}"
}

Claude

1. Voraussetzungen: Vergewissern Sie sich, dass Node.js und npm installiert sind.

2. Umgebung setzen: .env vorbereiten oder OPENAI_API_KEY und weitere Variablen exportieren.

3. Konfiguration bearbeiten: Öffnen Sie die MCP-Konfiguration von Claude.

4. MCP Server hinzufügen:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

5. Claude neu starten: Änderungen anwenden und Plattform neu starten.

6. Überprüfen: Erfolgreichen Start bestätigen.

Cursor

1. Voraussetzungen: Node.js und npm installieren.

2. Umgebung: .env mit dem OpenAI API-Schlüssel einrichten.

3. Cursor-Konfiguration bearbeiten: MCP Server wie folgt hinzufügen:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

4. Speichern & Neustarten: Änderungen speichern und Cursor neu starten.

5. Logs prüfen: Sicherstellen, dass der Server läuft.

Cline

1. Voraussetzungen: Node.js und npm installieren.

2. Umgebung: OPENAI_API_KEY setzen oder exportieren.

3. Konfiguration: In die MCP-Konfiguration von Cline einfügen:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

4. Cline neu starten: Anwenden und neu starten.

5. Bestätigen: Prüfen, dass der Server erreichbar ist.

Hinweis: API-Keys immer über Umgebungsvariablen absichern und niemals als Klartext in Konfigurationsdateien speichern.

Nutzung dieses MCP in Flows

Verwendung von MCP in FlowHunt

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

Klicken Sie auf die MCP-Komponente, um das Konfigurationspanel zu öffnen. Im Bereich der System-MCP-Konfiguration tragen Sie Ihre MCP-Server-Details in folgendem JSON-Format ein:

{
  "puppeteer-vision": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Nach der Konfiguration kann der KI-Agent diesen MCP als Tool nutzen und hat Zugriff auf alle Funktionen und Möglichkeiten. Denken Sie daran, “puppeteer-vision” durch den tatsächlichen Namen Ihres MCP-Servers zu ersetzen und die URL entsprechend anzupassen.

Übersicht

| Roots-Unterstützung | ⛔ | Keine Erwähnung von Roots. |

Basierend auf den obigen Punkten bietet der Puppeteer Vision MCP Server ein robustes und fokussiertes Web Scraping Tool mit guter Dokumentation und klaren Sicherheitshinweisen, aber es fehlen mehrere Tools, Prompt-Templates, Ressourcen und fortgeschrittene MCP-Features wie Roots oder Sampling. Das Ein-Tool-Konzept sorgt für hohe Zuverlässigkeit für den jeweiligen Anwendungsfall, schränkt aber die Erweiterbarkeit ein.

Unsere Meinung

MCP Score: 5/10
Dieser MCP Server ist gut dokumentiert, für seinen spezifischen Zweck nützlich und einfach einzurichten. Das Fehlen von Prompt-Templates, expliziten Ressourcen und fortgeschrittenen MCP-Features (Roots, Sampling) begrenzt jedoch seine Vielseitigkeit und Integration ins Ökosystem.

MCP Score