Install
npx ai-elements@latestPara quién
Esta guía es para desarrolladores front que quieren construir más rápido interfaces de aplicaciones nativas de IA sobre shadcn/ui. Oficialmente, AI Elements está escrito como una biblioteca de componentes sobre shadcn/ui.
Antes de empezar deben cumplirse a la vez: Node.js 18 or later; un proyecto Next.js existente con AI SDK instalado; shadcn/ui ya inicializado en el proyecto (la página escribe npx shadcn@latest init). Tailwind CSS también debe estar configurado, y AI Elements solo admite CSS Variables mode. Si falta uno, no ejecutes la instalación.
Esto es instalación de componentes, no un plugin de marketplace de Agent. No generalices npx ai-elements@latest a un plugin de IDE que no aparece.
Completar el primer intento en 3 minutos
Usa solo el comando de instalación recomendado que da la página:
npx ai-elements@latest
Precondición: el directorio actual es ese proyecto Next.js con shadcn/ui ya inicializado y el AI SDK instalado; Node.js es 18+; Tailwind está en modo CSS Variables. La ubicación de instalación es tu directorio components configurado, más las dependencias del proyecto.
Punto de confirmación de efectos secundarios: la página indica que al instalar todos los componentes: Set up shadcn/ui si aún no está configurado; instala todos los componentes de AI Elements en el directorio components configurado; y añade las dependencias necesarias al proyecto. Eso cambia archivos y dependencias package. Si el directorio es incorrecto, o solo quieres comprobar primero las premisas, detente. Confirma y luego ejecuta.
Señal de éxito: el comando termina con normalidad, aparecen componentes nuevos en el directorio components y se escriben dependencias. El primer intento es solo una comprobación: abre uno de los archivos de componente recién instalados y confirma que cayó en tu directorio configurado. No lo conectes de inmediato a una página de chat o una ruta de producción que no aparece en el extracto. Si un asistente aún quiere cambiar más archivos, detente en el punto de confirmación.
Casos de uso
Caso 1: ejecutar la instalación oficial en un proyecto que cumple las premisas. Tras confirmar Node.js 18+, Next.js + AI SDK, npx shadcn@latest init completado y Tailwind en CSS Variables mode, ejecuta npx ai-elements@latest. La evidencia cubre este comando recomendado y la lista de premisas. El criterio de finalización termina en la instalación correcta y en que los componentes entren en el directorio configurado. No añadas nombres de componentes sueltos ni una URL de registry que no aparecen.
Caso 2: ver primero qué hará «instalar todos los componentes» y decidir si continuar. El extracto indica que configurará shadcn/ui si hace falta, instalará todos los AI Elements en el directorio components y añadirá las dependencias necesarias. En el primer intento, si no estás listo para aceptar esas escrituras, no ejecutes el comando; solo comprueba si esos tres efectos secundarios son aceptables. La señal de éxito observable es poder comparar el estado del proyecto y confirmar que shadcn está inicializado y existe el directorio components de destino. No leas «instalar todo» como permiso para saltarte el límite de Tailwind CSS Variables.
Límites de uso
La ruta de instalación principal es solo npx ai-elements@latest. npx shadcn@latest init es una premisa, no un segundo instalador principal. Hace falta Node.js 18+, Next.js + AI SDK, shadcn/ui inicializado, y Tailwind solo admite CSS Variables mode. La instalación cambia el directorio de componentes y las dependencias. La desinstalación y la selección componente a componente no están escritas y no pueden tomarse como conclusión de seguridad.