assistant-ui/assistant-ui

assistant‑ui

概要 – オープンソースの TypeScript/React コンポーネントライブラリで、Web アプリに AI アシスタント向けのフル機能を備えた本番環境対応のチャット UI（ChatGPT スタイル）を追加できます。

コアコンセプト – 合成可能な UI プリミティブ（Thread、Message、Composer、ActionBar など）と、任意の LLM バックエンド（Vercel AI SDK、LangChain/LangGraph、カスタムデータストリームなど）に接続するランタイムプロバイダーを提供します。ライブラリは、ストリーミング、Markdown、コードハイライト、音声ディクテーション、リトライ、アクセシビリティ、およびツール呼び出し、JSON、インライン承認を React コンポーネントとしてレンダリングできる「生成 UI」レイヤーを処理します。

主な機能

合成可能なプリミティブ – 低レベルの部品からチャット UI を構築するか、CLI に同梱されているスタイル済みの shadcn/ui テーマを使用します。
バックエンドに依存しないランタイム – Vercel AI SDK、LangChain、LangGraph、AG‑UI/A2A、Google ADK、OpenCode 用のアダプターと、汎用データストリームインターフェースをすぐに利用できます。単一のフック（useChatRuntime、useLangGraphRuntime など）でランタイムを切り替えます。
本番グレードの UX – ストリーミング応答、自動スクロール、リトライ処理、ファイル添付、Markdown レンダリング、構文ハイライト付きコードブロック、音声ディクテーション、キーボードショートカット、WCAG 準拠のアクセシビリティ。
生成 UI – ツール呼び出し（例：get_weather）や JSON ペイロードをカスタム React コンポーネントに変換し、ユーザーの承認を収集し、安全なフロントエンドアクションをモデルに公開します。
強力な TypeScript – ランタイム、ツールスキーマ、メッセージ部分向けのエンドツーエンドの型付き API。
CLI スキャフォールディング – npx assistant-ui@latest create で Next.js スターターを作成。init でスタイル済みコンポーネントを既存プロジェクトに注入します。
マネージドクラウドオプション – スレッド永続化、テレメトリ、ファイルストレージ用のオプションの assistant‑cloud サービス。

典型的なユースケース

SaaS ダッシュボード内にカスタマーサポートチャットボットを構築する。
外部ツール（検索、予約、データ検索）を呼び出す製品に会話型インターフェースを追加する。
ツール結果用のカスタム UI（天気カード、テーブル、承認ダイアログなど）を必要とする AI 駆動アシスタントのプロトタイピング。
LLM バックエンド（OpenAI、Anthropic、Gemini、Mistral、Bedrock、Ollama など）を UI 配管を書かずに React フロントエンドに統合する。

インストール

# クイックスタート – 新しい Next.js アプリをスキャフォールド
npx assistant-ui@latest create
# または既存プロジェクトに追加
npx assistant-ui@latest init

# またはパッケージを手動でインストール
npm install @assistant-ui/react @assistant-ui/ai-sdk ai

基本的な使用法

"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 function Chat() {
  const runtime = useChatRuntime(); // デフォルトで Vercel AI SDK に接続
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

useChatRuntime を他のランタイムフックに置き換えると、UI を別のバックエンドにポイントできます。

ライセンス – MIT。マネージドスレッドストレージと分析用の商用「Assistant Cloud」サービスが提供されていますが、コアライブラリは無料でオープンソースのままです。

支援 – Y Combinator。Mastra、LangChain、Athena Intelligence、Browser‑Use、Stack、Inconvo、Iterable、Helicone、Gram、Coreviz などの企業が使用しています。

assistant-ui/assistant-ui

assistant‑ui

関連