コンポーネント、ランタイム、クラウドサービスがどのように連携するのか説明します。assistant-ui は 3 つの主要な柱: フロントエンド・コンポーネント, ランタイム (バックエンド統合), アシスタント・クラウドで構成されます。
assistant-ui 入門 : Getting Started – アーキテクチャ
作成 : Masashi Okumura (@classcat.com)
作成日時 : 03/10/2026
バージョン : assistant-ui@0.0.83
* 本記事は assistant-ui.com/docs の以下のページを参考にしています :
* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。
assistant-ui 入門 : Getting Started – アーキテクチャ
コンポーネント、ランタイム、クラウドサービスがどのように連携するのか説明します。
assistant-ui を構成する 3 つの主要な柱
- フロントエンド・コンポーネント – 組み込みの状態管理を備えた Shadcn UI チャットコンポーネント
- ランタイム – UI を LLM とバックエンドサービスに接続させる状態管理レイヤー
- アシスタント・クラウド – スレッドの永続化、履歴、ユーザ管理のためのホスト型サービス
1. フロントエンド・コンポーネント
Shadcn コンポーネントの上に構築されたスタイリッシュで機能的なチャットコンポーネントで、assistantUI ランタイム・プロバイダーにより提供される、コンテキスト状態管理機能を備えています。これらの事前構築済み React コンポーネントはインテリジェントな状態管理機能を備えています。View our components
2. ランタイム
アシスタントチャット用の React 状態管理コンテキスト。ランタイムはローカル状態と、バックエンド及び LLM への呼び出し間のデータ変換を処理します。フロントエンドのメッセージ状態を完全に制御する必要がある場合には、Vercel AI SDK, LangGraph, LangChain, Helicone, ローカルランタイム、ExternalStore のような様々なフレームワークと連携するための様々なランタイム・ソリューションを提供しています。You can view the runtimes we support
3. Assistant Cloud
包括的なスレッド管理とメッセージ履歴により、アシスタント・エクスペリエンスを拡張するホスト型サービス。Assistant Cloud は、完全なメッセージ履歴を保存し、自動的にスレッドを保持し、human-in-the-loop ワークフローをサポートし、そして一般的な認証プロバイダーと統合することでユーザが会話をいつでもシームレスに再開することを可能にします。Cloud Docs
3 つのアーキテクチャ
assistant-ui アプリケーションを設計する 3 つの一般的な方法があります :
1. 外部プロバイダーとの直接統合
2. 独自 API エンドポイントの使用
3. With Assistant Cloud
以上