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

# Quick Start

**Build your first component, validate it, deploy it, and see it render in Studio.**

No React. No build config. One JSON file.

***

## What you're building

A `PriceCard` component: a card that shows a product name, a price, and a short description, streamed to it by any workflow. It will render natively on web (and every other channel) from the same definition.

***

## Step 1: Scaffold, then shape the definition

> Throughout these docs, `rx/` means the design folder in your Studio project workspace. Studio reads it directly; publishing sends it to your universe.

```bash theme={"system"}
# In Studio: New Project → "acme": scaffolds rx/acme/ (components/, templates/,
# and a complete copy of the default token set in styles/)
```

This creates `rx/components/pricecard/pricecard.json`, already passing the linter: you fill the TODOs and shape the tree. Edited for our card:

```jsonc theme={"system"}
{
  "unoverse": "1.0",
  "kind": "component",
  "name": "PriceCard",
  "category": "Commerce",
  "description": "A card showing a product name, price and short description.",
  "whenToUse": "Show a single product or plan with its price. Not for lists of products (use a list component) or for charts.",
  "props": {
    "title":       { "type": "string", "default": "Pro Plan", "input": true },
    "price":       { "type": "string", "default": "$29/mo", "input": true },
    "description": { "type": "string", "default": "Everything in Basic plus priority support.", "input": true }
  },
  "root": {
    "type": "Box",
    "style": { "width": "full", "direction": "column", "gap": "3", "padding": "lg",
               "background": "surface.base", "border": "subtle", "shadow": "lg" },
    "children": [
      { "type": "Text", "bind": { "value": "title" },
        "style": { "font": "headline.sm", "weight": "semibold", "color": "text.primary" } },
      { "type": "Text", "bind": { "value": "price" },
        "style": { "font": "headline.lg", "color": "text.primary" } },
      { "type": "Text", "bind": { "value": "description" }, "visibleWhen": "description",
        "style": { "font": "body.md", "color": "text.secondary" } }
    ]
  }
}
```

What each part is:

| Field                        | Role                                                                                                                                                                           |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `unoverse` / `kind` / `name` | The **envelope**: marks this file as a component definition                                                                                                                    |
| `whenToUse`                  | **Required for components**: the AI reads this to pick your component. Outcome-first, in the user's vocabulary. See [08](/design/validate-and-ship)                            |
| `props`                      | The **data contract**: every field the definition reads, with a default (the **Studio** mock). `input: true` = fed by the workflow at runtime, mark **all** workflow-fed props |
| `root`                       | The UI tree, built only from **primitives** ([02](/design/sdui-and-mcp-apps))                                                                                                  |
| `bind`                       | An object mapping the primitive's target → your data field: `{ "value": "title" }`, `{ "src": "image" }`                                                                       |
| `visibleWhen`                | A bare field name is a truthy test: the description row hides when empty                                                                                                       |
| `style` values               | **Token names only**: `"3"`, `"surface.base"`, `"headline.sm"`. Never `12px` or `#fff` ([06](/design/styles-and-tokens))                                                       |

***

## Step 2: Validate as you type

The JSON Schema at `rx/_schema/unoverse.schema.json` catches structural mistakes (unknown primitive, missing `whenToUse`, a `Switch` without `cases`, an illegal condition) **in your editor**. Wire it once in `.vscode/settings.json`:

```jsonc theme={"system"}
{
  "json.schemas": [
    {
      "fileMatch": ["**/rx/**/components/**/*.json", "**/rx/**/templates/**/*.json", "**/rx/**/atoms/*.json"],
      "url": "./rx/_schema/unoverse.schema.json"
    }
  ]
}
```

Now a typo like `"type": "Bax"` or a missing `description` is a red squiggle, not a runtime surprise. [08: Validate & Ship](/design/validate-and-ship) covers the full enforcement stack (schema → linter → checklist).

***

## Step 3: Mock data & states for Studio

Two mechanisms, both already in your file:

* **Prop `default`s ARE the mock.** Studio renders the component from them with no backend: that's why every prop carries a realistic default, not an empty string.
* **The `states/` folder is the state picker.** If your component has multiple layers (a `Switch` on a discriminant: wizard steps, inline↔focused), enumerate each layer as `states/<layer>.json` and **Studio** automatically shows a pill per state; clicking one sets the discriminant and that layer draws itself ([07](/design/studio)). PriceCard is single-view, so it needs none.

***

## Step 4: Lint, then deploy

```bash theme={"system"}
# Validation is Studio's job: the schema checks as you type; the full lint
# (tokens, state rules, structure) runs at publish and blocks on any error
unoverse build    # nodes synthesize from your definitions at boot
```

Component nodes are **definition-backed**: one universal executor serves every component, and the platform synthesizes a node per definition at boot, there is no code generation. The restart just picks up your new definition. Your `PriceCard` is now:

* a **node** any workflow can use: copy it from **Studio** (**⧉ Copy for Canvas**) and paste (`Cmd+V`) onto the **Canvas**, wire data into its props, and
* an **MCP resource** every channel (web, native, **Studio**) renders natively.

***

## Step 5: See it in Studio

Open **Studio** (served by the platform: see [07, **Studio**](/design/studio)):

1. Find **PriceCard** in the component list.
2. **Mock mode**: it renders from your prop defaults; multi-state components get a state picker from their `states/` folder, this is your Storybook.
3. **Live mode**: wire it into a workflow on the **Canvas** and watch a real agent stream real data into it.

If it looks right in **Studio**, it looks right in production: **Studio** is just another MCP client using the same SDK and the same stream ([02](/design/sdui-and-mcp-apps) explains why).

***

## Quick-Start Checklist

* [ ] Project created in Studio (New Project); component authored in it with a full envelope
* [ ] `whenToUse` written outcome-first (the AI picks components by it)
* [ ] Every `bind` has a matching prop **with a default**, workflow-fed props marked `input: true`
* [ ] Zero raw values: token names only in every `style`
* [ ] Prop defaults realistic (they ARE the mock); multi-layer components enumerate `states/`
* [ ] Studio preview clean (mock, then live); publish passes lint with 0 errors
* [ ] Previewed in **Studio** (mock states, then live)

***

**Next:** [02, SDUI & MCP Apps](/design/sdui-and-mcp-apps), the model behind what you just did.