Split View: AI-Native UI·Generative UX 2025 완전 정복: Streaming UI, Tool Use Rendering, AI SDK(Vercel)·LangChain UI·LlamaIndex.TS UI, 대화형 인터페이스, Feedback·Correction UX, 불확실성 시각화, Human-in-the-loop, 2025년 AI 제품 UX 벤치마크 — Season 6 Ep 3

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.

1. Chatbot UX (2022-2023): Just a chat box. Stops at "What should I ask?"
2. Agentic UX (2023-2024): Tool Use for external actions. The UI is still chat.
3. 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

1. Does the AI response render token-by-token via streaming?
2. Is TTFT (time to first token) under one second?
3. Are Stop / Regenerate / Edit offered on every response?
4. Are tool-use results rendered as Generative UI components?
5. Is the agent's progress visibly exposed during execution?
6. Are sources and trust tiers displayed clearly?
7. Is there Human-in-the-loop approval for sensitive actions (payment, delete)?
8. Are partial edit and regenerate UX paths provided?
9. Are error and timeout recovery paths explicit?
10. Does mobile offer the same UX quality?
11. Is accessibility (keyboard, screen reader, reduced motion) considered?
12. 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.