Beautiful UI for AI-native interfaces.
01
Loading State
Pixel-grid loader with shimmer and elapsed time.
Churning31.8s
DriveDotsOrbit
02
Thinking
Expandable traces — steps, reasoning, search, coding.
Thought for 4 seconds
Reading flavor briefs
Scanning supplier lists
Comparing tasting notes6 flavors
Writing the scoop report
StepsReasoningSearchCoding
03
Streaming Text
Streamed answer with inline sources, actions, and follow-ups.
Pistachio is your fastest-growing flavor — sales are up 23% this month and margins beat vanilla by 8 points. scoopdata.ioStone-fruit flavors are trending in the same range.
10 sources
Scoop Datascoopdata.ioTrends Indextrends.google.comMarket Basketmarketbasket.io
Follow-ups
Which flavors sell best in winterCompare gelato and soft serve margins
04
Approval Card
Human-in-the-loop questions the agent asks before acting.
How many flavors should we launch?
Three (core line)Five (full case)Just one hero
05
Tool Chips
Code edits and tool calls as compact chips.
4 tool calls, 2 messages
ThinkingPlanning the churn schedule…
Weekend demand carries pistachio, so it churns first.Batch capacity leaves two evening freezer windows.
Write 204 linesChurnSchedule.tsx
\+ const windows = slots.filter((s) => s.temp <= -12)\+ return schedule(windows, { hero: "pistachio" })
Rebuild and verifynpm run freeze
✓ built in 1.2s✓ 34 checks passed
Read imageflavor-chart.png
1280 × 720 · line chart, three summers.Mint chip trends up 12% through July.
flavors.css+13ChurnSchedule.tsx+74−41menu.ts+8−2+2 more
06
Task Rows
Live agent task status — running, failed, completed.
Verified vendor records12 suppliersCompleted
Matched tax and contact IDs12/12
Flagged stale records0
2Build reorder task list7 SKUs
Reading POS export3 files
Scoring stockout risk68%
Draft supplier emails2 messagesCompleted
Cone supplier follow-updraft
Pistachio reorder notedraft
CapsulesList
07
Chat
Tabbed chat panel with reasoning replies and a composer.
FlavorsSuppliers
Compare mint chip to last summer
Sales HistoryFlavor Datafor 4s
Pulled 3 summers of mint chip sales for comparison.
ComparisonTrend Detectionfor 2s
Mint chip is up 12% with stronger weekend peaks.
08
Prompt Bar
Composer with @ sources, / commands, model picker, and dictation.
Vanilla 1
RoundedPill
09
Recommendation Card
Agent suggestion with a confidence meter and actions.
Want me to place this restock order?
Reorder waffle cones from `cone_king` with lead time `7_days`.
Other options
Switch to vanilla\_madagascarNeeds reviewFull restock across every SKUNo signal
10
Context Cards
Retrieved knowledge chunks with their sources.
All chunks32
Vendor onboarding rule290 characters
Cold-chain certification must be verified before a new dairy can be added to the reorder workflow.
PDFDairy Onboarding SOP.pdf
Seasonal demand row1,250 characters
Q4 velocity table: pistachio +18%, vanilla +6%, rocky road -11%; retire flavors below 40 scoops weekly.
CSVSales Velocity Export.csv
11
Diff Table
AI-proposed edits sweeping through tabular data.
Proposed menu cleanup
| Flavor | Category | Supplier | | ---------------------------- | -------- | ------------- | | Rocky Road | Classic | aurora-scoops | | Bubblegum | Retro | kumo-creamery | | Mint Chip | Classic | maple-orbit | | PistachioSeasonalmaple-orbit | | |
12
Records Table
CRM-style grid with tags, sorting, and relationship status.
| AAndes Snow Creamery — Quito | GelatoCatering | almost 2 years ago | Very weak | — | | -------------------------------------------------------------------------- | -------------------- | ------------------ | ---------------- | ------------------------------------------------------------------------- | | AAurora Scoops — Reykjavík | GelatoSeasonal | 9 days ago | Very strong | aurora-scoops.example.com | | BBlue Fig Gelato — Florence | GelatoCafe | over 1 year ago | Very weak | blue-fig.example.com | | CCacao Norte — Oaxaca | B2BLocalWholesale | about 2 years ago | No communication | cacao-norte.example.com | | CCape Vanilla Co. — Cape Town | WholesaleImports | over 1 year ago | Very weak | cape-vanilla.example.com | | CCloudberry Cone — Helsinki | Dairy-freeSeasonal | No contact | No communication | cloudberry-cone.example.com | | CCoral Coast Sorbet — Honolulu | SorbetLocal | 9 days ago | Very strong | coral-coast.example.com | | EEmber Cone Company — Seoul | B2CVegan | 15 days ago | Weak | ember-cone.example.com | | FFjord Fizz Ice — Oslo | Dairy-freeSeasonal | No contact | No communication | — | | JJuniper & Cream — Vancouver | Dairy-freeCatering | No contact | No communication | — | | KKumo Creamery — Tokyo | B2CCafeVegan | 3 weeks ago | Very strong | kumo-creamery.example.com | | LLotus Leaf Scoops — Hanoi | VeganCafe | 15 days ago | Weak | — | | LLumen Soft Serve — Copenhagen | Dairy-freeCafe | 8 months ago | Weak | lumen-soft-serve.example.com | | MMango Moon Gelato — Nairobi | SorbetVegan | almost 2 years ago | Very weak | mango-moon.example.com | | MMaple Orbit — Montréal | B2BWholesaleSeasonal | 15 days ago | Weak | maple-orbit.example.com | | MMooncake Ice Cream — Singapore | B2BWholesale | about 1 month ago | Very weak | mooncake-ice-cream.example.com | | PPalm Sugar Creamery — Bangkok | B2CVegan | 3 months ago | Very weak | palm-sugar.example.com | | PPampa Creamery — Córdoba | B2CLocal | 12 months ago | Very weak | pampa-creamery.example.com | | PPine & Pistachio — Istanbul | GelatoCatering | about 1 month ago | Very weak | — | | RRosewater Kulfi — Jaipur | B2CSeasonal | 2 months ago | Very weak | — | | SSaffron Sky Kulfi — Dubai | ImportsCatering | almost 2 years ago | Very weak | saffron-sky.example.com | | SSahara Swirl — Marrakech | SorbetLocal | 5 months ago | Very weak | — | | SSilk Road Sorbet — Tbilisi | SorbetImports | about 1 month ago | Weak | silk-road.example.com | | SSol y Nieve — Buenos Aires | GelatoLocal | 2 months ago | Weak | sol-y-nieve.example.com | | SSunbird Gelateria — Lisbon | GelatoCafe | over 2 years ago | No communication | sunbird.example.com | | TTasman Sea Gelato — Hobart | GelatoLocal | 2 months ago | Weak | tasman-sea.example.com | | 26 count | Add calculation | — | 44% average | 19 links |
13
Filter Table
Status chips that reorganize live data.
All5To do2In Progress2Completed1
Task nameDateStatusAdvisor
Restock mango sorbetDec 03To doMango Moon Gelato
Churn black sesameSep 22In ProgressKumo Creamery
Print summer menuJan 02To doCoral Coast Sorbet
Taste-test batch 42Nov 08In ProgressMaple Orbit
Order waffle conesApr 14CompletedAurora Scoops
14
Sidebar Nav
Workspace navigation with quick search.
CCreamery OpsProduction Workspace/New task
Workspace
HomeAgent tasks4Inbox
Objects
SuppliersInventory
15
Search
Command search with live filtering and an empty state.
Forecast summer demandFind waffle cone suppliersCompare seasonal flavorsDraft flavor launch planCheck cold-chain status
16
Insight Cards
Paged agent insights with scrub-ready live charts.
Insights3
The worst performer in your @Creamery is Rocky Road — down `-6%` or `-$2,453.44`.
Mint Chip\-4.41%`-$2,377.66`
Pistachio+1.15%`+$617.22`
Trend snapshotSnapshot
Should I rebalance flavors?
17
Code Block
Agent-written code streaming in line by line.
churn.tsTypeScriptCopy
1export async function churnBatch() {
2 const flavor = await getFlavor("pistachio");
3 const base = await dairy.fetch({ flavor });
4 await freezer.store(base, { temp: "-14C" });
5 return base.gallons;
6}
18
Fine-tune Card
The agent adjusts design properties in an inspector.
Flavor cardAdjust
Layout
WH
RadiusOpacity%
19
Selection Actions
Highlight a passage and hand it to the agent to rewrite.
Pistachio holds the top slot all weekend. Churn it first thing Saturday so the batch has time to firm up before the afternoon rush.
ExplainImprove
ShortenToneGrammar
/ more
New components, in your inbox.
Get new primitives and updates as they ship — copy-paste ready. No spam, unsubscribe anytime.
Notify me