Install
npx ai-elements@latestPara quem
Este guia é para desenvolvedores front que querem construir mais depressa interfaces de aplicações nativas de IA sobre shadcn/ui. Oficialmente, AI Elements está escrito como uma biblioteca de componentes sobre shadcn/ui.
Antes de começar, tudo isto deve verificar-se ao mesmo tempo: Node.js 18 or later; um projeto Next.js existente com AI SDK instalado; shadcn/ui já inicializado no projeto (a página escreve npx shadcn@latest init). O Tailwind CSS também deve estar configurado, e o AI Elements só suporta CSS Variables mode. Se faltar um, não execute a instalação.
Isto é instalação de componentes, não um plugin de marketplace de Agent. Não generalize npx ai-elements@latest para um plugin de IDE que não aparece.
Concluir a primeira tentativa em 3 minutos
Use apenas o comando de instalação recomendado indicado na página:
npx ai-elements@latest
Pré-condição: o diretório atual é esse projeto Next.js com shadcn/ui já inicializado e o AI SDK instalado; Node.js é 18+; o Tailwind está em modo CSS Variables. O local de instalação é o seu diretório components configurado, mais as dependências do projeto.
Ponto de confirmação de efeitos colaterais: a página afirma que instalar todos os componentes vai: Set up shadcn/ui se ainda não estiver configurado; instalar todos os componentes AI Elements no diretório components configurado; e adicionar as dependências necessárias ao projeto. Isso altera arquivos e dependências package. Se o diretório estiver errado, ou se quiser só conferir as premissas primeiro, pare. Confirme e depois execute.
Sinal de sucesso: o comando termina normalmente, novos componentes aparecem no diretório components e as dependências são gravadas. A primeira tentativa é só uma conferência: abra um arquivo de componente recém-instalado e confirme que caiu no diretório configurado. Não o ligue de imediato a uma página de chat ou rota de produção que não aparece no trecho. Se um assistente ainda quiser alterar mais arquivos, pare no ponto de confirmação.
Casos de uso
Caso 1: executar a instalação oficial num projeto que cumpre as premissas. Após confirmar Node.js 18+, Next.js + AI SDK, npx shadcn@latest init concluído e Tailwind em CSS Variables mode, execute npx ai-elements@latest. A evidência cobre este comando recomendado e a lista de premissas. O critério de conclusão para na instalação bem-sucedida e nos componentes a entrar no diretório configurado. Não acrescente nomes de componentes individuais nem um URL de registry que não aparecem.
Caso 2: ver primeiro o que «instalar todos os componentes» fará e decidir se continua. O trecho afirma que configurará shadcn/ui se for preciso, instalará todos os AI Elements no diretório components e adicionará as dependências necessárias. Na primeira tentativa, se não estiver pronto para aceitar essas escritas, não execute o comando; só confira se esses três efeitos colaterais são aceitáveis. O sinal de sucesso observável é poder comparar o estado do projeto e confirmar que o shadcn está inicializado e o diretório components de destino existe. Não leia «instalar tudo» como permissão para saltar o limite Tailwind CSS Variables.
Limites de uso
O caminho principal de instalação é apenas npx ai-elements@latest. npx shadcn@latest init é uma premissa, não um segundo instalador principal. É preciso Node.js 18+, Next.js + AI SDK, shadcn/ui inicializado, e o Tailwind só suporta CSS Variables mode. A instalação altera o diretório de componentes e as dependências. Desinstalação e seleção componente a componente não estão escritas e não podem ser tratadas como conclusão de segurança.