LabHub

ブログ

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

2026-04-15 · 18 分で読めます · #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#japanese

한국어English日本語

プロローグ・AIが考えている間、ユーザーは何を見ているのか

2022年末の ChatGPT から2年、AI プロダクトの UX は大きく3つに分化した。

  1. Chatbot UX (2022-2023): チャット欄だけ。「何を聞こうか?」で止まる
  2. Agentic UX (2023-2024): Tool Use で外部アクションを実行。UI は依然としてチャット
  3. Generative UI (2024-2025): AI が UI 自体を生成する。カード・フォーム・チャートが対話中に現れる

2025年の AI プロダクトはこの3世代が混在する。最も優れたプロダクトは Generative UI + 確かなフィードバックループ + 信頼できる UX の組み合わせだ。

「AI プロダクトの価値は応答そのものではなく、応答を待つ間・応答の後の体験で決まる。」

今回はその設計法について。

第1章・AI UX の本質的な難しさ

一般的な UX と異なる4つの点

(1) 応答時間のばらつき

(2) 結果の不確実性

(3) Hallucination リスク

(4) タスクの長期性

だから必要なもの

第2章・Streaming UI — トークン単位の段階的レンダリング

なぜ Streaming なのか

LLM はトークンを1つずつ順次生成する。全体で10秒かかる応答も、最初のトークンから露出すれば体感速度が劇的に速くなる。

ChatGPT が「答えが徐々に現れる」UX で示した核心の発見:

技術スタック

(1) Server-Sent Events (SSE)

(2) WebSocket

(3) HTTP/2・HTTP/3 Streaming

(4) React Server Component Streaming

Vercel AI SDK(2024-2025 の標準)

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

サーバー:

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 ディテール

第3章・Tool Use と Generative UI のレンダリング

伝統的な Tool Use の UX

Generative UI の UX

Vercel AI SDK - RSC 方式

// 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 } });

ユーザーがメッセージを送ると、テキストではなく React コンポーネントがストリームされる。

長所

短所

第4章・Tool Use ステートの可視化

Agent が複数の tool を順次・並列に呼ぶとき、ユーザーに何をしているのかを見せる必要がある。

3段階の可視化

(1) Planning 段階

(2) Execution 段階

(3) Completion 段階

実際のパターン

ChatGPT Search / Deep Research

Perplexity

Cursor

Claude (Anthropic)

核心原則

第5章・不確実性・Hallucination の可視化

信頼度の3段階

(1) 確実

(2) 推定

(3) 不確実/警告

出典表示

インライン脚注

Hover Card

Source Sidebar

Hallucination 防御 UX

第6章・対話型インターフェースの設計

2022-2023 は「誰もがチャット UI」だった。2025 は目的に合った UX に分化している。

チャット UI が合う場合

チャット UI が合わない場合

2025年の主要 UX パターン

(1) Composer + Chat

(2) Inline AI

(3) Canvas / Artifacts

(4) Agent Console

(5) Command Palette

第7章・Feedback と Correction パターン

AI プロダクトの成熟度は「間違えたときにどう直すか」で決まる。

基本のフィードバック3種

上級フィードバック

Correction UX の原則

(1) キャンセル・戻るが容易

(2) 間違った部分だけを直す

(3) 学習のためのフィードバック

代表的な実装

Cursor

Linear Magic

Notion AI

第8章・Human-in-the-loop Agent UX

なぜ HITL が重要か

Agent が自律的に決定・実行すると危険:

解決策: 重要な決定に人間の承認を挟む。

承認 UX のパターン

(1) Preview + Confirm

(2) Graduated Trust

(3) Policy-Gated

(4) Interrupt and Resume

実戦実装(LangGraph 例)

const graph = new StateGraph(State)
  .addNode('plan', plannerNode)
  .addNode('human_approval', humanApprovalNode)  // 待機ノード
  .addNode('execute', executorNode)
  .addEdge('plan', 'human_approval')
  .addConditionalEdges('human_approval', (state) =>
    state.approved ? 'execute' : 'plan'
  );

2025 のトレンド

第9章・Progressive Disclosure と AI

情報を必要なときに展開して見せる伝統的 UX パターン。AI と出会って強力になる。

例

Claude Artifacts

Perplexity Sources

GitHub Copilot Chat

原則

第10章・エラー UX と復旧

エラーの種類

(1) Rate Limit / Usage Limit

(2) Tool Execution Failure

(3) Content Policy Violation

(4) Model/Network Timeout

Retry UX

エラー防止

第11章・2025 年 AI プロダクト UX ベンチマーク

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

第12章・Generative UI 実戦 — 「映画推薦チャットボット」

要件

設計

Step 1: tool の定義

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: UI コンポーネントのマッピング

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 統合

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

Step 4: UX ディテール

第13章・次回予告 — Season 6 Ep 4「Motion・アニメーションの新時代」

UI 要素が生まれる方法を論じたなら、次は UI が動く方法だ。Ep 4 は 2025 年のモーションデザイン。

「止まった UI は死んだ UI。適切な motion がプロダクトを生かす。」

次の記事でお会いしましょう。

エピローグ・チェックリスト12

  1. AI 応答は streaming でトークン単位にレンダされているか?
  2. TTFT(first token までの時間)は1秒未満か?
  3. Stop・Regenerate・Edit が全ての応答に提供されているか?
  4. Tool Use の結果が Generative UI コンポーネントとしてレンダされているか?
  5. Agent 実行中の進捗が視覚的に表れているか?
  6. 出典・信頼度が明確に表示されているか?
  7. 機微アクション(決済・削除)に Human-in-the-loop 承認があるか?
  8. 部分修正・再生成の UX が提供されているか?
  9. エラー・Timeout の復旧経路が明確か?
  10. モバイルでも同等の品質の UX を提供しているか?
  11. アクセシビリティ(キーボード・スクリーンリーダー・reduced-motion)が考慮されているか?
  12. フィードバックデータがモデル改善・評価に活用されているか?

「AI は道具であり、UX はその道具を人間が使えるようにするもの。 最高の AI プロダクトは『魔法のよう』に感じられるが、実は無数の UX ディテールの集積だ。」

— Season 6 Ep 3, Fin.

コメント

まだコメントはありません。

ログインするとコメントできます