Skip to main content
The standout feature of the app-starter: you don’t build device screens by hand. An AI agent inspects a product and writes a tailored, professionally-designed React screen for it. There are two paths to the same result. 
npm run inspect                 # list your products
npm run generate <productId>    # AI builds the screen + registers it
npm run dev
npm run generate runs the full loop non-interactively: it inspects the product, the agent writes a screen into src/screens/device/<product>/, registers it, and runs tsc to verify it builds. Requires ANTHROPIC_API_KEY in .env.local.

​
Path 2 — Interactive in Claude Code

Open the repo in Claude Code and ask:
“Build the UI for product <productId>.”
Same result — useful when you want to chat through design choices or iterate.

​
How the agent decides what to build

npm run inspect <productId> writes a spec the agent reads. The key field is capabilities.controls — your dashboard’s actual controls, each with a title (your real label), a widgetType (your intended affordance), and an events map of UI event → command payload. The agent uses your titles and types verbatim.

​
widgetType → control

widgetTypeGenerated control
switchLatching on/off toggle
buttonMomentary press (fires on press, reverts on release)
sliderNumeric range
gauge / label / statusRead-only display
joystick, color-picker, …The matching control
payment-actionA paid unlock — the starter has no payment layer, so it’s flagged to you, not implemented
controls lists what you actually put in your dashboard; commandsApi lists everything the firmware can accept. The agent follows controls and mentions unused commands rather than guessing.
The output is real, editable React you own — no canvas, no dashboard_config JSON rendering.

Next: Branding

Make it yours.