ProofShot: Browser-Verifizierung für KI-Coding-Agents

ProofShot ist ein Open-Source, Agent-agnostisches CLI, das KI-Coding-Agents die Fähigkeit gibt, UI-Funktionen, die sie erstellen, zu verifizieren, indem es Browser-Sitzungen aufzeichnet, Screenshots erfasst und Fehler sammelt. Es löst das Problem, dass Agenten Code schreiben, aber nicht sehen können, wie er tatsächlich im Browser aussieht oder Layoutprobleme und Konsolenfehler erkennen können.

So funktioniert es

Das Tool folgt einem dreistufigen Workflow: Start, Test, Stopp. Der KI-Agent steuert den Browser mit agent-browser-Befehlen, während ProofShot die Sitzung aufzeichnet.

Grundlegende Verwendung:

proofshot start --run "npm run dev" --port 3000
# agent navigiert, klickt, macht Screenshots
proofshot stop

Detailliertes Workflow-Beispiel:

# 1. Start — Browser öffnen, Aufnahme beginnen, Server-Logs erfassen
proofshot start --run "npm run dev" --port 3000 --description "Login-Formular-Verifizierung"

2. Test — der KI-Agent steuert den Browser
agent-browser snapshot -i  # Interaktive Elemente anzeigen
agent-browser open http://localhost:3000/login  # Navigieren
agent-browser fill @e2 "[email protected]"  # Formular ausfüllen
agent-browser click @e5  # Absenden klicken
agent-browser screenshot ./proofshot-artifacts/step-login.png  # Beweise erfassen
3. Stopp — Video + Screenshots + Fehler in Proof-Artefakte bündeln
proofshot stop

Hauptfunktionen

• Funktioniert mit jedem KI-Coding-Agenten, der Shell-Befehle ausführen kann (Claude Code, Cursor, Codex, Gemini CLI, Windsurf, GitHub Copilot, usw.)
• Als Skill verpackt, damit KI-Agenten verstehen, wie man es verwendet
• Basiert auf agent-browser von Vercel Labs (beschrieben als "weit besser und schneller als Playwright MCP")
• Kein Test-Framework — entscheidet nicht über Bestehen/Scheitern, liefert nur Beweise
• Erstellt eigenständige HTML-Dateien mit Video, Screenshots und Logs
• Kann Artefakte mit proofshot pr als Inline-Kommentare in GitHub-PRs hochladen

Installation und Einrichtung

npm install -g proofshot
proofshot install

Der erste Befehl installiert das CLI und agent-browser (mit headless Chromium). Der zweite erkennt Ihre KI-Coding-Tools und installiert den ProofShot-Skill auf Benutzerebene — funktioniert automatisch in allen Projekten.

Ausgabe-Artefakte

Jede Sitzung erzeugt einen zeitgestempelten Ordner in ./proofshot-artifacts/ mit:

• session.webm — Videoaufnahme der gesamten Sitzung
• viewer.html — Eigenständiger interaktiver Viewer mit Scrub-Bar, Timeline und Console/Server-Log-Tabs
• SUMMARY.md — Markdown-Bericht mit Fehlern, Screenshots und Video
• step-*.png — Screenshots, die zu Schlüsselmomenten erfasst wurden
• session-log.json — Aktions-Timeline mit Zeitstempeln und Elementdaten
• server.log — Dev-Server stdout/stderr (bei Verwendung von --run)
• console-output.log — Browser-Konsolenausgabe

Verfügbare Befehle

• proofshot install — KI-Coding-Tools erkennen und ProofShot-Skill installieren
• proofshot start — Verifizierungssitzung mit Browser, Aufnahme, Fehlererfassung starten
• proofshot stop — Aufnahme stoppen, Fehler sammeln, Proof-Artefakte generieren
• proofshot exec — Pass-Through-Befehl

Das Tool ist komplett kostenlos und Open-Source, ohne Vendor-Lock-in oder Cloud-Abhängigkeit. Es ist für Entwickler konzipiert, die KI-Agenten verwenden, um UI-Funktionen zu erstellen und die Ergebnisse überprüfen möchten, ohne jedes Mal manuell den Browser zu öffnen.