84はじめる

HextaUI と AI Elements

AI Elements は、メッセージ、プロンプト入力、ツール呼び出しといった AI チャットの部品を提供します。HextaUI は、それらの部品から作られる完成した画面を、難しい状態の処理まで済ませた形で提供します。このページでは、2026 年 10 月時点の両者を比較します。

AI Elements と呼ばれる 2 つのもの

AI Elements は、AI SDK 向けのコンポーネントライブラリとして Vercel で始まりました。現在のリポジトリには、2026 年 11 月末で非推奨となり、shadcn/ui の AI Elements に置き換えられると書かれています。こちらはインストールするパッケージがなく、プロジェクトにコピーして使うパターン集です。どちらかを探している人はたいていもう一方にもたどり着くため、このページでは両方を扱います。

結論

無料の部品を使い、画面とその失敗時の状態は自分で設計するつもりなら AI Elements を使ってください。チャットスレッド、コンポーザー、ツール呼び出し、設定ページがすでに作られ、エラー、再試行、停止、承認まで作り込まれたものがほしいなら HextaUI を使ってください。どちらもソースをプロジェクトに置き、shadcn/ui のテーマトークンを共有するため、組み合わせて使えます。

早見表

HextaUI と 2 つのバージョンの AI Elements の比較HextaUIAI Elements (shadcn/ui)AI Elements (Vercel)
得られるものコンポーネント、AI ブロック、完全なチャットアプリ21 個のパターン49 個のコンポーネント
価格コンポーネントは無料、AI ブロックは買い切り、Prompt Input は無料無料無料
ライセンスコンポーネントは MIT、ブロックは ProライセンスMITApache 2.0
プリミティブBase UIBase UI または RadixRadix
AI SDK任意。同じメッセージパーツを読み取りますサンプルで使用セットアップガイドで必須
完成した画面チャットアプリ、アーティファクト、差分レビュー、設定ページいいえ、自分で組み立てます人気チャットアプリを再現したサンプル
ステータスアクティブ2026 年 10 月に新登場2026 年 11 月末で非推奨

部品か画面か

チャットは、何かがうまくいかなくなるまでは単純に見えます。返信が途中で失敗する。ユーザーが返信を止めたり、以前のメッセージを編集したり、モデルが書いている途中で別のメッセージを送ったりする。ストリームの途中でツールが承認を求める。アップロードが失敗する、あるいはモデルが表を半分だけ送ってくる。AI Elements はこうした状況それぞれを作るためのパーツを提供し、判断はあなたに委ねます。たとえば AI Elements 自身の Message の例では、Retry は自分で regenerate() に接続するアクションとして示されています。

HextaUI のブロックは、そうした判断をすでに済ませ、テストしたものです。

  • Chat Thread: 失敗した返信には Try again が表示され、停止した返信はその旨を示し、編集や再試行は切り替え可能なバージョンになります。回答のストリーミング中は質問が上部に固定され、古い履歴はビューが跳ねることなく読み込まれます。
  • Prompt Input: Enter が日本語、中国語、韓国語の入力を妨げることはなく、アップロードは進捗表示と再試行に対応し、返信中に入力したメッセージはキューで待機し、下書きは再読み込みしても残ります。無料です。
  • Tool Calls: 承認を含め、AI SDK のすべてのツール状態にそれぞれの見た目があり、「Tell it what to do instead」で理由をモデルに送り返せます。
  • Markdown と Streaming: 返信に書きかけの構文が表示されることはなく、まとまって届くチャンクもカクつかずに一定のペースで表示されます。
  • Artifact: 適用できない編集は理由とともに失敗し、最後に正常だったバージョンを残します。プレビューは白く点滅せずに切り替わり、実行時エラーには Fix it アクションが付きます。
  • Chat Sidebar: 取り消せる削除、その場での名前変更、返信中のチャットの表示、そして数千件あってもすぐに開くチャット一覧。

HextaAI は、すべてのブロックを組み合わせた完全なチャットアプリです。何もインストールせずに開いて試せます。

部品ごとの比較

AI Elements の部品の多くには、対応する HextaUI のブロックやコンポーネントがあります。以下の名前は、両方の AI Elements のドキュメントから取っています。

AI ElementsHextaUI
Conversation, Chat, MessageChat Thread と、無料の Message、Message scroller
Prompt Input, Attachments, Model Selector, ContextPrompt Input(無料)
Reasoning, Chain of Thought, Sources, Inline CitationThinking
Tool, ConfirmationTool Calls
Plan, Queue, TaskAgent Todos
Code Block, Terminal, SnippetCode Block
Artifact, Web Preview, JSX PreviewArtifact
File Tree, CommitDiff Review と、無料の Tree
Checkpoint、メッセージの分岐Chat Thread のチェックポイントとバージョン
Persona, Speech Input, Voice SelectorVoice Mode
ShimmerShimmer(無料)
Canvas, Node, Edge対応するものはありません。HextaUI にはワークフローキャンバスがありません。

HextaUI には、Chat Sidebar や、Models、API keys、Billing といった AI プロダクト向けの設定ページなど、AI Elements が扱っていない画面もあります。

AI Elements のほうが適している場合

  • すべて無料かつオープンソースであってほしい。HextaUI の AI ブロックの大半は有料です。
  • 必要な部品は少しだけで、画面とその失敗時の挙動は自分で設計したい。
  • ノードとエッジを使うワークフローキャンバスが必要。Vercel 版にはありますが、HextaUI にはありません。
  • Radix のプリミティブを使いたい。HextaUI は Base UI のみをベースにしていますが、shadcn/ui 版は両方に対応しています。
  • shadcn/ui 自身がメンテナンスし、そのコミュニティとサンプルに支えられたコードを使いたい。

Vercel の AI Elements からの移行

11 月末に何かが壊れることはありません。コンポーネントはすでにソースとしてリポジトリにあり、shadcn/ui も既存のユーザーは移行する必要がないとしています。それらの画面に再び手を入れるときの選択肢は 3 つです。コードを残して自分でメンテナンスする、shadcn/ui のパターンに移行する、または画面を HextaUI のブロックに置き換える、のいずれかです。

HextaUI のブロックは useChat が返すのと同じメッセージパーツを読み取るため、ルートハンドラーやデータはそのままで構いません。Prompt Input は無料なので、まずはコンポーザーから始め、必要になったらスレッドとツール呼び出しを置き換えてください。

よくある質問

Vercel の AI Elements は非推奨になるのですか?

はい。AI Elements のリポジトリには、2026 年 11 月末で非推奨となり、shadcn/ui の AI Elements に置き換えられると書かれています。すでにプロジェクトにコピーしたコードは自分のリポジトリにあるため、引き続き動作します。

HextaUI には AI SDK が必要ですか?

いいえ。AI ブロックは AI SDK の useChat が返すのと同じ形のメッセージパーツを読み取りますが、SDK はインポートしません。メッセージをそのパーツに変換すれば、どのバックエンドでも動作します。

HextaUI は無料ですか?

コンポーネントは無料で、MIT ライセンスです。AI ブロックと完成した画面は HextaUI Pro に含まれます。HextaUI Pro は買い切りで、今後追加されるブロックもすべて含まれます。Prompt Input は無料です。

HextaUI と AI Elements を同じプロジェクトで使えますか?

はい。どちらもソースをプロジェクトに置き、shadcn/ui のテーマトークンを使うため、画面を 1 つずつ置き換えられます。

その他の比較