AI-Native UI and Generative UX 2025 — Complete Guide: Streaming UI, Tool Use Rendering, AI SDK (Vercel), LangChain UI, LlamaIndex.TS UI, Conversational Interfaces, Feedback and Correction UX, Uncertainty Visualization, Human-in-the-loop, 2025 AI Product UX Benchmark — Season 6 Ep 3

Prologue — While AI Thinks, What Does the User See?

Two years after ChatGPT in late 2022, AI product UX has branched into three main lineages.

Chatbot UX (2022-2023): Just a chat box. Stops at "What should I ask?"
Agentic UX (2023-2024): Tool Use for external actions. The UI is still chat.
Generative UI (2024-2025): AI generates the UI itself. Cards, forms, charts appear mid-conversation.

2025 AI products mix all three generations. The best products combine Generative UI + a solid feedback loop + trustworthy UX.

"The value of an AI product is decided not by the answer itself, but by the experience while waiting for the answer and what follows it."

This post is about how to design that.

Chapter 1 — What Makes AI UX Fundamentally Hard

Four Differences from Normal UX

(1) Variability of response time

Per-query variance of 0.5s to 30s
Showing only a loading spinner is the worst option

(2) Uncertainty of output

Different output for the same input
"Is this answer correct?" skepticism is the default

(3) Hallucination risk

Confidently stated incorrect information
Requires tiered trust

(4) Long-running tasks

Agents execute across multiple steps
How you show the intermediate steps is half the UX

Which Means You Need

Progressive Feedback
Correction Paths (cancel and edit)
Attribution (sources, grounding)
Uncertainty Viz
User Control

Chapter 2 — Streaming UI: Token-by-Token Progressive Rendering

Why Streaming?

LLMs generate tokens one by one, in sequence. Exposing the first token immediately on a 10-second response dramatically improves perceived speed.

The core discovery ChatGPT revealed through its "answer that appears gradually" UX:

Even if total completion time is the same, shorter TTFT (time to first token) makes users feel "fast"
Best when generation speed matches reading speed

Tech Stack

(1) Server-Sent Events (SSE)

One-way HTTP stream
Most widely used; native browser support

(2) WebSocket

Bidirectional. Suits complex Agent and collaborative apps

(3) HTTP/2 and HTTP/3 Streaming

Multiplexed streams, header compression

(4) React Server Component Streaming

Built-in in Next.js and RR7
Chunks transmitted via <Suspense> boundaries

Vercel AI SDK (the 2024-2025 standard)

'use client';
import { useChat } from 'ai/react';

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

Server:

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({ model: openai('gpt-4o'), messages });
  return result.toDataStreamResponse();
}

UX Details That Matter

Typing cursor blink (shows generation in progress)
Partial Markdown rendering — render unfinished code blocks first
Auto-scroll (don't touch if the user has scrolled elsewhere)
Stop button — user can halt
Regenerate — get a different answer when the current one misses

Chapter 3 — Tool Use and Generative UI Rendering

Traditional Tool Use UX

LLM emits a JSON tool call, server runs it, result is inserted as text
Screen is still "just text"

Generative UI UX

Tool results render as UI components
Example: "tell me the weather" produces a weather card component
Example: "search flights" produces a flight list with filters

Vercel AI SDK — the RSC approach

// app/action.ts
'use server';
import { createAI, createStreamableUI } from 'ai/rsc';
import { WeatherCard } from './weather-card';

async function submit(input: string) {
  'use server';
  const ui = createStreamableUI(<LoadingCard />);
  (async () => {
    const weather = await fetchWeather(/* ... */);
    ui.done(<WeatherCard data={weather} />);
  })();
  return ui.value;
}

export const AI = createAI({ actions: { submit } });

When the user sends a message, React components — not text — get streamed.

Pros

Users can interact (click a weather card for details)
Information density is much higher
Brand consistency (uses your own design system)

Cons

Implementation complexity goes up
Needs prompt design to tell the model when to call which UI
Fallback UI is mandatory (error or tool failure)

Chapter 4 — Visualizing Tool Use State

When an Agent calls multiple tools sequentially or in parallel, you must show the user what it is doing.

Three-Stage Visualization

(1) Planning

"I will solve your question in 3 steps."
Checklist style

(2) Execution

"Currently executing step 2: web search"
Per-step spinner, checkmark when done

(3) Completion

"Found 5 results."
Summary of results with expand-for-detail

Real-World Patterns

ChatGPT Search / Deep Research

Top: "Used X sources"
Middle: progress (searching, reasoning, writing)
End: source links

Perplexity

Per-step timeline
Inline citation footnotes [1] [2]

Cursor

Diff view on file edits
Approve / reject buttons

Claude (Anthropic)

Artifacts: long code or documents in a separate panel
Recent Projects and Deep Research features

Core Principles

Never leave it a black box — if nothing shows for more than 10 seconds, users leave
Cancelability — "Stop this agent"
Per-step preview — expose intermediate results even before completion

Chapter 5 — Visualizing Uncertainty and Hallucination

Three Tiers of Trust

(1) Certain

Clear source, verified fact
Plain text

(2) Estimated

AI interpretation or summary
Italic or muted color
"AI interpretation" badge

(3) Uncertain / Warning

Missing recent info or low confidence
Warning icon and color (orange/red)
"Please verify accuracy" note

Source Attribution

Inline footnotes

[1] [2] style, click for source
Perplexity and You.com standard

Hover card

Preview on link hover

Source sidebar

A dedicated panel next to the response

Hallucination-Defense UX

Highlight unsourced claims (different background)
Formal expression of "may not know": "It has not been verified, but..."
Special highlighting for numbers, dates, proper nouns (hallucination-prone areas)

Chapter 6 — Designing Conversational Interfaces

2022-2023 was "chat UI for everyone." 2025 is UX matched to purpose.

When Chat UI Fits

Exploratory questions (research, learning)
Long, accumulating context
Questions without a clear answer

When Chat UI Does Not Fit

Fixed workflows (forms with AI assistance)
Frequent repetitive tasks (keyboard-shortcut UX)
Exact commands (agent CLI)

Key UX Patterns in 2025

(1) Composer + Chat

Cursor / Claude Code style
Editor / file tree plus side AI panel

(2) Inline AI

Notion AI, Linear, GitHub Copilot
Invoked from the cursor via / or a shortcut

(3) Canvas / Artifacts

Claude Projects, ChatGPT Canvas
Left: conversation. Right: editable artifact
Best for long-form writing and code work

(4) Agent Console

Devin, OpenHands
Exposes the file system, browser, and terminal
"Looking over the shoulder of an AI" feeling

(5) Command Palette

Cmd+K style (Linear, Arc, Raycast)
Rapid AI command entry

Chapter 7 — Feedback and Correction Patterns

An AI product's maturity is decided by how it corrects itself when wrong.

The Three Baseline Feedback Controls

Thumbs up / down
Regenerate (try again)
Copy

Advanced Feedback

Edit Response — user edits the AI's answer
Explain why — AI explains why it answered that way
Change tone — more concise or more detailed
Continue writing — extend the output

Correction UX Principles

(1) Easy to undo

Ctrl+Z locally, or Edit/Delete inside the chat

(2) Fix only what is wrong

Full regenerate vs. partial edit option
Diff-review UI for code

(3) Feedback that teaches

"What was wrong?" structured feedback
Fuel for model improvement and evaluation data

Representative Implementations

Cursor

"Accept / Reject / Reject All" on file edits
Partial accept supported

Linear Magic

AI drafts → inline edit → confirm
Field-level accept/reject

Notion AI

"Continue / Improve / Shorter / Longer" options
Block-level edits

Chapter 8 — Human-in-the-loop Agent UX

Why HITL Matters

Autonomous agent decisions are risky:

Payment, deletion, external calls are irreversible
Access rights and sensitive data
Hallucination becoming real-world damage

Solution: require human approval for critical decisions.

Approval UX Patterns

(1) Preview + Confirm

"I am about to send this email" → confirm / edit / cancel
The base structure

(2) Graduated Trust

Every action requires approval at first; automation expands as trust grows
Under user control

(3) Policy-Gated

Approval required only for categories like payment, delete, external calls
Safe actions stay autonomous

(4) Interrupt and Resume

Agent pauses, user intervenes, agent resumes

Production Example (LangGraph)

const graph = new StateGraph(State)
  .addNode('plan', plannerNode)
  .addNode('human_approval', humanApprovalNode)  // waiting node
  .addNode('execute', executorNode)
  .addEdge('plan', 'human_approval')
  .addConditionalEdges('human_approval', (state) =>
    state.approved ? 'execute' : 'plan'
  );

2025 Trends

Model Context Protocol (MCP) standardization — shared across Claude, Cursor, Codex CLI
Anthropic Computer Use (Oct 2024) — agent controls browser/desktop; approval gates are mandatory
OpenAI Operator (early 2025) — similar capability, reinforced safety guards and anomaly detection

Chapter 9 — Progressive Disclosure and AI

A classic UX pattern — reveal information when it is needed. It becomes powerful when paired with AI.

Examples

Claude Artifacts

Conversation stays lightweight and summarized
Detailed artifact lives in a separate panel (expand to view)

Perplexity Sources

Body contains the answer; clicking a footnote expands the source

GitHub Copilot Chat

Concise cue on code suggestions; detailed explanation via a "Why?" click

Principles

Summary by default, detail is opt-in
Layered depth: beginner path to advanced path
Density control: not everything on one screen

Chapter 10 — Error UX and Recovery

Error Categories

(1) Rate Limit / Usage Limit

"You have used your quota today." — clear guidance plus an upgrade link

(2) Tool Execution Failure

"Web search failed. Retry?"
Surface partial success (some tools succeeded)

(3) Content Policy Violation

"Cannot process this request." — brief reason plus alternatives

(4) Model / Network Timeout

"Timed out. Try a simpler question."

Retry UX

Default auto-retry (1-2 times) plus manual option
Model fallback (GPT-4 → Claude → smaller model)
Preserve state (no loss of prior conversation)

Error Prevention

Input validation: warn on too-short or ambiguous input
Token budget warning: "Processing this long file will..."
Cost preview: "Estimated cost: 0.05 USD"

Chapter 11 — 2025 AI Product UX Benchmark

ChatGPT (OpenAI)

Streaming, Canvas, Search, Memory, Voice
Broadest surface area, a bit heavy
Deep Research mode introduced in early 2025

Claude (Anthropic)

Artifacts for separating work
Projects for context management
Style matching for tone
Strong following among developers and writers

Perplexity

Positioned as an Answer Engine
Inline citations plus sidebar sources
Pro Search, Focus (Academic, YouTube, Reddit)

Cursor (IDE AI)

Multi-file edits via Composer
Best-in-class Tab prediction accuracy
A "copy-and-use" ethos, shadcn-level

Claude Code (Anthropic CLI)

Terminal-based agent
CLAUDE.md and MCP standardization
A productivity breakthrough for senior developers

Notion AI

Inline invocation, block-level manipulation
Combined with workspace-wide search

Linear Magic

Auto-authoring, organization, and prioritization of tickets
Natural integration with the workflow

v0 by Vercel

Prompt-to-UI generation
Direct output as shadcn components
Closes the design-to-code gap

Bolt.new / Lovable

Prompt-to-fullstack-app generation
End-to-end through deployment

Granola / Otter / Fireflies

Automatic meeting summaries and action items
Calendar integration through plugins

Chapter 12 — Generative UI in Practice: "Movie Recommender Chatbot"

Requirements

User says "recommend some sci-fi movies"
AI replies with 5 movie cards
Clicking a card loads details (second tool call)
Detail view has a "Watch trailer" button

Design

Step 1: Define the tools

const tools = {
  searchMovies: {
    description: 'Search movies by genre/query',
    parameters: z.object({ query: z.string() }),
    execute: async ({ query }) => await tmdbSearch(query),
  },
  getMovieDetails: {
    description: 'Get movie details by id',
    parameters: z.object({ id: z.string() }),
    execute: async ({ id }) => await tmdbDetails(id),
  },
};

Step 2: Map tools to UI components

function renderToolResult(name: string, result: any) {
  if (name === 'searchMovies') return <MovieGrid movies={result} />;
  if (name === 'getMovieDetails') return <MovieDetails data={result} />;
  return null;
}

Step 3: Streaming integration

const result = streamText({
  model: openai('gpt-4o'),
  messages,
  tools,
  toolChoice: 'auto',
});

Step 4: UX details

Skeleton cards while the tool is running
Lazy-loaded images
Quick preview on card hover
"Show me other picks" follow-up button

Chapter 13 — Next Up: Season 6 Ep 4, "The New Era of Motion and Animation"

If this post was about how UI elements come to exist, the next one is about how UI moves. Ep 4 covers 2025 motion design.

View Transitions API in practice (Chrome, Safari, Firefox 2024-2025)
Motion One, Framer Motion, GSAP compared
Svelte Motion and Solid Motion
CSS Animations 2025 (scroll-driven, timeline-scope)
Motion accessibility (reduced-motion)
Performance, 60fps, GPU, CSS Containment
Mobile gesture animation (React Spring, Motion Layout)
The role of motion in Apple / Google design languages
Motion culture in Korean services (the Toss case)
AI-powered animation tooling

"A still UI is a dead UI. The right motion keeps a product alive."

See you in the next post.

Epilogue — A Checklist of 12

Does the AI response render token-by-token via streaming?
Is TTFT (time to first token) under one second?
Are Stop / Regenerate / Edit offered on every response?
Are tool-use results rendered as Generative UI components?
Is the agent's progress visibly exposed during execution?
Are sources and trust tiers displayed clearly?
Is there Human-in-the-loop approval for sensitive actions (payment, delete)?
Are partial edit and regenerate UX paths provided?
Are error and timeout recovery paths explicit?
Does mobile offer the same UX quality?
Is accessibility (keyboard, screen reader, reduced motion) considered?
Are feedback signals fed back into model improvement and evaluation?

"AI is a tool, and UX is what makes that tool usable by people. The best AI products feel 'like magic,' but in reality they are a sum of countless UX details."

— Season 6 Ep 3, Fin.