インストール
npx ai-elements@latest誰向けか
このガイドは、shadcn/ui の上で AI ネイティブなアプリ UI をより早く組みたいフロントエンド開発者向けです。公式には AI Elements は shadcn/ui 上のコンポーネントライブラリとして書かれています。
着手前に、次を同時に満たす必要があります：Node.js 18 or later；AI SDK が入った既存の Next.js プロジェクト；プロジェクトで shadcn/ui がすでに初期化されていること（ページは npx shadcn@latest init と書いています）。Tailwind CSS も設定済みで、AI Elements は CSS Variables mode のみ対応です。1 つでも欠けていればインストールを実行しないでください。
これはコンポーネントインストールであり、Agent マーケットのプラグインではありません。npx ai-elements@latest を、出ていない IDE プラグインへ一般化しないでください。
3 分で初回試行を完了する
ページが示す推奨インストールコマンドだけを使います。
npx ai-elements@latest
前提条件：現在のディレクトリが、shadcn/ui 初期化済みで AI SDK が入ったその Next.js プロジェクトであること；Node.js は 18+；Tailwind は CSS Variables モード。インストール先は、設定済みの components ディレクトリとプロジェクト依存関係です。
副作用の確認点：ページは全コンポーネント導入時に、未設定なら Set up shadcn/ui すること、すべての AI Elements コンポーネントを設定済み components ディレクトリへ入れること、必要な依存をプロジェクトに足すことを明記しています。ファイルと package 依存を変えます。ディレクトリが違う、または前提の確認だけしたい場合は、まず止まってください。確認してから実行します。
成功の合図：コマンドが正常終了し、components ディレクトリに新しいコンポーネントが現れ、依存が書き込まれることです。初回は確認だけです。新しく入ったコンポーネントファイルを 1 つ開き、設定したディレクトリに落ちていることを確認してください。抜粋にないチャットページや本番ルートへすぐ繋がないでください。ウィザードがさらにファイルを変えようとしたら、確認点で止まってください。
使用事例
事例 1：前提を満たすプロジェクトで公式インストールを実行する。Node.js 18+、Next.js + AI SDK、npx shadcn@latest init 完了、Tailwind が CSS Variables mode であることを確認してから npx ai-elements@latest を実行する。根拠がカバーするのはこの推奨コマンドと前提一覧です。完了基準はインストール成功と、コンポーネントが設定済みディレクトリに入ることまでです。出ていない個別コンポーネント名や registry URL を足さないでください。
事例 2：「全コンポーネントを入れる」が何をするかを先に見て、続けるか決める。抜粋は、必要なら shadcn/ui を設定し、すべての AI Elements を components ディレクトリへ入れ、必要な依存を足すと書いています。初回、これらの書き込みを受け入れる準備がなければコマンドを実行せず、これら 3 つの副作用を受け入れられるかだけを確認します。観察できる成功の合図は、プロジェクト現状と照合し、shadcn が初期化済みで対象 components ディレクトリがあることです。「全部入れる」を Tailwind CSS Variables 制限のスキップ許可だと読まないでください。
使用上の境界
主インストール経路は npx ai-elements@latest だけです。npx shadcn@latest init は前提であり、第二の主インストーラではありません。Node.js 18+、Next.js + AI SDK、初期化済み shadcn/ui が必要で、Tailwind は CSS Variables mode のみです。インストールはコンポーネントディレクトリと依存を変えます。アンインストールと個別コンポーネント選定は書かれておらず、安全結論にはできません。