KI-Chat-Templates für shadcn/ui
Ein KI-Chat-Template für shadcn/ui ist eine Chat-Oberfläche aus shadcn/ui-Komponenten, die du in dein eigenes Projekt kopierst. Manche liefern dir Bausteine, manche eine ganze App. Diese Seite vergleicht sieben Optionen mit Stand Oktober 2026 und listet auf, was ein Chat abdecken muss, bevor du ihn auslieferst.
Was ein Chat-Template abdecken muss
Nachrichtenliste und Composer sind an einem Nachmittag gebaut. Die Zustände drumherum dauern Wochen. Prüfe ein Template anhand dieser Liste, bevor du dich entscheidest:
- Streaming, das sich flüssig liest, ohne halb getipptes Markdown, kaputte Tabellen oder offene Codeblöcke auf dem Bildschirm.
- Stoppen, Wiederholen und eine Antwort, die mittendrin fehlschlägt, jeweils mit eigener Meldung und nächstem Schritt.
- Eine frühere Nachricht bearbeiten oder eine Antwort neu generieren, ohne die vorherige Version zu verlieren.
- Scrollen, das neuem Text folgt, bis der Leser nach oben scrollt, und ein Weg zurück nach unten.
- Tool-Aufrufe, die zeigen, was das Modell getan hat, und Freigaben, die eine Antwort anhalten können, bis jemand reagiert.
- Anhänge mit Upload-Fortschritt, Fehlern und erneutem Versuch, dazu eingefügter Text und hineingezogene Dateien.
- Ein Composer, der nicht mitten in einer Eingabe auf Japanisch, Chinesisch oder Koreanisch sendet und den Entwurf behält, wenn die Seite neu lädt.
- Ein Leerzustand, ein Chatverlauf und ein Layout, das auch auf dem Handy mit geöffneter Tastatur funktioniert.
Die Optionen auf einen Blick
| KI-Chat-Templates und Kits für shadcn/ui | Was du bekommst | Lizenz | Backend |
|---|---|---|---|
| HextaUI | Fertige Chat-Screens und eine vollständige Chat-App | MIT-Komponenten, kostenpflichtige Pro-Blöcke, kostenloses Prompt Input | Beliebig, über Message-Parts des AI SDK |
| Vercel Chatbot | Eine vollständige Next.js-App mit Anmeldung und Datenbank | Apache 2.0 | AI SDK |
| AI Elements (shadcn/ui) | Patterns, die du selbst zusammensetzt | MIT | AI SDK in den Beispielen |
| AI Elements (Vercel) | Komponenten, werden Ende November 2026 eingestellt | Apache 2.0 | AI SDK |
| assistant-ui | Chat-Primitives mit State-Management | MIT | AI SDK, LangGraph oder ein eigenes |
| prompt-kit | Komponenten für KI-Apps | MIT | Beliebig |
| shadcn-chatbot-kit | Chat-Komponenten | MIT | AI SDK |
HextaUI
HextaUI ist eine Komponentenbibliothek für shadcn/ui mit Pro-Blöcken für KI-Produkte. HextaAI ist die vollständige Chat-App, die daraus gebaut ist: eine Chat-Sidebar, ein Thread mit Versionen und Checkpoints, Thinking mit Quellen, Tool-Aufrufe mit Freigaben, Artifacts neben dem Chat, gestreamtes Markdown und Sprachmodus. Die Blöcke decken die Zustände aus der Liste oben ab, und jeder funktioniert auch für sich allein. Nimm es, wenn du die Screens fertig haben und deine Zeit lieber ins Produkt stecken willst.
Der Composer, Prompt Input, ist kostenlos. Installiere ihn ohne Konto:
pnpm dlx shadcn@latest add https://hextaui.com/r/pro/prompt-input.jsonVercel Chatbot
Vercel Chatbot, früher AI Chatbot genannt, ist eine vollständige Next.js-App mit Anmeldung, Postgres-Datenbank, gespeicherten Chats und dem AI SDK. Nimm es, wenn du heute ein funktionierendes Produkt deployen willst und mit seinem Design und seinem Stack zufrieden bist.
AI Elements
AI Elements von shadcn/ui ist eine Sammlung von Patterns wie Chat, Message, Tool und Prompt Input, die du in dein Projekt kopierst. Es ersetzt Vercels AI Elements, das Ende November 2026 eingestellt wird. Nimm es, wenn du kostenlose, gut gemachte Bausteine willst und die Screens selbst bauen möchtest. Unter HextaUI vs. AI Elements findest du einen Vergleich Baustein für Baustein.
assistant-ui
assistant-ui ist eine React-Bibliothek mit Chat-Primitives wie Thread und Composer, dazu Runtimes, die den Chat-State für das AI SDK, LangGraph oder dein eigenes Backend verwalten. Nimm es, wenn der schwierige Teil der State ist und nicht die Oberfläche, zum Beispiel bei einem Agenten auf LangGraph.
prompt-kit und shadcn-chatbot-kit
prompt-kit und shadcn-chatbot-kit sind kostenlose Komponenten-Kits, die sich mit der shadcn CLI installieren lassen. Sie passen gut zu einem kleinen Chat innerhalb einer größeren App, in dem du eine Nachrichtenliste, ein Prompt-Feld und Markdown brauchst und wenig mehr.
So entscheidest du
- Du willst diese Woche eine deploybare App, und ihr Stack passt zu dir: Vercel Chatbot.
- Du willst kostenlose Bausteine und volle Kontrolle über das Design: AI Elements von shadcn/ui oder prompt-kit.
- Dein Backend hat komplexen Chat-State, etwa mit LangGraph: assistant-ui.
- Du willst fertige Screens mit gelösten schwierigen Zuständen plus Einstellungsseiten für dein KI-Produkt: HextaUI.
Sie lassen sich gut kombinieren. Die meisten kopieren shadcn/ui-Quellcode in dein Projekt und teilen dieselben Theme-Tokens, sodass du eines behalten und einen einzelnen Baustein durch einen anderen ersetzen kannst. Behalte zum Beispiel das Backend von Vercel Chatbot und tausche dessen Composer gegen Prompt Input aus, das denselben useChat-Status liest.