assistant-ui 入門 : プリミティブ – 概要

Posted on by Masashi Okumura

プリミティブは assistant-ui の基盤で、AI チャットインターフェイスのためのスタイルを持たない、アクセシブルなビルディング・ブロック (React コンポーネント) です。すべての assistant-ui コンポーネントはプリミティブから構築されています。

assistant-ui 入門 – ガイド : ツール

作成 : Masashi Okumura (@classcat.com)
作成日時 : 03/22/2026
バージョン : assistant-ui@0.0.84

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

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

 

 

assistant-ui 入門 : プリミティブ – 概要

AI チャットインターフェイスのためのスタイル設定のない、アクセス可能なビルディング・ブロック。

プリミティブは assistant-ui の基盤です。これらはスタイルを持たない、アクセシブルな React コンポーネントで、状態管理、キーボード・ショートカット、自動スクロール、ストリーミング、ツール呼び出しを含む、AI チャットに必要なすべてのワイヤリング (配線) を処理するので、UI の開発に完全に集中できます。

 

Why Primitives?

すべての assistant-ui コンポーネント はプリミティブから構築されています。 Thread のようなコンポーネントをインストールする場合、デフォルトのスタイリングと動作が含まれた、プリミティブの事前スタイル設定された組み合わせを取得できます。

しかし、フローティング・コンポーザー、カスタム・メッセージレイアウト、インライン編集エクスペリエンスのような、デフォルトに収まらない UI が必要な場合には、プリミティブを直接使用できます。

import { ComposerPrimitive } from "@assistant-ui/react";

<ComposerPrimitive.Root>
  <ComposerPrimitive.Input placeholder="Ask anything..." />
  <ComposerPrimitive.Send>Send</ComposerPrimitive.Send>
</ComposerPrimitive.Root>

これは、<textarea> と <button> を備えたスタイルなしの <form> をレンダリングします。スタイルも主張 (opinions) もありませんが、Enter キーによる送信、フォーカス管理、空状態の無効化、ストリーミング状態の処理は既に実装されています。

 

仕組み

すべてのプリミティブは Radix UI に触発された同じパターンに従います :

  • Primitive.Root: コンテキストを child パーツに提供するコンテナ

  • Primitive.PartName: 個々の要素 (入力, ボタン, テキスト, 等)

  • asChild: ラッパーをレンダリングする代わりに、プリミティブの動作を独自の要素にマージします

  • AuiIf: 状態に基づいた条件付きレンダリング

プリミティブは最も近いランタイムコンテキストから読み取られます。AssistantRuntimeProvider 内に配置すれば、prop ドリリングや手動の状態ワイヤリングなしで動作します。

 

利用可能なプリミティブ

  • Composer – テキスト入力、送信ボタン、アタッチメント (添付ファイル)、口述 (音声入力)。新しいメッセージの作成や既存のメッセージの編集のためのインターフェイス。

  • Thread – 自動スクロール、空の状態、メッセージレンダリングを備えた、スクロール可能なメッセージコンテナ。

  • Message – ロールベースのコンテンツ、パーツ、メタデータを含む個々のメッセージのレンダリング。

  • ActionBar – コピー、リロード、編集、その他のメッセージアクション。

  • BranchPicker – メッセージの分岐 (別の回答、代替応答) 間のナビゲート

  • ThreadList – マルチスレッド管理: スレッドのリスト、作成、切り替え、アーカイブ。

  • AssistantModal – Radix UI Popover 上に構築されたフローティングチャットポップオーバー

  • Attachment – ファイルと画像添付ファイルのレンダリング。

  • Suggestion – おすすめの入力例とクイック操作

  • SelectionToolbar – 引用のようなテキスト選択操作のためのフローティング・ツールバー。

  • Error – アクセス可能なアラートロールと自動生成されたエラーテキストによるエラー表示。

  • ChainOfThought – 思考ステップとツール呼び出しのための折りたたみ式推論アコーディオン。

ℹ️ MessagePartPrimitive (for rendering individual text, image, and streaming parts) is documented within the Message primitive page.

 

関連するプリミティブのリファレンス

追加のプリミティブのリファレンス :

 

以上