From an existing repo to an interactive canvas

From an existing repo to an interactive canvas

Give the job to an agent that can read and edit your repository and run commands. No existing Storybook or manually prepared screen list is required. Installation alone does not populate the canvas.

Paste this into your coding 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. Install the shared tool

   Use Node.js 22+ and the project's package manager and lockfile. Install the pinned GitHub release, then its browser. On npm 12, add --allow-git=root only if Git admission blocks this direct dependency; do not change global policy.

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

2. Discover before choosing cases

   Run discover on the whole application root. The agent reviews every generated source region and candidate, resolves pending items, and enumerates semantic states independently of the eventual catalog. Keep unresolved blockers visible.

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

3. Render the original UI with fixtures

   The agent adds ui-review/canvas.config.mjs, a catalog, synthetic fixtures, a preview entry and checked journeys. The web adapter imports real pages, providers and styles; fixtures replace data and dependencies, not the UI. Reject unknown network requests.

   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 · Agent guide

4. Verify states and interactions

   Author the implemented normal, empty, loading, error, denied, dialog and recovery conditions. Check every case and run real controls in continuing flows. Reconcile the inventory, source-linked assertions and route coverage, then pass --complete against the same application 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. Review and maintain from source

   Run ui:review, inspect the overview and state graph, then play a flow. Ask the agent to edit the actual app source. Existing previews rebuild; new routes and conditions need inventory, fixture and journey updates. Require the complete gate before handover.

   npm run ui:review

What stays in your application

The shared package owns the viewer, CLI and skill. Your repo owns its adapter, fixtures, independent inventory, catalog and interaction checks. Start with the runnable React/Vite reference; use a project-specific adapter for other stacks.

Optional agent skill

Codex and Claude Code can install the bundled skill. Any other coding agent can follow AGENT_GUIDE.md directly. The canvas runtime makes no model calls and requires no model API key. Your chosen agent has its own costs and permissions.

npx app-canvas install --target both

Privacy and telemetry

Optional minimal usage events via Cloudflare to PostHog. No page contents, code, names, file paths, email or IP address are forwarded to PostHog. You can turn this off.

Privacy and telemetry ↗

What this release does and does not prove

• Web previews use actual HTML/CSS and original JavaScript for interaction. Native UIKit, SwiftUI and Android need original-runtime harnesses and evidence; a capture is not a live native app.
• Coverage is a reviewed source-to-case contract, not automatic discovery of every possible business condition. UI checks do not qualify production backends, clinical accuracy or model precision.
• Viewer: English by default, with 11 languages. The public demo is a frozen synthetic frontend; live integrations watch your source. Physical iPad performance has not been measured.