Waarom ik App Canvas bouwde

Waarom ik App Canvas bouwde

AI maakte een nieuwe pagina bouwen eenvoudig, maar een groeiende app niet begrijpelijker. Ik wilde geïmplementeerde schermen en fouten samen zien, zonder alles door te klikken of een tweede ontwerpbestand te onderhouden.

App Canvas maakt de beoordeling een navigeerbaar landschap. De agent integreert de repo; het gedeelde gereedschap biedt canvas, previews van echte code, cameravolging en geverifieerd afspelen.

StoolSense is het synthetische openbare voorbeeld. Geen productiesessie, echte gezondheidsgegevens of AI-verzoeken. Optionele gebruiksgebeurtenissen staan los van app-data.

Bekijk, gebruik en speel af

Van bestaande repo naar interactief canvas

Geef de integratie aan een agent die bestanden kan lezen, wijzigen en opdrachten uitvoeren. Bestaand Storybook of een handmatige schermlijst is niet nodig. Installatie alleen vult het canvas niet.

Plak dit in je agent

Read https://github.com/tombelieber/app-canvas/blob/v0.12.0/AGENT_GUIDE.md and add a completely populated App 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. Run --complete against the original source root. 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.

1. Installeer het gedeelde gereedschap

   Gebruik Node.js 22+ en de pakketbeheerder en lockfile van je project. Installeer de vastgezette GitHub-release en de browser. Voeg bij npm 12 alleen --allow-git=root toe als deze directe Git-afhankelijkheid wordt geblokkeerd; wijzig geen globaal beleid.

   npm install --save-dev github:tombelieber/app-canvas#v0.12.0
   npx app-canvas browsers

2. Inventariseer vóór je cases kiest

   Voer discover uit op de volledige app-root. De agent bekijkt elke bronregio en kandidaat, lost pending op en inventariseert semantische toestanden onafhankelijk van de catalog. Blokkades blijven zichtbaar.

   npx app-canvas discover --source-root . --out .artifacts/app-canvas/inventory.json
   npx app-canvas pending --inventory .artifacts/app-canvas/inventory.json

3. Render de oorspronkelijke UI met fixtures

   Maak config, catalog, synthetische fixtures, preview entry en journeys in ui-review. De adapter importeert echte pagina’s, providers en stijlen. Vervang data en afhankelijkheden, niet de UI; weiger onbekende netwerkverzoeken.

   ui-review/
     canvas.config.mjs
     catalog.json
     frame.jsx
     fixtures.js
     README.md
   .artifacts/app-canvas/inventory.json

   // package.json → scripts
   "ui:review": "app-canvas --config ui-review/canvas.config.mjs"

   React/Vite · Agentgids

4. Verifieer toestanden en interacties

   Neem normaal, leeg, laden, fouten, toegang geweigerd, dialogen en herstel op. Controleer elke case en echte bediening in doorlopende flows. Vergelijk inventory, brongebonden assertions en routes; slaag voor --complete op dezelfde root.

   npx app-canvas --config ui-review/canvas.config.mjs --check
   npx app-canvas --config ui-review/canvas.config.mjs --verify
   npx app-canvas --config ui-review/canvas.config.mjs --complete --source-root .

5. Beoordeel en onderhoud vanuit de code

   Start ui:review, bekijk overzicht en toestandsgraaf en speel een flow af. Laat de agent echte app-code wijzigen. Bestaande previews herbouwen; nieuwe routes en toestanden vragen updates van inventory, fixtures en journeys. Vereis de volledige controle vóór overdracht.

   npm run ui:review

Wat in jouw toepassing blijft

Het gedeelde pakket beheert viewer, CLI en skill. Je repo beheert adapter, fixtures, onafhankelijke inventory, catalog en interactiecontroles. Begin met het uitvoerbare React/Vite-voorbeeld; andere stacks hebben een eigen adapter nodig.

Optionele agentskill

Codex en Claude Code kunnen de meegeleverde skill installeren. Andere agents lezen AGENT_GUIDE.md rechtstreeks. De runtime roept geen modellen aan en vraagt geen API-sleutel; je eigen agent heeft eigen kosten en rechten.

npx app-canvas install --target both

Privacy en telemetrie

Optionele minimale gebeurtenissen via Cloudflare naar PostHog. Geen inhoud, code, namen, paden, e-mail of IP worden doorgestuurd naar PostHog. Je kunt dit uitzetten.

Privacy en telemetrie ↗

Reikwijdte en beperkingen

• Web gebruikt echte HTML/CSS en oorspronkelijke JavaScript voor interacties. UIKit, SwiftUI en Android vereisen harnesses en bewijs uit de oorspronkelijke runtime; een opname is geen interactieve native app.
• Dekking verbindt beoordeelde broncode met cases en ontdekt niet automatisch elke bedrijfsconditie. UI-controles kwalificeren geen productiebackend, klinische juistheid of modelprecisie.
• Viewer: standaard Engels, met 11 talen. De openbare demo is een vast synthetisch frontend; lokale integraties volgen je broncode. Prestaties op een fysieke iPad zijn niet gemeten.