Uno spazio leggero per vedere, provare e migliorare l’app del tuo agente. Esplora schermate reali, indica cosa cambiare e continua dal codice sorgente.
Visualizza insieme schermate complete, stati nominati e flussi implementati.
Mantieni una sola implementazione UI. L’agente crea fixture, adapter e verifiche di copertura.
Prova 77 stati e 44 flussi con dati sintetici, senza account né chiave API.
Perché ho creato Agent Canvas
L’IA rendeva semplice creare un’altra pagina, non capire un’app in crescita. Volevo vedere schermate implementate e stati di errore senza attraversare tutta l’app o mantenere un secondo file di design.
Agent Canvas trasforma la revisione in un panorama navigabile. L’agente integra il repository; lo strumento condiviso offre canvas, preview del codice reale, visuale che segue il flusso e riproduzione verificata.
StoolSense è l’esempio pubblico sintetico. Non contiene sessioni di produzione, dati sanitari reali o richieste IA. Gli eventi facoltativi di utilizzo sono separati dai dati dell’app.
Demo reale: 77 stati, 44 flussi, 121 elementi riproducibili. Include casi singoli, non 121 percorsi E2E.
Esplora, interagisci, riproduci
1
Allontanati per capire l’app
Schermate complete raggruppate per pagina, ricerca, filtri e pannelli richiudibili. I link dei flussi spostano la visuale alla destinazione.
2
Avvicinati per usare la UI reale
Browse blocca i controlli durante lo spostamento. Seleziona una schermata e Interact per usare il codice originale con dati temporanei.
3
Indica esattamente cosa cambiare
Seleziona una schermata o un elemento UI, aggiungi la richiesta e copia un riferimento per il tuo agente. Chiedigli di modificare il codice; le anteprime collegate al sorgente si ricostruiscono.
Scegli un flusso per vedere schermate complete e transizioni nominate. Un link sposta la visuale alla destinazione.UI reale di errore e recupero. La riproduzione esegue azioni e verifiche definite; una linea disegnata non è un test.
Da un repository esistente a una canvas interattiva
Affida l’integrazione a un agente che legge, modifica ed esegue comandi. Non servono Storybook o elenchi manuali di schermate. L’installazione da sola non popola la canvas.
Incolla nel tuo agente
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.
Installa lo strumento condiviso
Usa Node.js 22+ e package manager e lockfile del progetto. Installa la release GitHub fissata e il browser. Con npm 12 aggiungi --allow-git=root solo se blocca questa dipendenza Git diretta; non modificare le regole globali.
Esegui plan sull’intero repository originale. Esamina ogni file, ancoraggio UI, dipendenza che influisce sulla UI e navigazione reale. Elenca schermate e stati indipendentemente dal catalogo; mantieni visibili le UI irrisolte.
npx agent-canvas plan --source-root . --out ui-review/ui-inventory.json
npx agent-canvas status --inventory ui-review/ui-inventory.json
Renderizza la UI originale con fixture
Crea config, catalog, fixture sintetiche, preview entry e journeys in ui-review. L’adapter importa pagine, provider e stili originali. Sostituisci dati e dipendenze, non la UI; rifiuta richieste di rete sconosciute.
Copri normale, vuoto, caricamento, errore, accesso negato, dialoghi e recupero. Verifica ogni caso e i controlli reali in flussi continui. Riconcilia inventory, assertion legate al codice e route; supera --ui-complete sulla stessa radice. --complete rimane un audit rigoroso e separato di tutto il sorgente. Le sue attività aperte non sono il numero di schermate mancanti.
Avvia ui:review, esamina canvas e grafo e riproduci un flusso. Chiedi modifiche al vero codice dell’app. Le preview esistenti si ricostruiscono; nuovi stati e route richiedono inventory, fixture e journeys aggiornati. Pretendi la verifica completa prima della consegna.
npm run ui:review
Cosa resta nell’applicazione
Il pacchetto condiviso mantiene viewer, CLI e skill. Il repository conserva adapter, fixture, inventory indipendente, catalog e test di interazione. Parti dall’esempio React/Vite eseguibile; altri stack richiedono adapter dedicati.
Skill opzionale
Codex e Claude Code possono installare la skill inclusa. Altri agenti leggono direttamente AGENT_GUIDE.md. Il runtime non chiama modelli né richiede chiavi API; il tuo agente ha costi e permessi propri.
npx agent-canvas install --target both
Prima di iniziare
È gratuito?
CLI, canvas e skill sono gratuiti e open source sotto licenza MIT. Il tuo agente può avere costi di abbonamento o API.
Funziona con Claude Code e Codex?
Sì. Installa gli skill per uno o entrambi. Altri agenti possono seguire la guida pubblica e usare il CLI. Il canvas non chiama modelli.
Serve un file di design?
Parti dal codice dell’app o importa un sito. L’agente collega UI e fixture sintetiche per esaminare schermate e stati insieme.
La demo modifica la mia app?
No. Esegue un esempio sintetico fisso nel browser. La tua app e il suo codice vengono modificati nel progetto locale con il tuo agente.
E le app native?
UIKit, SwiftUI e Android usano harness e acquisizioni del runtime originale specifici del progetto. Un’acquisizione non è un’app nativa interattiva nel browser.
Ambito e limiti
Web usa HTML/CSS reali e JavaScript originale per interagire. UIKit, SwiftUI e Android richiedono harness e prove nel runtime originale; una cattura non è un’app nativa interattiva.
La copertura collega codice revisionato e casi, senza scoprire automaticamente ogni condizione di business. I test UI non qualificano backend di produzione, accuratezza clinica o precisione dei modelli.
Viewer: inglese predefinito, con 11 lingue. La demo pubblica è un frontend sintetico fisso; le integrazioni locali seguono il codice. Le prestazioni su iPad fisico non sono state misurate.
Cattura Safari su iPhone fisico. L’articolo tecnico descrive il passaggio dai crash al funzionamento e i limiti delle misure.
Articolo tecnico Safari
Cattura Safari su iPhone fisico. L’articolo tecnico descrive il passaggio dai crash al funzionamento e i limiti delle misure.
Vuoi uno spazio ospitato? Registra il tuo interesse. Cloud non è ancora disponibile; lo strumento MIT e la demo pubblica sono già utilizzabili.
Lascia la lista
Privacy e telemetria
Eventi minimi facoltativi tramite Cloudflare a PostHog. Non vengono inoltrati contenuti, codice, nomi, percorsi, email o IP a PostHog. Puoi disattivare l’analisi.
