Anmerkung des Autors: Von der Installation über snapshot und ref bis zur Ergebnisprüfung: In fünf Schritten lernst du den Zyklus „Seite lesen, Element anklicken, Seite erneut lesen“ kennen und lässt einen AI Agent zuverlässig einen echten Browser steuern.
Wenn AI Agents Webseiten bedienen sollen, stehen sie oft vor einem Problem: Sie können die Seite nicht sehen und treffen die gewünschten Elemente nur schwer zuverlässig. Screenshots und Klicks per Koordinaten verbrauchen viele Tokens und gehen leicht daneben. Übergibt man dagegen den gesamten HTML-Code an das Modell, ist das Kontextfenster schnell voll. Dieser Artikel stellt den snapshot-ref-Zyklus von agent-browser vor und zeigt, wie ein Agent den Browser mit jeweils einem Befehl steuert.
Dies ist keine weitere allgemeine Einführung in Browser-Automatisierungsframeworks. Stattdessen gehen wir in praktischer Reihenfolge durch die Installation von agent-browser, das Zusammenspiel von snapshot und ref, Strategien für erneute Versuche bei Fehlern und die Integration in einen Agent-Workflow.
Das Wichtigste: Nach der Lektüre verstehst du, warum sich der snapshot-ref-Zyklus von agent-browser für Große Sprachmodelle eignet, und kannst mit fünf Befehlen die erste Browseraufgabe in deinem eigenen Agent ausführen.
Die wichtigsten Punkte des Snapshot-Ref-Zyklus von agent-browser
agent-browser ist ein Open-Source-Werkzeug für Browserautomatisierung von Vercel Labs und steht unter der Apache-2.0-Lizenz. Das native Rust-CLI verfolgt ein klares Ziel: AI Agents sollen einen Browser mit einzelnen Befehlen steuern können. Nach dem Öffnen einer Seite liest der Agent sie als kompakten Text in Form eines Accessibility Trees und bedient die Elemente anschließend über Shell-Befehle.
| Aspekt | Beschreibung | Nutzen für den Agent |
|---|---|---|
| Kompakter Snapshot-Text | Die Seite wird als Accessibility Tree ausgegeben; jedes Element erhält eine Ref wie @e1 |
Spart Kontext gegenüber Screenshots und rohem HTML |
| Präzise Lokalisierung per Ref | Befehle verweisen direkt auf eine Ref, etwa click @e1 |
Das Modell muss keine CSS-Selektoren selbst zusammenstellen |
| Browser bleibt geöffnet | Ein Hintergrundprozess hält den Browser geöffnet | Jeder Schritt erfordert nur einen kurzen Shell-Aufruf |
| Explizite Fehlermeldungen | Ein Klick schlägt fehl, wenn ein Element verdeckt, versteckt oder deaktiviert ist, statt fälschlich Erfolg zu melden | Der Agent kann anhand der tatsächlichen Rückmeldung über den nächsten Schritt entscheiden |
| Integrierte Skills | Das CLI enthält eine zur Version passende Nutzungsanleitung | Die Anweisungen, die der Agent liest, passen zur installierten Version |
So funktioniert der snapshot-ref-Zyklus
Der Zyklus besteht aus drei Schritten: Zuerst liest snapshot die Seite, dann wird eine Aktion für eine bestimmte ref ausgeführt, und schliesslich wird die Seite erneut gelesen, um das Ergebnis zu prüfen. Dieser Ablauf wiederholt sich. Der Snapshot von example.com im offiziellen Beispiel enthält nur eine Zeile: - link "Learn more" [ref=e1]. Das Modell erkennt daran, dass die Seite einen Link namens Learn more enthält und dass es ihn mit @e1 anklicken kann.
Dieses Design trennt das Verstehen der Seite und das Ausführen von Aktionen in zwei überprüfbare Schritte. Das passt gut zum Muster, mit dem ein grosses Sprachmodell Tools aufruft. Das Modell muss keine komplexe DOM-Struktur verstehen. Es sucht im Text nach dem semantisch passenden Element und verwendet dessen ref. Nach jeder Aktion wird ein neuer Snapshot erstellt. So trifft der Agent seine Entscheidungen immer anhand des aktuellen Seitenzustands, statt sich auf seine Erinnerung zu verlassen.
Die Architektur hinter agent-browser
Die CLI selbst verwaltet den Browser nicht direkt. Beim Ausführen des ersten Befehls startet sie einen Hintergrundprozess, den sogenannten Daemon. Dieser steuert den Browser über das Chrome DevTools Protocol. Alle weiteren CLI-Befehle werden an den Daemon geschickt. Dadurch bleibt der Browser zwischen den Befehlen geöffnet, und sowohl der Anmeldestatus als auch die Position auf der Seite bleiben erhalten.
Jede --session verfügt über einen eigenen Daemon und Browser. So können mehrere Aufgaben parallel laufen, ohne sich gegenseitig zu beeinflussen. Standardmässig wird der Headless-Browser geschlossen, wenn er eine Stunde lang keinen Befehl erhalten hat. Anschliessend beendet sich auch der Daemon. Ist die Sitzungspersistenz konfiguriert, wird der Zustand vorher gespeichert.
Das „Gehirn“ hinter diesem Zyklus ist ein grosses Sprachmodell. Der Text jedes Snapshots fliesst in den Kontext des Modells ein, das dann den nächsten Befehl bestimmt. Wie gut das Modell Anweisungen befolgt und wie viel es kostet, beeinflusst daher direkt die Erfolgsquote und die Kosten einer Aufgabe. APIYI bietet API-Zugriff auf die hier behandelten Modelle wie Claude, DeepSeek und Kimi und unterstützt sowohl das OpenAI- als auch das Anthropic-Schnittstellenformat. Die Dokumentation zur Anbindung finden Sie unter docs.apiyi.com.
Schnellstart mit agent-browser: der snapshot-ref-Zyklus in 5 Schritten
Schritt 1: agent-browser und Browser installieren
Am einfachsten installieren Sie agent-browser global über npm und laden anschließend Chrome for Testing herunter. Das npm-Paket wählt automatisch die passende native Binärdatei für die Host-Plattform aus. Unterstützt werden derzeit macOS (ARM64, x64), Linux (ARM64, x64, glibc und musl) sowie Windows (x64).
| Installationsmethode | Befehl | Einsatzbereich |
|---|---|---|
| Globale npm-Installation | Zuerst npm install -g agent-browser, dann agent-browser install |
Die meisten Entwicklungsumgebungen; beim ersten Mal muss der Browser heruntergeladen werden |
| Homebrew | Zuerst brew install agent-browser, dann agent-browser install |
macOS-Nutzer |
| Linux mit Abhängigkeiten | agent-browser install --with-deps |
Server und Container, auf denen auch die Systembibliotheken für den Browser installiert werden müssen |
| Ohne Installation | npx agent-browser open example.com |
Kurzer Test oder einmalige Aufgaben in CI |
| Wartungsbefehle | agent-browser upgrade, agent-browser doctor |
Version aktualisieren und Umgebungsprobleme beheben |
Für einen Build aus dem Quellcode werden laut offizieller Dokumentation Node.js ab Version 24, pnpm ab Version 11 und die Rust-Toolchain benötigt. Führen Sie nacheinander pnpm install, pnpm build:source und pnpm link --global aus und anschließend agent-browser install. Für den Alltag reicht die npm-Installation aus.
Schritt 2 bis 5: Der vollständige minimale Ablauf
Nach der Installation bilden die folgenden Befehle einen vollständigen Snapshot-Ref-Ablauf. Führen Sie ihn zunächst manuell im Terminal aus und prüfen Sie die Ausgabe jedes Schritts, bevor Sie den Agenten damit beauftragen.
| Schritt | Befehl | Zweck | Erwartetes Ergebnis |
|---|---|---|---|
| 2. Seite öffnen | agent-browser open example.com |
Startet den Daemon und öffnet die URL | Der Browser läuft im Hintergrund |
| 3. Snapshot lesen | agent-browser snapshot -i |
Listet nur interaktive Elemente auf, jeweils mit einer Ref | Ausgabe wie link "Learn more" [ref=e1] |
| 4. Ref verwenden | agent-browser click @e1 |
Klickt auf das Element im Snapshot | Die Seite wird weitergeleitet oder ihr Zustand ändert sich |
| 5. Ergebnis prüfen | agent-browser get url |
Liest die aktuelle URL und bestätigt, dass die Aktion wirksam war | Gibt die URL nach der Weiterleitung zurück |
| Abschluss | agent-browser close |
Schließt den Browser | Ressourcen werden freigegeben |
Der Parameter -i in Schritt 3 ist wichtig: Er gibt nur interaktive Elemente aus und verkürzt so den Snapshot-Text deutlich. Das ist besonders bei begrenztem Token-Budget hilfreich. Auch die Prüfung in Schritt 5 sollten Sie nicht auslassen. Der Agent muss anhand tatsächlicher Rückmeldungen beurteilen, ob die Aktion erfolgreich war, statt anzunehmen: „Geklickt heißt erfolgreich.“
🚀 Schnellstart: Sobald der manuelle Ablauf funktioniert, können Sie die Befehle an den Agenten übergeben. Holen Sie sich zunächst über APIYI apiyi.com ein Testkontingent und probieren Sie dieselben Aufgaben mit mehreren Modellen aus. So sehen Sie, welches Modell die richtige Ref am besten aus dem Snapshot-Text auswählt. Die Schnittstelle ist mit den Formaten von OpenAI und Anthropic kompatibel. Bei bestehenden Agenten-Frameworks müssen Sie daher meist nur den Schlüssel und die Adresse ersetzen. Maßgeblich ist die Dokumentation unter docs.apiyi.com.
Gültigkeit von agent-browser-Refs und erneute Snapshots
Ein Ref beschreibt die Seite zum Zeitpunkt des Snapshots. Sobald eine Navigation stattfindet oder sich das DOM ändert, kann ein alter Ref ungültig werden oder sogar auf das falsche Element verweisen. Deshalb gilt: Nach jeder Navigation oder deutlichen Seitenänderung zuerst snapshot erneut ausführen und dann die neuen Refs verwenden.
Diese Regel gehört am besten direkt in die System-Eingabeaufforderung des Agenten. Ein zuverlässiger Ablauf lautet „Snapshot, Aktion, Snapshot“ – nicht „einmal Snapshot, zehn Aktionen hintereinander“. Der Aufwand für einen zusätzlichen Snapshot ist deutlich geringer als die Fehlersuche und das Rückgängigmachen von Aktionen nach einem Klick auf das falsche Element.
Was tun, wenn ein Klick mit agent-browser fehlschlägt?
agent-browser täuscht keinen erfolgreichen Klick vor. Ist das Zielelement ausgeblendet, deaktiviert, außerhalb des sichtbaren Bereichs oder von einem anderen Element verdeckt, etwa einem Cookie-Einwilligungsdialog, meldet click den Fehler direkt. Das hilft dem Agenten, denn die Fehlermeldung liefert bereits die Grundlage für die nächste Entscheidung.
| Fehlerursache | Typisches Anzeichen | Empfohlene Maßnahme |
|---|---|---|
| Verdeckt | Ein Einwilligungsdialog oder Overlay liegt über der Schaltfläche | Das verdeckende Element schließen, einen neuen Snapshot erstellen und erneut versuchen |
| Außerhalb des sichtbaren Bereichs | Das Element liegt weiter unten auf der Seite | Mit scroll scrollen und anschließend einen neuen Snapshot erstellen |
| Element deaktiviert | Die Schaltfläche ist nicht anklickbar, weil das Formular unvollständig ist | Pflichtfelder mit fill ausfüllen und den Zustand mit einem Snapshot prüfen |
| Element ausgeblendet | Das Element erscheint erst nach dem Öffnen eines Menüs | Das Menü öffnen, mit wait warten und anschließend einen Snapshot erstellen |
| Ref veraltet | Die Seite wurde neu geladen oder eine andere Seite aufgerufen | snapshot erneut ausführen, um neue Refs zu erhalten |
Neben Refs unterstützt agent-browser auch CSS-Selektoren, Text, XPath und semantische Lokatoren. Beispielsweise findet agent-browser find role button click --name "Submit" eine Schaltfläche anhand ihrer Rolle und ihres Namens und klickt sie an. Bei stabiler Seitenstruktur und klarer Semantik können semantische Lokatoren Refs sinnvoll ergänzen.
Häufig verwendete agent-browser-Befehle nach Gruppen
agent-browser bietet eine breite Auswahl an Befehlen. Die vollständige Liste kannst du mit agent-browser --help anzeigen. Hilfe zu einem einzelnen Befehl erhältst du mit agent-browser <command> --help. Die folgende Übersicht zeigt die wichtigsten Gruppen und hilft dir zu entscheiden, welche Funktionen du deinem Agenten zur Verfügung stellen möchtest.
| Gruppe | Typische Befehle | Anwendungsfälle |
|---|---|---|
| Navigation und Lesen | open, back, reload, read, snapshot, get, is |
Seiten öffnen, Snapshots lesen, Status abfragen |
| Interaktion | click, fill, type, press, select, check, scroll, upload, find |
Klicken, Formulare ausfüllen, Dateien hochladen |
| Warten | wait |
Warten, bis Elemente erscheinen oder Seiten geladen sind |
| Aufzeichnung und Export | screenshot, pdf, record, download, diff |
Screenshots erstellen, PDFs exportieren, Bildschirm aufnehmen, Seiten vergleichen |
| Seiten- und Netzwerkstatus | cookies, storage, network, eval |
Cookies verwalten, Netzwerkverkehr abfangen, Skripte ausführen |
| Tabs und Dialoge | tab, frame, dialog |
Mehrere Tabs, iframes und Dialoge verwalten |
| Debugging und Performance | console, errors, trace, vitals, a11y |
Konsolenfehler und Performance-Kennzahlen erfassen |
| Sitzungen und Authentifizierung | session, state, auth, confirm, deny |
Sitzungen isolieren, Anmeldestatus verwalten, sensible Aktionen bestätigen |
| Agent-Integration | skills, mcp, flow, batch, plugin |
Skills laden, MCP-Dienst starten |
Als Browser-Engine wird standardmäßig Chrome for Testing verwendet. Du kannst dich mit --cdp oder --auto-connect auch mit einem bereits laufenden Chrome verbinden, mit --engine zur Lightpanda- oder Obscura-Engine wechseln, Mobile Safari in einem iOS-Simulator steuern oder Cloud-Browserdienste wie Browserbase, Browserless, Browser Use, Kernel und AgentCore anbinden.
agent-browser in einen KI-Agenten integrieren
Den Agenten mit integrierten Skills anlernen
Ein cleveres Detail von agent-browser: Die Nutzungsanleitung wird direkt mit der CLI ausgeliefert. Der Befehl agent-browser skills get core gibt den grundlegenden Ablauf, die Verwendung von Refs, Wartestrategien und gängige Workflows aus. Mit --ref commands lässt sich gezielt eine Referenz abrufen, etwa die vollständige Befehlsliste. --full ergänzt die vollständige Befehlsreferenz und Vorlagen. Mit agent-browser skills list lassen sich außerdem spezielle Skills wie electron, slack und dogfood auflisten.
In einem Agent-Framework lässt sich der Discovery-Skill mit npx skills add vercel-labs/agent-browser installieren. Dieser Skill dient lediglich als schlanker Einstieg und weist den Agenten an, agent-browser skills get core zu laden. So passen die Anweisungen immer zur installierten CLI-Version. Wer keinen Skill installieren möchte, kann stattdessen in AGENTS.md festhalten: Verwende agent-browser für die Browserautomatisierung. Führe vor der ersten Verwendung agent-browser skills get core aus und folge den Anweisungen.
Anbindung über MCP
Wenn dein Client MCP unterstützt, startet agent-browser mcp einen MCP-Server über stdio. So können Desktop-Clients wie Claude oder selbst entwickelte Agents Browseraktionen als Standard-Tool aufrufen, ohne dafür eine eigene Shell-Ausführungsschicht zu benötigen.
Das passende Modell für den Snapshot-Ref-Zyklus wählen
Browseraufgaben bestehen oft aus vielen Durchläufen, die jeweils einen Snapshot als Text enthalten. Der Anteil der Eingabe-Token ist deshalb meist deutlich höher als der der Ausgabe-Token. Bei der Modellauswahl solltest du neben der Fähigkeit, Anweisungen zu befolgen, besonders auf die Eingabe- und Cache-Preise achten. Für alle Preise in der folgenden Tabelle gelten die tatsächlichen Angaben auf der APIYI-Preisseite docs.apiyi.com/models. Einheit und Abrechnungsgrundlage findest du ebenfalls dort.
| Modell | Eingabepreis | Ausgabepreis | Cache-Preis | Geeignete Rolle | Verfügbare Plattform |
|---|---|---|---|---|---|
| claude-opus-5-5 | $4 | $20 | $0.2 | Komplexe mehrstufige Aufgaben, schwierige Seiten | APIYI apiyi.com |
| claude-sonnet-5-5 | $2 | $10 | $0.1 | Standardmodell für den Alltag | APIYI apiyi.com |
| kimi-k3.1-pro | $2 | $10 | $0.2 | Chinesischsprachige Webseiten | APIYI apiyi.com |
| deepseek-v4.1-flash | $0.3 | $1.2 | $0.006 | Einfache Formulare, Stapelprüfungen | APIYI apiyi.com |
Eine praktische Kombination: Nutze deepseek-v4.1-flash für einfach strukturierte Stapelaufgaben mit festen Abläufen und claude-sonnet-5-5 als allgemeines Standardmodell. Bei komplexen Interaktionen oder Seiten, auf denen häufig Fehler auftreten, kannst du zu claude-opus-5-5 wechseln. Da Skills-Texte und System-Eingabeaufforderungen in jedem Durchlauf erneut vorkommen, sind Modelle mit niedrigen Cache-Preisen bei langen Zyklen oft kostengünstiger.
Die ERNIE-Reihe von Wenxin ist derzeit nicht in der APIYI-Preisliste zu finden. APIYI bietet diese Modelle aktuell noch nicht an, wird sie aber schnellstmöglich bereitstellen. Falls dein Agent bislang auf ERNIE setzt, kannst du zunächst die Modelle aus der Tabelle als Alternative testen.
💡 Auswahltipp: Kein Modell ist auf allen Websites am besten. Wähle am besten 3 bis 5 echte Seiten aus deinem Arbeitsalltag für einen kleinen Test. Wechsle auf APIYI apiyi.com über die einheitliche Schnittstelle zwischen den Modellen und vergleiche Erfolgsquote und Kosten pro Aufgabe, bevor du dich für ein Standardmodell entscheidest.
Empfehlungen für den sicheren Einsatz von agent-browser
Wenn ein Agent einen echten Browser bedient, sollten die Sicherheitsgrenzen von Anfang an feststehen. Das Sicherheitskapitel der offiziellen agent-browser-Dokumentation beschreibt dafür Mechanismen wie den Zugangsdaten-Tresor (auth vault), eine Domain-Allowlist, Aktionsrichtlinien und Inhaltsgrenzen. Auf Befehlsebene verwaltet auth die Zugangsdaten; mit confirm und deny lassen sich sensible Aktionen bestätigen oder ablehnen.
Für den produktiven Einsatz empfehlen sich mindestens drei Maßnahmen:
- Zugriff auf Domains beschränken: Eine Domain-Allowlist begrenzt den Agenten auf geschäftlich relevante Websites und verhindert, dass eine Seite ihn auf unbekannte Websites umleitet.
- Zugangsdaten aus dem Kontext heraushalten: Kontonamen und Passwörter gehören in den auth vault, nicht in die Eingabeaufforderung. So erscheinen sie nicht in den Modell-Logs.
- Sensible Aktionen von Menschen bestätigen lassen: Zahlungen, Löschungen und Bestellungen sollten eine Bestätigung erfordern. So bleibt die letzte Entscheidung beim Menschen.
Auch Webseiten selbst können bösartige Anweisungen für Agenten enthalten. Deshalb lohnt es sich, den Mechanismus für Inhaltsgrenzen zu aktivieren. Er hilft dem Modell, klar zwischen „Text auf der Seite“ und „Anweisungen des Nutzers“ zu unterscheiden, und senkt so das Risiko von Prompt-Injection-Angriffen.
Häufige Fragen (FAQ)
Q1: Was ist der Snapshot-Ref-Zyklus von agent-browser?
Das ist die grundlegende Arbeitsweise von agent-browser: Zuerst liest `snapshot` die Seite als kompakten Text mit Refs ein. Dann wird eine Aktion auf einem Ref ausgeführt und mit einem erneuten Snapshot das Ergebnis überprüft. Dieser Ablauf wiederholt sich. So werden das Verstehen der Seite und das Ausführen von Aktionen in überprüfbare kleine Schritte aufgeteilt – ideal für die schrittweise Verarbeitung durch ein Großes Sprachmodell.
Q2: Wie unterscheidet sich agent-browser von Screenshot-gesteuerten Browser-Agenten?
Screenshot-basierte Ansätze sind beim visuellen Verständnis vielseitiger, verbrauchen aber mehr Tokens, und Klicks anhand von Koordinaten können leicht danebenliegen. agent-browser nutzt dagegen den Text des Barrierefreiheitsbaums und Refs zur Lokalisierung. Das hält den Kontext kompakt, macht Aktionen präziser und liefert bei Fehlern klare Meldungen. Für Automatisierungsaufgaben, die zuverlässig ausgeführt werden müssen, ist dieser Ansatz daher oft besser geeignet.
Q3: Warum lassen sich alte Refs nach einer Seitennavigation nicht weiterverwenden?
Ein Ref beschreibt die Seite nur zum Zeitpunkt des Snapshots. Nach einer Navigation oder DOM-Änderung können Elemente verschwunden oder ersetzt worden sein. Alte Refs sind dann möglicherweise ungültig oder verweisen auf das falsche Element. Erstellen Sie deshalb nach jeder Seitenänderung mit `snapshot` einen neuen Snapshot und verwenden Sie die neuen Refs.
Q4: Für welche Anwendungsfälle eignet sich agent-browser?
Besonders geeignet ist agent-browser für:
– **Automatisches Ausfüllen von Formularen**: Abläufe mit festen Schritten wie Registrierung, Anmeldung oder Dateneingabe im Backend.
– **Website-Überwachung und Regressionstests**: Seitenfehler und Performance mit `errors`, `console` und `vitals` prüfen.
– **Informationssammlung**: Nach der Anmeldung im Backend Daten über die Menüs seitenweise auslesen.
– **Spezielle Anwendungsfälle wie Electron und Slack**: Mit den spezialisierten Skills aus `skills list` erweitern.
Q5: Wie binde ich das Modell an, das agent-browser steuert?
Gehen Sie dazu wie folgt vor:
1. Registrieren Sie ein Konto bei APIYI auf apiyi.com und beschaffen Sie einen API-Schlüssel.
2. Wählen Sie im Agent-Framework ein OpenAI- oder Anthropic-kompatibles Format und tragen Sie die Verbindungsparameter gemäß der Dokumentation auf docs.apiyi.com ein.
3. Verwenden Sie den in diesem Artikel beschriebenen 5-Schritte-Zyklus als Testaufgabe und vergleichen Sie die Ergebnisse verschiedener Modelle.
APIYI bietet einen einheitlichen Zugang zu verschiedenen Modellen, darunter Claude, DeepSeek und Kimi. Zum Wechseln des Modells müssen Sie nur den Modellnamen ändern.
Q6: Wie lassen sich die Modellkosten für den Snapshot-Ref-Zyklus schätzen?
Bei Browseraufgaben fallen vor allem Eingabe-Tokens an, da in jeder Runde der Snapshot-Text und die Systemanweisung mitgesendet werden. Achten Sie bei der Schätzung vor allem auf die Preise für Eingabe- und Cache-Tokens und verkürzen Sie Snapshots möglichst mit `snapshot -i`. Die aktuellen Preise der einzelnen Modelle finden Sie auf der APIYI-Preisseite docs.apiyi.com/models. Verlassen Sie sich nicht auf veraltete Preisangaben von Drittanbietern.
Q7: Welche Einschränkungen von agent-browser sind bekannt?
Da Refs nur begrenzt gültig sind, muss der Agent häufig neue Snapshots erstellen. Dadurch steigt die Zahl der Runden. Bei Seiten, auf denen viele Informationen zur Barrierefreiheit fehlen, sind Snapshots möglicherweise unvollständig. In solchen Fällen können CSS-Selektoren, XPath oder Screenshots helfen. Außerdem wird der Headless-Browser nach einer Stunde Inaktivität automatisch geschlossen. Für länger laufende Aufgaben muss daher die Sitzungspersistenz konfiguriert werden.
agent-browser snapshot-ref: Das Wichtigste auf einen Blick
- Grundprinzip: agent-browser ist eine Open-Source-CLI von Vercel Labs, geschrieben in Rust. Sie lässt Agents den Browser Befehl für Befehl steuern.
- Zentraler Ablauf: Seitensnapshot lesen, eine Aktion über eine ref ausführen und das Ergebnis mit einem neuen Snapshot prüfen – dann den Zyklus wiederholen.
- Grundregel für refs: Nach einer Seitennavigation oder DOM-Änderung immer einen neuen Snapshot erstellen, bevor eine ref verwendet wird.
- Fehler als Signal: Ein Klick auf ein verdecktes oder deaktiviertes Element schlägt fehl. Der Agent sollte zuerst das Hindernis beheben und es dann erneut versuchen.
- Integration: Mit
skills get corelassen sich Anweisungen für die passende Version laden. Alternativ verbindetagent-browser mcpden Browser mit einem MCP-Client. - Sicherheit zuerst: In Produktionsumgebungen Domain-Allowlist, Auth Vault und Bestätigungen für sensible Aktionen aktivieren.
- Modellauswahl: Über APIYI apiyi.com lassen sich steuernde Modelle über eine einheitliche Schnittstelle vergleichen. Die Preise stehen unter docs.apiyi.com/models.
Zusammenfassung
Die wichtigsten Punkte zum snapshot-ref-Zyklus von agent-browser:
- Text statt Screenshots: Snapshots des Accessibility Trees mit refs helfen dem Modell, die Seite mit möglichst wenig Kontext zu verstehen.
- Jeden Schritt prüfen: Nach jeder Aktion die Seite oder URL auslesen, damit der Agent nicht in einem falschen Zustand weiterarbeitet.
- Fehler gezielt behandeln: Für verdeckte Elemente, Probleme mit dem Viewport, deaktivierte Elemente und abgelaufene refs gibt es klare Lösungswege.
- Einfache Integration: npm-Installation, integrierte Skills und MCP-Dienst ermöglichen eine schnelle Einbindung in bestehende Agents.
Am besten zunächst die fünf Befehle open, snapshot, click, get und close manuell im Terminal ausprobieren. Danach die Regeln für den Zyklus in die System-Eingabeaufforderung des Agents aufnehmen und schliesslich anhand echter Geschäftsseiten ein geeignetes Modell auswählen.
Über APIYI apiyi.com lässt sich schnell testen, wie gut verschiedene Modelle agent-browser steuern. Die Plattform unterstützt die Schnittstellenformate von OpenAI und Anthropic. Hinweise zur Integration gibt es unter docs.apiyi.com, die Modellpreise stehen unter docs.apiyi.com/models.
📚 Referenzen
- GitHub – agent-browser: Offizielles Open-Source-Repository
- Link:
github.com/vercel-labs/agent-browser -
Beschreibung: Enthält Installationsanleitungen, einen Schnelleinstieg, Befehlsgruppen und Hinweise zur Entwicklung
-
Offizielle Dokumentation von agent-browser: Vollständiger Leitfaden und Befehlsreferenz
- Link:
agent-browser.dev -
Beschreibung: Behandelt Snapshots, Selektoren, Sitzungen, den CDP-Modus und Sicherheitsmechanismen
-
Sicherheitsdokumentation von agent-browser: Authentifizierung und Zugriffskontrolle
- Link:
agent-browser.dev/security -
Beschreibung: Stellt Auth Vault, Domain-Allowlist, Aktionsrichtlinien und Inhaltsgrenzen vor
-
APIYI Dokumentationszentrum: Hinweise zur Modellanbindung
- Link:
docs.apiyi.com -
Beschreibung: Anbindung über OpenAI- und Anthropic-kompatible Formate
-
APIYI Modellpreisseite: Tatsächliche Abrechnung der einzelnen Modelle
- Link:
docs.apiyi.com/models - Beschreibung: Für alle Modellpreise in diesem Artikel ist diese Seite massgeblich
Autor: APIYI Technikteam
Technischer Austausch: Kontaktieren Sie uns gerne über die Startseite von APIYI unter apiyi.com. Weitere Informationen zur Anbindung finden Sie im Dokumentationszentrum unter docs.apiyi.com.
