Installer AI Elements avec npx dans un projet Next.js existant

Pour qui

Ce guide s’adresse aux développeurs front qui veulent construire plus vite des interfaces d’applications natives IA au-dessus de shadcn/ui. Officiellement, AI Elements est rédigé comme une bibliothèque de composants bâtie sur shadcn/ui.

Avant de commencer, tout ceci doit tenir en même temps : Node.js 18 or later ; un projet Next.js existant avec AI SDK installé ; shadcn/ui déjà initialisé dans le projet (la page écrit npx shadcn@latest init). Tailwind CSS doit aussi être configuré, et AI Elements ne prend en charge que CSS Variables mode. S’il en manque un, n’exécutez pas l’installation.

C’est une installation de composants, pas un plugin de marketplace Agent. Ne généralisez pas npx ai-elements@latest en un plugin d’IDE absent.

Terminer un premier essai en 3 minutes

N’utilisez que la commande d’installation recommandée indiquée sur la page :

npx ai-elements@latest

Précondition : le répertoire courant est ce projet Next.js déjà initialisé avec shadcn/ui et l’AI SDK ; Node.js est 18+ ; Tailwind est en mode CSS Variables. L’emplacement d’installation est votre répertoire components configuré, plus les dépendances du projet.

Point de confirmation des effets de bord : la page indique qu’installer tous les composants va : Set up shadcn/ui s’il n’est pas déjà configuré ; installer tous les composants AI Elements dans le répertoire components configuré ; et ajouter les dépendances nécessaires au projet. Cela modifie des fichiers et des dépendances package. Si le répertoire est incorrect, ou si vous voulez d’abord seulement vérifier les préconditions, arrêtez-vous. Confirmez, puis exécutez.

Signal de succès : la commande se termine normalement, de nouveaux composants apparaissent dans le répertoire components, les dépendances sont écrites. Le premier essai n’est qu’une vérification : ouvrez un fichier de composant nouvellement installé et confirmez qu’il est tombé dans votre répertoire configuré. Ne le branchez pas tout de suite à une page de chat ou une route de production absente de l’extrait. Si un assistant veut encore modifier d’autres fichiers, arrêtez-vous au point de confirmation.

Cas d’usage

Cas 1 : exécuter l’installation officielle dans un projet qui satisfait les préconditions. Après confirmation de Node.js 18+, Next.js + AI SDK, npx shadcn@latest init terminé, et Tailwind en CSS Variables mode, exécutez npx ai-elements@latest. Les preuves couvrent cette commande recommandée et la liste des prérequis. Le critère de fin s’arrête à l’installation réussie et aux composants dans le répertoire configuré. N’ajoutez pas de noms de composants individuels ni une URL de registry absents.

Cas 2 : d’abord voir ce que « installer tous les composants » fera, puis décider de continuer. L’extrait indique qu’il configurera shadcn/ui si besoin, installera tous les AI Elements dans le répertoire components, et ajoutera les dépendances nécessaires. Au premier essai, si vous n’êtes pas prêt à accepter ces écritures, n’exécutez pas la commande ; vérifiez seulement si ces trois effets de bord sont acceptables. Le signal de succès observable est de pouvoir comparer l’état du projet et confirmer que shadcn est initialisé et que le répertoire components cible existe. Ne lisez pas « tout installer » comme une autorisation d’ignorer la limite Tailwind CSS Variables.

Limites d’usage

Le chemin d’installation principal n’est que npx ai-elements@latest. npx shadcn@latest init est une précondition, pas un second installeur principal. Il faut Node.js 18+, Next.js + AI SDK, shadcn/ui initialisé, et Tailwind ne prend en charge que CSS Variables mode. L’installation change le répertoire de composants et les dépendances. La désinstallation et le choix composant par composant ne sont pas écrits et ne peuvent pas servir de conclusion de sécurité.