Don't invent the chat UI

Don't invent the chat UI

Don't invent the chat UI.

shadcn shipped the components for it, then a full template so you don't have to wire them yourself.

It's at github.com/shadcn-ui/chatbot-template. Next.js, the AI SDK, the new shadcn chat components, Vercel AI Gateway. Free, open source.

Clone it, drop in an API key, run pnpm dev. You're in a working chat.

What you get without building it

A questionnaire that keeps your answers when you hit Previous. Streaming that doesn't steal the viewport while the reply comes in - you read from the top, then scroll, or hit the down arrow when you want the end. Model switching. Tool calling. Attachments. Markdown. Light and dark.

That's the kind of thing you skip when you start from a blank file. State inside the tools. A scroller that lets you actually read. The boring parts of chat, already done.

I use it like this

I already have a chat window. I don't need another one on localhost.

I need a repo I can paste into an agent:

Use this chatbot repo as a reference to create an AI chat in our project. We'll use shadcn chat components.

The agent reads the structure, the tools, the parts, and builds it inside your app. You own the code because it's shadcn.

One thing the README is honest about: /api/chat is public. Every request spends AI Gateway credits. Fine on your machine. Rate-limit it and cap spend before anyone else can hit it.

One thing to actually do this week

Clone it and click around for ten minutes. Or skip that and point your agent at the repo on the project you're already shipping.

git clone https://github.com/shadcn-ui/chatbot-template
cd chatbot-template
pnpm install

Put an AI_GATEWAY_API_KEY in .env.local (or vercel link and vercel env pull) and run pnpm dev.

You don't have to ship the template. Ten minutes in it will teach you more about chat UX than another weekend of building one from zero.

And go star it

It's sitting under a thousand stars. For what it is, that's too low. It's free, it's open source, and it comes from the same place as the components you're already using.

github.com/shadcn-ui/chatbot-template - a star helps.