assistant-ui は、本番環境レベルの AI チャット・エクスペリエンスを素早く構築するためのオープンソースの TypeScript/React ライブラリです。

assistant-ui : 概要

作成 : Masashi Okumura (@classcat.com)
作成日時 : 12/27/2025
バージョン : assistant-ui@0.0.65

* 本記事は github.com/assistant-ui/assistant-ui の以下のページを参考にしています :

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。

React app の ChatGPT UX 💬🚀

assistant-ui は、本番環境レベルの AI チャット・エクスペリエンスを素早く構築するためのオープンソースの TypeScript/React ライブラリです。

ストリーミング、自動スクロール、アクセシビリティとリアルタイム更新を処理します。
shadcn/ui と cmdk にインスパイアされた完全に構成可能なプリミティブ – すべてのピクセルをカスタマイズできます。
あなたの使用しているスタックと連携できます: AI SDK, LangGraph, Mastra, または任意のカスタムバックエンド。
幅広いモデル (OpenAI, Anthropic, Mistral, Perplexity, AWS Bedrock, Azure, Google Gemini, Hugging Face, Fireworks, Cohere, Replicate, Ollama) をサポートし、カスタム API への拡張も容易です。

ターミナルで以下のいずれかを実行します :

npx assistant-ui create   # new project
npx assistant-ui init     # add to existing project

ビルド : 任意のチャット UX (メッセージリスト、入力、スレッド、ツールバー) を作成するための構成可能なプリミティブと完全にカスタマイズ可能な洗練された shadcn/ui テーマ。
リリース : すぐに使える本番環境対応の UX – ストリーミング、自動スクロール、再試行、添付フアイル、マークダウンとコード・ハイライト – に加え、キーボードショートカットとアクセシビリティがデフォルトでサポート。
生成 : ツール呼び出しと JSON をコンポーネントとしてレンダリングし、インラインでユーザの承認を収集し、そして安全なフロントエンド・アクションを可能にします。
統合 : AI SDK, LangGraph, Mastra やカスタム・バックエンドと連携します; 幅広いプロバイダーのサポート; Assistant Cloud (単一の env var) を通してオプションのチャット履歴と分析。

Assistant Cloud : マネージド・チャット永続性と分析。クラウド・スターター・テンプレートによる配備; 任意のモデル/プロバイダーに対応。
AI SDK : Vercel AI SDK との統合; 任意のサポートされるプロバイダーに接続可能。
LangGraph : LangGraph 及び LangGraph Cloud との統合; LangChain プロバイダー経由で接続可能。
Mastra : Mastra エージェント/ワークフロー/RAG との統合; Vercel AI SDK 経由のモデル・ルーティング; オプションの Mastra Cloud。
カスタム : 独自のバックエンド/ストリーミング・プロトコル上で assistant-ui を使用。

assistant-ui は Radix スタイルのアプローチを採用しています: 単一のモノリシックなチャットコンポーネントではなく、プリミティブを組み合わせ、独自のスタイルを導入できます。優れたスターター設定を提供しています; ユーザはそれ以外のすべてを制御できます。

Perplexity に似たものを作成するためのサンプルのカスタマイズ :

以上