Een handige webinterface voor de console AI-agent pi

Werken in de terminal is geweldig zolang de context op één scherm past. De console-codeeragent pi is uitstekend voor snelle bewerkingen, maar een uur durende debugsessie verandert in een chaos van functieaanroepen, gegenereerde code en foutmeldingen. Succes met het vinden van het punt in die stroom waar het model van de rails raakte, of met het herinneren welk bestand het twintig minuten geleden bewerkte.

Ontwikkelaar agegr heeft dit probleem op een zeer praktische manier opgelost: ze schreef een lokale web-shell genaamd pi-web. Het tool leest pi-agent logbestanden en start een handig visueel dashboard in de browser op.

Wat is pi-web en hoe het werkt

In de kern is pi-web een wrapper rond de console-agent pi. In plaats van de agent zelf te herschrijven, heeft de auteur een frontend gemaakt die .jsonl bestanden uit de ~/.pi/agent/sessions directory parseert.

De applicatie draait volledig lokaal. Je kunt hem zonder enige voorafgaande installatie starten met één commando:

npx @agegr/pi-web@latest

De server start op poort 30 en opent automatisch een tabblad in de browser. Als de poort bezet is of je alleen lokale toegang nodig hebt, zijn de parameters eenvoudig aan te passen via flags:

pi-web --port 8080 --hostname 127.0.0.1

Wat verandert er in de workflow

Het главная probleem met console AI-dialogen is het verlies van structuur. In de terminal ziet alles eruit als een solide muur van tekst. De webinterface breekt dezelfde sessie op in duidelijke, visuele blokken.

Visuele sessievertakking

Wanneer de AI-agent vastloopt, moet je in de console óf de dialoog resetten óf een lange geschiedenis van nieuwe pogingen genereren. Pi-web heeft twee paden voor veilig experimenteren:

• Fork creëert een apart sessie .jsonl bestand. Je kunt een nieuwe kant op gaan terwijl je het oude resultaat behoudt.
• Bewerken vanaf een geselecteerd bericht creëert een extra tak binnen dezelfde sessie.

Bestanden bekijken naast de chat

Terwijl de agent code bewerkt of documentatie schrijft, kun je wijzigingen direct volgen in het aangrenzende paneel. De projectverkenner staat links en het preview-gebied rechts. De ingebouwde viewer toont niet alleen bronbestanden en diffs. Het verwerkt moeiteloos afbeeldingen, audio, PDF's en DOCX-documenten.

Transparante token- en instellingencontrole

De bovenste balk toont verbruikte tokens, sessiekosten en de status van contextcompressie. Geen giswerk meer over hoeveel van je limieten zijn gebruikt en welke systeemprompt op dat moment actief is.

Model- en API-sleutelbeheer is ook verplaatst van console JSON-bestanden naar een grafische interface. Via de instellingenpanelen kun je het standaardmodel wijzigen, verbindingen testen en agent-vaardigheden in- of uitschakelen.

Git worktrees-ondersteuning

Als je Git worktrees gebruikt voor parallel werk aan meerdere branches, kan de pi-web zijbalk omgevingen direct omschakelen. De bestandsverkenner en nieuwe sessies passen zich automatisch aan de geselecteerde checkout aan.

Hoe de architectuur is ontworpen

Het project is geschreven in TypeScript met behulp van het Next.js framework. De repositorystructuur is eenvoudig en straightforward.

De app/api map bevat endpoints voor het werken met de agent:

• agent/ verwerkt sessie-start en event streaming via Server-Sent Events (SSE).
• files/ verwerkt bestandslezen, diffs en wijzigingstracking.
• models-config/ en skills/ beheren agent-configuraties.

Beveiliging wordt afgehandeld door de lib/file-access.ts module. Het beperkt de bestandsmanager tot het huidige project en directories die bij de sessie betrokken zijn. Je kunt geen willekeurig systeembestand lezen via de UI.

Wie heeft dit project nodig

Als je actief de pi-codeeragent gebruikt, moet je pi-web zeker proberen. Het project lost het главная probleem van CLI-tools op — het gebrek aan visuele helderheid.

De interface wordt vooral handig in twee gevallen:

• Bij het debuggen van complexe taken die frequent terugkeren naar eerdere stappen en het vergelijken van oplossingsvarianten vereisen.
• Bij het werken met mediabestanden en documentatie, wanneer de mogelijkheid om resultaten snel in de browser te bekijken tijd bespaart.

Het tool wordt actief ontwikkeld: het heeft al meer dan 16.000 sterren op GitHub en recente commits. Je hebt alleen Node.js en de pi-agent geïnstalleerd nodig om het te draaien, dus de installatie kost letterlijk een paar minuten.