Vercels AI Elements wird eingestellt. Das sind die Alternativen für KI-Chat-UIs mit shadcn/ui
Vercels AI Elements wird Ende November 2026 eingestellt. Was es ersetzt, was du mit kopiertem Code machst, und fünf shadcn/ui-Optionen für KI-Chats im Vergleich.
Preet Suthar · · 5 Min. Lesezeit
- AI
- shadcn/ui
- React
- Next.js
Wenn du dieses Jahr einen KI-Chat mit Vercels AI Elements gebaut hast: Das Repository trägt jetzt einen Hinweis, dass die Bibliothek Ende November 2026 eingestellt und durch AI Elements von shadcn/ui ersetzt wird.
Dieser Beitrag behandelt, was das für deinen Code bedeutet, was der Ersatz ist und welche anderen Optionen es gibt, wenn du Ende 2026 eine KI-Chat-UI mit shadcn/ui anfängst. Ich pflege eine dieser Optionen, HextaUI, also sage ich, wo sie passt und wo nicht.
Zuerst: Dein Code funktioniert weiter
AI Elements war eine Registry im shadcn-Stil. Die Komponenten wurden in dein Projekt kopiert. Es gibt kein Paket, das keine Updates mehr bekommen könnte, also geht am 1. Dezember nichts kaputt. Die Einstellung bedeutet keine neuen Komponenten und keine Fixes mehr von Vercel, und die Docs werden irgendwann woandershin zeigen.
Du hast Zeit. Überstürze diese Woche keine Migration.
Was es ersetzt
Im Oktober 2026 hat shadcn/ui seine eigenen AI Elements veröffentlicht: 21 Patterns für agentische Oberflächen, gebaut aus shadcn/ui-Komponenten. Chat, Prompt Input, Reasoning, Tool, Plan, Subagent und mehr. Jede Pattern-Seite zeigt, wie man es aus AI-SDK-Message-Parts rendert. Es gibt kein Paket. Du kopierst jedes Pattern hinein.
Sie erscheinen zusammen mit zwei neuen Komponenten, Trace und Code Block, die mit Base UI, React Aria und Radix funktionieren.
Die Migration von der Vercel-Bibliothek soll reibungsarm sein. Exportnamen und Props bleiben erhalten, wo das Pattern nachgebaut wurde, und jede Pattern-Seite enthält einen Migrations-Prompt, den du einem KI-Coding-Agenten geben kannst. Elemente, die nicht nachgebaut wurden, sind nicht abgedeckt, gleiche die Liste also mit dem ab, was du nutzt.
Der ehrliche Unterschied zwischen Einzelteilen und Screens
Jede Option unten gehört in eines von zwei Lagern, und zu wissen, welches du willst, spart eine Woche.
Einzelteile geben dir eine Message, einen Prompt Input, eine Tool-Komponente. Du entwirfst den Screen und entscheidest, was passiert, wenn eine Antwort fehlschlägt, ein Stream gestoppt wird, ein Tool eine Freigabe braucht, ein Upload abbricht. Beide Versionen von AI Elements und prompt-kit sind Einzelteile.
Screens geben dir den Chat-Thread, den Composer, die Tool-Call-Liste und die Einstellungsseiten mit diesen Entscheidungen schon getroffen. Du schließt Daten an und stylst mit deinen Theme-Tokens um. Die Blocks von HextaUI und komplette Apps wie Vercels AI-Chatbot-Template sind Screens.
Einzelteile sind kostenlos und flexibel. Screens sind schneller und haben eine Meinung. Keins von beiden ist falsch.
Fünf Optionen im Vergleich
1. AI Elements von shadcn/ui
Kostenlos, MIT, vom shadcn-Team gepflegt, gebaut für Base UI, React Aria und Radix. Einzelteile, keine Screens. Der natürliche Standard, wenn du selbst zusammensetzen und auf der meistgenutzten Registry bleiben willst. Neu seit Oktober 2026, rechne also damit, dass die Pattern-Liste wächst und die Kanten in den nächsten Monaten abgeschliffen werden.
2. prompt-kit
Kostenlos, MIT, installiert sich mit der shadcn CLI. Prompt Input, Message, Reasoning, Chain of Thought, Tool, File Upload und Beispiel-Blocks, darunter eine Chat-App mit Verlaufs-Sidebar. Einzelteile, mit guten Beispielen. Auf Radix gebaut, ein Base-UI-Projekt trägt also beide Primitive-Schichten, solange du es nutzt.
3. assistant-ui
Kostenlos, MIT, mit optionaler bezahlter Cloud für gespeicherte Threads. Das hier ist von anderer Art: ein Chat-Framework mit eigener Runtime, die die Konversation verwaltet, plus Headless-Primitives und gestylte Komponenten, die daraus lesen. Adapter für das AI SDK, LangGraph, LangChain, AG-UI und andere. Nimm es, wenn die Runtime den Chat-State besitzen soll. Lass es, wenn dein State schon in useChat oder deinem eigenen Store liegt und du nichts willst, das deine App umschließt.
4. shadcn-chatbot-kit und das AI-Chatbot-Template
Blazitys shadcn-chatbot-kit ist eine kleinere Sammlung von Chatbot-Komponenten. Vercels AI Chatbot ist eine komplette Next.js-App mit Anmeldung und Datenbank, die kanonische Referenz, wenn du jedes Teil verdrahtet sehen willst. Beide lohnen sich zum Lesen, auch wenn du sie nicht übernimmst.
5. HextaUI-Blocks
Screens. Ein Chat Thread, in dem fehlgeschlagene Antworten „Try again“ anbieten, gestoppte Antworten das anzeigen und Bearbeitungen und neue Versuche zu Versionen werden, zwischen denen du wechseln kannst. Tool Calls mit jedem AI-SDK-Tool-Zustand, einschließlich Freigaben mit einem „do this instead“-Grund. Streaming und Markdown, die nie halb getippte Syntax zeigen. Ein Prompt Input, der mit japanischer und chinesischer Eingabe sicher ist, Upload-Fortschritt und Retry zeigt, während einer Antwort getippte Nachrichten in die Warteschlange stellt und Entwürfe über Reloads hinweg behält. Dazu die Screens rund um ein Chat-Produkt: Einstellungen, Modelle, API-Keys, Abrechnung, Team, Sicherheit.
Die Komponenten darunter sind kostenlos und MIT. Die KI-Blocks sind HextaUI Pro, eine Einmalzahlung mit jedem späteren Block inklusive, und Prompt Input ist kostenlos. Auf Base UI gebaut, liest AI-SDK-Message-Parts, ohne das SDK zu importieren. Nichts für dich, wenn du alles kostenlos willst oder Radix brauchst.
Auf einen Blick
| Auf einen Blick | Lager | Preis | Primitives | AI SDK |
|---|---|---|---|---|
| AI Elements (shadcn/ui) | Einzelteile | Kostenlos | Base UI, React Aria, Radix | In Beispielen verwendet |
| AI Elements (Vercel) | Einzelteile | Kostenlos | Radix | Vom Setup vorgegeben |
| prompt-kit | Einzelteile | Kostenlos | Radix | Optional |
| assistant-ui | Runtime | Kostenlos, Cloud kostenpflichtig | Eigene | Adapter |
| HextaUI | Screens | Komponenten kostenlos, Blocks einmalig bezahlt | Base UI | Optional, gleiche Parts-Struktur |
Wie du dich entscheidest
- Du fängst neu an und willst selbst zusammensetzen: AI Elements von shadcn/ui.
- Du hast Vercels AI Elements schon im Projekt: Behalte es, bis du etwas Neues brauchst, und wechsle dann Pattern für Pattern mit den Migrations-Prompts.
- Du willst eine Runtime, die Threads, Verzweigungen und Persistenz für dich verwaltet: assistant-ui.
- Du willst den Chat und die Produkt-Screens drumherum fertig haben, mit behandelten Fehlerzuständen, und einmal zu zahlen ist für dich in Ordnung: HextaUI.
Alle kopieren Quellcode in dein Projekt und nutzen die shadcn/ui-Theme-Tokens, du kannst sie also Screen für Screen mischen. Der einzige Vorbehalt sind die Primitives: Ein Radix-basiertes Kit in einem Base-UI-Projekt funktioniert, aber du lieferst beide aus.
Einen ausführlicheren Vergleich mit der vollständigen Zuordnung Teil für Teil pflege ich unter hextaui.com/compare/ai-elements, dazu einen Blick auf sieben shadcn-KI-Chat-Templates.
Häufige Fragen
Wann genau wird Vercels AI Elements eingestellt? Laut Repository Ende November 2026.
Gehen meine bestehenden AI-Elements-Komponenten kaputt? Nein. Sie liegen in deinem Repository. Sie bekommen nur keine Updates mehr.
Ist das neue AI Elements ein Paket? Nein. Es ist eine Sammlung von Patterns, die du mit der shadcn CLI hineinkopierst, dasselbe Modell wie shadcn/ui selbst.
Kann ich HextaUI-Blocks ohne das Vercel AI SDK nutzen? Ja. Sie nehmen Nachrichten als Props in der Parts-Struktur des AI SDK entgegen und importieren das SDK nicht.