Since ChatGPT launched in 2022, we have collectively decided that the future of software is the "Chat Bubble." We type text. We get text back. We are essentially rebuilding the Command Line Interface (CLI) but with natural language.
This is a mistake. This is Skeuomorphism. We are treating AI like a person (who speaks text) rather than a computer (which renders pixels).
The Problem:
If I ask "How is my stock portfolio doing?", I don't want a paragraph of text explaining the numbers.
If I ask "Book a flight to London," I don't want a bulleted list of options.
I want a Line Chart. I want a Date Picker. I want interactive UI elements.
Part 1: Defining Generative UI
Generative UI (coined by Vercel) is the concept of dynamically rendering user interface components based on user intent, in real-time.
It is not "text-to-website" (generating HTML/CSS). It is "Tool-to-Component." It relies on the LLM selecting a tool (e.g., get_weather), and the frontend responding by rendering a pre-built React Component (<WeatherCard />) in the chat stream instead of raw JSON.
Part 2: The Tech Stack (Vercel AI SDK + RSC)
To make this work, you need a tight coupling between your AI logic and your Frontend logic. The secret sauce is React Server Components (RSC).
The Workflow
User: "Show me AAPL stock."
Server (LLM): Decides to call the
get_stock_historytool.Server (Next.js): Executes the tool function. Fetches data from Yahoo Finance.
Server (RSC): Instead of returning JSON, it returns a Streamable UI Component.
TypeScript
// Server Action (actions.tsx)
export async function submitUserMessage(content: string) {
const ui = await createStreamableUI(
<div>Analyzing request...</div>
);
const completion = await streamUI({
model: openai('gpt-4-turbo'),
system: 'You are a financial assistant.',
prompt: content,
tools: {
get_stock_price: {
description: 'Get the current stock price',
parameters: z.object({ ticker: z.string() }),
generate: async ({ ticker }) => {
const data = await fetchStock(ticker);
// MAGIC: We return a React Component, not JSON
return <StockChart data={data} color="green" />;
},
},
},
});
return { ui: completion.value };
}
Part 3: Towards "Just-In-Time" Interfaces
This capability fundamentally changes how we design software. The traditional Enterprise SaaS Application is a "Dashboard." A dashboard is a graveyard of widgets. It has 50 charts, graphs, and tables, hoping that one of them is what the user needs right now.
Generative UI kills the Dashboard.
Instead of a cluttered screen, you show the user a blank canvas (an Empty State). The interface is Ephemeral. It exists only when needed.
Example: The Travel App User: "I want to go to Tokyo in May." App renders a Calendar Widget with prices on dates. User: "Book the 5th." App renders a Seat Selector map. User: "Aisle access." App renders a Payment Form (Apple Pay).
The widgets appear, serve their purpose, and disappear. The UI adapts to the conversation flow.
Part 4: Challenges (Streaming & Suspension)
Streaming UI is harder than streaming text. Text is linear. UI is a tree. If the LLM is slow to decide which tool to use, the user stares at a spinner. Vercel solves this with createStreamableUI, which allows you to push "Skeleton State" updates while the LLM is thinking.
The "Flicker" Problem: If the model generates a chart, realizes it made a mistake, and then tries to change it to a table, the UI shifts violently. You need robust error boundaries and "Optimistic UI" updates (guessing the tool before the LLM confirms it).
Deep Dive: The End of Figma? If the UI is generated at runtime, you cannot "design" it in Figma 6 months in advance. You cannot have a pixel-perfect mockup. The Shift: Designers will stop drawing "Screens" and start designing "Systems." You will define the tokens (Color, Typography, Spacing) and the constraints (Button cannot be larger than 50px). The AI will assemble these Lego blocks into screens based on user needs. Design becomes Governance.
TypeScript
// Client Component (GenerativeComponent.tsx)
import { useUIState, useAIState } from 'ai/rsc';
export function GenerativeCanvas() {
const [uiState, setUIState] = useUIState();
const [aiState, setAIState] = useAIState();
return (
<div className="canvas">
{uiState.map((component, index) => (
<div key={index} className="fade-in">
{component}
</div>
))}
<PromptInput />
</div>
);
}
Checklist: Accessibility in a Generative World When AI builds the UI, who ensures it is WCAG compliant? [ ] Contrast: Does the AI know your brand colors must pass AA standards? [ ] ARIA Labels: Does the
<WeatherCard />have screen reader tags? [ ] Focus Management: When a new widget streams in, does focus jump unexpectedly? [ ] Fallbacks: If the AI hallucinates a non-existent prop, does the component crash gracefully (Error Boundary)?
Part 5: Expert Interview
Topic: Designing for Uncertainty Guest: "Elena", Product Designer at Airbnb (Ex-Vercel).
Interviewer: How do you test a UI that doesn't exist yet?
Elena: That's the nightmare. We used to do Visual Regression Testing (Snapshot testing). Now, that's impossible. If the AI is 1% more creative today, the snapshot fails.
Interviewer: So what do you do?
Elena: We moved to "Property Based Testing." We don't check if the button is blue. We check if the button exists and if it is clickable. We test the physics of the UI, not the pixels.
The 3 Stages of Generative UI Evolution We are currently in Stage 1. The future is Stage 3.
Stage 1: The Widget (Current): Examples: Vercel, Perplexity. The LLM calls a pre-built component (e.g.,
<StockChart />). The UI is static; the choice of UI is dynamic.Stage 2: The Canvas (Mid-Term): Examples: Figma AI. The LLM doesn't just call a component; it allows the user to edit the component. "Make this chart red." "Turn this table into a heatmap." The UI becomes mutable.
Stage 3: The Runtime (Long-Term): Examples: None yet. The LLM writes the React code from scratch, compiles it in the browser, and renders a completely novel interface that no human ever designed. This requires massive safety rails against XSS and infinite loops.
The Future: Design Systems 2.0
Current Design Systems (Material UI, Ant Design) are static libraries. Future Design Systems will be Semantic. Instead of defining "Button = Blue", you will define "Primary Action = High Visibility". The AI will decide whether that means a Blue Button, a Floating Action Button, or a Voice Command prompt depending on the context.
Recommended Reading
Essay: "The End of Localhost" by Vercel.
Paper: "Language Models are Few-Shot Learners" (GPT-3).
Tool: v0.dev (Vercel's Generative UI tool).
Deep Dive: Under the Hood of `streamUI`
How does the Vercel AI SDK actually work?
1. The Prompt: It wraps your `system` prompt with tool definitions.
2. The Stream: It opens a `POST` request to OpenAI.
3. The Interceptor: It listens for a "Tool Call" token.
4. The Switch: If it sees `get_weather`, it pauses the stream, executes the TypeScript function on the server, renders the React Component to a `RSC Payload` string, and resumes the stream to the client.
The client never sees the JSON. It just sees HTML appear piece by piece.
Part 6: Glossary
RSC: React Server Components. Components that render on the server and send HTML (not JS) to the client.
Streamable UI: The ability to push React nodes over the wire in chunks.
Tool Calling: The mechanism where an LLM asks the system to execute a function.
Ephemeral UI: Interface elements that are created temporarily for a specific task and then discarded.
Skeuomorphism: Design that mimics real-world objects (e.g., a digital note looking like yellow paper).
Conclusion
We are moving from "Chatbots" to "Agent Systems." A Chatbot talks. An Agent does. Generative UI is the visual language of Agents. It is the only way to build AI apps that don't feel like a 1990s terminal.
All in One Place
Atler Pilot decodes your cloud spend story by bringing monitoring, automation, and intelligent insights together for faster and better cloud operations.