AI Chat TemplatePro
A complete Next.js chat app on the AI SDK — streaming, tool calls, reasoning, model switching, saved conversations and real error states.
What can I help with?
Ask anything, or try the weather to see a tool call.
A scripted replay of one turn — the six components above are the real ones the template ships, mounted here, but there is no model behind this page. The template you download talks to yours.
Every file in it
The full file list, with line counts — nothing is hidden about what you are getting, only the contents are.
23 files, 1,991 lines
Every file below is real and readable once you have Pro — downloaded as a zip, installed with one shadcn command, or read here in the browser. $49 once, for this and every other Pro item.
Built on these components
All free, all documented on their own pages. The template is what wires them together.
The message input at the heart of an AI chat app — file attachments, model picker, tool toggles, voice, and a send button that turns into stop.
Tool CallHow to show a function call in chat — the arguments sent, the result returned, run status, and an expand toggle.
Thinking / ReasoningA collapsible chain-of-thought panel — show the model's reasoning trace with elapsed time, folded away by default.
Error & RetryWhat to show when a generation fails — a plain-English reason, a retry button, and a countdown for rate limits.
Thinking IndicatorThe loading state before the first token — bouncing dots, a blinking caret, or a labeled status line while the model thinks.
Message ActionsThe action row under an AI reply — copy, regenerate, share and thumbs up/down feedback, revealed on hover.
Running it
- Download the zip and unpack it, or install it with the shadcn command above — either way the app lands in its own directory. Then
npm install. - Add an
AI_GATEWAY_API_KEYto.env.local— one key reaches every model the template uses. npm run dev. To use a provider directly instead, install its package and change one line in the chat route.