2026 年 6 月 - チャット インターフェイスのコンポーネント

"use client"

import { useChat } from "@ai-sdk/react"

本日、チャット インターフェイスを構築するための新しいコンポーネント セットをリリースします。 MessageScroller、 メッセージ、バブル、 添付ファイル、および マーカー。

これは、チャット コンポーネントの作業の最初のフェーズです。私たちはそれを一度に 1 つずつ取り上げ、各部分の背後にある抽象化を再考し、コピー、構成、製品に適応できる shadcn/ui コンポーネントとして出荷します。

スクロール、メッセージ行、バブル、添付ファイル、マーカーなどの会話レイヤーから始めます。

私たちは、何が優れたストリーミング チャット エクスペリエンスを実現するのか、と自問しました。次に、コア ルールをプリミティブのセット (MessageScroller) に抽象化しました。

pnpmnpmyarnbun
pnpm dlx shadcn@latest add message-scroller message bubble attachment marker
コピー

メッセージスクローラー#

MessageScroller は、会話のスクロール コンテナーです。アンカーされたターン、ストリーミングされる返信、保存されたスレッドの復元、先頭に追加される履歴、メッセージへのジャンプ、スクロール コントロール、可視性トラッキングなど、間違えやすい部分を処理します。

MessageScroller は、メッセージ、AI の状態、トランスポート、永続化、モデルの状態について一切関知しません。コンテンツ レンダラーは自分で用意してください。

MessageScroller は、@shadcn/react のスタイルなしのヘッドレス コンポーネントとしても使用できます。

メッセージ、バブル、添付ファイル、およびマーカー#

残りのコンポーネントは、スクローラーの周りで日常的に必要となる部品をカバーします。

• Message は、アバター、配置、ヘッダー、コンテンツ、フッター、グループ化されたメッセージを含む会話の行をレイアウトします。
• Bubble は、バリアント、配置、リアクション、リンク、ボタン、折りたたみ可能なコンテンツを扱います。
• Attachment は、メディア、メタデータ、アップロード状態、アクション、そしてアクションを個別にクリックできるようにするフルカード トリガーを備えたファイルと画像をレンダリングします。
• Marker は、ステータスの更新、システム ノート、枠線付きの行、そしてストリーミング状態やツールアクティビティ、日付区切りなどのためのラベル付き区切り線をレンダリングします。

意図的に小さく保っています。AI チャット、サポート受信トレイ、チーム スレッド、グループ チャット、製品固有の会話などに合わせて組み合わせてください。

スクロールフェードとシマー#

また、チャット インターフェイスの構築が快適になる、2 つの新しい CSS ユーティリティも追加しました。

scroll-fade は、スクロール コンテナにスクロール対応のエッジ フェードを追加します。MessageScroller、ScrollArea、添付ファイルの行、あるいはオーバーレイやスクロール リスナーを追加せずに続きのコンテンツがあることを示したい長いリストなどで使用してください。

export function ScrollFadeDemo() {
  return (
    <div className="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">

shimmer は、ライブ ステータスのテキストにきらめき効果を追加します。「考え中…」「応答を生成中…」といった表示や、実行中のツール、ストリーミング マーカーに使用してください。

export function ShimmerDemo() {
  return (
    <p className="shimmer text-sm text-muted-foreground">

どちらのユーティリティも shadcn/tailwind.css に含まれているため、npx shadcn@latest init で初期化したプロジェクトにはすでに含まれています。

@shadcn/react#

また、スタイルのないヘッドレス React コンポーネント用の新しいパッケージ @shadcn/react も作成しました。

最初のプリミティブは @shadcn/react/message-scroller です。レジストリ コンポーネントはこれを shadcn/ui のスタイルでラップしますが、アンカリング、自動フォロー、先頭位置の保持、スクロール コマンド、可視性といったスクロール動作はこのパッケージ内にあります。

これにより、動作を特定のビジュアル スタイルに固定することなく提供できます。プロジェクトに合わせたコピー&ペーストのコンポーネントはそのまま得られ、複雑なインタラクション ロジックは 1 か所でテストされた状態を保てます。

現在、Radix および Base UI で利用可能です。

AI Elements#

これは AI Elements の代わりになるものではありません。AI インターフェイスのコンポーネントやパターンには、引き続き AI Elements を使用できます。今回のリリースは、チャットのコア部分を 1 つずつ shadcn/ui に取り込んでいくためのものです。

すでに AI Elements のコンポーネントを使用している場合、アプリを書き換える必要はありません。うまく動いているものはそのままにしておいてください。新しい抽象化や更新されたスタイル、Radix と Base UI 双方のサポートが必要であれば、shadcn/ui 版を試してみてください。

目標は、これらを個別に無理なく導入できるようにすることです。いくつかの部品を入れ替え、すでに持っているものと組み合わせて、そのまま開発を続けられます。