Browser CLI: Ein Token-effizientes Browser-Automatisierungstool für KI-Codierungsagenten

Was Browser CLI tut

Browser CLI ist ein Browser-Automatisierungstool, das entwickelt wurde, um den Token-Overhead in KI-Coding-Agenten zu adressieren. Der Ersteller stellte fest, dass die Browser-Verifizierung über den Playwright MCP-Protokoll-Overhead etwa 30.000 Token pro Sitzung verbrauchte, wobei jeder browser_navigate + browser_snapshot-Aufruf etwa 1.500 Token in JSON-Schema-Framing kostete.

Die Lösung ist ein persistenter Headless-Chromium-Daemon, mit dem Sie über Bash-Befehle interagieren. Er verwendet dieselbe Playwright-ARIA-Snapshot-Technologie im Hintergrund, erreicht aber etwa 50-100 Token pro Aufruf statt etwa 1.500.

Befehle und Verwendung

Verfügbare Befehle umfassen:

• browser-cli goto https://example.com - Zu URL navigieren
• browser-cli snapshot -i - ARIA-Baum mit @e-Referenzen
• browser-cli click @e3 - Per Referenz klicken
• browser-cli fill @e5 "hello" - Eingabefeld ausfüllen
• browser-cli css @e3 font-size - Berechneten CSS-Wert abrufen
• browser-cli inspect @e3 - Vollständiges Box-Modell + Stile
• browser-cli screenshot /tmp/page.png - Screenshot
• browser-cli snapshot -D - Diff: Was sich seit dem letzten Snapshot geändert hat
• browser-cli responsive /tmp - Screenshots für Mobilgerät/Tablet/Desktop

Der Server startet automatisch beim ersten Aufruf (~3s), danach dauern nachfolgende Aufrufe etwa 100-200ms. Er bleibt 30 Minuten aktiv und bewahrt Cookies, Tabs und Zustand zwischen Befehlen.

Token-Einsparungen

Token-Vergleich:

• Playwright MCP: ~1.500 Token pro Aufruf, ~30.000 Token für 20 Aufrufe
• Browser CLI: ~75 Token pro Aufruf, ~1.500 Token für 20 Aufrufe

Das sind 95 % Einsparungen bei der Browser-Verifizierung. Für automatisierte Pipelines, die mehrere Aufgaben pro Sitzung durchführen, potenziert sich dies schnell.

Funktionen über Playwright MCP hinaus

• CSS-Inspektion - css @e3 padding gibt berechnete Werte zurück. inspect @e3 liefert vollständiges Box-Modell + 16 Schlüsselstile als JSON.
• Live-Style-Mutation - style @e3 color red mit style --undo. CSS debuggen, ohne Quellcode zu berühren.
• Snapshot-Diffing - snapshot -D vergleicht Vorher/Nachher-ARIA-Bäume.
• Responsive-Voreinstellungen - responsive /tmp macht Mobil-, Tablet- und Desktop-Screenshots in einem Befehl.
• Auth-Profile - handoff öffnet sichtbares Chrome für manuelle SSO/MFA-Anmeldung, resume kehrt zu Headless zurück, auth-save admin verschlüsselt die Sitzung (AES-256). Nächstes Mal: goto-auth https://app.com/dashboard --profile admin — keine Anmeldung nötig.
• Befehls-Batching - chain [["goto","url"],["snapshot","-i"],["console"]] führt mehrere Befehle in einem Aufruf aus.

Technische Implementierung

Architektur: KI-Agent → Bash → CLI-Client (bin/browse.mjs) → HTTP POST (localhost) → Server (src/server.mjs) → Playwright API → Chromium (headless).

Reines Node.js. Playwright ist die einzige Abhängigkeit. Kein Bun, kein Rust, kein MCP-Overhead.

Claude Code Integration

Global installieren:

npm install -g @tuandm/browser-cli

Zu .claude/settings.json hinzufügen:

{
  "permissions": {
    "allow": ["Bash(browser-cli*)"]
  }
}

Eine Regel unter .claude/rules/browser-cli.md hinzufügen, die Claude anweist, Browser CLI statt Playwright MCP zu verwenden. Der Ersteller führte 5 Evaluierungsszenarien durch und Claude wählte jedes Mal den richtigen Befehl, wenn die Regel geladen war.

Es wird auch als Claude Code-Plugin (plugin.json enthalten) für zukünftige Marktplatz-Verteilung geliefert.

Inspiration und Technologie

Inspiriert von gstack von Garry Tan, das den persistenten Chromium-CLI-Ansatz für KI-Agenten vorantrieb. Die Kern-Erkenntnis war, dass Bash-Befehle für Browser-Automatisierung dramatisch token-effizienter sind als MCP. Die zugrundeliegende Technologie ist Playwright von Microsoft.