Koala UIGenerative UI
ProThe model answers with Koala components instead of prose. Claude writes a short program over a catalog of KPIs, charts, tables, tabs and forms; the page paints it as it streams, and every button or form sends the next message back.
Installation#
Usage#
Two halves. On the server, the spec library writes the system prompt and the model streams a program back. On the client, GenerativeUI paints it.
The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.
Have a license? Unlock it here
The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.
Have a license? Unlock it here
Anatomy#
One part: give it the program and it paints the catalog. The program is one statement per line. The root comes first so the layout paints before the data arrives; every name it references resolves as its line streams in.
import { GenerativeUI } from "@/components/ui/generative-ui"
<GenerativeUI program={program} streaming={streaming} onAction={onAction} />The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.
Have a license? Unlock it here
Catalog#
What the model can reach for, grouped the way the prompt teaches it. Each one is a Koala component underneath, so an answer looks like the rest of your product.
- Layout
- Page, Section, Grid, Tabs, Tab, Card
- Text
- Heading, Text, Badge, Callout
- Data
- Stat, Chart, Table, Progress, Details, List, Row
- Input
- Form, Slider, Choice
- Results
- Email, Receipt, Receipts, Products, Product
- Actions
- Actions, Button
Dashboard#
A KPI strip, a trend and the table behind it. A Grid of only Stats becomes one outlined strip; a Card that holds only a Table lets its rows run to both edges.
Build a revenue overview for October.
Revenue overview
October 2026 · all workspaces
| label | Pro | Team |
|---|---|---|
| May | 21.4 | 11.2 |
| Jun | 23 | 12 |
| Jul | 24.8 | 12.9 |
| Aug | 26.1 | 13.8 |
| Sep | 28.9 | 14.6 |
| Oct | 31.2 | 17 |
| Account | Plan | MRR | Seats |
|---|---|---|---|
| Northwatt | Team | $4,820 | 64 |
| Halation | Pro | $2,310 | 18 |
| Almanac | Pro | $1,940 | 15 |
| Overprint | Team | $1,780 | 22 |
Expansion is carrying growth
68% of new MRR came from seat expansion; new logos are flat for a third month.
Comparison with a form#
When the answer depends on something the user hasn't said, the model asks with a Form. Submitting sends the field values back as the next message, and the reply is the recommendation below.
Help us choose a CRM for a 12-person B2B sales team.
CRM shortlist for a 12-person sales team
Three tools that fit a B2B team selling annual contracts
- ATAttioFlexible data model, strongest for custom workflows$34/seatbilled yearly
- HSHubSpot Sales ProBroadest suite, marketing included$90/seatbilled yearly
- PDPipedriveSimplest pipeline, fastest to roll out$49/seatbilled yearly
| label | Seats | Onboarding |
|---|---|---|
| Attio | 4,896 | 0 |
| HubSpot | 12,960 | 1,500 |
| Pipedrive | 7,056 | 0 |
| Tool | Per seat | Year 1 | Setup | Email sync | API limits |
|---|---|---|---|---|---|
| Attio | $34 | $4,896 | 1 week | Yes | Generous |
| HubSpot | $90 | $14,460 | 3 weeks | Yes | Tiered |
| Pipedrive | $49 | $7,056 | 2 days | Yes | Moderate |
Pick one for us: speed to launch, already on Slack.
Pipedrive fits your team best
12 seats, launch fast, already on Slack
Why Pipedrive
Your top priority is speed: it is the only one your team can run on its own this week, and its Slack app covers deal alerts out of the box.
Tabs#
Alternative views of one subject. Tabs keep every panel mounted, so going back to one never redraws its chart.
Make a launch checklist for a feature shipping Friday.
Launch checklist: Shared inboxes
Ships Friday, Nov 7 · 9 of 14 done
Two items are blocking the release
Billing migration has no owner and the help-center article is still in draft.
People and lists#
Rows with initials, a trailing value and a second line, for candidates, customers or transactions.
Show the hiring pipeline for our two open engineering roles.
Hiring pipeline
2 open engineering roles · last 30 days
| label | Senior Frontend | Platform |
|---|---|---|
| Applied | 112 | 72 |
| Screen | 28 | 19 |
| Tech | 11 | 8 |
| Onsite | 5 | 4 |
| Offer | 1 | 1 |
Plans#
A day-by-day plan with a form to tune it: budget on a slider, pace and interests as chips.
Plan a long weekend in Lisbon for two in late November.
A long weekend in Lisbon
Fri to Mon · 2 people · late November
Emails#
Ask for an email and the answer is an Email Draft, not a paragraph: recipients, subject and body the user can edit before sending. Send fires an action, so your app does the sending.
Send Dana an email with the Q3 numbers, copy Marco.
Here is a draft for Dana with the Q3 headline numbers. Edit anything before you send it.
Receipts#
One receipt paints a full Receipt Card; several fold into compact rows that open in place, with their sum underneath.
Find my Uber receipts from last month.
You took four Uber rides in October, $86.42 in total. Open one to see the fare.
Your last grocery run
- Subtotal
- $59.22
- Tax
- $2.43
- Total
- $61.65
Shopping#
Product searches answer with a Product Carousel. Each card holds a skeleton slot until its name, store and price have streamed in, then resolves in place.
Find stoneware bowls for everyday use, under $60.
Six that hold up to daily use. East Fork's speckled set is the safest bet, and the Food52 celadon bowls are on sale this week.
6 results from 6 stores
Best sellerSpeckled Cereal Bowls, Set of 2
$48
-20%Celadon Pasta Bowls, Set of 4
Now $52, was $65
Ash Glaze Serving Bowl
$58
Nesting Bowls, Set of 3
$39.95
HandmadeHandthrown Cream Bowl
$34
Pebble Shallow Bowl
$28
Extending the catalog#
Define a spec with a name, a description the model reads and a zod schema, bind it to a renderer and pass the extended library. Keep props optional so a half-streamed statement paints a skeleton instead of throwing.
The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.
Have a license? Unlock it here
API reference#
GenerativeUI
Paints an OpenUI Lang program with Koala components. Safe mid-stream: every slot holds a skeleton of its final height until its data arrives, so the answer grows without jumps. Forwards native <div> props.
| Prop | Type | Default | Description |
|---|---|---|---|
| program | string | - | The program as received so far. Pass the growing string on every chunk. |
| streaming | boolean | false | Whether more is coming. Disables actions and sets aria-busy. |
| onAction | (event: ActionEvent) => void | - | A follow-up Button or a Form submit. event.humanFriendlyMessage is the next user message; event.formState carries the field values. |
| onError | (errors: OpenUIError[]) => void | - | Statements that failed to parse or validate, once settled. |
| library | Library | generativeLibrary | Swap in an extended catalog of your own. |
| Data attribute | Description |
|---|---|
| aria-busy | true while streaming. |
generativeLibrary
The client catalog: every spec bound to its Koala renderer. Import it to extend with your own components.
generativeSpecLibrary
The same catalog without React, safe on the server. generativeSpecLibrary.prompt() writes the system prompt that teaches the model the language and the components.