assistant-ui は本番環境レベルの AI チャット・エクスペリエンスを素早く構築するためのオープンソースの TypeScript/React ライブラリで、React アプリケーションのための美しい、エンタープライズ・グレードのチャットインターフェイスです。
assistant-ui 入門 : Typescript / React lib for AI チャット – 導入
作成 : Masashi Okumura (@classcat.com)
作成日時 : 03/09/2026
バージョン : assistant-ui@0.0.82
* 本記事は www.assistant-ui.com/docs の以下のページを参考にしています :
* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。
assistant-ui 入門 : Typescript / React lib for AI チャット – 導入
イントロダクション
React アプリケーションのための美しい、エンタープライズ・グレードのチャットインターフェイスです。
React アプリ向けに、AI チャット UI を簡単に構築できるエンタープライズ向けライブラリで、ChatGPT 風 UI やカスタマーサポート・チャット、AIアシスタント、マルチエージェントアプリなどを作るためのフロントエンドコンポーネントと状態管理を提供し、開発者がアプリ固有の機能に集中できるようにしてくれます。
主な機能
- インスタント・チャット UI – すぐに使える、事前構築済みの美しい、カスタマイズ可能なチャットインターフェイス。
- チャット状態管理 – チャットインタラクションのための強力な状態管理機能。ストリーミング応答と効率的なレンダリングに最適化されています。
- 高パフォーマンス – 最小限のバンドルサイズでスピードと効率化を最適化し、AI チャットインターフェイスの応答性を保証します。
- フレームワーク非依存 – Vercel AI, LLM 直接接続, カスタムソリューション等、いずれのバックエンドシステムとも簡単に統合できます。あらゆる React ベースのフレームワークで動作します。
インストール
クイックスタート
- assistant-ui の初期化
新しいプロジェクトを作成します :npx assistant-ui@latest createテンプレートを選択することもできます :
# Minimal starter npx assistant-ui@latest create -t minimal # Assistant Cloud - with persistence and thread management npx assistant-ui@latest create -t cloud # Assistant Cloud + Clerk authentication npx assistant-ui@latest create -t cloud-clerk # LangGraph starter template npx assistant-ui@latest create -t langgraph # MCP starter template npx assistant-ui@latest create -t mcp - API キーの追加
API キーを含む .env ファイルを作成します :OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" - アプリケーションの起動
npm run dev
エージェントスキル
AI ツールが assistant-ui のドキュメントやコンテキストにアクセスできるようにし、開発を高速化する方法（AI 向けドキュメント、Claude Code スキル、MCP 連携など）を説明します。
AI がアクセス可能なドキュメント
- /llms.txt – すべてのドキュメントページの構造化インデックス。AI をここに誘導すると簡潔な概要にアクセスできます。
- /llms-full.txt – 単一ファイルにまとめた完全なドキュメント。完全なコンテキストのためにはこれを使用してください。
- .mdx サフィックス – raw マークダウン・コンテンツを取得するには、ページの URL に .mdx を追加します (e.g., /docs/installation.mdx)。
コンテキストファイル
assistant-ui コンテキストをプロジェクトの CLAUDE.md または .cursorrules に追加します :
## assistant-ui
This project uses assistant-ui for chat interfaces.
Documentation: https://www.assistant-ui.com/llms-full.txt
Key patterns:
- Use AssistantRuntimeProvider at the app root
- Thread component for full chat interface
- AssistantModal for floating chat widget
- useChatRuntime hook with AI SDK transport
スキル
AI ツール用の assistant-ui スキルをインストールします :
npx skills add assistant-ui/skills
- /assistant-ui – 一般的なアーキテクチャと概要ガイド
- /setup – プロジェクトのセットアップと構成 (AI SDK, LangGraph, カスタムバックエンド)
- /primitives – UI コンポーネントのプリミティブ ((Thread, Composer, Message, 等)
- /runtime – ランタイム・システムと状態管理
- /tools – ツールの登録とツール UI
- /streaming – assistant-stream によるストリーミング・プロトコル
- /cloud – クラウドの永続性と認証
- /thread-list – マルチスレッド管理
- /update – assistant-ui と AI SDK を最新版に更新
ℹ️ Use by typing the command in Claude Code, e.g., /assistant-ui for the main guide or /setup when setting up a project.
MCP
@assistant-ui/mcp-docs-server は、MCP 経由で IDE 内で assistant-ui ドキュメントとサンプルへの直接アクセスを提供しています。インストールすれば、AI アシスタントは assistant-ui についてすべてを理解し、以下のように自然に質問できます :
- “Add a chat interface with streaming support to my app”
- “How do I integrate assistant-ui with the Vercel AI SDK?”
- “My Thread component isn’t updating, what could be wrong?”
クイックインストール (CLI)
npx add-mcp @assistant-ui/mcp-docs-server
Or specify your IDE directly:
npx add-mcp @assistant-ui/mcp-docs-server -a claude-code
npx add-mcp @assistant-ui/mcp-docs-server -a claude-desktop
npx add-mcp @assistant-ui/mcp-docs-server -a codex
npx add-mcp @assistant-ui/mcp-docs-server -a cursor
npx add-mcp @assistant-ui/mcp-docs-server -a gemini-cli
npx add-mcp @assistant-ui/mcp-docs-server -a opencode
npx add-mcp @assistant-ui/mcp-docs-server -a vscode
npx add-mcp @assistant-ui/mcp-docs-server -a zed
以上