Plantillas de chat con IA para shadcn/ui
Una plantilla de chat con IA para shadcn/ui es una interfaz de chat construida con componentes de shadcn/ui que copias en tu propio proyecto. Algunas te dan piezas y otras una app entera. Esta página compara siete opciones a fecha de octubre de 2026 y enumera lo que un chat tiene que resolver antes de lanzarlo.
Lo que una plantilla de chat tiene que resolver
La lista de mensajes y el compositor llevan una tarde. Los estados que los rodean llevan semanas. Comprueba una plantilla con esta lista antes de elegirla:
- Un streaming que se lee con fluidez, sin Markdown a medio escribir, tablas rotas ni bloques de código sin cerrar en pantalla.
- Detener, reintentar y una respuesta que falla a mitad, cada uno con su propio mensaje y su siguiente paso.
- Editar un mensaje anterior o regenerar una respuesta sin perder la versión que había antes.
- Un scroll que sigue el texto nuevo hasta que el lector sube, y una forma de volver abajo.
- Llamadas a herramientas que muestran lo que hizo el modelo, y aprobaciones que pueden pausar una respuesta hasta que alguien conteste.
- Adjuntos con progreso de subida, fallos y reintento, además de texto pegado y archivos arrastrados.
- Un compositor que no envía a mitad de la escritura en japonés, chino o coreano, y que conserva el borrador si la página se recarga.
- Un estado vacío, un historial de chats y un diseño que siga funcionando en un móvil con el teclado abierto.
Las opciones de un vistazo
| Plantillas y kits de chat con IA para shadcn/ui | Qué obtienes | Licencia | Backend |
|---|---|---|---|
| HextaUI | Pantallas de chat terminadas y una app de chat completa | Componentes MIT, bloques Pro de pago, Prompt Input gratuito | Cualquiera, usando las partes de mensaje del AI SDK |
| Vercel Chatbot | Una app completa de Next.js con inicio de sesión y base de datos | Apache 2.0 | AI SDK |
| AI Elements (shadcn/ui) | Patrones que compones tú | MIT | AI SDK en los ejemplos |
| AI Elements (Vercel) | Componentes, obsoletos a finales de noviembre de 2026 | Apache 2.0 | AI SDK |
| assistant-ui | Primitivos de chat con gestión de estado | MIT | AI SDK, LangGraph o el tuyo propio |
| prompt-kit | Componentes para apps de IA | MIT | Cualquiera |
| shadcn-chatbot-kit | Componentes de chat | MIT | AI SDK |
HextaUI
HextaUI es una biblioteca de componentes para shadcn/ui con bloques Pro para productos de IA. HextaAI es la app de chat completa construida con ellos: una barra lateral de chats, un hilo con versiones y checkpoints, razonamiento con fuentes, llamadas a herramientas con aprobaciones, artifacts junto al chat, Markdown en streaming y modo de voz. Los bloques resuelven los estados de la lista anterior, y cada uno funciona también por separado. Elígelo cuando quieras las pantallas terminadas y prefieras dedicar tu tiempo al producto.
El compositor, Prompt Input, es gratuito. Instálalo sin cuenta:
pnpm dlx shadcn@latest add https://hextaui.com/r/pro/prompt-input.jsonVercel Chatbot
Vercel Chatbot, antes llamado AI Chatbot, es una app completa de Next.js con inicio de sesión, una base de datos Postgres, chats guardados y el AI SDK. Elígelo cuando quieras un producto funcional para desplegar hoy mismo y te convenzan su diseño y su stack.
AI Elements
AI Elements de shadcn/ui es un conjunto de patrones, como Chat, Message, Tool y Prompt Input, que copias en tu proyecto. Sustituye a AI Elements de Vercel, que quedará obsoleto a finales de noviembre de 2026. Elígelo cuando quieras piezas gratuitas y bien hechas y pienses construir las pantallas tú mismo. Consulta HextaUI vs AI Elements para ver una comparación pieza a pieza.
assistant-ui
assistant-ui es una biblioteca de React con primitivos de chat, como un hilo y un compositor, y runtimes que gestionan el estado del chat para el AI SDK, LangGraph o tu propio backend. Elígelo cuando lo difícil sea el estado y no la interfaz, por ejemplo con un agente en LangGraph.
prompt-kit y shadcn-chatbot-kit
prompt-kit y shadcn-chatbot-kit son kits de componentes gratuitos que se instalan con la CLI de shadcn. Encajan bien en un chat pequeño dentro de una app más grande, donde necesitas una lista de mensajes, un cuadro de prompt y Markdown, y poco más.
Cómo elegir
- Quieres una app lista para desplegar esta semana y su stack te encaja: Vercel Chatbot.
- Quieres piezas gratuitas y control total del diseño: AI Elements de shadcn/ui, o prompt-kit.
- Tu backend tiene un estado de chat complejo, como con LangGraph: assistant-ui.
- Quieres pantallas terminadas con los estados difíciles resueltos, además de páginas de ajustes para tu producto de IA: HextaUI.
Se combinan bien. La mayoría copian código fuente de shadcn/ui en tu proyecto y comparten los mismos tokens de tema, así que puedes quedarte con una y reemplazar una sola pieza por otra. Por ejemplo, conserva el backend de Vercel Chatbot y cambia su compositor por Prompt Input, que lee el mismo estado de useChat.