assistant-ui 入門 : shadcn/ui コンポーネント – Thread

Posted on by Masashi Okumura

assistant-ui のコンポーネントは shadcn/ui ベースです。Thread は、メッセージレンダリング、自動スクロール、入力欄、添付ファイル、条件付き UI 状態を組み合わせた完全なチャットインターフェイスです。完全にカスタマイズ可能で構成可能です。

assistant-ui 入門 : shadcn/ui コンポーネント – 基本 : Thread

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

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

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。

 

 

assistant-ui 入門 : shadcn/ui コンポーネント – Thread

Thread は、メッセージ、入力欄、自動スクロールの機能を備えたメインのチャットコンテナです。

メッセージレンダリング、自動スクロール、入力欄 (composer input)、添付ファイル、条件付き UI 状態を組み合わせた完全なチャットインターフェイスです。完全にカスタマイズ可能で構成可能です。

 

アナトミー (解剖学)

Thread コンポーネントは以下のプリミティブを使用して構築されています :

import { ThreadPrimitive, AuiIf } from "@assistant-ui/react";

<ThreadPrimitive.Root>
  <ThreadPrimitive.Viewport>
    <AuiIf condition={(s) => s.thread.isEmpty}>
      <ThreadWelcome />
      {/* ThreadWelcome includes ThreadPrimitive.Suggestions */}
    </AuiIf>

    <ThreadPrimitive.Messages>
      {({ message }) => {
        if (message.role === "user") return <UserMessage />;
        return <AssistantMessage />;
      }}
    </ThreadPrimitive.Messages>

    <ThreadPrimitive.ViewportFooter>
      <ThreadPrimitive.ScrollToBottom />
      <Composer />
    </ThreadPrimitive.ViewportFooter>
  </ThreadPrimitive.Viewport>
</ThreadPrimitive.Root>

 

Getting Started

  1. コンポーネントの追加

    # npx
npx shadcn@latest add https://r.assistant-ui.com/thread.json

# pnpm
pnpm dlx shadcn@latest add https://r.assistant-ui.com/thread.json

    これは /components/assistant-ui/thread.tsx ファイルをプロジェクトに追加します、必要に応じて調整してください。

  2. アプリケーションで使用する

    /app/page.tsx

    import { Thread } from "@/components/assistant-ui/thread";

export default function Chat() {
  return (
    <div className="h-full">
      <Thread />
    </div>
  );
}

 

例

Welcome 画面

<AuiIf condition={(s) => s.thread.isEmpty}>
  <ThreadWelcome />
</AuiIf>

 

Viewport スペーサー

<AuiIf condition={(s) => !s.thread.isEmpty}>
  <div className="min-h-8 grow" />
</AuiIf>

 

条件付き・送信/キャンセルボタン

<AuiIf condition={(s) => !s.thread.isRunning}>
  <ComposerPrimitive.Send>
    Send
  </ComposerPrimitive.Send>
</AuiIf>

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

 

以上