# Build a UI with AI

You do not need a developer to put a UI on top of a workspace. Point an AI app builder — **Bolt**, **Lovable** or **v0** — at the platform API and it builds one complete **Operations HQ** app from a single pasted prompt.

The console writes the prompt for you. **Console → Build an app** picks who the app is for, a design vibe and optionally your company name and brand colour, then hands you the finished text with your own workspace's API URL already in it.

## The one rule that makes this safe

The generated app must be **full-stack**.

The `/v1` API accepts only secret keys (`sk_test_` / `sk_live_`) and has **no browser-safe key**, so a key that reaches the browser hands a stranger full control of the workspace. Every prompt states that constraint loudly, tells the builder to keep the key in a server-side secret with the browser talking only to the app's own server, and defaults to an `sk_test_` sandbox key so a first attempt cannot touch production.

Get a sandbox key from [signup](/signup) — a new workspace comes with a working `sk_test_` key and seeded demo data, so the app opens with something in it.

## The prompt flow

Four choices, and only the first two change what gets built.

**1. Who is it for?** This sets the section the app lands on after setup and what gets top billing. Every role still gets all five staff sections.

| Role | Lands on |
| --- | --- |
| Ops manager | Dashboard, with the audit trail one click away |
| Dispatcher | Dispatch board |
| Field lead | Team |

**2. How should it look?** A full art-direction spec — palette, type, density, motion, chart styling — rather than a colour swap: *command center* (dark), *clean SaaS* (light), *field ops* (warm, high-contrast for daylight) or *editorial* (bold).

**3. Which builder?** Only the stack instruction changes, and each names that builder's own way of keeping a secret server-side.

| Builder | What the prompt asks for |
| --- | --- |
| [Bolt](https://bolt.new) | A React front end plus a Node/Express route or serverless function holding the key |
| [Lovable](https://lovable.dev) | Lovable's backend and secrets feature, every call in a server-side function |
| [v0](https://v0.dev) | A Next.js app calling through a Route Handler or Server Action |

**4. Your name and colour**, optionally. Both are interpolated into the prompt; leave them blank and the app uses the vibe's own palette.

Press **Copy and open** and the prompt goes to your clipboard as the builder opens in a new tab. It is not passed in the URL: the assembled prompt runs to roughly ten thousand characters, past the length these tools silently truncate.

## What it builds

**A staff app** of five sections behind a sidebar — dashboard, dispatch board, team roster, task intake and a decision audit trail.

**A worker's own inbox.** A lightweight sign-in splits staff from workers, and each worker sees only their own queue with accept, reject and complete on it. Worker actions are not an admin drill-in.

**A first run that is not empty.** The prompt asks for a CSV import — a team roster mapped to workers with their tags and weights, and optionally a task backlog — plus a sample-data shortcut, so the app opens populated with a real operation instead of empty tables.

The builder is told to consult the full contract at `<your-api>/openapi.json`, so it can reach anything the console can.

## When you outgrow it

A generated app is a real starting point and not a ceiling. When you want to build it yourself:

- [The TypeScript SDK](/docs/sdks/typescript/) — typed end to end, same API.
- [The MCP server](/docs/agentic/mcp/) — let Claude, ChatGPT or Cursor drive the workspace directly, instead of building a screen for it.
- [The API reference](/docs/api/) — every endpoint the prompt references, in full.