L’AI Elements de Vercel est déprécié. Voici les alternatives pour une interface de chat IA shadcn/ui
L’AI Elements de Vercel est déprécié fin novembre 2026. Ce qui le remplace, quoi faire du code que vous avez copié, et cinq options de chat IA shadcn/ui comparées.
Preet Suthar · · 5 min de lecture
- AI
- shadcn/ui
- React
- Next.js
Si vous avez construit un chat IA avec l’AI Elements de Vercel cette année, le dépôt porte désormais un avis : la bibliothèque sera dépréciée fin novembre 2026, remplacée par AI Elements de shadcn/ui.
Cet article couvre ce que cela signifie pour votre code, ce qu’est le remplaçant, et les autres options si vous démarrez une interface de chat IA avec shadcn/ui fin 2026. Je maintiens l’une de ces options, HextaUI, je dirai donc où elle convient et où elle ne convient pas.
D’abord : votre code continue de fonctionner
AI Elements était un registre à la shadcn. Les composants étaient copiés dans votre projet. Il n’y a aucun paquet qui cesserait de recevoir des mises à jour, donc rien ne casse le 1er décembre. La dépréciation signifie plus de nouveaux composants ni de correctifs de la part de Vercel, et les docs finiront par pointer ailleurs.
Vous avez le temps. Ne précipitez pas une migration cette semaine.
Ce qui le remplace
En octobre 2026, shadcn/ui a publié son propre AI Elements : 21 patterns pour interfaces agentiques construits à partir de composants shadcn/ui. Chat, Prompt Input, Reasoning, Tool, Plan, Subagent et d’autres. Chaque page de pattern montre comment le rendre à partir des parties de message de l’AI SDK. Il n’y a pas de paquet. Vous copiez chaque pattern.
Ils arrivent avec deux nouveaux composants, Trace et Code Block, qui fonctionnent avec Base UI, React Aria et Radix.
La migration depuis la bibliothèque de Vercel est pensée pour être peu contraignante. Les noms d’export et les props sont conservés là où le pattern a été reconstruit, et chaque page de pattern inclut un prompt de migration que vous pouvez confier à un agent de codage IA. Les éléments qui n’ont pas été reconstruits ne sont pas couverts, comparez donc la liste à ce que vous utilisez.
La vraie différence entre pièces et écrans
Chaque option ci-dessous tombe dans l’un de deux camps, et savoir lequel vous voulez fait gagner une semaine.
Les pièces vous donnent un Message, un Prompt Input, un composant Tool. Vous concevez l’écran et décidez de ce qui se passe quand une réponse échoue, quand un stream est arrêté, quand un outil a besoin d’une approbation, quand un upload meurt. Les deux versions d’AI Elements, et prompt-kit, sont des pièces.
Les écrans vous donnent le fil de chat, le composeur, la liste d’appels d’outils et les pages de réglages avec ces décisions déjà prises. Vous branchez les données et restylez avec vos tokens de thème. Les blocks HextaUI et les applications complètes comme le template AI Chatbot de Vercel sont des écrans.
Les pièces sont gratuites et flexibles. Les écrans sont plus rapides et plus tranchés. Aucun des deux n’a tort.
Cinq options comparées
1. AI Elements de shadcn/ui
Gratuit, MIT, maintenu par l’équipe shadcn, conçu pour Base UI, React Aria et Radix. Des pièces, pas des écrans. Le choix naturel par défaut si vous voulez composer le vôtre et rester sur le registre le plus utilisé. Nouveau depuis octobre 2026, attendez-vous donc à voir la liste de patterns s’allonger et les aspérités se polir dans les mois à venir.
2. prompt-kit
Gratuit, MIT, s’installe avec la CLI shadcn. Prompt Input, Message, Reasoning, Chain of Thought, Tool, File Upload et des blocs d’exemple, dont une application de chat avec une barre latérale d’historique. Des pièces, avec de bons exemples. Construit sur Radix, donc un projet Base UI porte les deux couches de primitives tant que vous l’utilisez.
3. assistant-ui
Gratuit, MIT, avec un cloud payant optionnel pour les fils enregistrés. Celui-ci est d’une autre nature : c’est un framework de chat avec son propre runtime qui gère la conversation, plus des primitives headless et des composants stylés qui le lisent. Des adaptateurs pour l’AI SDK, LangGraph, LangChain, AG-UI et d’autres. Choisissez-le si vous voulez que le runtime possède l’état du chat. Passez votre chemin si votre état vit déjà dans useChat ou dans votre propre store et que vous ne voulez rien qui enveloppe votre application.
4. shadcn-chatbot-kit et le template AI Chatbot
Le shadcn-chatbot-kit de Blazity est un ensemble plus réduit de composants de chatbot. L’AI Chatbot de Vercel est une application Next.js complète avec connexion et base de données, la référence canonique si vous voulez voir chaque pièce câblée. Les deux valent la lecture même si vous ne les adoptez pas.
5. Les blocks HextaUI
Des écrans. Un Chat Thread où les réponses en échec proposent Try again, où les réponses interrompues l’indiquent, et où les modifications et nouvelles tentatives deviennent des versions entre lesquelles vous pouvez basculer. Des Tool Calls avec chaque état d’outil de l’AI SDK, y compris les approbations avec une raison « fais plutôt ceci ». Streaming et Markdown qui n’affichent jamais de syntaxe à moitié tapée. Un Prompt Input sûr avec la saisie japonaise et chinoise, qui affiche la progression des uploads et une nouvelle tentative, met en file d’attente les messages tapés pendant une réponse et conserve les brouillons entre les rechargements. Plus les écrans autour d’un produit de chat : réglages, modèles, clés d’API, facturation, équipe, sécurité.
Les composants en dessous sont gratuits et MIT. Les blocks IA sont HextaUI Pro, un paiement unique avec tous les blocks ultérieurs inclus, et Prompt Input est gratuit. Construit sur Base UI, lit les parties de message de l’AI SDK sans importer le SDK. Pas pour vous si vous voulez tout gratuit, ou si vous voulez Radix.
En un coup d’œil
| En un coup d’œil | Catégorie | Prix | Primitives | AI SDK |
|---|---|---|---|---|
| AI Elements (shadcn/ui) | Pièces | Gratuit | Base UI, React Aria, Radix | Utilisé dans les exemples |
| AI Elements (Vercel) | Pièces | Gratuit | Radix | Requis par la configuration |
| prompt-kit | Pièces | Gratuit | Radix | Optionnel |
| assistant-ui | Runtime | Gratuit, cloud payant | Propre | Adaptateur |
| HextaUI | Écrans | Composants gratuits, blocks payés une fois | Base UI | Optionnel, même forme de parties |
Comment décider
- Vous partez de zéro et voulez composer le vôtre : AI Elements de shadcn/ui.
- Vous avez déjà l’AI Elements de Vercel dans votre arborescence : gardez-le jusqu’à avoir besoin de quelque chose de nouveau, puis migrez pattern par pattern avec les prompts de migration.
- Vous voulez un runtime qui gère les fils, les branches et la persistance pour vous : assistant-ui.
- Vous voulez le chat et les écrans produit autour déjà faits, avec les états d’échec gérés, et payer une fois ne vous dérange pas : HextaUI.
Tous copient la source dans votre projet et utilisent les tokens de thème shadcn/ui, vous pouvez donc les mélanger un écran à la fois. La seule réserve concerne les primitives : mélanger un kit basé sur Radix dans un projet Base UI fonctionne, mais vous livrez les deux.
Je tiens une comparaison plus détaillée avec la correspondance complète pièce par pièce sur hextaui.com/compare/ai-elements, et un tour d’horizon à sept entrées des templates de chat IA shadcn.
FAQ
Quand exactement l’AI Elements de Vercel est-il déprécié ? Le dépôt indique fin novembre 2026.
Mes composants AI Elements existants vont-ils casser ? Non. Ils vivent dans votre dépôt. Ils cessent de recevoir des mises à jour.
Le nouvel AI Elements est-il un paquet ? Non. C’est un ensemble de patterns que vous copiez avec la CLI shadcn, le même modèle que shadcn/ui lui-même.
Puis-je utiliser les blocks HextaUI sans l’AI SDK de Vercel ? Oui. Ils prennent les messages en props dans la forme en parties de l’AI SDK, et n’importent pas le SDK.