Tambo is a generative UI SDK for React. The AI dynamically decides which components to render and what props to pass based on natural language conversations.
Generative UI makes software truly adaptive—your interface responds to what users need, not what you predicted they'd need. Users describe their intent, the software adapts.
Register your components once. The AI agent renders and controls them based on user messages and context.
MCP-native from the ground up — integrates the Model Context Protocol (MCP), a standardized protocol that lets AI models connect to external systems (databases, APIs, files) the same way.
2025-11-07-cheatsheet-demo.mp4
Traditional UIs force users to adapt to your software. Click here, then here, then here. Navigate the menus you designed. Learn your mental model.
Generative UI flips this—software adapts to users:
- Users describe what they want in natural language
- The AI orchestrates components based on intent
- The interface responds dynamically to each request
No rigid navigation flows. No sprawling conditional logic. No "wrong path" errors.
Tambo handles the complexity:
- ✅ AI-driven adaptation (which component to render based on user intent)
- ✅ Streaming (progressive prop updates)
- ✅ State management (persistence across conversation)
- ✅ Error handling (retries, fallbacks)
- ✅ Tool coordination (MCP servers, local functions)
You write:
- Your existing React components
- Zod schemas for props
- React hooks for advanced AI features
That's the entire API.
// Register your chart component once
const components: TamboComponent[] = [{
name: "Graph",
description: "Displays data as charts",
component: Graph,
propsSchema: z.object({ data: z.array(...), type: z.enum(["line", "bar", "pie"]) })
}];
// 10 lines of registration → infinite use cases- Software Adapts to Users - Generative UI responds to what users mean, not just what they click. Your interface eliminates rigid navigation flows and lets users describe what they want in natural language.
- No AI Expertise Needed - If you can write React, you can build generative UIs. Use your existing design system and components.
- MCP-Native - Built-in support for Model Context Protocol means plug-and-play integrations with any MCP server. Your own, or external servers with Linear, Slack.
- Pre-built UI Primitives - Copy/paste production-ready components for forms, charts, maps, messaging, and more. Customize everything.
- Bring Your Own LLM - Works with OpenAI, Anthropic, Google, Mistral, or any OpenAI-compatible provider. Not locked into one vendor.
- Truly Open Source - MIT licensed React SDK and backend. Self-host with full control, or use Tambo Cloud for zero-config deployment.
# 1. Create your app
npx tambo create-app my-tambo-app
cd my-tambo-app
# 2. Choose your deployment (cloud or self-hosted)
npx tambo init
# 3. Start building
npm run devChoose your deployment:
- Tambo Cloud - Free hosted service (sign up for API key)
- Self-hosted - Run your own backend (free, no ongoing costs)
📦 Pre-built component library - Ready-made primitives for every generative UI pattern. Start fast, customize everything.
2025-11-07-ui-component-library.mp4
Don't want to start from scratch? Fork these:
| Template | Description |
|---|---|
| AI Chat with Generative UI | Full-featured chat interface with dynamic component generation |
| AI Analytics Dashboard | Interactive analytics dashboard with AI-powered data visualization |
More templates coming soon. Request a template →
Generative UI with Tambo supports two component patterns:
One-time components (like charts) that the AI renders in response to specific requests, and persistent components (like shopping carts) that update across the conversation as users refine their intent.
AI renders these once in response to user messages. Best for charts, data visualizations, and summary cards.
2025-11-07-generative-form.mp4
Components that persist on the page and update by ID across conversations. The AI modifies them as users refine their requests—perfect for shopping carts, spreadsheets, task boards, or dashboards. Pre-place them in your code, or let the AI generate them dynamically.
2025-11-07-db-thing.mp4
Tell the AI which components it can use. The AI decides when to render each component and provides type-safe props through Zod schemas.
Generative Components - AI creates these on-demand:
const components: TamboComponent[] = [
{
name: "Graph",
description: "Displays data as charts using Recharts library",
component: Graph,
propsSchema: z.object({
data: z.array(z.object({ name: z.string(), value: z.number() })),
type: z.enum(["line", "bar", "pie"]),
}),
},
];→ Learn more about generative components
Interactable Components - Persist and update across conversations:
const InteractableNote = withInteractable(Note, {
componentName: "Note",
description: "A note supporting title, content, and color modifications",
propsSchema: z.object({
title: z.string(),
content: z.string(),
color: z.enum(["white", "yellow", "blue", "green"]).optional(),
}),
});→ Learn more about interactable components
Connects your app to AI and handles streaming, state, and natural language processing.
<TamboProvider
apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
components={components}
>
<Chat />
<InteractableNote id="note-1" title="My Note" content="Start writing..." />
</TamboProvider>Send messages and render AI responses with dynamic components. Props stream in as they're generated.
Send messages:
const { value, setValue, submit, isPending } = useTamboThreadInput();
<input value={value} onChange={(e) => setValue(e.target.value)} />
<button onClick={() => submit()} disabled={isPending}>Send</button>Render AI responses:
const { thread } = useTamboThread();
{
thread.messages.map((message) => (
<div key={message.id}>
{Array.isArray(message.content) ? (
message.content.map((part, i) =>
part.type === "text" ? <p key={i}>{part.text}</p> : null,
)
) : (
<p>{String(message.content)}</p>
)}
{message.renderedComponent}
</div>
));
}→ Learn about threads and messages
Track streaming for progressive loading:
const { streamStatus, propStatus } = useTamboStreamStatus();
// Show spinner until complete
if (!streamStatus.isSuccess) return <Spinner />;
// Or show each prop as it arrives
{
propStatus["title"]?.isSuccess && <h3>{title}</h3>;
}→ Learn more about streaming status
Connect pre-built integrations (Linear, Slack, databases) or your own custom MCP servers.
import { TamboMcpProvider, MCPTransport } from "@tambo-ai/react/mcp";
const mcpServers = [
{
name: "filesystem",
url: "http://localhost:3001/mcp",
transport: MCPTransport.HTTP,
},
];
<TamboProvider components={components}>
<TamboMcpProvider mcpServers={mcpServers}>
<App />
</TamboMcpProvider>
</TamboProvider>;2025-11-07-elicitations.mp4
Supports full MCP protocol: tools, prompts, elicitations, and sampling. Client-side or server-side execution.
Write JavaScript functions that execute in your React app. Useful for DOM manipulation, wrapping fetch calls, or accessing React state without an MCP server.
const tools: TamboTool[] = [
{
name: "getWeather",
description: "Fetches weather for a location",
tool: async (location: string) =>
fetch(`/api/weather?q=${encodeURIComponent(location)}`).then((r) =>
r.json(),
),
toolSchema: z
.function()
.args(z.string())
.returns(
z.object({
temperature: z.number(),
condition: z.string(),
location: z.string(),
}),
),
},
];
<TamboProvider tools={tools} components={components}>
<App />
</TamboProvider>;When to use: DOM interactions, wrapping authenticated fetch requests, or accessing React state. Runs entirely in the browser.
→ Learn more about local tools
Send metadata about user state, app settings, or environment to enrich AI responses.
const selectedItemsHelper = () => ({
key: "selectedItems",
value: `User has selected: ${selectedItems.map((i) => i.name).join(", ")}`,
});
<TamboProvider
contextHelpers={{
selectedItems: selectedItemsHelper,
currentPage: () => ({ key: "page", value: window.location.pathname }),
}}
/>;Pass auth tokens from your provider:
const userToken = useUserToken();
<TamboProvider userToken={userToken}>
<App />
</TamboProvider>;Auto-generate contextual suggestions:
const { suggestions, accept } = useTamboSuggestions({ maxSuggestions: 3 });
suggestions.map((s) => (
<button key={s.id} onClick={() => accept(s)}>
{s.title}
</button>
));- OpenAI (GPT-4.1, GPT-5, O3, and more)
- Anthropic (Claude 3.5, Claude 4.5, and more)
- Google Gemini (1.5 Pro, 2.0 Flash, and more)
- Mistral (Large, Small, Codestral, and more)
- Custom OpenAI-compatible providers
Don't see your favorite? Let us know →
| Feature | Tambo | Vercel AI SDK | CopilotKit | Assistant UI |
|---|---|---|---|---|
| Component orchestration | Generative UI: AI decides which components to render | Manual tool-to-component mapping | Via agent frameworks (LangGraph) | Chat-focused tool UI |
| MCP integration | Built-in from day one | Experimental (v4.2+) | Recently added | Requires AI SDK v5 (experimental) |
| Persistent stateful components | ✅ Interactable components | ❌ | Shared state patterns | ❌ |
| Client-side tool execution | ✅ Declarative, automatic | ❌ (agent-side only) | ❌ | |
| Self-hostable | ✅ MIT (React SDK + backend) | ✅ Apache 2.0 (SDK only) | ✅ MIT | ✅ MIT |
| Hosted option | ✅ Tambo Cloud | ❌ | ✅ CopilotKit Cloud | ✅ Assistant Cloud |
| Model providers | OpenAI, Anthropic, Google, Mistral, custom | OpenAI, Anthropic, Google, Mistral, custom | OpenAI, Anthropic, Google, Mistral, custom | Bring your own |
| Best for | Full app UI orchestration | Flexible streaming & tool abstractions | Complex multi-agent workflows | Production chat interfaces |
Free forever. 5-minute Docker setup. You control everything.
npx tambo init
# Select "Self-hosted" and follow the promptsZero setup. Free tier. Pay as you grow.
- Free: 10,000 messages/month
- Growth: $25/mo - 200k messages + email support
- Enterprise: Custom volume, SLA, SOC 2, HIPAA
- Discord: Join our community for help, feedback, and discussions
- GitHub: Star the repo and contribute
- Twitter/X: Follow @tambo_ai for updates
Real projects from the community:
| Project | Preview | Description | Links |
|---|---|---|---|
| db-thing by @akinloluwami |
 |
AI-powered database design tool. Create schemas through conversation, generate ERDs, get optimization recommendations, and export SQL migrations. | GitHub • Demo |
| CheatSheet by @michaelmagan |
 |
AI-powered spreadsheet editor. Edit cells with natural language, create charts, and connect external data through MCP. | GitHub • Demo |
Built something with Tambo? Open a PR to showcase your project here, or share it in Discord →
Prerequisites:
- Node.js 20.x or higher
- npm 11.x or higher
For contributing to Tambo:
git clone https://github.com/tambo-ai/tambo.git
cd tambo
npm install
turbo devRead our Contributing Guide for details on development workflow, testing, and pull requests.
MIT License - see LICENSE for details.
Both the React SDK and backend (tambo-cloud) are fully open source under MIT.
Note for AI/LLM agents: For comprehensive documentation in a format optimized for language models, visit docs.tambo.co/llms.txt