Visuele feedback voor AI-agents zonder screenshots en lange uitleg

Je vraagt Claude Code of Copilot om een architectuurdiagram of productplan te maken. De agent genereert een interactief HTML-document met diagrammen. Maar op het moment dat je een label op een blok wilt corrigeren of een element wilt verplaatsen, wordt het lastig. Je moet ofwel een screenshot maken met pijlen, of het in tekst beschrijven: "in het derde gedeelte van onderen, vervang blok B door C."

Het idee achter de lavish-axi repository is om normale interactiviteit terug te brengen in dit proces. In plaats van tekstbeschrijvingen opent de tool het gegenereerde bestand in de browser en biedt handige bewerkingshulpmiddelen.

Wat Lavish Editor Doet

Dit is een CLI-hulpprogramma en implementatie van het AXI-protocol (Agent eXtension Interface). De tool start een lokale webserver en opent het gegenereerde HTML-bestand in de browser.

Je selecteert tekst, klikt op elementen, laat opmerkingen achter of bewerkt diagrammen. Alle notities worden verzameld in een wachtrij en teruggestuurd naar de agent via long-polling of CLI-hooks. Het neurale netwerk ontvangt nauwkeurige CSS-selectors en tekstfragmenten, zodat het snel begrijpt wat er precies moet worden aangepast.

Alles werkt volledig lokaal. Geen externe clouds of het verzenden van je code naar externe servers standaard.

Mermaid Converteren naar Excalidraw Bord

Als de agent een Mermaid-diagram genereert, converteert Lavish het automatisch naar een interactief Excalidraw-bord direct op de pagina.

Je klikt op het diagram, verplaatst vormen, tekent verbindingen of wijzigt tekst. Vervolgens klik je op feedback verzenden. De tool genereert een samenvatting van de wijzigingen met een visueel voorbeeld, en de agent werkt de originele Mermaid-code in het bestand bij.

Tegelijkertijd wordt het uiteindelijke HTML zelf niet verontreinigd met externe bibliotheken. Als je het opent in een gewone browser zonder Lavish, wordt standaard schone Mermaid weergegeven.

Automatische Layout Validatie

Een interessant detail: voordat Lavish het artifact aan een persoon toont, voert het een interne layout-controle uit.

Het ingebouwde script controleert of tekst over de containergrenzen is gelopen en of controls worden overlapt. Als een kritieke interface-breuk wordt gedetecteerd, stuurt de tool een bericht naar de agent voor revisie voordat de geopende pagina je aandacht trekt.

Hoe Het Technisch Werkt

De interactie is gebouwd op duidelijke principes:

• Sessies zijn gekoppeld aan het canonische HTML-bestandspad, agents hoeven geen IDs op te slaan.
• Het artifact draait in een geïsoleerde iframe, het injectiescript breekt je styles niet.
• Feedback wordt naar de agent gestuurd in een compact TOON-formaat om context-tokens te besparen.
• De pagina wordt automatisch ververst wanneer het bestand wordt opgeslagen, met behoud van scrollpositie.

Om het resultaat met collega's te delen, verpakt de export opdracht afbeeldingen en stijlen in een enkel standalone bestand. En als je het resultaat snel online wilt publiceren, uploadt de share opdracht het optioneel naar openbare of met wachtwoord beveiligde hosting.

Verbinding Maken met Agents

De gemakkelijkste manier om de tool toe te voegen is via de skill manager:

npx skills add kunchenguid/lavish-axi --skill lavish

In Claude Code of vergelijkbare omgevingen verschijnt een kant-en-klare opdracht:

/lavish давайте обсудим план проекта

Voor end-to-end integratie in alle ontwikkelsessies kun je het hulpprogramma globaal installeren en hooks inschakelen:

npm install -g lavish-axi
lavish-axi setup hooks

De opdracht schrijft een SessionStart hook voor Claude Code, Codex, OpenCode en GitHub Copilot CLI. Wanneer een nieuwe sessie start, ziet de agent onmiddellijk actieve review-processen.

Voor Wie Dit Project Nuttig Is

Het hulpprogramma is nuttig voor ontwikkelaars die actief taken aan AI-agents geven om technische documentatie en interface-prototypes te maken. De tool elimineert volledig eindeloze heen-en-weer discussies over "verplaats dat blok rechts" en bespaart context-tokens.