assistant-ui

assistant-ui

最新の API については、常に assistant-ui.com/llms.txt を参照してください。

AI チャットインターフェース向けの React ライブラリです。スタイル未適用のプリミティブ、スタイル適用済みの要素カタログ、あらゆるバックエンドに適応するランタイム、そしてオプションのクラウド永続化を提供します。現在のラインは @assistant-ui/react 0.15.x で、@assistant-ui/ai-sdk を通じて AI SDK v7 に対応しています。

リファレンス

• ./references/architecture.md -- レイヤー、aui クライアント、データフロー、メッセージモデル
• ./references/packages.md -- 公開されているすべてのパッケージと、それぞれをインストールすべきタイミング

使用する場面

ユースケース	選ぶべきもの
午後のうちにチャット UI を作る	npx assistant-ui@latest create、その後 thread 要素
マークアップを完全に制御する	プリミティブ（ThreadPrimitive、ComposerPrimitive、MessagePrimitive）
既存の AI バックエンド	ランタイムアダプター（AI SDK、LangGraph、LangChain、ADK、A2A、AG-UI、Eve、OpenCode）または useLocalRuntime
UI を伴うツール	"use generative" ツールキット、ツール UI、生成的 UI
マルチスレッドアプリ	スレッドリスト要素と、Assistant Cloud または独自のアダプター
アプリ内のコパイロット	インストラクション、コンテキスト、可視コンポーネント、インタラクタブル
モバイルまたはターミナル	@assistant-ui/react-native、@assistant-ui/react-ink

アーキテクチャ

┌──────────────────────────────────────────────────────────────┐
│  Elements (styled, copied into components/assistant-ui/)     │
│  Primitives (unstyled, @assistant-ui/react)                  │
└───────────────────────────┬──────────────────────────────────┘
                            │ read state, call actions
┌───────────────────────────▼──────────────────────────────────┐
│  aui client: useAui, useAuiState, useAuiEvent, AuiIf         │
│  scopes provided by AuiConfig through AssistantRuntimeProvider│
│  or AuiProvider (@assistant-ui/store on @assistant-ui/tap)   │
└───────────────────────────┬──────────────────────────────────┘
                            │
┌───────────────────────────▼──────────────────────────────────┐
│  Runtime: AssistantRuntime → ThreadRuntime → MessageRuntime  │
│  (@assistant-ui/core, framework neutral)                     │
└───────────────────────────┬──────────────────────────────────┘
                            │
┌───────────────────────────▼──────────────────────────────────┐
│  Adapters and backends: AI SDK · LangGraph · LangChain · ADK │
│  A2A · AG-UI · Eve · OpenCode · custom · Assistant Cloud     │
└──────────────────────────────────────────────────────────────┘

ランタイムを選ぶ

Vercel AI SDK?
├─ Yes → useChatRuntime from @assistant-ui/ai-sdk (recommended)
└─ No
   ├─ LangGraph server → useLangGraphRuntime (@assistant-ui/react-langgraph)
   ├─ LangChain / LangGraph useStream → useStreamRuntime (@assistant-ui/react-langchain)
   ├─ Google ADK → useAdkRuntime (@assistant-ui/react-google-adk)
   ├─ A2A protocol → useA2ARuntime (@assistant-ui/react-a2a)
   ├─ AG-UI protocol → useAgUiRuntime (@assistant-ui/react-ag-ui)
   ├─ Eve agents → useEveAgentRuntime (@assistant-ui/eve)
   ├─ OpenCode → useOpenCodeRuntime (@assistant-ui/react-opencode)
   ├─ Claude Managed Agents → useExternalStoreRuntime + useRemoteThreadListRuntime
   ├─ State already in Redux/Zustand/your store → useExternalStoreRuntime
   ├─ Custom endpoint speaking Assistant Transport → useAssistantTransportRuntime
   └─ Any other custom API → useLocalRuntime with a ChatModelAdapter

コアパッケージ

パッケージ	目的
@assistant-ui/react	プリミティブ、フック、ランタイム、プロバイダー
@assistant-ui/ai-sdk	AI SDK v7 統合（useChatRuntime、AssistantChatTransport、AISDKToolkit、frontendTools）
@assistant-ui/core	React、React Native、Ink で共有されるフレームワーク非依存のランタイム
@assistant-ui/store	AuiConfig、AuiProvider、useAui の状態レイヤー
@assistant-ui/react-markdown	Markdown レンダリング（MarkdownTextPrimitive）
assistant-stream	ストリーミングプロトコル、エンコーダー、再開可能なストリーム
assistant-cloud	Assistant Cloud クライアント
assistant-ui	CLI（create、init、add、update、upgrade、doctor、mcp、agent）

@assistant-ui/react-ai-sdk は古いインストール向けに @assistant-ui/ai-sdk を再エクスポートしています。新しいコードでは @assistant-ui/ai-sdk からインポートしてください。スタイル適用済みコンポーネントはパッケージではありません。npx assistant-ui@latest add thread を実行すると、components/assistant-ui/elements/ にコピーされます。完全な一覧については ./references/packages.md を参照してください。

クイックスタート

"use client";

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/ai-sdk";
import { Thread } from "@/components/assistant-ui/elements/thread.aui";

export default function Chat() {
  const runtime = useChatRuntime();
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

useChatRuntime() は AssistantChatTransport を通じて /api/chat にポストします。これはフロントエンドのツールとシステムインストラクションも転送します。エンドポイントを変更するには new AssistantChatTransport({ api }) を渡してください。

状態へのアクセス

aui 上のスコープアクセサーはプロパティです。スコープ上のメソッドは括弧を保持します。セレクターはそれぞれ 1 つのプリミティブまたは安定した参照を返します。

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

const aui = useAui();
aui.thread.append({ role: "user", content: [{ type: "text", text: "Hi" }] });
aui.thread.cancelRun();
aui.thread.composer().send();
aui.threads.switchToNewThread();

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

useAuiEvent("threads.selectionChanged", ({ threadId, previousThreadId }) => {});

スコープの提供

ツール、サジェスチョン、インタラクタブル、MCP マネージャー、その他のスコープは AuiConfig で宣言し、プロバイダーに渡します。useAui() は引数を取りません。

import { AssistantRuntimeProvider, AuiConfig, Suggestions, Tools } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/ai-sdk";
import toolkit from "./toolkit";

const runtime = useChatRuntime();
const config = AuiConfig({
  tools: Tools({ toolkit }),
  suggestions: Suggestions(["What can you do?", "Summarize this page"]),
});

<AssistantRuntimeProvider runtime={runtime} config={config}>{children}</AssistantRuntimeProvider>;

ネストされたスコープでは <AuiProvider extends={useAui()} config={config}> を使用します。分離されたルートでは extends={null} を使用します。

関連スキル

• setup -- CLI、テンプレート、ランタイムアダプター、プラットフォーム
• elements -- スタイル付きコンポーネントカタログと、そのインストールおよびオーバーライドの方法
• primitives -- スタイルなしのビルディングブロックとコンポーザー機能
• runtime -- ランタイム、aui クライアント、アダプター、イベント
• tools -- ツールキット、ツール UI、承認、MCP、WebMCP
• generative-ui -- present ツールとコンポーネント語彙
• streaming -- assistant-stream、トランスポート、再開可能なストリーム
• cloud -- Assistant Cloud の永続化と認証
• thread-list -- マルチスレッド管理
• copilots -- アシスタントをあなたのアプリにグラウンディングする
• markdown -- Markdown、コード、数式、図
• react-mcp -- ユーザーが管理する MCP サーバー
• observability -- トレースとスパンの可視化
• react-native -- Expo と React Native
• ink -- Ink によるターミナルチャット
• update -- アップグレードとマイグレーション