Introduction
Copy-paste components that AI agents compose into interfaces at runtime.
GenUI is a component library for generative UI: interfaces an agent assembles in the moment, from real data, for one user and one task, and that disappear when the task is done.
Every component ships as three things:
- The component. React, Tailwind and shadcn/ui primitives. You install it with the shadcn CLI and own the code.
- A Zod schema. This is the contract the agent fills in. It converts to JSON Schema for any model's tool definitions.
- Agent guidance. When to use the component, when not to, and the rules the agent must follow. It's exported as a ready-made tool definition.
Several components in one reply are composed by the Renderer, which works with the Vercel AI SDK and LangGraph.
Agent setup builds the system prompt and tool set for the components you pick, with the token cost of each.
Categories
| Category | What the agent is doing |
|---|---|
| Layout | Structuring a response into containers |
| Compose | Writing an answer with structure |
| Visualize | Showing data or how something is built |
| Explore | Comparing, narrowing and exploring options, results and relationships |
| Tools | Building a single-use utility for the task |
| Collect | Asking for input, grounded in real data |
| Refine | Iterating on generated output |
| Act | Making changes, with approval first |
| Transparency | Showing its work: sources, steps, memory |
| Status | Reporting progress, limits and errors |
Levels
Every component sits at one level, shown under its title:
- Primitive: structure with no meaning of its own, like Tabs, Columns and the streaming skeleton.
- Pattern: a reusable interaction for any domain: pick, confirm, compare, collect, visualize.
- Experience: a domain flow such as Hotel Booking or Flight Ticket. Each experience lists the patterns it shares behaviour with, so a new domain starts from patterns instead of a new component.
Components
Layout
Tabs
A reply split into parallel views.
Columns
Options side by side.
Inline App
A small sandboxed HTML app the agent writes when no catalog component fits.
Compose
Summary Card
A plan or overview at a glance.
Entity Card
Products, places or people, with actions.
Callout
The one notice the user must not miss.
Follow-up Chips
One-tap next steps after an answer.
Article
A long-form brief, explainer or reader view.
Artifact Preview
Preview a PDF, image, code, CSV or JSON file.
Encyclopedia Snippet
A credited summary with an infobox.
Term Explainer
One term explained, with your value in context.
Event Details
Date, venue, agenda and RSVP for one event.
Photo Mosaic
A hero collage of photos with tag chips.
Inspiration Cards
Visual ideas as tall image cards.
Style Board
Fashion looks on a masonry board, with filters and saves.
Visualize
Data Table
Sortable records with bulk actions.
Chart
Line, bar or area charts from real figures.
Scatter Plot
Whether two measures move together, with bubbles and a trend.
Distribution Chart
How values are spread: histogram, box plots or dots.
Composition Chart
What a whole is made of: donut, 100% bars, waffle or treemap.
Sankey Diagram
Where an amount flows, stage by stage.
Timeline
Ordered events with their state.
Map
Places, routes, picking and pin-drop.
Insight Card
One personal insight with a tiny visual.
Stock Quote
Price, change and candles from market data.
Weather
Current conditions, hourly and daily forecast.
Weather Outlook
A plain 5 to 7 day forecast: icon, high and low.
Audio Player
A recording with waveform, markers and transcript.
Flight Status
Live flight progress, delays, gates and belt.
KPI Card
A metric card: segments, dots, treemap or bars.
Account Balances
Net total across accounts, with allocation.
Slide Gallery
Photos, design options or deck slides to browse.
Region Map
States or countries shaded by value, with pins.
Price Details
Is it a good price, what it costs delivered, where it's cheapest.
Delivery Tracker
Food, parcel or ride tracking, with the courier.
Funnel
Conversion by step, drop-offs and segments.
Forecast
A projection with uncertainty, goals and limits.
Heatmap
Day × hour, calendar or cohort intensity.
Lab Results
Each value on the lab's range, with trends.
Explore
Ranked Recommendations
A ranked shortlist with reasons and trade-offs.
Comparison Matrix
Options side by side, differences and best values.
Search Results
Search, filter, sort and load more results.
Relationship Explorer
Org charts, dependencies and cause and effect.
Flight Offers
Ranked flights to compare and pick one.
Part Diagram
An exploded view of an object's parts.
Tools
Calculator
A single-use calculator built from config.
Checklist
Steps to tick off, with times or owners.
Simulation
A what-if model that plays out over time.
Timer
Countdowns, intervals and a stopwatch that survive reloads.
World Clock
Clocks across time zones, with a meeting planner.
QR Code
A scannable code for a link, Wi-Fi or contact.
Countdown
Days left until a date that matters.
Medication Reminder
This week's doses, today's to log, refills.
dB Meter
Approximate sound level, live or from a sensor.
To-do List
Your editable task list, saved as one change set.
Password Reveal
A masked secret with reveal, copy and auto-hide.
Translator
Editable source, languages, alternatives.
Quantity Scaler
Quantities that scale with the number of people.
Revenue Estimator
Participants and price per person, with the total.
Collect
Question Stepper
The decisions an agent needs, one at a time.
Guided Flow
A short multi-step flow in the chat.
Generated Form
Structured input with validation.
Entity Picker
Choose real records the agent fetched.
Slot Picker
Dates and times from real availability.
File Upload
Files with stated rules and previews.
Product Options
Size, color and quantity, then add to cart.
File Browser
Navigate the user's folders and pick files.
Color Picker
Swatches from a palette, with contrast and previews.
Hotel Booking
Rooms, rates and full price, then hand off to book.
Showtimes
Days and session times for movies, classes and shows.
Seat Map
Seats on a real plane, cinema or train layout.
Restaurant Reservation
Real open tables, requests and policies, then book.
Option Builder
Combine options and see totals against a budget.
Car Rental
Real offers, cover and extras, full price, then book.
Preferences Wizard
Step-by-step setup of lasting preferences.
Service Visit
Book a technician's arrival window at home.
Doctor Appointment
Provider, visit type, time and insurance.
Venue Map
Stadium or concert sections, then seats.
Quick Questions
A few choices answered at once, one button.
Refine
Draft Options
Pick, edit and apply one of several drafts.
Plan Review
Shape the agent's plan before it runs.
Preference Controls
Tune budget, priorities and tone, then redo.
Inline Editor
Edit the output in place, or rewrite one part.
Itinerary
A day plan as a list of stops the user can edit.
Act
Change Preview
Editable before/after, approved before applying.
Result Receipt
What changed, with undo while possible.
Cart
Review the cart, then hand off to checkout.
Calendar
The real schedule, with proposed changes to review.
Kanban Board
Tracker items by stage; moves go back to the agent.
Email Thread
A mailbox thread, with a drafted reply to approve.
Invoice
An invoice, bill or receipt with reconciled totals.
Flight Ticket
A booking or boarding pass with check-in handoff.
Social Post
Found posts, or a draft to edit, schedule and approve.
Music Player
Now playing, or a playlist to preview and save.
Approval Request
Permission for one action, with scope and consequences.
Task Queue
Queued tasks in run order, with reorder, pause, cancel and approve.
Checkpoint
Restore points of a long run; roll back or continue.
Confidence
How sure the agent is, with evidence for and against.
Handoff
Hand a task to a person or agent, with context and an editable note.
Autonomy Control
How much the agent may do without asking, picked level by level.
Permission Scope
The access a task needs, scope by scope with its risk, granted for a chosen duration.
Event Pass
Tickets with a scannable entry code.
Hotel Reservation
Your stay: check-in, room, key, Wi-Fi.
Gift Card
Balance, show at checkout, or send one.
Transparency
Citations
Claims linked to their sources.
Activity Trail
The searches and tool calls behind an answer.
Assumptions
What the answer assumes, and corrections.