chat-ui

概要

chat-ui とは？

chat-ui は、ui.inference.sh から提供される、React と Next.js 向けのチャットインターフェース用ビルディングブロック集です。チャットコンテナ、メッセージ項目、入力ボックス、タイピングインジケーター、アバターといった本番運用レベルのコンポーネントがまとめられており、ゼロから作り込むことなく、チャットや AI アシスタント用のフロントエンドを一通り組み立てられます。

これらのコンポーネントは shadcn スタイルのブロックとして提供され、プロジェクトに追加して使います。チャット UI のレイアウトや振る舞いで繰り返しがちな部分を肩代わりしつつ、開発者にとって馴染みやすくカスタマイズしやすい開発体験を維持します。

主な特徴

• チャットコンテナレイアウト – チャットエリア全体を構成するための <ChatContainer> コンポーネント。
• メッセージ表示 – ユーザーとアシスタントのメッセージを、ロールとコンテンツに対応して表示する <ChatMessage>。
• チャット入力の処理 – ユーザーのテキスト入力・送信処理・無効化/ローディング状態管理を行う <ChatInput>。
• タイピングインジケーター – アシスタントが応答中であることを視覚的に示す <TypingIndicator>。
• ストリーミング対応 – ストリーミングや段階的なアシスタント応答に適したメッセージリストとコンテナのパターン。
• React/Next.js に特化 – モダンな React / Next.js アプリケーション向けに設計され、一般的なフロントエンドパターンと整合しています。

想定ユーザー

chat-ui は次のようなケースを想定しています：

• 既存の API の上に、チャットや AI アシスタント用 UI を構築する フロントエンド開発者。
• UI 配線に数日かけることなく、洗練されたチャットレイアウトを用意したい プロダクトチーム。
• shadcn スタイルの UI ブロックを採用し、チャットコンポーネントも同じ流儀で揃えたい Next.js / React 開発者。

言語モデル、サポートボット、会話 UI ベースの社内ツールなどを統合する際、chat-ui スキルを使えば、ロジック・スタイル・データのコントロールを保ったまま、短期間でプロフェッショナルなインターフェースを立ち上げられます。

chat-ui が解決する課題

チャットフロントエンドの実装では、毎回似たような要素を作り直しがちです：

• レスポンシブなチャットレイアウトの構成
• ユーザーとアシスタントのメッセージ表示を分ける処理
• メッセージ送信、無効化状態、ローディング状態の制御
• タイピングインジケーターの表示やスクロール挙動の管理

chat-ui は UI 周りについて、以下のような形で解決します：

• コンテナ・メッセージ・入力・タイピング のための事前定義コンポーネント
• 独自のバックエンドや AI サービスに接続しやすい、一貫した API インターフェース
• モダンなデザインの期待値に沿いながらも、柔軟にカスタマイズできるベース実装

ビジネスロジックやデータフローは引き続き自分で管理しますが、面倒な UI のボイラープレートを省くことができます。

chat-ui がフィットする場面

次のような場合に chat-ui の利用を検討するとよいでしょう：

• React または Next.js アプリケーションを構築している。
• 既存の状態管理や API 呼び出しと統合できる、すぐ使えるチャットコンポーネント がほしい。
• すでに、あるいはこれから、チャット / AI アシスタント用のバックエンド を用意する予定で、フロントのレイヤーが必要。
• フルマネージドなチャット SaaS ウィジェットを埋め込むのではなく、コンポーネント単位の制御 を優先したい。

とくに次のようなユースケースに向いています：

• ダッシュボードに組み込まれた AI コパイロットやアシスタント
• カスタマーサポートや社内ヘルプデスクツール
• 会話型インターフェースを持つ開発者向けツール
• チャットベースの新規プロダクトの高速プロトタイピング

chat-ui が適さない場合

以下のような場合には、chat-ui が最適とは限りません：

• React や Next.js を使っていない。コンポーネントは React エコシステム向けに作られています。
• バックエンド・認証・ストレージまで含めた ホスト型のプラグアンドプレイチャットウィジェット を求めている。chat-ui はフロントエンド UI のみにフォーカスしています。
• shadcn スタイルのパターンに依存しない、デザインシステム非依存 の実装を望む。

こうしたケースでは、より汎用的な UI ライブラリや、フル機能のチャットサービスを検討してください。

使い方

インストール前に必要なもの

chat-ui を導入する前に、次を用意しておいてください：

• すでに作成済みの React または Next.js プロジェクト
• Node.js と npm（または互換ツール）がインストール済み
• React コンポーネントのインポートと使用方法に関する基本的な知識

chat-ui のコンポーネントは ui.inference.sh 上の shadcn スタイルレジストリで配布されており、1 つの CLI コマンドでプロジェクトに追加します。

chat-ui コンポーネントのインストール

フロントエンドプロジェクトのルートディレクトリで、次のコマンドを実行してチャットコンポーネントを追加します：

# Install chat components
npx shadcn@latest add https://ui.inference.sh/r/chat.json

このコマンドによって、ui.inference.sh レジストリからチャット関連のブロックがプロジェクトに取り込まれます。通常、@/registry/blocks/chat/ のようなパス配下に作成され（サンプルで示している import パスに対応します）、そこからインポートして利用します。

インストール後、プロジェクトに次のようなファイルが追加されていることを確認してください：

• chat-container.tsx
• chat-message.tsx
• chat-input.tsx
• typing-indicator.tsx

正確なファイル名は shadcn の設定によって異なる場合がありますが、インポートパスのパターンは、この後の例と同様になります。

コアコンポーネントと基本的な使い方

1. ChatContainer – 全体レイアウト

ChatContainer は会話エリア全体をラップし、メッセージと入力欄のレイアウトを構成する役割を持ちます。

import { ChatContainer } from "@/registry/blocks/chat/chat-container"

function Chat() {
  return (
    <ChatContainer>
      {/* messages and input go here */}
    </ChatContainer>
  )
}

ChatContainer の内側にメッセージ一覧、入力欄、そのほかの UI 要素をネストしていきます。チャット体験のベースレイアウトとして扱ってください。

2. ChatMessage – ユーザーとアシスタントのメッセージ表示

ChatMessage は個々のメッセージを表示し、user や assistant など、ロールに応じて見た目を切り替えます。

import { ChatMessage } from "@/registry/blocks/chat/chat-message"

function Messages({ messages }) {
  return (
    <div>
      {messages.map((message) => (
        <ChatMessage
          key={message.id}
          role={message.role}
          content={message.content}
        />
      ))}
    </div>
  )
}

messages 配列の管理はアプリケーション側で行い、各メッセージの role と content を ChatMessage に渡します。これにより、バックエンドや AI モデルの状態と UI を同期できます。

3. ChatInput – ユーザーメッセージの入力と送信

ChatInput はテキスト入力エリアと送信処理を提供します。

import { ChatInput } from "@/registry/blocks/chat/chat-input"

function ChatBox({ onSend, isLoading }) {
  return (
    <ChatInput
      onSubmit={(message) => onSend(message)}
      placeholder="Type a message..."
      disabled={isLoading}
    />
  )
}

onSubmit コールバックで、メッセージ送信ロジックと統合します。disabled プロパティは応答待ちの間（とくに AI モデルからトークンをストリーミングしている場合）に入力をロックするのに便利です。

4. TypingIndicator – アシスタントの入力中表示

TypingIndicator は、アシスタントや相手側が返信を入力中であることをユーザーに知らせます。

import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator"

function Footer({ isTyping }) {
  return <>{isTyping && <TypingIndicator />}</>
}

isTyping はアプリケーションの状態に基づいて設定します。たとえば、サーバーからの応答待ちやストリーミング中の間だけ true にするとよいでしょう。

まとめて使う：シンプルなチャットフロー

以下は、React / Next.js ページの中でこれらのコンポーネントを組み合わせる簡略版の例です：

import { useState } from "react"
import { ChatContainer } from "@/registry/blocks/chat/chat-container"
import { ChatMessage } from "@/registry/blocks/chat/chat-message"
import { ChatInput } from "@/registry/blocks/chat/chat-input"
import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator"

export function ChatPage() {
  const [messages, setMessages] = useState([])
  const [isTyping, setIsTyping] = useState(false)

  async function handleSend(userMessage) {
    const nextMessages = [
      ...messages,
      { id: Date.now(), role: "user", content: userMessage },
    ]
    setMessages(nextMessages)
    setIsTyping(true)

    // Call your backend or AI service here
    const reply = await fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify({ messages: nextMessages }),
    }).then((res) => res.json())

    setMessages((prev) => [
      ...prev,
      { id: Date.now() + 1, role: "assistant", content: reply.content },
    ])
    setIsTyping(false)
  }

  return (
    <ChatContainer>
      <div>
        {messages.map((message) => (
          <ChatMessage
            key={message.id}
            role={message.role}
            content={message.content}
          />
        ))}
      </div>

      <ChatInput
        onSubmit={handleSend}
        placeholder="Ask me anything..."
        disabled={isTyping}
      />

      {isTyping && <TypingIndicator />}
    </ChatContainer>
  )
}

この例から分かるように、chat-ui は UI のプリミティブ提供に特化しており、状態管理や API 連携はアプリケーション側で自由に設計できます。

カスタマイズとスタイリング

chat-ui のコンポーネントは、ui.inference.sh から shadcn スタイルのブロックとして導入されるため、通常は次のようなことが可能です：

• ローカルのコンポーネントソースを 直接確認・編集 して、レイアウトやカラー、タイポグラフィを調整する。
• 既存の デザイントークン や Tailwind CSS 設定と統合する。
• アバター、タイムスタンプ、メッセージアクションなどを扱うために、追加の props やラッパーでコンポーネントを拡張する。

インストールコマンド実行後に生成されたファイルを確認し、コンポーネントがどのように実装されているか、そして自分のデザインシステムとどう合わせるのが最適かをチェックしてください。

FAQ

既存の React / Next.js プロジェクトに chat-ui をインストールするには？

プロジェクトルートで shadcn CLI コマンドを実行します：

npx shadcn@latest add https://ui.inference.sh/r/chat.json

これにより、ui.inference.sh から chat-ui コンポーネントがコードベースに追加され、一般的には registry/blocks/chat のようなパスに配置されます。その後、ドキュメントにある import パスを使って ChatContainer, ChatMessage, ChatInput, TypingIndicator をインポートできます。

Next.js ではなく、プレーンな React でも chat-ui は使えますか？

はい。chat-ui のコンポーネントは標準的な React コンポーネントです。React が動作する環境であれば、プレーンな React SPA にも統合できます。重要なのは、npx shadcn@latest add ... コマンドを実行でき、生成されたインポートパスをバンドラが正しく解決できることです。

chat-ui にバックエンドや AI ロジックは含まれますか？

いいえ。chat-ui が提供するのは フロントエンドの UI コンポーネントのみ です。次のような点は開発者側で管理します：

• messages 状態の管理
• バックエンド・API・AI モデルの呼び出し
• ストリーミング、エラー処理、認証のハンドリング

この分離によって chat-ui は柔軟に利用でき、カスタム API からサードパーティの AI プラットフォームまで、あらゆるチャットバックエンドと組み合わせることができます。

chat-ui コンポーネントの見た目をカスタマイズできますか？

はい。ui.inference.sh レジストリからインポートされるコンポーネントは、プロジェクト内にソースとして保存される通常の React コンポーネントです。chat-container, chat-message, chat-input, typing-indicator などのファイルを開いて：

• レイアウトや余白の調整
• カラー、フォント、ボーダーの変更
• アバター、タイムスタンプ、メッセージステータスなどの UI 要素の追加

といったカスタマイズが可能です。ソースコードを自分で保持しているため、スタイリングに関するロックインはありません。

chat-ui は AI アシスタントやコパイロット構築に向いていますか？

はい。chat-ui は AI アシスタントやコパイロット、その他の会話型ツールにとても適しています。次のような要素を提供します：

• 柔軟なチャットコンテナとメッセージ表示
• ストリーミング応答に適した入力コンポーネントとタイピングインジケーター

あとはこれらを AI バックエンドに接続し、ストリーミングや段階的更新を状態管理で制御すれば、chat-ui がユーザー向けのインターフェースを担ってくれます。

chat-ui ではなく別のソリューションを選ぶべきなのはどんなときですか？

次のような場合は、別の選択肢を検討してください：

• エンジニアリング工数を最小限に抑えた フルマネージドのチャットウィジェット（UI + バックエンド + データベース + 認証）が必要なとき。
• 技術スタックが React ベースではない（例：Vue, Svelte, 素のサーバーレンダリングなど）。
• 特定のバックエンドプロダクトと密に結びついたコンポーネントが欲しいとき。

そのようなケースでは、専用のチャットプラットフォームや、使用しているフレームワーク向けの UI ライブラリの方が適している可能性があります。

chat-ui コンポーネントについて、もっと詳しく知るには？

このスキル内では、SKILL.md が主なリファレンスとなっており、利用可能なコンポーネントやコードスニペットがまとめられています。インストール後は、ローカルに生成されたコンポーネントファイルが最良のドキュメントになります。自分のプロジェクト内で chat-ui のブロックがどのように構成されているか、そしてどのように拡張・変更できるかを、実装を見ながら確認できます。