Create a Component

Design the interfaces your Agents speak through. You write a component once, in YAML, and every channel renders it natively.

Server-driven UI

The interface travels as data

UI is data, not code. Your universe sends the definition. An SDK on the other side draws it with that device’s own native controls.

One definition serves every channel: your website, your iOS and Android apps, ChatGPT, Claude. Publish a change and it is live on every one of them, with no rebuild or release cycle.

How it works here · MCP Apps · SDUI

Why YAML. It is the plainest thing that can carry structure. Your editor checks it against a schema as you type. Any AI tool you already use can read and write it. There is nothing to compile. Definitions are composed from a small closed set of primitives, and every visual value is a token name the theme resolves. That is all the theory this page needs. The Design tab is the full journey.


What you’ll build	A price card component your Agent can stream data into, in your own org and your own brand
Where it lives	`components/pricecard/`, at the root of your org repo
Where you’ll see it	Live in studio while you design, and in the conversation once it is wired to a workflow

Build it

Open studio

Open studio:

unoverse studio

Then open Components. Every definition renders from its prop defaults, and the controls walk its layouts and states.Open the code view on any of them: the definition on one side, the live preview on the other. Edit the definition and the preview follows as you save.

A component definition open in studio, with its code beside the live preview

Create your org

Your own work lives in your org: its components, its apps, its brand. One org is one Git repo. unoverse create asks for the org’s name, suggesting the folder’s, and that name travels with everything the org publishes.

Terminal

$ mkdir acme && cd acme
$ unoverse create

  ⬡ What are you building?

  ❯ 1  Studio     Components, agents and workflows
                  Most people start here
    2  Universe   Run the platform yourself, on your own infrastructure
    3  Client     A client accelerator that talks to unoverse

  Org name [acme]:

  Created the org "acme" in /Users/you/acme (a Git repo, first commit made)

Choose Studio, and studio opens on the new repo. A second org is a second repo, made the same way in a new folder.The folder is now your org’s repo, and the org’s folders sit at its root:

acme/
  unoverse.yaml        org: acme, the org's name
  styles/              colour, type, spacing
  identity/            who the organisation is
  .github/workflows/   a pull-request check that runs unoverse lint

That is the baseline: your starting tokens and your four identity documents. Add the other folders as you need them: components/, apps/, skills/, blocks/, nodes/. The org’s name comes from unoverse.yaml, never from the folder, so the folder may be called anything.Worked examples live in one public demo org repo, acme: a welcome component, a chat app, a skill, a block and two nodes. Read them and copy what you need.

Make your theme

The first design work in a new org is the brand. It lives in styles/:

Folder	What you set there
`base/`	The raw scales: color palettes, typography and fonts, spacing, radius
`semantic/`	The names components use, mapped onto your scales
`themes/`	`light` and `dark`: the values each theme resolves to

Start with base/color.yaml and base/typography.yaml: your palette and your fonts. In studio, switch to your org and change a value. Every component re-renders in your brand, live, with no build step. Edit the file, and the preview follows as you save.Change token values freely; keep every token name, and the theme contract stays green.

Create your own component

Author your component in your org repo, at components/pricecard/pricecard.yaml. The file name is the component’s name, and the lint enforces it. Here is a complete simple price card, and what it renders:

Definition
Rendered
Data

components/pricecard/pricecard.yaml

unoverse: "1.0"
type: component
name: pricecard
category: General
nodeSize: { width: 360, height: 320 }
description: "A pricing card: plan name, price, feature list, and a call to action."
whenToUse: >-
  Present ONE plan or offer with its price and what it includes. Pick for a single
  purchasable option, not for comparing metrics or listing content.

props:
  title: { type: string, default: Starter, input: true }
  price: { type: string, default: $19/month, input: true }
  features:
    type: array
    input: true
    default:
      - label: 3 projects
      - label: Email support
      - label: Weekly reports

root:
  type: Box
  style:
    width: full
    direction: column
    gap: "3"
    padding: "6"
    background: surface.base
    border: subtle
    radius: lg
    shadow: sm
  children:
    - type: Text
      bind: { value: title }
      style: { font: label, weight: medium, color: text.secondary }

    - type: Text
      bind: { value: price }
      style: { font: headline.lg, weight: semibold, color: text.primary }

    - type: Each
      bind: { items: features }
      style: { direction: column, gap: "2" }
      app:
        type: Text
        bind: { value: label }
        style: { font: body.sm, color: text.tertiary }

    - type: Ref
      ref: button
      with: { label: Choose Starter }

A workflow fills the card by sending an object whose keys match the props, by name:

Data a workflow streams in

title: Pro
price: $49/month
features:
  - label: Unlimited projects
  - label: Priority support
  - label: Daily reports

Reading it top to bottom:

Part	What it does
The envelope	Names the component and carries `whenToUse`, which is how Agents discover it
`props`	Every field a workflow can fill, each with a realistic `default`. Those defaults are what studio renders in mock mode, and `input: true` marks a field as workflow-fed
`root`	The layout, composed from the closed primitives: a `Box`, two bound `Text` elements, an `Each` over the features, and the shared button atom through `Ref`
`style`	Token names only. No pixels, no hex, anywhere

Check it

Check it from anywhere in your org repo:

unoverse lint

The same check runs when you ship, and blocks on any error, so nothing broken reaches a universe.The linter enforces the design rules with doc-cited messages: token names only (no raw px or hex), every bound field declared in props, one home for every piece of state. studio and the platform apply the same rules, so a clean lint means it ships.

Put it in a workflow

One Component node serves every component you write, so there is nothing to register and nothing to restart. A new definition is renderable the moment you save it.Your component travels from studio to canvas by copy and paste:

In studio, open PriceCard under Components.
Click Copy for Canvas. The component is copied to your clipboard as a canvas node.
In canvas, open your workflow and paste with Cmd+V. The node lands on the canvas, sized to the card.
Double-click it and fill its fields, the same title, price, and features you saw in the Data tab, from upstream signals or literals.

Step through the workflow and the card renders live in the conversation, in your org’s theme.

Nothing restarts. Push the component to your org repo, and every universe connected to it pulls the change: within seconds by webhook, within five minutes by polling. Environments covers connecting a universe to the repo.

How far this goes

A price card is the small end. A component can carry states and layouts of its own: a wizard that walks through steps, a card that expands to full screen, a product finder with its own private flow. Apps go further. They are whole microapps, with their own layouts and states, discovered and opened by Agents in the conversation. State is handled for you. Each component owns its own, and the platform keeps one shared state for the whole conversation. Views, panels and flows stay in sync, with no state library to wire. The Design section covers all of it: components, state, apps and tokens.

Have Claude Code build it

Installed by unoverse update

unoverse-create

The same skill that builds nodes designs components. Open your org repo and describe what you want:

Create a pricing card component with a title, three feature lines, and a call to action.

It follows the rules this page just walked through: the closed primitives, token names only, a realistic default on every prop. What it writes passes the same lint your own work does.

How the skills work.

Start Here

Challenges

Ship It

Create a Component

Build it

How far this goes

Have Claude Code build it

Next steps

The Design journey

Create a client app

​Build it

​How far this goes

​Have Claude Code build it

​Next steps

The Design journey

Create a client app

Build it

How far this goes

Have Claude Code build it

Next steps