Templates de chat com IA para shadcn/ui
Um template de chat com IA para shadcn/ui é uma interface de chat feita com componentes do shadcn/ui que você copia para o seu próprio projeto. Alguns oferecem peças, outros um app inteiro. Esta página compara sete opções em outubro de 2026 e lista o que um chat precisa resolver antes de você lançá-lo.
O que um template de chat precisa resolver
A lista de mensagens e o campo de mensagem levam uma tarde. Os estados em volta deles levam semanas. Confira um template com esta lista antes de escolhê-lo:
- Streaming com leitura fluida, sem Markdown pela metade, tabelas quebradas ou blocos de código sem fechamento na tela.
- Interrupção, nova tentativa e uma resposta que falha no meio, cada uma com sua própria mensagem e próximo passo.
- Editar uma mensagem anterior ou gerar uma resposta de novo, sem perder a versão que existia antes.
- Rolagem que acompanha o texto novo até o leitor rolar para cima, e um jeito de voltar para baixo.
- Chamadas de ferramentas que mostram o que o modelo fez e aprovações que podem pausar uma resposta até alguém responder.
- Anexos com progresso de upload, falhas e nova tentativa, além de texto colado e arquivos arrastados.
- Um campo de mensagem que não envia no meio da digitação em japonês, chinês ou coreano e mantém o rascunho se a página recarregar.
- Um estado vazio, um histórico de chats e um layout que continua funcionando no celular com o teclado aberto.
Visão geral das opções
| Templates e kits de chat com IA para shadcn/ui | O que você recebe | Licença | Backend |
|---|---|---|---|
| HextaUI | Telas de chat prontas e um app de chat completo | Componentes MIT, blocos Pro pagos, Prompt Input gratuito | Qualquer um, usando partes de mensagem do AI SDK |
| Vercel Chatbot | Um app Next.js completo com login e banco de dados | Apache 2.0 | AI SDK |
| AI Elements (shadcn/ui) | Padrões que você monta | MIT | AI SDK nos exemplos |
| AI Elements (Vercel) | Componentes, descontinuados no fim de novembro de 2026 | Apache 2.0 | AI SDK |
| assistant-ui | Primitivos de chat com gerenciamento de estado | MIT | AI SDK, LangGraph ou o seu próprio |
| prompt-kit | Componentes para apps de IA | MIT | Qualquer um |
| shadcn-chatbot-kit | Componentes de chat | MIT | AI SDK |
HextaUI
O HextaUI é uma biblioteca de componentes para shadcn/ui com blocos Pro para produtos de IA. O HextaAI é o app de chat completo feito com eles: uma barra lateral de chats, uma thread com versões e checkpoints, raciocínio com fontes, chamadas de ferramentas com aprovações, artifacts ao lado do chat, Markdown em streaming e modo de voz. Os blocos resolvem os estados da lista acima, e cada um também funciona sozinho. Escolha-o quando quiser as telas prontas e preferir dedicar seu tempo ao produto.
O campo de mensagem, Prompt Input, é gratuito. Instale sem precisar de conta:
pnpm dlx shadcn@latest add https://hextaui.com/r/pro/prompt-input.jsonVercel Chatbot
O Vercel Chatbot, antes chamado AI Chatbot, é um app Next.js completo com login, banco de dados Postgres, chats salvos e o AI SDK. Escolha-o quando quiser um produto funcionando para publicar hoje e estiver satisfeito com o design e a stack dele.
AI Elements
O AI Elements do shadcn/ui é um conjunto de padrões, como Chat, Message, Tool e Prompt Input, que você copia para o seu projeto. Ele substitui o AI Elements da Vercel, que será descontinuado no fim de novembro de 2026. Escolha-o quando quiser peças gratuitas e bem-feitas e pretender construir as telas você mesmo. Veja HextaUI vs AI Elements para uma comparação peça por peça.
assistant-ui
O assistant-ui é uma biblioteca React de primitivos de chat, como uma thread e um campo de mensagem, com runtimes que gerenciam o estado do chat para o AI SDK, o LangGraph ou o seu próprio backend. Escolha-o quando a parte difícil for o estado, e não a interface, por exemplo um agente no LangGraph.
prompt-kit e shadcn-chatbot-kit
O prompt-kit e o shadcn-chatbot-kit são kits de componentes gratuitos que se instalam com a shadcn CLI. Funcionam bem para um chat pequeno dentro de um app maior, em que você precisa de uma lista de mensagens, uma caixa de prompt e Markdown, e pouco mais.
Como escolher
- Você quer um app pronto para publicar nesta semana e a stack dele serve para você: Vercel Chatbot.
- Você quer peças gratuitas e controle total do design: AI Elements do shadcn/ui, ou prompt-kit.
- Seu backend tem um estado de chat complexo, como no LangGraph: assistant-ui.
- Você quer telas prontas com os estados difíceis resolvidos, além de páginas de configurações para o seu produto de IA: HextaUI.
Eles se combinam bem. A maioria copia código-fonte do shadcn/ui para o seu projeto e compartilha os mesmos tokens de tema, então você pode manter um e substituir uma única peça por outra. Por exemplo, mantenha o backend do Vercel Chatbot e troque o campo de mensagem dele pelo Prompt Input, que lê o mesmo status do useChat.