Du wirst jede Website mit KI steuern können: Ich ließ Claude Gemini steuern und es ist unglaublich

Playwright ist ein leistungsstarkes Open-Source-Framework für Web-Tests und Automatisierung. Entwickelt von Microsoft, ermöglicht es Entwicklern, Interaktionen über Chromium, Firefox und WebKit zuverlässig mit einer einzigen API zu automatisieren. Seine Geschwindigkeit, Zuverlässigkeit und Unterstützung für moderne Web-Funktionen machen es zu einer idealen Engine sowohl für automatisierte Tests als auch für komplexe browserbasierte KI-Aufgaben.

Das Model Context Protocol (MCP) entwickelt sich schnell zum Standard für die Verbindung von KI-Modellen mit externen Tools und Daten. Für Entwickler und Power-User ist der "Heilige Gral" der lokalen KI, dem Modell Augen und Hände zu geben – die Fähigkeit, eine Webseite zu sehen und mit ihr zu interagieren.

Die Claude Desktop App ist eine native Anwendung, die die Leistung von Anthropics Claude KI-Modellen direkt auf deinen Desktop bringt. Im Gegensatz zur Webversion ist die Desktop-App so konzipiert, dass sie sich tief in deine lokale Umgebung integriert, was sie zum perfekten Host für MCP-Server macht, die Zugriff auf lokale Ressourcen, Dateien und Tools wie Playwright benötigen.

Playwright MCP fungiert als diese Brücke. Im Gegensatz zu Standard-Scraping-Tools, die nur HTML abrufen, erstellt der Playwright MCP-Server einen bidirektionalen Kommunikationskanal zwischen Claude Desktop und einer Playwright Browser-Engine. Dies ermöglicht es Claude, zu navigieren, zu klicken, zu tippen und sogar den Accessibility-Tree von Webseiten in Echtzeit zu inspizieren.

In diesem Tutorial konzentrieren wir uns auf die Konfiguration der Playwright MCP Bridge unter Windows, wobei wir speziell hervorheben, wie man Claude mit einer bestehenden Browser-Sitzung (über die Bridge-Erweiterung) verbindet, um komplexe Authentifizierungsflüsse zu umgehen.

Voraussetzungen

Bevor wir Konfigurationsdateien ändern, stelle sicher, dass deine Windows-Umgebung die Ausführung lokaler Server zulässt.

1. Node.js (LTS-Version) unter Windows: Der Playwright MCP-Server ist eine Node.js-Anwendung. Du musst Node.js Version 18 oder höher direkt auf deinem Windows-System installiert haben.

   node --version
   

2. Claude Desktop App: Du musst die installierte Windows-Anwendung verwenden, nicht die Webbrowser-Version (claude.ai), da die Webversion keine Verbindung zu lokalen MCP-Servern herstellen kann.
3. Playwright Browser: Während das Paket diese oft automatisch herunterlädt, ist es eine gute Praxis, die Abhängigkeiten manuell zu installieren, um Timeout-Fehler beim ersten Start zu vermeiden.

   npx playwright install --with-deps
   

4. Claude Pro Abonnement (Empfohlen): Während MCP-Funktionen allen Benutzern zur Verfügung stehen, wird ein Claude Pro-Abonnement dringend empfohlen. Browser-Automatisierungsaufgaben beinhalten oft mehrere Hin-und-Her-Nachrichten, während Claude durch Navigation und Extraktion "denkt", was die Nutzungslimits der kostenlosen Stufe schnell aufbrauchen kann.

1

Konfiguration des MCP-Servers

Der Kern dieses Setups ist die Datei claude_desktop_config.json. Diese Datei teilt der Claude Desktop App mit, welche lokalen Tools sie starten und mit welchen sie kommunizieren darf.

1. Konfigurationsdatei finden: Unter Windows befindet sich diese Datei in deinem AppData-Ordner. Öffne den Datei-Explorer und navigiere zu: %AppData%\Claude\claude_desktop_config.json (Wenn der Ordner oder die Datei nicht existiert, erstelle sie manuell).

2. Server definieren: Öffne die Datei in einem Texteditor (wie VS Code oder Notepad) und füge die Playwright MCP-Serverkonfiguration hinzu. Wir verwenden das @playwright/mcp-Paket via npx, damit du immer die neueste Version ausführst.

   claude_desktop_config.json

   {
     "mcpServers": {
       "playwright": {
         "command": "npx",
         "args": [
           "-y",
           "@playwright/mcp@latest"
         ]
       }
     }
   }
   

   • command: Wir verwenden npx, um das Node-Paket auszuführen.
   • args: Das -y-Flag unterdrückt die "Möchten Sie installieren..."-Aufforderung, was kritisch ist, da Claude eine nicht-interaktive Shell erstellt.

3. Claude neu starten: Beende die Claude Desktop App vollständig (prüfe das System-Tray, um sicherzustellen, dass sie geschlossen ist) und öffne sie erneut.

2

Die Brücke – Verbindung zu einer bestehenden Sitzung

Standard-Playwright-Instanzen sind standardmäßig "inkognito" – sie teilen deine Cookies oder Login-Status nicht. Damit Claude mit Seiten interagieren kann, auf denen du bereits eingeloggt bist (wie GitHub, Jira oder interne Unternehmenstools), verwenden wir die Playwright MCP Bridge.

1. Chrome-Erweiterung installieren: Die offizielle Playwright MCP-Erweiterung ist nicht im Chrome Web Store verfügbar. Du musst sie manuell aus dem offiziellen Repository herunterladen.

   • Herunterladen: Gehe zur Playwright MCP Releases Seite und lade den neuesten Quellcode oder die Erweiterungs-ZIP herunter.
   • Installieren: Entpacke den Inhalt. Öffne Chrome und gehe zu chrome://extensions. Aktiviere den "Entwicklermodus" oben rechts, klicke dann auf "Entpackte Erweiterung laden" und wähle den Ordner aus, den du gerade entpackt hast.
   Konfiguration des Erweiterungsmodus

   Um den Erweiterungsmodus spezifisch zu aktivieren, musst du deine Konfigurationsargumente aktualisieren, um das --extension-Flag einzuschließen:

   claude_desktop_config.json

   "args": [
     "-y",
     "@playwright/mcp@latest",
     "--extension"
   ]
   

2. Start via Bridge: Wenn du Claude jetzt bittest, eine Aufgabe auszuführen, wird es nach einer Browser-Instanz suchen, die über die Bridge verbunden ist, anstatt ein neues Headless-Fenster zu starten. Dies ermöglicht es dir, dich manuell einzuloggen und dann die Kontrolle an Claude zu übergeben.

   Wenn du zum ersten Mal eine Verbindung initiierst, wird dein Browser wahrscheinlich um eine explizite Erlaubnis bitten, damit der Playwright MCP-Server die Kontrolle über den Tab übernehmen kann.

Du weißt, dass die Verbindung erfolgreich ist, wenn du siehst, dass der Browser erfolgreich gestartet und vom Server kontrolliert wird, oft angezeigt durch einen deutlichen Browser-Status oder eine Konsolennachricht, die die aktive Sitzung verifiziert.

Automatisierte Persönliche Dashboard-Berichte

Eine der praktischsten Anwendungen für diese Brücke ist das Abrufen persönlicher Daten aus "geschlossenen Gärten" – Seiten, die eine Anmeldung erfordern und keine einfach zu bedienende API für deine spezifischen Bedürfnisse bieten.

Szenario: Du möchtest deine API-Nutzung oder deinen Abrechnungsstatus überprüfen, ohne manuell durch komplexe Dashboards navigieren zu müssen.

Beispiel-Prompt

Gehe zur Deepseek-Plattform und sage mir, wie viel ich diesen Monat verbraucht habe.

Der Prozess

1. Navigation: Claude navigiert zum Deepseek-Dashboard.
2. Authentifizierung: Da du die Bridge verwendest, die mit deiner bestehenden Chrome-Sitzung verbunden ist, bist du wahrscheinlich bereits eingeloggt. Wenn nicht, kannst du dich manuell einloggen, während Claude zuschaut.
3. Extraktion: Claude findet das spezifische Element, das die Nutzungs-/Abrechnungsstatistiken anzeigt, und berichtet es dir zurück.

Hauptvorteil

Der größte Vorteil hier ist Sicherheit und Bequemlichkeit. Du musst deinen Benutzernamen, dein Passwort oder deine API-Schlüssel nicht im Prompt selbst angeben. Da Claude deine bestehende Browser-Instanz steuert, "trittbrettfährt" es auf deinen aktiven Sitzungscookies. Dies hält deine Anmeldeinformationen sicher und aus dem Chat-Verlauf heraus.

Allgemeiner Zweck

Dieser Ansatz lässt sich auf jede Plattform verallgemeinern, bei der du "Nur-Lese"-Daten hinter einer Authentifizierungswand abrufen musst – Überprüfung von Bankguthaben, Verifizierung der Nutzung von SaaS-Abonnements oder Überwachung von Status-Dashboards – alles ohne eine einzige Zeile Scraper-Code zu schreiben.

LLM-zu-LLM Kollaboration (Agentische Validierung)

Was wäre, wenn du zwei leistungsstarke KIs zusammenarbeiten lassen könntest? Mit Playwright MCP kann Claude andere webbasierte LLMs wie Gemini oder ChatGPT "steuern".

Szenario: Du möchtest technische Anweisungen querverweisen oder das Wissen zweier Modelle kombinieren.

Beispiel-Prompt

Gehe zu gemini.google.com und frage, wie man Playwright in der Claude Windows Applikation installiert. Überprüfe die Anweisungen, die du erhältst, und sage mir, ob sie korrekt sind.

Der Prozess

1. Navigation: Claude geht zur URL von Gemini.
2. Interaktion: Es tippt die Anfrage in das Chat-Feld von Gemini und sendet sie ab.
3. Synthese: Claude liest die Antwort von Gemini vom Bildschirm, vergleicht sie mit seiner eigenen internen Wissensbasis und validiert die Genauigkeit – was effektiv ein "Peer-Review"-System für KI-Ausgaben schafft.

Warum das funktioniert

Dies verwandelt den Webbrowser in eine universelle Schnittstelle für jedes KI-Modell und ermöglicht es dir, komplexe Workflows zu erstellen, bei denen ein Agent als "Ausführender" und der andere als "Berater" oder "Prüfer" fungiert.

Fazit

Die Integration von Playwright mit Claude Desktop via MCP verwandelt die KI von einem passiven Textgenerator in einen aktiven Agenten, der in der Lage ist, reale Arbeit zu leisten.

Dieses Setup ist ein Paradigmenwechsel für browserbasierte Workflows und erschließt Fähigkeiten, die zuvor fragile benutzerdefinierte Skripte erforderten:

• Tiefgehende Forschung — Daten über disparate Quellen hinweg extrahieren und synthetisieren
• KI-Kollaboration — Erstellung einer universellen Schnittstelle für Agent-zu-Agent-Interaktion
• Admin-Automatisierung — Wiederkehrende Aufgaben innerhalb authentifizierter Portale erledigen
• Mehrstufige Operationen — Komplexe Workflows mit intelligenter Entscheidungsfindung ausführen

Vielleicht am wichtigsten ist, dass dieses Setup eine neue Ära der KI-zu-KI-Kollaboration ermöglicht, in der ein Modell ein anderes über die universelle Schnittstelle des Webs peer-reviewen, validieren oder konsultieren kann.

Die Kombination von Claudes Argumentation mit Playwrights Ausführung schafft einen robusten Motor für intelligente Automatisierung.

Durch die Verwendung der Bridge-Konfiguration umgehst du die größte Hürde – Authentifizierung – und kannst diese Leistung sofort nutzen.

Referenzen

• Model Context Protocol (MCP) Dokumentation
• Playwright MCP GitHub Repository
• Offizielle Playwright MCP Erweiterung (GitHub Releases)

Mach mit bei der Unterhaltung! Hast du Fragen oder einen coolen Anwendungsfall für die Playwright MCP Bridge? Teile deine Gedanken im Kommentarbereich unten (GitHub-Konto erforderlich).