ai-elements

AI Elements

操作に適したコンポーネントでは、AI Elements を使用してください。生成されたソースはプロジェクトに含まれるため、実際の API を確認し、意図を持ってカスタマイズしてください。

プロジェクトとドキュメント

プロジェクトのパッケージマネージャー、エイリアス、shadcn の設定、AI SDK のメジャーバージョンに従ってください。インストールされているバージョンを確認するには ai-sdk を読み、その後、適切な ai-sdk-6 または ai-sdk-7 のガイダンスを参照してください。AI Elements と AI SDK のバージョンは、それぞれ独立して変わる場合があります。

まず生成された components/ai-elements/<component>.tsx を読み、続いて対応する references/ ファイルと scripts/ の例を確認してください。最新のドキュメントはAI Elements サイトを参照してください。関連するリファレンスのみを読み込み、同梱されている例はインストール済みのソースと照合してください。

インストールには、プロジェクトのランナーを使って ai-elements@latest add <component> または shadcn@latest add @ai-elements/<component> を実行してください。コンポーネントは、components.json で設定されたエイリアス配下の components/ai-elements/ に配置されます。インストールされたソースがオフラインで参照できる API リファレンスです。インストール済みのコンポーネントを確認し、ローカルのカスタマイズを置き換える前に生成ファイルを確認してください。レジストリ、プリセット、プリミティブベースの詳細には shadcn を使用してください。

AI Elements は Radix ベースを対象としています（上流では radix-ui を使う new-york スタイルを使用しています）。Base UI のプロジェクトでは、prompt-input、attachments、inline-citation、plan でプロパティの不一致が発生する可能性があります（上流 #446、2026-10-11 にオープン）。インストール済みのコピーを適宜調整してください。

統合

統合では、UI と SDK の境界、v6 の注意点、AI SDK 7 で必要となる context.tsx のパッチについて説明しています。安定したメッセージ ID を維持し、生成された複合コンポーネントを使って、サポートされているメッセージパーツをレンダリングしてください。モデルの選択、ツール、認証情報、認可はサーバー側で管理してください。

機能に必要な状態を組み合わせてください。ストリーミング、完了、再試行、キャンセル、添付ファイル、承認、ソースなどが該当します。ライブラリに用意されているというだけで、コンポーネントを追加するのは避けてください。キーボード操作、アクセシブルなラベル、使いやすいスクロール動作を維持してください。

レンダリングに失敗した場合は、該当コンポーネント、テーマのインポート、セマンティックトークン、実際に設定されたエイリアスを確認してください。1 つのインポートを直すために、デフォルトの tsconfig をコピーしたり、プロジェクトのテーマを置き換えたりしないでください。 スタイルなしの Markdown が表示される場合は、MessageResponse の設定を確認してください。

実際のメッセージ状態とプロジェクトのチェックを使って、レンダリングされるフローを検証してください。型が正しいだけでは、ストリーミングや添付ファイルの動作が使いやすいとは限りません。