Generative UI TemplatePro
A chat where the model renders components: a two-sided registry as the trust boundary, streaming props, skeletons from partial input, and prose when a name is unknown.
Three widgets and a question
Weather, flights, or a chart — nothing else. Ask for anything outside that set and it answers in prose, which is the point.
The third widget is the one worth reading: showItinerary is a name the server can produce and this build cannot draw, so it degrades to prose with the raw result behind a toggle rather than to a blank card. The question at the bottom is live — it is a client-side tool, and it waits for you. Everything else is scripted; there is no model behind this page.
Every file in it
The full file list, with line counts — nothing is hidden about what you are getting, only the contents are.
27 files, 2,161 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.
Render a React component from a tool result instead of text — a skeleton in the widget's own shape, and a text fallback when the client has no renderer.
Prompt InputThe 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.
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.
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.