Tambo Template is a starter Next.js 15 application that integrates the Tambo AI SDK (the @tambo-ai/react package) so developers can build generative UI/UX where an AI model dynamically creates and controls React components in real time. It ships with three routes: a home page with a setup checklist, a full chat interface with MCP support and voice input, and an interactables demo where an AI controls a settings panel. The project is made by the Tambo team and hosted on GitHub with 35 stars.
What is the Tambo Template?
The Tambo Template is a bootstrapped Next.js project specifically designed for building AI-powered, generative user interfaces. It runs on Next.js 15 with the App Router and React 19, styled with Tailwind CSS v4. As input, it takes a free Tambo API key (obtained at tambo.co/dashboard); as output, it provides a fully functional chat application that can render React components on demand from AI instructions. The template also includes a library of pre-built components, tools, and MCP (Model Context Protocol) integrations to accelerate development.
What makes the Tambo Template stand out?
- Generative components — AI can dynamically render registered React components. Two examples are included: Graph (a Recharts-based bar/line/pie chart) and DataCard (clickable cards with links and descriptions).
- Tools system — The template registers two sample tools:
countryPopulation(filterable by continent, with sorting and limits) andglobalPopulation(with year range filtering), both exposed to the AI model. - MCP support — Full Model Context Protocol integration includes an in-app modal to configure MCP servers over HTTP/SSE transport, plus browsing and insertion of MCP prompts, resources, and an elicitation UI for multi-step forms.
- Voice input — A DictationButton component provides speech-to-text using the
useTamboVoicehook. - Interactables — Components wrapped with
withTamboInteractablelet the AI control their state directly; the demo shows a settings panel updating in real time. - Streaming responses — Real-time streaming of AI-generated content with progressive UI updates and generation-stage indicators.
- Thread management — A thread history sidebar with search, switching, and creation of new threads.
- Tech stack — Built with Next.js 15 App Router, React 19, Tailwind CSS v4, Recharts, TipTap rich text, Zod validation, and Framer Motion, with scripts for dev, build, start, and lint.
Who should use the Tambo Template?
Developers who want to build AI chat interfaces on Next.js will find this a ready-made starting point. Teams evaluating generative UI/UX — where AI controls components — can use the interactables demo as a reference. Developers integrating MCP servers into React applications get a working client implementation out of the box. Frontend engineers who want to experiment with the Tambo platform can quickly set up a running app and extend it.
What can you do with the Tambo Template?
- Build a customer support chat with live data visualizations: Connect the included Graph component and the population tools to produce dynamic charts from user queries.
- Create an AI-controlled dashboard: Use the
withTamboInteractablewrapper to let an AI fill in and adjust form fields, filtering controls, or other stateful UI elements. - Prototype MCP-based workflows: Configure any MCP server through the in-app modal and test elicitation forms for multi-step data gathering.
- Extend with custom components and tools: Register your own components using a Zod schema and add tools with input/output schemas, or install pre-built components via
npx tambo add graph.
How does the Tambo Template work?
Getting started involves four steps: create a project with npm create-tambo@latest my-tambo-app, install dependencies with npm install, initialize your API key via npx tambo init (or rename example.env.local to .env.local and paste the key), then run npm run dev. The app's root layout uses the Geist font, and the chat page wraps its children in a TamboProvider that receives the API key, registered components, tools, MCP servers, and a user key. Registration of components and tools happens centrally in src/lib/tambo.ts.
FAQ
Does the Tambo Template require an API key?
Yes. The template reads an API key from NEXT_PUBLIC_TAMBO_API_KEY. You can get a free key at tambo.co/dashboard and either set it through npx tambo init or by copying example.env.local to .env.local and editing that file.
What Next.js and React versions does it use?
It uses Next.js 15 with the App Router and React 19. The styling is Tailwind CSS v4, and charts are rendered with Recharts.
What is the Model Context Protocol support?
The template includes a full MCP client. You can add MCP servers through the in-app modal (HTTP/SSE transport), browse and insert MCP prompts/resources, and use elicitation forms for parameter collection.
Is the template free to use?
The template's source code is publicly available on GitHub, and the required Tambo API key is free to obtain from tambo.co/dashboard. The repository shows 35 stars, indicating an active community.
What limitations does the template have?
It is tightly coupled to the Tambo platform, so it is not a general-purpose Next.js starter. You need a Tambo API key to run the chat features, and the included tools are population data demos rather than production datasets.
