Vercel の AI Elements が非推奨になります。shadcn/ui の AI チャット UI の代替はこちら

まず: あなたのコードは動き続ける

AI Elements は shadcn 形式のレジストリでした。コンポーネントはプロジェクトにコピーされています。更新が止まるようなパッケージは存在しないので、12 月 1 日に壊れるものはありません。非推奨が意味するのは、Vercel から新しいコンポーネントや修正が来なくなること、そしてドキュメントがいずれ別の場所を指すようになることです。

時間はあります。今週中に急いで移行する必要はありません。

置き換え先

2026 年 10 月、shadcn/ui は独自の AI Elements を公開しました。shadcn/ui コンポーネントから作られた、エージェント向けインターフェースのための 21 個のパターンです。Chat、Prompt Input、Reasoning、Tool、Plan、Subagent などがあります。各パターンのページには、AI SDK のメッセージパーツから描画する方法が示されています。パッケージはありません。各パターンをコピーして取り込みます。

これらは、Base UI、React Aria、Radix のいずれでも動く Trace と Code Block という二つの新しいコンポーネントとともに公開されています。

Vercel のライブラリからの移行は摩擦が少なくなるよう設計されています。パターンが作り直された箇所では export 名と props が維持されており、各パターンのページには AI コーディングエージェントに渡せる移行プロンプトが付いています。作り直されなかった要素は対象外なので、使っているものと一覧を突き合わせてください。

部品と画面の正直な違い

以下の選択肢はどれも二つの陣営のどちらかに入り、自分がどちらを求めているかを知っておくと一週間節約できます。

部品は Message、Prompt Input、Tool といったコンポーネントを提供します。画面を設計し、返信が失敗したとき、ストリームが停止されたとき、ツールが承認を求めるとき、アップロードが死んだときに何が起きるかを決めるのはあなたです。AI Elements の両バージョンと prompt-kit は部品です。

画面は、そうした判断が済んだ状態のチャットスレッド、コンポーザー、ツール呼び出しの一覧、設定ページを提供します。データをつなぎ、テーマトークンで見た目を整えるだけです。HextaUI のブロックや、Vercel の AI Chatbot テンプレートのような完成アプリは画面です。

部品は無料で柔軟です。画面は速くて、やり方が決まっています。どちらも間違いではありません。

五つの選択肢を比較

1. shadcn/ui の AI Elements

無料、MIT、shadcn チームがメンテナンスし、Base UI、React Aria、Radix 向けに作られています。画面ではなく部品です。自分で組み立てたい、そして最も使われているレジストリに留まりたいなら自然なデフォルトです。2026 年 10 月時点で新しいので、今後数か月でパターンの一覧が増え、粗い部分が磨かれていくと考えてください。

2. prompt-kit

無料、MIT、shadcn CLI でインストールできます。Prompt Input、Message、Reasoning、Chain of Thought、Tool、File Upload に加え、履歴サイドバー付きのチャットアプリを含むサンプルブロックがあります。良いサンプルの付いた部品です。Radix 上に作られているため、Base UI プロジェクトで使う間は両方のプリミティブ層を抱えることになります。

3. assistant-ui

無料、MIT、スレッド保存用の有料クラウドはオプションです。これは種類が違います。会話を管理する独自のランタイムを持つチャットフレームワークで、そこから読み取るヘッドレスなプリミティブとスタイル付きコンポーネントが付いています。AI SDK、LangGraph、LangChain、AG-UI などのアダプターがあります。ランタイムにチャットの状態を持たせたいなら選んでください。状態がすでに useChat や自前のストアにあり、アプリを何かで包みたくないなら見送ってください。

4. shadcn-chatbot-kit と AI Chatbot テンプレート

Blazity の shadcn-chatbot-kit は、より小さなチャットボット用コンポーネントのセットです。Vercel の AI Chatbot はサインインとデータベースを備えた完全な Next.js アプリで、すべての部品が配線された状態を見たいなら標準的な参考例です。どちらも採用しなくても読む価値があります。

5. HextaUI のブロック

画面です。失敗した返信には Try again が出て、停止した返信はそうと表示され、編集と再試行は切り替え可能なバージョンになる Chat Thread。「代わりにこうして」という理由付きの承認を含め、AI SDK のすべてのツール状態に対応した Tool Calls。書きかけの構文を決して見せない Streaming と Markdown。日本語や中国語の入力でも安全で、アップロードの進捗と再試行を表示し、返信中に入力されたメッセージをキューに入れ、リロードをまたいで下書きを保持する Prompt Input。さらに、チャット製品の周辺にある画面として、設定、モデル、API キー、請求、チーム、セキュリティがあります。

土台となるコンポーネントは無料で MIT です。AI ブロックは HextaUI Pro で、一回の支払いに以後のすべてのブロックが含まれ、Prompt Input は無料です。Base UI 上に作られ、SDK を import せずに AI SDK のメッセージパーツを読みます。すべて無料でなければ困る場合や、Radix が欲しい場合には向きません。

早見表

決め方

• ゼロから始めて自分で組み立てたい場合: shadcn/ui の AI Elements。
• すでにツリーに Vercel の AI Elements がある場合: 新しいものが必要になるまではそのままにし、その後、移行プロンプトを使ってパターンごとに移します。
• スレッド、分岐、永続化をランタイムに任せたい場合: assistant-ui。
• チャットとその周辺の製品画面が、失敗時の状態も含めて出来上がっていてほしく、一回払うのは構わない場合: HextaUI。

これらはすべてソースをプロジェクトにコピーし、shadcn/ui のテーマトークンを使うので、画面単位で混ぜて使えます。唯一の注意点はプリミティブです。Radix ベースのキットを Base UI プロジェクトに混ぜても動きますが、両方を出荷することになります。

部品ごとの完全な対応表を含むより詳しい比較は hextaui.com/compare/ai-elements に、七つを並べた shadcn の AI チャットテンプレートの比較も用意しています。

よくある質問

Vercel の AI Elements は正確にはいつ非推奨になりますか? リポジトリには 2026 年 11 月末と書かれています。

既存の AI Elements コンポーネントは壊れますか? いいえ。コンポーネントはあなたのリポジトリにあります。更新が届かなくなるだけです。

新しい AI Elements はパッケージですか? いいえ。shadcn CLI でコピーして取り込むパターン集で、shadcn/ui 本体と同じモデルです。

Vercel AI SDK なしで HextaUI のブロックを使えますか? はい。メッセージは AI SDK のパーツ形式の props として受け取り、SDK を import しません。