Eine komfortable Weboberfläche für den Konsolen-KI-Agenten pi

Im Terminal zu arbeiten ist großartig, solange der Kontext auf einen Bildschirm passt. Der Konsolen-Coding-Agent pi eignet sich hervorragend für schnelle Bearbeitungen, aber eine stundenlange Debugging-Sitzung wird zum Chaos aus Funktionsaufrufen, generiertem Code und Fehlermeldungen. Viel Glück beim Finden des Punktes in diesem Strom, an dem das Modell vom Weg abgekommen ist, oder beim Erinnern, welche Datei es vor zwanzig Minuten bearbeitet hat.

Der Entwickler agegr hat dieses Problem auf sehr praktische Weise gelöst: Er schrieb eine lokale Web-Shell namens pi- web. Das Tool liest pi-Agent-Logdateien und öffnet ein komfortables visuelles Dashboard im Browser.

Was ist pi-web und wie es funktioniert

Im Kern ist pi-web ein Wrapper um den Konsolen-Agenten pi. Anstatt den Agenten selbst neu zu schreiben, erstellte der Autor ein Frontend, das .jsonl-Dateien aus dem ~/.pi/agent/sessions-Verzeichnis parst.

Die Anwendung läuft vollständig lokal. Du kannst sie ohne vorherige Installation mit einem einzigen Befehl starten:

npx @agegr/pi-web@latest

Der Server startet auf Port 30141 und öffnet automatisch einen Tab im Browser. Wenn der Port belegt ist oder du nur lokalen Zugriff benötigst, können die Parameter einfach über Flags geändert werden:

pi-web --port 8080 --hostname 127.0.0.1

Was sich im Workflow ändert

Das Hauptproblem bei Konsolen-KI-Dialogen ist der Verlust der Struktur. Im Terminal sieht alles aus wie eine massive Textwand. Die Weboberfläche zerlegt dieselbe Sitzung in klare, visuelle Blöcke.

Visuelle Sitzungsverzweigung

Wenn der KI-Agent in Sackgassen gerät, musst du in der Konsole entweder den Dialog zurücksetzen oder eine lange Historie von Wiederholungsversuchen generieren. Pi-web hat zwei Wege für sichere Experimente:

• Fork erstellt eine separate Sitzungs-.jsonl-Datei. Du kannst einen neuen Weg einschlagen, während du das alte Ergebnis behältst.
• Das Bearbeiten ab einer ausgewählten Nachricht erstellt einen zusätzlichen Zweig innerhalb derselben Sitzung.

Dateibetrachtung neben dem Chat

Während der Agent Code bearbeitet oder Dokumentation schreibt, kannst du Änderungen direkt im angrenzenden Panel verfolgen. Der Projektexplorer befindet sich links, der Vorschaubereich rechts. Der integrierte Viewer zeigt nicht nur Quelldateien und Diffs. Er verarbeitet mühelos Bilder, Audio, PDFs und DOCX-Dokumente.

Transparente Token- und Einstellungskontrolle

Die obere Leiste zeigt verbrauchte Tokens, Sitzungskosten und den Status der Kontextkomprimierung. Kein Raten mehr, wie viel von deinen Limits verbraucht wurde und welcher System-Prompt gerade aktiv ist.

Die Verwaltung von Modellen und API-Schlüsseln wurde ebenfalls von Konsolen-JSON-Dateien in eine grafische Oberfläche verschoben. Über die Einstellungs-Panels kannst du das Standardmodell ändern, Verbindungen testen und Agent-Fähigkeiten umschalten.

Git-Worktrees-Unterstützung

Wenn du Git-Worktrees für parallele Arbeit an mehreren Branches verwendest, kann die pi-web-Seitenleiste Umgebungen im Handumdrehen wechseln. Der Datei-Explorer und neue Sitzungen passen sich automatisch an den ausgewählten Checkout an.

Wie die Architektur aufgebaut ist

Das Projekt ist in TypeScript unter Verwendung des Next.js-Frameworks geschrieben. Die Repository-Struktur ist einfach und übersichtlich.

Der app/api-Ordner enthält Endpoints für die Arbeit mit dem Agenten:

• agent/ verarbeitet das Starten von Sitzungen und Event-Streaming über Server-Sent Events (SSE).
• files/ verarbeitet das Lesen von Dateien, Diffs und Änderungsverfolgung.
• models-config/ und skills/ verwalten Agent-Konfigurationen.

Die Sicherheit wird durch das lib/file-access.ts-Modul gewährleistet. Es beschränkt den Dateimanager auf das aktuelle Projekt und die an der Sitzung beteiligten Verzeichnisse. Du kannst keine zufällige Systemdatei über die UI lesen.

Für wen ist dieses Projekt nützlich

Wenn du den pi-Coding-Agenten aktiv nutzt, solltest du pi-web auf jeden Fall ausprobieren. Das Projekt löst das Hauptproblem von CLI-Tools – den Mangel an visueller Klarheit.

Die Oberfläche wird in zwei Fällen besonders komfortabel:

• Beim Debuggen komplexer Aufgaben, die häufiges Zurückkehren zu vergangenen Schritten und Vergleichen von Lösungsvarianten erfordern.
• Bei der Arbeit mit Mediendateien und Dokumentation, wenn die Möglichkeit, Ergebnisse schnell im Browser in der Vorschau anzuzeigen, Zeit spart.

Das Tool wird aktiv weiterentwickelt: Es hat bereits über 16.000 Sterne auf GitHub und regelmäßige Commits. Du brauchst nur Node.js und den pi-Agenten installiert, um es auszuführen, daher dauert die Einrichtung buchstäblich ein paar Minuten.