A library of generative UI paradigms · No. 01
Today’s interfaces wait for you to operate them.
These ones meet you halfway.
Six working surfaces, each dressed as a fictional brand in a familiar category: a fashion store you talk to, a bank dashboard that rearranges around your question, an airline chat that answers with the rebooking flow itself, a game whose rules you write by talking, a newspaper that reshapes to its reader, and eight small components that each do a little more for you.
Every surface has a Classic switch, so you can feel the difference rather than take our word for it. Agent view outlines every component and the tools it offers an agent. The trace logs each change the interface made, and every change can be undone.
In every surface, cobalt means one thing: an agent is composing this.
Six surfaces, this index included
- 01MaréSay what the occasion is. The store rebuilds itself around it: looks instead of a grid, constraints become controls you can drag.BeforeCategory → filters → 40 tiles → 6 tabs to compareAfterOne sentence → a composed look, budget and weather already appliedTry
Beach wedding in Lisbon in June, under $400
- 02HaldenAsk the dashboard a question. Widgets that answer it move forward, the rest step back, and a scenario you can steer appears.Before12 fixed widgets, export to a spreadsheet to answer anythingAfterThe dashboard rearranges into the answer to your questionTry
Can I afford Japan in March?
- 03NorthlineAn airline assistant that replies with working UI: rebooking, seat maps, refund maths. Pin any answer and it becomes part of the page.BeforeChatbot pastes a help-centre link, you redo it in the appAfterThe reply is the rebooking flow, already filled inTry
My flight to Tokyo got cancelled
- 04TerrariumA living ecosystem whose rules you write by talking. Each new mechanic brings its own HUD — the game's interface grows with it.BeforeFixed rules, fixed HUD, a settings menuAfterSay “add rain” and weather, a gauge and a new species appearTry
Add rain and let foxes hunt rabbits
- 05The MeridianOne article, many shapes. Ask for the timeline, just the numbers, or explain-it-like-I'm-new — the page re-typesets around you.BeforeOne 2,400-word article for every readerAfterThe story becomes a timeline, a glossary or a chart on requestTry
Give me just the numbers
- 06Small ShiftsEight everyday components — a search box, an error, an empty state, a form — each given a small dose of intelligence. Before and after, side by side.BeforeStatic components that wait to be operatedAfterComponents that meet you halfwayTry
Toggle any card between classic and generative
The layer underneath
One runtime, any brand.
Each surface keeps its own type, colour and voice. What they share is a thin layer: a sentence goes in, a plan of operations comes out, and those operations stream onto real components while the layout animates to show what moved where. The interpreters here are deterministic, so every demo runs offline. Swap in a model and the plan shape stays the same.
- 01IntentVoice or text, or a click someone made by hand.
- 02PlanTyped operations: compose, promote, demote, bind, ask.
- 03ComposeOperations land on real components, outlined in cobalt while they work.
- 04CheckpointEach plan is traced and can be undone. People can still edit by hand.
const c = useComposer(initial, interpret)
// interpret: (sentence, state) → plan
// { ops: [{ kind: "promote", target: "SavingsGoals", note }],
// next: newState, say: "Yes, if you move $220/mo…" }
<Composable ui="SavingsGoals" tool="set_goal(amount)"
composing={c.composing.has("SavingsGoals")}>
<SavingsGoals {...c.state.goals} />
</Composable>Four rules every surface follows
- The brand stays the brand. The agent layer borrows the host’s typography and colour, except for one signal colour.
- Show what changed. Layout moves are animated and logged. Nothing appears without a trace.
- Ask before effect. Rebooking, cancelling and paying all wait for a person to confirm.
- Hands still work. Every control the agent sets, you can drag, type into or undo.