84はじめる

shadcn/ui の AI チャットテンプレート

shadcn/ui の AI チャットテンプレートとは、shadcn/ui のコンポーネントで作られ、自分のプロジェクトにコピーして使うチャット UI のことです。部品を提供するものもあれば、アプリ全体を提供するものもあります。このページでは 2026 年 10 月時点の 7 つの選択肢を比較し、リリース前にチャットが対応すべきことを挙げます。

チャットテンプレートが対応すべきこと

メッセージリストとコンポーザーは半日で作れます。その周りの状態には何週間もかかります。テンプレートを選ぶ前に、次のリストと照らし合わせてください。

  • 書きかけの Markdown、崩れたテーブル、閉じていないコードフェンスを画面に出さず、なめらかに読めるストリーミング。
  • 停止、再試行、途中で失敗する返信。それぞれに固有のメッセージと次の手順があること。
  • それまでのバージョンを失わずに、以前のメッセージを編集したり返信を再生成したりできること。
  • 読み手が上にスクロールするまで新しいテキストに追従し、下へ戻る手段もあるスクロール。
  • モデルが何をしたかを示すツール呼び出しと、誰かが応答するまで返信を一時停止できる承認。
  • アップロードの進捗、失敗、再試行に対応し、貼り付けたテキストやドロップしたファイルも扱える添付ファイル。
  • 日本語、中国語、韓国語の入力の途中で送信せず、ページを再読み込みしても下書きを残すコンポーザー。
  • 空の状態、チャット履歴、そしてキーボードを開いたスマートフォンでも崩れないレイアウト。

選択肢の早見表

shadcn/ui の AI チャットテンプレートとキット得られるものライセンスバックエンド
HextaUI完成したチャット画面と完全なチャットアプリMIT のコンポーネント、有料の Pro ブロック、無料の Prompt Input任意(AI SDK のメッセージパーツを使用)
Vercel Chatbotサインインとデータベースを備えた完全な Next.js アプリApache 2.0AI SDK
AI Elements (shadcn/ui)自分で組み立てるパターンMITサンプルでは AI SDK
AI Elements (Vercel)コンポーネント(2026 年 11 月末で非推奨)Apache 2.0AI SDK
assistant-ui状態管理つきのチャットプリミティブMITAI SDK、LangGraph、または独自のもの
prompt-kitAI アプリ向けのコンポーネントMIT任意
shadcn-chatbot-kitチャットコンポーネントMITAI SDK

HextaUI

HextaUI は、AI プロダクト向けの Pro ブロックを備えた shadcn/ui 用のコンポーネントライブラリです。HextaAI はそれらのブロックで作られた完全なチャットアプリで、チャットサイドバー、バージョンとチェックポイントを備えたスレッド、出典つきの思考、承認つきのツール呼び出し、チャットの横に表示されるアーティファクト、ストリーミングされる Markdown、音声モードを備えています。ブロックは上のリストにある状態を処理し、それぞれ単独でも動作します。画面は完成したものを使い、時間はプロダクトに使いたいなら、これを選んでください。

コンポーザーの Prompt Input は無料です。アカウントなしでインストールできます。

pnpm dlx shadcn@latest add https://hextaui.com/r/pro/prompt-input.json

Vercel Chatbot

Vercel Chatbot(旧称 AI Chatbot)は、サインイン、Postgres データベース、保存されたチャット、AI SDK を備えた完全な Next.js アプリです。今日すぐデプロイできる動くプロダクトがほしく、そのデザインと技術スタックで問題なければ、これを選んでください。

AI Elements

shadcn/ui の AI Elements は、Chat、Message、Tool、Prompt Input などのパターン集で、プロジェクトにコピーして使います。2026 年 11 月末で非推奨となる Vercel の AI Elements の後継です。質の高い無料の部品がほしく、画面は自分で作るつもりなら、これを選んでください。部品ごとの比較は HextaUI と AI Elements の比較を参照してください。

assistant-ui

assistant-ui は、スレッドやコンポーザーといったチャットのプリミティブをまとめた React ライブラリで、AI SDK、LangGraph、または独自のバックエンド向けにチャットの状態を管理するランタイムを備えています。LangGraph 上のエージェントのように、難しいのがインターフェースではなく状態の管理である場合は、これを選んでください。

prompt-kit と shadcn-chatbot-kit

prompt-kit と shadcn-chatbot-kit は、shadcn CLI でインストールできる無料のコンポーネントキットです。メッセージリスト、プロンプト入力欄、Markdown があれば十分な、大きなアプリの中の小さなチャットに向いています。

選び方

  • 今週中にデプロイできるアプリがほしく、その技術スタックが合っている: Vercel Chatbot。
  • 無料の部品を使い、デザインを完全にコントロールしたい: shadcn/ui の AI Elements、または prompt-kit。
  • LangGraph のように、バックエンドが複雑なチャットの状態を持っている: assistant-ui。
  • 難しい状態まで処理された完成済みの画面と、AI プロダクト向けの設定ページがほしい: HextaUI。

これらは組み合わせて使えます。ほとんどは shadcn/ui のソースをプロジェクトにコピーし、同じテーマトークンを共有するため、1 つを使い続けながら、一部の部品だけを別のものに置き換えられます。たとえば Vercel Chatbot のバックエンドはそのままに、コンポーザーを Prompt Input に差し替えられます。Prompt Input は同じ useChat のステータスを読み取ります。

その他の比較