assistant-ui プリミティブ

最新の API については assistant-ui.com/llms.txt を必ず参照してください。

Radix UI パターンに従う、合成可能でスタイルなしのコンポーネントです。

リファレンス

• ./references/thread.md -- ThreadPrimitive 詳細解説
• ./references/composer.md -- ComposerPrimitive 詳細解説
• ./references/message.md -- MessagePrimitive 詳細解説
• ./references/action-bar.md -- ActionBarPrimitive 詳細解説

インポート

import {
  AuiIf,
  ThreadPrimitive,
  ComposerPrimitive,
  MessagePrimitive,
  ActionBarPrimitive,
  BranchPickerPrimitive,
  AttachmentPrimitive,
  ThreadListPrimitive,
  ThreadListItemPrimitive,
} from "@assistant-ui/react";

プリミティブ パーツ

プリミティブ	主要パーツ
ThreadPrimitive	.Root, .Viewport, .Messages, .Empty, .ScrollToBottom
ComposerPrimitive	.Root, .Input, .Send, .Cancel, .Attachments
MessagePrimitive	.Root, .Parts/.Content, .If, .Error
ActionBarPrimitive	.Copy, .Edit, .Reload, .Speak, .FeedbackPositive, .FeedbackNegative, .ExportMarkdown
BranchPickerPrimitive	.Previous, .Next, .Number, .Count

カスタム Thread の例

function CustomThread() {
  return (
    <ThreadPrimitive.Root className="flex flex-col h-full">
      <ThreadPrimitive.Empty>
        <div className="flex-1 flex items-center justify-center">
          Start a conversation
        </div>
      </ThreadPrimitive.Empty>

      <ThreadPrimitive.Viewport className="flex-1 overflow-y-auto p-4">
        <ThreadPrimitive.Messages components={{
          UserMessage: CustomUserMessage,
          AssistantMessage: CustomAssistantMessage,
        }} />
      </ThreadPrimitive.Viewport>

      <ComposerPrimitive.Root className="border-t p-4 flex gap-2">
        <ComposerPrimitive.Input className="flex-1 rounded-lg border px-4 py-2" />
        <ComposerPrimitive.Send className="bg-blue-500 text-white px-4 py-2 rounded-lg">
          Send
        </ComposerPrimitive.Send>
      </ComposerPrimitive.Root>
    </ThreadPrimitive.Root>
  );
}

条件付きレンダリング

新しいコードでは AuiIf の使用を推奨します。プリミティブの .If コンポーネントは廃止予定です。

<AuiIf condition={({ message }) => message.role === "user"}>
  User only
</AuiIf>
<AuiIf condition={({ thread }) => thread.isRunning}>
  Generating...
</AuiIf>
<AuiIf condition={({ message }) => message.branchCount > 1}>
  Has edit history
</AuiIf>

<AuiIf condition={({ thread }) => thread.isRunning}>
  <ComposerPrimitive.Cancel>Stop</ComposerPrimitive.Cancel>
</AuiIf>

<AuiIf condition={({ thread }) => thread.isEmpty}>No messages</AuiIf>

コンテンツ パーツ

<MessagePrimitive.Content components={{
  Text: ({ part }) => <p>{part.text}</p>,
  Image: ({ part }) => <img src={part.image} alt="" />,
  ToolCall: ({ part }) => <div>Tool: {part.toolName}</div>,
  Reasoning: ({ part }) => <details><summary>Thinking</summary>{part.text}</details>,
}} />

ブランチ ピッカー

<MessagePrimitive.If hasBranches>
  <BranchPickerPrimitive.Root className="flex items-center gap-1">
    <BranchPickerPrimitive.Previous>←</BranchPickerPrimitive.Previous>
    <span><BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count /></span>
    <BranchPickerPrimitive.Next>→</BranchPickerPrimitive.Next>
  </BranchPickerPrimitive.Root>
</MessagePrimitive.If>

よくあるトラブル

プリミティブがレンダリングされない

• AssistantRuntimeProvider でラップする
• 親プリミティブがコンテキストを提供していることを確認する

スタイルが適用されない

• プリミティブはデフォルトではスタイルなしです
• className を追加して、アプリの Tailwind/CSS システムでスタイルを適用してください