Un espace léger pour voir, essayer et améliorer l’application de votre agent. Explorez les vrais écrans, indiquez ce qui doit changer et continuez depuis le code source.
Voyez ensemble les écrans complets, leurs états nommés et les parcours implémentés.
Une seule implémentation UI. Votre agent crée fixtures, adapter et contrôles de couverture.
Essayez 77 états et 44 parcours avec des données synthétiques, sans compte ni clé API.
Pourquoi j’ai créé Agent Canvas
L’IA facilitait la création d’une nouvelle page, pas la compréhension d’une application grandissante. Je voulais voir les écrans implémentés et leurs échecs sans tout parcourir ni maintenir un second fichier de design.
Agent Canvas transforme cette revue en paysage navigable. L’agent intègre le dépôt ; l’outil partagé apporte canevas, aperçus du vrai code, navigation suivie par la caméra et lecture vérifiée.
StoolSense est l’exemple public synthétique. Aucune session de production, donnée de santé réelle ou requête IA. Les événements facultatifs d’utilisation sont séparés des données de l’app.
Démo réelle : 77 états, 44 parcours et 121 entrées lisibles. La file inclut des cas isolés, pas 121 parcours E2E.
Voir, utiliser, rejouer
1
Dézoomez pour comprendre l’application
Écrans complets regroupés par page, recherche, filtres et panneaux repliables. Un lien de parcours déplace la caméra vers sa destination.
2
Zoomez pour utiliser la vraie UI
Browse verrouille les contrôles pendant le déplacement. Sélectionnez un écran puis Interact pour utiliser son code original avec des données jetables.
3
Indiquez précisément quoi changer
Sélectionnez un écran ou un élément UI, ajoutez votre demande et copiez une référence pour votre agent. Demandez-lui de modifier le code ; les aperçus liés au source se reconstruisent.
Choisissez un parcours pour voir ses écrans complets et transitions nommées. Un lien déplace la caméra vers sa destination.Vraie UI d’échec et de récupération. La lecture exécute des actions et vérifications ; tracer un lien ne constitue pas un test.
Du dépôt existant au canevas interactif
Confiez l’intégration à un agent capable de lire, modifier et exécuter des commandes. Aucun Storybook ni inventaire manuel préalable requis. Installer le paquet ne peuple pas le canevas.
À coller dans votre agent
Read https://github.com/tombelieber/app-canvas/blob/v0.16.0/AGENT_GUIDE.md and add a completely populated Agent Canvas to this repository. Discover all screens, components, variants, states and navigation from the whole application source. Use original UI code. Create the missing synthetic fixtures and render harnesses. Reconcile an independent source inventory with rendered cases and source-linked runtime checks. Add checked happy, failure and recovery journeys. Group by actual page and feature, connect checked flows, deduplicate repeated captures and resume checkpoints. Run --ui-complete against the original source root; keep the stricter --complete source audit separate and unchanged. Continue until the full landscape is populated and verified; report genuine blockers as incomplete. Keep production sessions, credentials and real user data out of previews.
Installer l’outil partagé
Utilisez Node.js 22+ et le gestionnaire et lockfile du projet. Installez la version GitHub épinglée, puis le navigateur. Avec npm 12, ajoutez --allow-git=root seulement si cette dépendance Git directe est bloquée ; ne changez pas la politique globale.
Exécutez plan sur tout le dépôt original. Examinez chaque fichier, ancrage UI, dépendance influençant l’UI et navigation réelle. Recensez les écrans et états indépendamment du catalogue ; gardez les UI non résolues visibles.
npx agent-canvas plan --source-root . --out ui-review/ui-inventory.json
npx agent-canvas status --inventory ui-review/ui-inventory.json
Afficher la vraie UI avec des fixtures
Créez config, catalog, fixtures synthétiques, preview entry et journeys dans ui-review. L’adapter importe pages, providers et styles d’origine. Remplacez données et dépendances, jamais l’UI ; refusez les requêtes inconnues.
Couvrez normal, vide, chargement, erreur, accès refusé, dialogues et récupération. Vérifiez chaque cas et les vrais contrôles dans des parcours continus. Réconciliez inventory, assertions liées au code et routes ; passez --ui-complete sur la même racine. --complete reste un audit strict et distinct de tout le code source. Ses éléments ouverts ne comptent pas les écrans manquants.
Lancez ui:review, examinez le canevas et rejouez un parcours. Faites modifier le vrai code. Les aperçus existants se reconstruisent ; nouveaux états et routes exigent inventory, fixtures et journeys actualisés. Exigez le contrôle complet avant livraison.
npm run ui:review
Ce qui reste dans votre application
Le paquet partagé possède viewer, CLI et skill. Votre dépôt conserve adapter, fixtures, inventory indépendant, catalog et tests d’interaction. Partez de l’exemple React/Vite exécutable ; les autres stacks ont leur adapter.
Skill facultative
Codex et Claude Code peuvent installer la skill fournie. Tout autre agent peut lire AGENT_GUIDE.md. Le runtime n’appelle aucun modèle et ne demande aucune clé API ; votre agent garde ses propres coûts et permissions.
npx agent-canvas install --target both
Avant de commencer
Est-ce gratuit ?
Le CLI, le canvas et les skills sont gratuits et open source sous licence MIT. Les coûts de votre agent restent distincts.
Compatible avec Claude Code et Codex ?
Oui. Installez les skills pour l’un ou les deux. Les autres agents peuvent suivre le guide public et utiliser le CLI. Le canvas n’appelle aucun modèle.
Faut-il un fichier de design ?
Partez du code de votre application ou importez un site. Votre agent connecte l’UI existante et des fixtures synthétiques pour examiner écrans et états.
La démo modifie-t-elle mon application ?
Non. Elle exécute un exemple synthétique figé dans le navigateur. Votre application et son code se modifient dans votre projet local avec votre agent.
Et les applications natives ?
UIKit, SwiftUI et Android nécessitent des harnesses et captures du runtime d’origine propres au projet. Une capture native n’est pas une application native interactive dans le navigateur.
Portée et limites
Le Web utilise le vrai HTML/CSS et le JavaScript original pour les interactions. UIKit, SwiftUI et Android exigent des harnesses et preuves du runtime d’origine ; une capture n’est pas une app native interactive.
La couverture relie du code examiné à des cas, sans découverte automatique de toutes les conditions métier. Les tests UI ne qualifient ni backends de production, ni précision clinique ou des modèles.
Viewer : anglais par défaut, 11 langues. La démo publique est un frontend synthétique figé ; les intégrations locales suivent votre source. Les performances sur iPad physique ne sont pas mesurées.
Capture Safari sur iPhone physique. L’article technique décrit le passage du crash au fonctionnement et les limites des mesures.
Article technique Safari
Capture Safari sur iPhone physique. L’article technique décrit le passage du crash au fonctionnement et les limites des mesures.
Vous souhaitez un espace hébergé ? Inscrivez votre intérêt. Cloud n’est pas encore disponible ; l’outil MIT et la démo publique le sont déjà.
Quitter la liste
Confidentialité et télémétrie
Événements minimaux facultatifs via Cloudflare vers PostHog. Aucun contenu, code, nom, chemin, e-mail ou IP n’est transmis à PostHog. Vous pouvez désactiver l’analyse.
