shadcn/ui AI chat templates
A shadcn/ui AI chat template is chat UI built from shadcn/ui components that you copy into your own project. Some give you pieces, some give you a whole app. This page compares seven options as of October 2026, and lists what a chat has to handle before you ship it.
What a chat template has to handle
The message list and the composer take an afternoon. The states around them take weeks. Check a template against this list before you choose it:
- Streaming that reads smoothly, without half-typed Markdown, broken tables or unclosed code fences on screen.
- Stop, retry and a reply that fails halfway, each with its own message and next step.
- Editing an earlier message or regenerating a reply, without losing the version that was there before.
- Scrolling that follows new text until the reader scrolls up, and a way back down.
- Tool calls that show what the model did, and approvals that can pause a reply until someone answers.
- Attachments with upload progress, failures and retry, plus pasted text and dropped files.
- A composer that doesn’t send halfway through Japanese, Chinese or Korean input, and keeps the draft if the page reloads.
- An empty state, a chat history, and a layout that still works on a phone with the keyboard open.
The options at a glance
| shadcn/ui AI chat templates and kits | What you get | License | Backend |
|---|---|---|---|
| HextaUI | Finished chat screens and a complete chat app | MIT components, paid Pro blocks, free Prompt Input | Any, using AI SDK message parts |
| Vercel Chatbot | A full Next.js app with sign-in and a database | Apache 2.0 | AI SDK |
| AI Elements (shadcn/ui) | Patterns you compose | MIT | AI SDK in the examples |
| AI Elements (Vercel) | Components, deprecated at the end of November 2026 | Apache 2.0 | AI SDK |
| assistant-ui | Chat primitives with state management | MIT | AI SDK, LangGraph or your own |
| prompt-kit | Components for AI apps | MIT | Any |
| shadcn-chatbot-kit | Chat components | MIT | AI SDK |
HextaUI
HextaUI is a component library for shadcn/ui with Pro blocks for AI products. HextaAI is the complete chat app built from them: a chat sidebar, a thread with versions and checkpoints, thinking with sources, tool calls with approvals, artifacts beside the chat, streamed Markdown and voice mode. The blocks handle the states on the list above, and each one also works on its own. Choose it when you want the screens finished and would rather spend your time on the product.
The composer, Prompt Input, is free. Install it without an account:
pnpm dlx shadcn@latest add https://hextaui.com/r/pro/prompt-input.jsonVercel Chatbot
Vercel Chatbot, formerly called AI Chatbot, is a complete Next.js app with sign-in, a Postgres database, saved chats and the AI SDK. Choose it when you want a working product to deploy today and are happy with its design and its stack.
AI Elements
AI Elements from shadcn/ui is a set of patterns, such as Chat, Message, Tool and Prompt Input, that you copy into your project. It replaces Vercel’s AI Elements, which will be deprecated at the end of November 2026. Choose it when you want free, well-made pieces and plan to build the screens yourself. See HextaUI vs AI Elements for a piece-by-piece comparison.
assistant-ui
assistant-ui is a React library of chat primitives, such as a thread and a composer, with runtimes that manage chat state for the AI SDK, LangGraph or your own backend. Choose it when the hard part is state rather than the interface, for example an agent on LangGraph.
prompt-kit and shadcn-chatbot-kit
prompt-kit and shadcn-chatbot-kit are free component kits that install with the shadcn CLI. They are a good fit for a small chat inside a larger app, where you need a message list, a prompt box and Markdown, and little else.
How to choose
- You want a deployable app this week and its stack suits you: Vercel Chatbot.
- You want free pieces and full control of the design: AI Elements from shadcn/ui, or prompt-kit.
- Your backend has complex chat state, such as LangGraph: assistant-ui.
- You want finished screens with the hard states handled, plus settings pages for your AI product: HextaUI.
They mix well. Most of them copy shadcn/ui source into your project and share the same theme tokens, so you can keep one and replace a single piece with another. For example, keep the Vercel Chatbot backend and swap its composer for Prompt Input, which reads the same useChat status.