Hast du dich schon einmal gefragt, wie KI-Agenten auf Websites navigieren, Buttons anklicken und Formulare ausfüllen – ohne den Bildschirm überhaupt zu "sehen"?
Vision-Modelle, also KI, die Bilder verarbeiten kann, sind zwar populär, aber oft langsam, teuer und anfällig für Halluzinationen. Beispiele sind GPT-4 von OpenAI, Claude 3 Opus von Anthropic und Microsoft Copilot mit Vision. Es gibt einen klügeren und schnelleren Weg: die Kombination aus Playwright, dem Model Context Protocol (MCP) und Accessibility-Snapshots.
In diesem Beitrag schlüsseln wir auf, wie Large Language Models (LLMs) Webbrowser allein mit textbasierten semantischen Daten steuern.
Bevor wir uns ansehen, wie sie zusammenspielen, kurz die drei Hauptakteure.
Playwright ist ein leistungsfähiges Open-Source-Framework für Automatisierung, das üblicherweise zum Testen von Webanwendungen eingesetzt wird. Es steuert Browser (Chrome, Firefox, Safari) programmatisch. Mehr dazu auf playwright.dev.
Das Model Context Protocol (MCP) ist ein offener Standard, der KI-Modelle sicher mit externen Tools und Datenquellen verbindet. Stell es dir als universelle API vor, über die ein LLM sagen kann: "Führe bitte diese eine Funktion für mich aus."
Accessibility-Snapshots sind die eigentliche Zutat. Browser erzeugen ein Accessibility Object Model (AOM), damit Screenreader Seiten für sehbehinderte Nutzerinnen und Nutzer zugänglich machen können. Statt rohem HTML oder Pixeln entsteht dabei ein sauberer, strukturierter Baum aus interaktiven Elementen – "Button: Absenden", "Textfeld: Benutzername". Mehr zum Format und zum Zugriff auf die Elemente auf playwright.dev/mcp/snapshots.
Wenn eine KI einen "Log In"-Button anklicken will, ist der Weg über einen Screenshot, ein Vision-Modell, die Berechnung der Bounding Box und schliesslich den Klickbefehl ausgesprochen ineffizient.
Der textbasierte Ansatz gewinnt in drei Punkten.
Schritt 1: Du gibst einen Befehl
Du sagst deinem KI-Agenten: "Melde dich in meinem Dashboard an und lade den neusten Report herunter."
Schritt 2: Der Agent ruft ein MCP-Tool auf
Der Agent hat keinen eingebauten Browser. Stattdessen schickt er über das Model Context Protocol eine Anfrage an einen verbundenen Playwright-Server und lässt ihn zur Login-Seite navigieren.
page.goto(url)
Schritt 3: Playwright navigiert und erstellt einen Snapshot
Playwright steuert den Headless-Browser zur URL. Statt eines visuellen Screenshots führt es page.accessibility.snapshot() aus und erzeugt damit eine saubere JSON-Repräsentation der Benutzeroberfläche.
Schritt 4: Das LLM liest den Snapshot
Der Playwright-MCP-Server schickt den JSON-Snapshot zurück an das LLM. Da LLMs sehr gut darin sind, JSON zu lesen und Kontext zu verstehen, erkennt der Agent sofort, dass es ein Textfeld für eine E-Mail-Adresse und einen Button namens "Log In" gibt.
Schritt 5: Der Agent handelt
Der Agent formuliert den nächsten Schritt und schickt einen weiteren MCP-Befehl an Playwright zurück.
Playwright führt diese Befehle im echten Browser aus, erstellt einen neuen Accessibility-Snapshot der nächsten Seite, und die Schleife läuft weiter, bis die Aufgabe erledigt ist.
Indem wir Playwright und KI-Agenten über das Model Context Protocol verbinden, lässt sich bemerkenswert robuste Web-Automatisierung bauen.
Accessibility-Snapshots statt Vision-Modelle geben dem LLM eine perfekte, textbasierte Karte der Benutzeroberfläche. Das zeigt: Damit eine KI besser im Web navigiert, muss man ihr manchmal keine Augen geben – es reicht eine bessere Karte.
Wir würden uns freuen, deine Gedanken zu hören! Am einfachsten erreichen Sie uns, indem Sie eine E-Mail an info@houseoftest.ch senden oder den Autor direkt kontaktieren.
