Retour visuel pour les agents IA sans captures d'écran ni explications fastidieuses

Vous demandez à Claude Code ou Copilot de créer un diagramme d'architecture ou un plan produit. L'agent génère un document HTML interactif avec des diagrammes. Mais dès que vous souhaitez corriger une étiquette sur un bloc ou déplacer un élément, cela devient fastidieux. Vous devez soit prendre une capture d'écran avec des flèches, soit le décrire textuellement : « dans la troisième section en partant du bas, remplacez le bloc B par C ».

L'idée derrière le dépôt lavish-axi est de ramener l'interactivité normale dans ce processus. Au lieu de descriptions textuelles, l'outil ouvre le fichier généré dans le navigateur et propose des outils d'édition pratiques.

Ce que fait Lavish Editor

Il s'agit d'un utilitaire CLI et d'une implémentation du protocole AXI (Agent eXtension Interface). L'outil démarre un serveur web local et ouvre le fichier HTML généré dans le navigateur.

Vous sélectionnez du texte, cliquez sur des éléments, laissez des commentaires ou modifiez des diagrammes. Toutes les notes sont collectées dans une file d'attente et renvoyées à l'agent via du long-polling ou des hooks CLI. Le réseau neuronal reçoit des sélecteurs CSS précis et des fragments de texte, ce qui lui permet de comprendre rapidement exactement ce qui doit être corrigé.

Tout fonctionne entièrement en local. Pas de nuages tiers ni d'envoi de votre code vers des serveurs externes par défaut.

Conversion de Mermaid en tableau Excalidraw

Si l'agent génère un diagramme Mermaid, Lavish le convertit automatiquement en tableau Excalidraw interactif directement sur la page.

Vous cliquez sur le diagramme, déplacez les formes, dessinez des connexions ou modifiez le texte. Ensuite, vous cliquez sur envoyer la rétroaction. L'outil génère un résumé des modifications avec un aperçu visuel, et l'agent met à jour le code Mermaid original dans le fichier.

Dans le même temps, le HTML final lui-même n'est pas pollué par des bibliothèques externes. Si vous l'ouvrez dans un navigateur ordinaire sans Lavish, il affichera du Mermaid standard et propre.

Validation automatique de la mise en page

Un détail intéressant : avant de présenter l'artefact à une personne, Lavish exécute une vérification interne de la mise en page.

Le script intégré vérifie si le texte a débordé des limites du conteneur et si des contrôles sont masqués. Si une rupture d'interface critique est détectée, l'outil enverra un message à l'agent pour révision avant que la page ouverte n'attire votre attention.

Comment cela fonctionne techniquement

L'interaction repose sur des principes clairs :

• Les sessions sont liées au chemin canonique du fichier HTML, les agents n'ont pas besoin de stocker des ID.
• L'artefact s'exécute dans un iframe isolé, le script d'injection ne perturbe pas vos styles.
• La rétroaction est envoyée à l'agent dans un format TOON compact pour économiser les jetons de contexte.
• La page se recharge automatiquement lors de l'enregistrement du fichier, en conservant la position de défilement.

Pour partager le résultat avec vos collègues, la commande export conditionne les images et les styles dans un seul fichier autonome. Et si vous avez besoin de publier rapidement le résultat en ligne, la commande share le téléchargera facultativement vers un hébergement public ou protégé par mot de passe.

Connexion aux agents

Le moyen le plus simple d'ajouter l'outil est via le gestionnaire de compétences :

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

Dans Claude Code ou des environnements similaires, une commande prête à l'emploi apparaîtra :

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

Pour une intégration de bout en bout dans toutes les sessions de développement, vous pouvez installer l'utilitaire globalement et activer les hooks :

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

La commande écrira un hook SessionStart pour Claude Code, Codex, OpenCode et GitHub Copilot CLI. Lorsqu'une nouvelle session démarre, l'agent verra immédiatement les processus de révision actifs.

À qui ce projet sera utile

L'utilitaire est utile pour les développeurs qui donnent activement des tâches aux agents IA pour créer de la documentation technique et des prototypes d'interface. L'outil élimine complètement les allers-retours sans fin sur le sujet de « corrige ce bloc à droite » et économise les jetons de contexte.