Van bestaande repo naar interactief canvas

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.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.

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.16.0
   npx agent-canvas browsers

2. Inventariseer vóór je cases kiest

   Voer plan uit op de hele oorspronkelijke repository. Controleer elk bestand, UI-anker, relevante afhankelijkheid en de echte navigatie. Inventariseer schermen en toestanden onafhankelijk van de catalogus; houd onopgeloste UI zichtbaar.

   npx agent-canvas plan --source-root . --out ui-review/ui-inventory.json
   npx agent-canvas status --inventory ui-review/ui-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": "agent-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 --ui-complete op dezelfde root. --complete blijft een afzonderlijke strikte audit van alle broncode. Open auditpunten zijn geen aantal ontbrekende schermen.

   npx agent-canvas populate --config ui-review/canvas.config.mjs --source-root . --verify

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 agent-canvas install --target both