Templates de chat IA shadcn/ui
Un template de chat IA shadcn/ui est une interface de chat construite avec des composants shadcn/ui que vous copiez dans votre propre projet. Certains vous donnent des pièces, d’autres une application entière. Cette page compare sept options en date d’octobre 2026, et liste ce qu’un chat doit gérer avant sa mise en production.
Ce qu’un template de chat doit gérer
La liste de messages et le champ de saisie prennent un après-midi. Les états autour prennent des semaines. Vérifiez un template avec cette liste avant de le choisir :
- Un streaming qui se lit de façon fluide, sans Markdown à moitié tapé, tableaux cassés ni blocs de code non fermés à l’écran.
- L’arrêt, la nouvelle tentative et une réponse qui échoue à mi-chemin, chacun avec son propre message et sa prochaine étape.
- La modification d’un message précédent ou la régénération d’une réponse, sans perdre la version d’avant.
- Un défilement qui suit le nouveau texte jusqu’à ce que le lecteur remonte, et un moyen de redescendre.
- Des appels d’outils qui montrent ce que le modèle a fait, et des approbations qui peuvent mettre une réponse en pause jusqu’à ce que quelqu’un réponde.
- Des pièces jointes avec progression de l’envoi, échecs et nouvelle tentative, ainsi que le texte collé et les fichiers déposés.
- Un champ de saisie qui n’envoie pas en pleine saisie en japonais, chinois ou coréen, et qui conserve le brouillon si la page se recharge.
- Un état vide, un historique des chats et une mise en page qui fonctionne encore sur téléphone avec le clavier ouvert.
Les options en un coup d’œil
| Templates et kits de chat IA shadcn/ui | Ce que vous obtenez | Licence | Backend |
|---|---|---|---|
| HextaUI | Des écrans de chat finis et une application de chat complète | Composants MIT, blocs Pro payants, Prompt Input gratuit | N’importe lequel, via les parts de message de l’AI SDK |
| Vercel Chatbot | Une application Next.js complète avec connexion et base de données | Apache 2.0 | AI SDK |
| AI Elements (shadcn/ui) | Des patterns à assembler | MIT | AI SDK dans les exemples |
| AI Elements (Vercel) | Composants, dépréciés fin novembre 2026 | Apache 2.0 | AI SDK |
| assistant-ui | Primitives de chat avec gestion d’état | MIT | AI SDK, LangGraph ou le vôtre |
| prompt-kit | Composants pour applications d’IA | MIT | N’importe lequel |
| shadcn-chatbot-kit | Composants de chat | MIT | AI SDK |
HextaUI
HextaUI est une bibliothèque de composants pour shadcn/ui avec des blocs Pro pour les produits d’IA. HextaAI est l’application de chat complète construite avec eux : une barre latérale de chats, un fil avec versions et checkpoints, un raisonnement avec sources, des appels d’outils avec approbations, des artefacts à côté du chat, du Markdown en streaming et un mode vocal. Les blocs gèrent les états de la liste ci-dessus, et chacun fonctionne aussi seul. Choisissez-le si vous voulez des écrans finis et préférez consacrer votre temps au produit.
Le champ de saisie, Prompt Input, est gratuit. Installez-le sans compte :
pnpm dlx shadcn@latest add https://hextaui.com/r/pro/prompt-input.jsonVercel Chatbot
Vercel Chatbot, anciennement appelé AI Chatbot, est une application Next.js complète avec connexion, base de données Postgres, chats enregistrés et l’AI SDK. Choisissez-le si vous voulez un produit fonctionnel à déployer dès aujourd’hui et que son design et sa stack vous conviennent.
AI Elements
AI Elements de shadcn/ui est un ensemble de patterns, comme Chat, Message, Tool et Prompt Input, que vous copiez dans votre projet. Il remplace AI Elements de Vercel, qui sera déprécié fin novembre 2026. Choisissez-le si vous voulez des pièces gratuites et bien faites et prévoyez de construire les écrans vous-même. Consultez HextaUI vs AI Elements pour une comparaison pièce par pièce.
assistant-ui
assistant-ui est une bibliothèque React de primitives de chat, comme un fil et un champ de saisie, avec des runtimes qui gèrent l’état du chat pour l’AI SDK, LangGraph ou votre propre backend. Choisissez-la si la difficulté est l’état plutôt que l’interface, par exemple pour un agent sur LangGraph.
prompt-kit et shadcn-chatbot-kit
prompt-kit et shadcn-chatbot-kit sont des kits de composants gratuits qui s’installent avec la shadcn CLI. Ils conviennent bien à un petit chat au sein d’une application plus vaste, où il vous faut une liste de messages, un champ de saisie et du Markdown, et peu d’autres choses.
Comment choisir
- Vous voulez une application déployable cette semaine et sa stack vous convient : Vercel Chatbot.
- Vous voulez des pièces gratuites et un contrôle total du design : AI Elements de shadcn/ui, ou prompt-kit.
- Votre backend a un état de chat complexe, comme LangGraph : assistant-ui.
- Vous voulez des écrans finis avec les états difficiles gérés, ainsi que des pages de paramètres pour votre produit d’IA : HextaUI.
Ils se combinent bien. La plupart copient du code source shadcn/ui dans votre projet et partagent les mêmes tokens de thème, vous pouvez donc en garder un et remplacer une seule pièce par celle d’un autre. Par exemple, gardez le backend de Vercel Chatbot et remplacez son champ de saisie par Prompt Input, qui lit le même statut useChat.