LabHub

Blog

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

2026-04-15 · 12 min read · #ai-ui#generative-ui#streaming-ui#tool-use#ai-sdk#vercel-ai-sdk#langchain-ui#conversational-ui#human-in-the-loop#ai-ux#uncertainty-visualization#english

한국어English日本語

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

(2) Uncertainty of output

(3) Hallucination risk

(4) Long-running tasks

Which Means You Need

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:

Tech Stack

(1) Server-Sent Events (SSE)

(2) WebSocket

(3) HTTP/2 and HTTP/3 Streaming

(4) React Server Component Streaming

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

Chapter 3 — Tool Use and Generative UI Rendering

Traditional Tool Use UX

Generative UI UX

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

Cons

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

(2) Execution

(3) Completion

Real-World Patterns

ChatGPT Search / Deep Research

Perplexity

Cursor

Claude (Anthropic)

Core Principles

Chapter 5 — Visualizing Uncertainty and Hallucination

Three Tiers of Trust

(1) Certain

(2) Estimated

(3) Uncertain / Warning

Source Attribution

Inline footnotes

Hover card

Source sidebar

Hallucination-Defense UX

Chapter 6 — Designing Conversational Interfaces

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

When Chat UI Fits

When Chat UI Does Not Fit

Key UX Patterns in 2025

(1) Composer + Chat

(2) Inline AI

(3) Canvas / Artifacts

(4) Agent Console

(5) Command Palette

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

Advanced Feedback

Correction UX Principles

(1) Easy to undo

(2) Fix only what is wrong

(3) Feedback that teaches

Representative Implementations

Cursor

Linear Magic

Notion AI

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

Why HITL Matters

Autonomous agent decisions are risky:

Solution: require human approval for critical decisions.

Approval UX Patterns

(1) Preview + Confirm

(2) Graduated Trust

(3) Policy-Gated

(4) Interrupt and Resume

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'
  );

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

Perplexity Sources

GitHub Copilot Chat

Principles

Chapter 10 — Error UX and Recovery

Error Categories

(1) Rate Limit / Usage Limit

(2) Tool Execution Failure

(3) Content Policy Violation

(4) Model / Network Timeout

Retry UX

Error Prevention

Chapter 11 — 2025 AI Product UX Benchmark

ChatGPT (OpenAI)

Claude (Anthropic)

Perplexity

Cursor (IDE AI)

Claude Code (Anthropic CLI)

Notion AI

Linear Magic

v0 by Vercel

Bolt.new / Lovable

Granola / Otter / Fireflies

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

Requirements

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

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.

"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.

Comments

No comments yet.

Sign in to leave a comment