Generative UI toolkit for React
Register components the Tambo agent renders based on user messages.
Tambo is an open-source toolkit for building AI-powered React apps. Register your components, and the agent decides which one to render based on user messages.
"Show me sales by region" renders your <Chart>. "Add a task" updates your <TaskBoard>. The agent picks the component and streams the props.
What's included
- React SDK — Hooks and providers for thread management, streaming, and component rendering
- Built-in agent — No external framework required. Drop it into your app and go.
- Streaming and state — Progressive prop updates, message history, error handling
- MCP support — Connect to databases, APIs, and external systems via Model Context Protocol
Self-host the backend or use Tambo Cloud for fast deployment.
How Tambo works
Two component patterns, one toolkit.
Generative components
Rendered once in response to a message. Use these for charts, data visualizations, summary cards—anything that displays a result.
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"]),
}),
},
];Interactable components
Persist on the page and update by ID across conversations. Use these for shopping carts, task boards, spreadsheets, dashboards. Anything users interact with over time.
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(),
}),
});Core workflow
1. Register your components
Tell the agent which components it can use:
import { TamboProvider } from "@tambo-ai/react";
export function Home() {
return (
<TamboProvider
components={myTamboComponents}
tools={myTamboTools}
apiKey={tamboApiKey}
>
<MyAiApp />
</TamboProvider>
);
}For apps with signed-in users, pass a userToken to enable per-user auth. See User Authentication for details.
2. Use Tambo hooks
Send messages and render responses:
const { messages } = useTambo();
const { value, setValue, submit, isPending } = useTamboThreadInput();
// Render messages with components
{
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>
));
}3. Add MCP integrations
Connect pre-built integrations or your own MCP servers:
import { MCPTransport } from "@tambo-ai/react/mcp";
const mcpServers = [
{
name: "filesystem",
url: "http://localhost:8261/mcp",
transport: MCPTransport.HTTP,
},
];
<TamboProvider components={components} mcpServers={mcpServers}>
<App />
</TamboProvider>;Pre-built components
Production-ready components you can install via CLI: