> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperwisor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AI-Generated Screens

> Generate bespoke device UIs with an AI agent instead of hand-laying them out.

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.

## Path 1 — One-command generate (recommended)

```bash theme={null}
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

| widgetType                    | Generated control                                                                         |
| ----------------------------- | ----------------------------------------------------------------------------------------- |
| `switch`                      | Latching on/off toggle                                                                    |
| `button`                      | Momentary press (fires on press, reverts on release)                                      |
| `slider`                      | Numeric range                                                                             |
| `gauge` / `label` / `status`  | Read-only display                                                                         |
| `joystick`, `color-picker`, … | The matching control                                                                      |
| `payment-action`              | A paid unlock — the starter has no payment layer, so it's flagged to you, not implemented |

<Note>
  `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.
</Note>

The output is real, editable React you own — no canvas, no `dashboard_config`
JSON rendering.

<Card title="Next: Branding" icon="palette" href="/apps/branding">
  Make it yours.
</Card>