O AI Elements da Vercel está sendo descontinuado. Estas são as alternativas para UI de chat com IA em shadcn/ui
O AI Elements da Vercel é descontinuado no fim de novembro de 2026. O que o substitui, o que fazer com o código que você copiou e cinco opções de chat com IA para shadcn/ui comparadas.
Preet Suthar · · 5 min de leitura
- AI
- shadcn/ui
- React
- Next.js
Se você construiu um chat com IA usando o AI Elements da Vercel este ano, o repositório agora traz um aviso: a biblioteca será descontinuada no fim de novembro de 2026, substituída pelo AI Elements do shadcn/ui.
Este post cobre o que isso significa para o seu código, qual é o substituto e as outras opções se você está começando uma UI de chat com IA em shadcn/ui no fim de 2026. Eu mantenho uma dessas opções, o HextaUI, então vou dizer onde ele se encaixa e onde não.
Primeiro: o seu código continua funcionando
O AI Elements era um registry no estilo shadcn. Os componentes eram copiados para o seu projeto. Não existe pacote para deixar de receber atualizações, então nada quebra em 1º de dezembro. A descontinuação significa nenhum componente novo e nenhuma correção da Vercel, e a documentação em algum momento vai apontar para outro lugar.
Você tem tempo. Não apresse uma migração esta semana.
O que o substitui
Em outubro de 2026 o shadcn/ui publicou o próprio AI Elements: 21 padrões para interfaces agênticas construídos com componentes shadcn/ui. Chat, Prompt Input, Reasoning, Tool, Plan, Subagent e mais. Cada página de padrão mostra como renderizá-lo a partir de partes de mensagem do AI SDK. Não há pacote. Você copia cada padrão.
Eles chegam junto com dois componentes novos, Trace e Code Block, que funcionam em Base UI, React Aria e Radix.
A migração a partir da biblioteca da Vercel foi pensada para ter pouco atrito. Nomes de export e props são mantidos onde o padrão foi reconstruído, e cada página de padrão inclui um prompt de migração que você pode entregar a um agente de código com IA. Elementos que não foram reconstruídos não são cobertos, então confira a lista contra o que você usa.
A diferença honesta entre peças e telas
Cada opção abaixo cai em um de dois grupos, e saber qual você quer economiza uma semana.
Peças te dão um Message, um Prompt Input, um componente Tool. Você desenha a tela e decide o que acontece quando uma resposta falha, quando um stream é interrompido, quando uma ferramenta precisa de aprovação, quando um upload morre. As duas versões do AI Elements, e o prompt-kit, são peças.
Telas te dão a thread do chat, o compositor, a lista de chamadas de ferramenta e as páginas de configurações com essas decisões já tomadas. Você conecta os dados e reestiliza com os seus tokens de tema. Os blocos do HextaUI e apps completos como o template AI Chatbot da Vercel são telas.
Peças são gratuitas e flexíveis. Telas são mais rápidas e opinativas. Nenhuma das duas está errada.
Cinco opções comparadas
1. AI Elements do shadcn/ui
Gratuito, MIT, mantido pelo time do shadcn, feito para Base UI, React Aria e Radix. Peças, não telas. O padrão natural se você quer compor o seu próprio e ficar no registry mais usado. Novo desde outubro de 2026, então espere a lista de padrões crescer e as arestas serem aparadas nos próximos meses.
2. prompt-kit
Gratuito, MIT, instala com a CLI do shadcn. Prompt Input, Message, Reasoning, Chain of Thought, Tool, File Upload e blocos de exemplo, incluindo um app de chat com barra lateral de histórico. Peças, com bons exemplos. Construído sobre Radix, então um projeto Base UI carrega as duas camadas de primitivas enquanto você o usa.
3. assistant-ui
Gratuito, MIT, com uma nuvem paga opcional para threads salvas. Este é diferente em natureza: é um framework de chat com runtime próprio que gerencia a conversa, mais primitivas headless e componentes estilizados que leem dele. Adaptadores para o AI SDK, LangGraph, LangChain, AG-UI e outros. Escolha-o se quiser que o runtime seja dono do estado do chat. Pule-o se o seu estado já vive no useChat ou na sua própria store e você não quer nada envolvendo o seu app.
4. shadcn-chatbot-kit e o template AI Chatbot
O shadcn-chatbot-kit da Blazity é um conjunto menor de componentes de chatbot. O AI Chatbot da Vercel é um app Next.js completo com login e banco de dados, que é a referência canônica se você quer ver cada peça conectada. Os dois valem a leitura mesmo que você não os adote.
5. Blocos do HextaUI
Telas. Um Chat Thread em que respostas com falha oferecem Try again, respostas interrompidas dizem isso, e edições e novas tentativas viram versões entre as quais você pode alternar. Tool Calls com todos os estados de ferramenta do AI SDK, incluindo aprovações com um motivo "faça isso em vez disso". Streaming e Markdown que nunca mostram sintaxe pela metade. Um Prompt Input seguro com entrada em japonês e chinês, que mostra progresso e nova tentativa de upload, enfileira mensagens digitadas durante uma resposta e mantém rascunhos entre reloads. Mais as telas ao redor de um produto de chat: configurações, modelos, chaves de API, cobrança, equipe, segurança.
Os componentes por baixo são gratuitos e MIT. Os blocos de IA são o HextaUI Pro, um pagamento único com todos os blocos futuros incluídos, e o Prompt Input é gratuito. Construído sobre Base UI, lê partes de mensagem do AI SDK sem importar o SDK. Não é para você se quer tudo gratuito, ou se quer Radix.
Visão geral
| Visão geral | Grupo | Preço | Primitivos | AI SDK |
|---|---|---|---|---|
| AI Elements (shadcn/ui) | Peças | Gratuito | Base UI, React Aria, Radix | Usado nos exemplos |
| AI Elements (Vercel) | Peças | Gratuito | Radix | Exigido pela configuração |
| prompt-kit | Peças | Gratuito | Radix | Opcional |
| assistant-ui | Runtime | Gratuito, nuvem paga | Próprio | Adaptador |
| HextaUI | Telas | Componentes gratuitos, blocos pagos uma vez | Base UI | Opcional, mesmo formato de partes |
Como decidir
- Você está começando do zero e quer compor o seu próprio: AI Elements do shadcn/ui.
- Você já tem o AI Elements da Vercel na sua árvore: mantenha-o até precisar de algo novo, depois migre padrão por padrão usando os prompts de migração.
- Você quer um runtime que gerencie threads, ramificações e persistência por você: assistant-ui.
- Você quer o chat e as telas de produto ao redor dele prontos, com os estados de falha tratados, e não se importa em pagar uma vez: HextaUI.
Todos eles copiam o código-fonte para o seu projeto e usam os tokens de tema do shadcn/ui, então você pode misturá-los uma tela de cada vez. O único cuidado é com as primitivas: misturar um kit baseado em Radix em um projeto Base UI funciona, mas você entrega os dois.
Eu mantenho uma comparação mais detalhada, com o mapeamento completo peça por peça, em hextaui.com/compare/ai-elements, e uma análise de sete opções de templates de chat com IA para shadcn.
FAQ
Quando exatamente o AI Elements da Vercel é descontinuado? O repositório diz fim de novembro de 2026.
Meus componentes atuais do AI Elements vão quebrar? Não. Eles vivem no seu repositório. Só deixam de receber atualizações.
O novo AI Elements é um pacote? Não. É um conjunto de padrões que você copia com a CLI do shadcn, o mesmo modelo do próprio shadcn/ui.
Posso usar os blocos do HextaUI sem o AI SDK da Vercel? Sim. Eles recebem mensagens como props no formato de partes do AI SDK e não importam o SDK.