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

# App Quickstart

> From cloning the app-starter to a running app in five minutes.

## 1. Clone and run

<Card title="hyperwisor-app-starter" icon="github" href="https://github.com/nikolaindustry/hyperwisor-app-starter">
  The boilerplate on GitHub.
</Card>

```bash theme={null}
git clone https://github.com/nikolaindustry/hyperwisor-app-starter.git my-brand-app
cd my-brand-app
npm install
npm run dev
```

Open the dev server. You're signed in as a demo user with two pre-loaded fake
devices (**mock mode**). Tap **Add device → Try a demo QR** to test the
onboarding flow without hardware.

## 2. Go live

1. Get your **API key** (`mk_…`) and **secret key** (`msk_…`) from the Hyperwisor
   manufacturer dashboard.
2. Copy `.env.example` to `.env.local` and fill in:
   ```
   VITE_HW_API_KEY=mk_...
   VITE_HW_SECRET_KEY=msk_...
   ```
   `.env.local` is git-ignored — your keys never get committed.
3. Restart `npm run dev`. The mock banner disappears; auth and device APIs now
   hit the real backend.

<Warning>
  The `msk_` secret key must **never** ship in a production mobile binary. See
  [Security](/apps/security) before you build for release.
</Warning>

## 3. Build a product UI

You don't lay out device screens by hand — an AI agent generates them:

```bash theme={null}
npm run inspect                 # list your products
npm run generate <productId>    # AI builds the screen + registers it
npm run dev
```

See [AI-Generated Screens](/apps/ai-screens) for both generation paths.

<CardGroup cols={2}>
  <Card title="Choose a mode" icon="toggle-on" href="/apps/modes">
    Single vs multi-product.
  </Card>

  <Card title="Brand it" icon="palette" href="/apps/branding">
    Colors, logo, theme.
  </Card>
</CardGroup>