assistant-ui

常に assistant-ui.com/llms.txt で最新 API を確認してください。

AI チャットインターフェースを構成可能なプリミティブで構築するための React ライブラリ。

参考資料

• ./references/architecture.md -- コアアーキテクチャとレイヤー型システム
• ./references/packages.md -- パッケージの概要と選定ガイド

使用時期

ユースケース	最適な用途
チャット UI をゼロから構築	UX を完全にコントロール
既存 AI バックエンド	任意のストリーミングバックエンドに接続
カスタムメッセージ型	ツール、画像、ファイル、カスタムパーツ
マルチスレッドアプリ	組み込みのスレッドリスト管理
本番アプリ	クラウド永続化、認証、分析

アーキテクチャ

┌─────────────────────────────────────────────────────────┐
│                  UI Components (Primitives)             │
│    ThreadPrimitive, MessagePrimitive, ComposerPrimitive │
└─────────────────────────┬───────────────────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────┐
│                   Context Hooks                         │
│   useAui, useAuiState, useAuiEvent │
└─────────────────────────┬───────────────────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────┐
│                    Runtime Layer                        │
│  AssistantRuntime → ThreadRuntime → MessageRuntime      │
└─────────────────────────┬───────────────────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────┐
│                   Adapters/Backend                      │
│   AI SDK · LangGraph · Custom · Cloud Persistence       │
└─────────────────────────────────────────────────────────┘

Runtime を選択

AI SDK を使用していますか？
├─ はい → useChatRuntime（推奨）
└─ いいえ
   ├─ 外部状態（Redux/Zustand）? → useExternalStoreRuntime
   ├─ LangGraph エージェント? → useLangGraphRuntime
   ├─ AG-UI プロトコル? → useAgUiRuntime
   ├─ A2A プロトコル? → useA2ARuntime
   └─ カスタム API → useLocalRuntime

コアパッケージ

パッケージ	用途
@assistant-ui/react	UI プリミティブとフック
@assistant-ui/react-ai-sdk	Vercel AI SDK v6 アダプター
@assistant-ui/react-langgraph	LangGraph アダプター
@assistant-ui/react-markdown	Markdown レンダリング
assistant-stream	ストリーミングプロトコル
assistant-cloud	クラウド永続化

クイックスタート

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { Thread } from "@/components/assistant-ui/thread";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";

function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

状態へのアクセス

import { useAui, useAuiState } from "@assistant-ui/react";

const api = useAui();
api.thread().append({ role: "user", content: [{ type: "text", text: "Hi" }] });
api.thread().cancelRun();

const messages = useAuiState(s => s.thread.messages);
const isRunning = useAuiState(s => s.thread.isRunning);

関連スキル

• /setup - インストールと設定
• /primitives - UI コンポーネントのカスタマイズ
• /runtime - 状態管理の詳細解説
• /tools - ツール登録と UI
• /streaming - ストリーミングプロトコル
• /cloud - 永続化と認証
• /thread-list - マルチスレッド管理
• /update - バージョン更新とマイグレーション