The 6 Best Next.js AI Chat UI Kits in 2026 (Compared)

Every AI product now needs a chat surface, and the chat surface is where users decide whether the product feels finished. Smooth token streaming, sources you can actually check, code that opens somewhere better than the middle of a transcript, a stop button that works mid-answer - none of it is hard on its own, but getting all of it to feel right takes weeks. That's why "AI chat UI kit" has become its own category. The options split into two very different kinds of thing, though, and picking the wrong kind costs more time than it saves. This is an honest comparison of six worth your time.

Templates vs. component libraries

Before the list, the split that matters most. A chat template is a whole working app you fork: routes, layout, thread sidebar, settings, a design. A component library gives you the pieces - a message list, a prompt input, a markdown renderer - and you assemble the app yourself. Neither is better. Templates get you to a finished-looking product fastest; libraries fit into an app you already have without bringing their opinions about layout along.

• Token streaming - text rendering as it arrives, with a stop control, not a spinner that dumps the whole reply at once.
• Citations - inline markers you can click to see the quoted source, not a decorative list of links at the bottom.
• A canvas or artifact panel - generated code or documents open beside the chat, the way ChatGPT Canvas and Claude Artifacts work.
• A model seam - one obvious place to point the UI at a real model, without rewriting the components.
• Backend honesty - whether chat history, auth, and model calls are real, or mocked so the UI runs without keys.

The 6 best Next.js AI chat UI kits in 2026

1. Vercel Chatbot - Best free full-stack chat app

Vercel's official open-source Chatbot template is the reference implementation for the AI SDK, and it's a real, working full-stack app: Auth.js for sign-in, Neon Serverless Postgres for chat history, Vercel Blob for file uploads, AI Gateway for model access, and a shadcn/ui interface. It also ships its own artifacts feature for working on generated content beside the chat. If you want a chatbot that is genuinely wired to a database and a model on day one, and you're happy with the stock shadcn look, this is the default answer and it costs nothing.

• Free and open source, maintained by Vercel alongside the AI SDK
• Real backend: auth, Postgres chat history, file storage, AI Gateway
• Needs a database and an AI Gateway key (or Vercel OIDC) to run
• Design is clean but generic shadcn/ui - expect to restyle it to make it yours

2. Relay - Best designed chat UI to fork

Relay is our entry, and it sits in the template column: a complete threaded chat app (home, /app, per-thread routes, settings, login and signup) built on Next.js 16, React 19, and Tailwind v4. Where it differs from Vercel's template is that the interface is the product. Token-by-token streaming with a working stop button, inline citation markers that open a popover with the quoted passage and source link, a Sources card under each reply, and a canvas: give a message an artifact and it opens in a side panel with a live sandboxed preview for HTML (sandbox="allow-scripts" without allow-same-origin, so the preview can run its own scripts but can't read the app's cookies or storage) and a read-only code view for everything else. It also ships a working Cmd+K, Markdown export, share, and a model picker that uses plain "provider/model" strings in the AI Gateway style.

The tradeoff, stated plainly: Relay is a UI kit, not a SaaS starter or a full-stack app. The streaming is real UI behavior running on canned replies - a timer in one hook reveals mock messages a few tokens at a time, and threads are stored in localStorage. No model is called and no key is needed, which is why the whole thing runs the moment you install it. To go live, you replace that one hook's timer with a streamed call to your endpoint; the components only read the hook's output, so nothing else changes. If you want Postgres and auth already connected, Vercel Chatbot is the better pick.

// src/lib/use-chat-stream.ts - the one file you change to go live
// Today: a timer reveals canned segments from mock-data.ts.
// Live: read a ReadableStream from your endpoint instead
// (for example an AI SDK route using an AI Gateway model string).
// ChatWindow only reads visibleSegments and isStreaming,
// so the UI does not change when the source of tokens does.

3. AI Elements - Best component library for AI SDK projects

AI Elements is Vercel's open-source component library for AI interfaces, built on shadcn/ui and designed to pair with the AI SDK's useChat hook. You install it through its CLI or the shadcn registry, and it copies real source files into your project - Conversation, Message, PromptInput, Reasoning, Tool, and many more - so you own and can edit every line. If you're already on shadcn/ui and the AI SDK, this is the most natural way to add a chat surface to an existing app. What it doesn't give you is the app: no thread sidebar, no routes, no layout decisions made for you.

4. assistant-ui - Best for fully custom chat UX

assistant-ui is an MIT-licensed TypeScript/React library of composable chat primitives, with an API modeled on shadcn/ui and cmdk. The library handles the fiddly parts - auto-scrolling, streaming state, accessibility - while you control every pixel of the look. It integrates with the Vercel AI SDK and LangGraph, works with custom backends, and supports generative UI, where tool calls render as your own components. There's also an optional hosted service, assistant-cloud, for chat history. Pick it when your chat UX is unusual enough that a finished template would fight you.

5. CopilotKit - Best for an in-app copilot

CopilotKit solves a slightly different problem: adding an AI copilot inside an existing app rather than building a chat product. Its MIT-licensed React UI package ships three ready layouts - CopilotChat (embedded), CopilotPopup, and CopilotSidebar - plus a headless mode, and the wider framework is built around letting agents read app state and drive generative UI. If your product is a dashboard or editor that needs an assistant in the corner, this fits better than any full-page chat template.

6. prompt-kit - Best lightweight shadcn add-ons

prompt-kit is an open-source set of AI chat components built on shadcn/ui: a prompt input, an auto-scrolling chat container, a markdown renderer, a Shiki-highlighted code block, a response-stream component, and a few more. It's smaller in scope than AI Elements, which is the point - grab the two or three pieces you need, install them with the shadcn CLI, and keep everything else your own.

Side-by-side comparison

How to choose

• You want a free chatbot that's really wired to a database and a model on day one - Vercel Chatbot.
• You want a finished, distinctive chat product UI with streaming, citations, and a canvas, and you'll connect your own model - Relay.
• You already have a shadcn/ui + AI SDK app and want to add a chat surface - AI Elements, or prompt-kit for something lighter.
• Your chat UX is unusual and you want primitives, not opinions - assistant-ui.
• You're adding an assistant to an existing dashboard or editor, not building a chat product - CopilotKit.