Stream UI, not walls of text

AI answers stream in as live components, not markdown to parse.

Guillermo Rauch@rauchg
We'll be open sourcing an LLM → UI streaming mechanism powered by the @vercel AI SDK and RSC. It will help you build rich AI apps that go beyond text and markdown, with optimal performance and robustness to UI state changes.
Feb 14, 2024View on X ↗
Guillermo Rauch@rauchg
We’re still in the “let’s retrofit AI into existing UIs” phase. The future is AI-native UX.
Nov 19, 2023View on X ↗
Guillermo Rauch@rauchg
This is one of the best Generative UI examples I've seen to date. @meter has a beautiful dashboard, but their feature set and UI surface is vast. Their new @nextjs-powered conversational interface simplifies & streams their UI on the user's command: command.meter.com
Aug 21, 2024View on X ↗
Guillermo Rauch@rauchg
As models get more performant, UI gets more generative and dynamic. Excited for this trend to continue
Aug 28, 2026View on X ↗

The stream is simulated: no model runs, and tool results arrive on timers.

1 · Ask about your deploys

Pick a question and read both answers as they stream.

Markdown wallBad
Ask a question
Streamed componentsGood
Ask a question
{message.parts.map((part, i) => {
  switch (part.type) {
    case "text":
      return <Markdown key={i}>{part.text}</Markdown>;
    case "tool-getDeployStats":
      return part.state === "output-available"
        ? <DeployStats key={part.toolCallId} {...part.output} />
        : <DeployStatsSkeleton key={part.toolCallId} />;
  }
})}

2 · Clicks survive new tokens

Start the stream, then filter or open rows as builds land.

Re-rendered per chunkBad
Your clicks undone: 0
Keyed, appendedGood
Your clicks undone: 0

Why it matters, pros and cons

Why it matters

A number in a tile, a bar in a chart and a Redeploy button beat a paragraph describing them. The model picks the component; the UI keeps its state.

Pros

  • Skeletons hold the final shape, so nothing jumps as parts arrive.
  • Answers are actionable: the button is right there, not a link to it.
  • Components are your design system: same look, same accessibility.

Cons

  • Every tool needs a component and a skeleton; start with the top asks.
  • Open-ended explanations still read best as text.
  • Actions from model output need the same auth checks as the app.