Tambo

// Overview

Tambo is an open-source React toolkit for building agents that render UI, an approach often called generative UI. You register your existing components with Zod schemas, and the agent picks the right one for a request and streams its props. Asking "Show me sales by region" can render your <Chart>, while "Add a task" updates your <TaskBoard>.

It is a fullstack solution: a React SDK plus a backend that manages conversation state and agent execution. Tambo runs the LLM conversation loop for you, and you bring your own provider key (OpenAI, Anthropic, Gemini, Mistral, or any OpenAI-compatible provider). You can run it on the hosted Tambo Cloud or self-host the same backend with Docker.

It fits the generative UI SDK category for React developers who want chat or agent interfaces that produce real, interactive components instead of plain text. It works alongside agent frameworks like LangChain and Mastra, but does not require them.

// What it does

• Register React components with Zod prop schemas that become LLM tool definitions the agent can call
• Generative components render once per message (charts, summaries, visualizations); interactable components persist and update as users refine requests
• Props stream into your components as the LLM generates them, with cancellation, error recovery, and reconnection handled for you
• Built-in agent loop with bring-your-own key for OpenAI, Anthropic, Gemini, Mistral, or any OpenAI-compatible provider
• Run on hosted Tambo Cloud or self-host the same backend on your own infrastructure via Docker
• Includes MCP support and a pre-built component library of agent and generative UI primitives

// Getting started

Scaffold a new Tambo app, then register your components and wrap your app with the provider.

npm create tambo-app my-tambo-app
cd my-tambo-app
npm run dev

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"]),
    }),
  },
];

<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
  userKey={currentUserId}
  components={components}
>
  <Chat />
</TamboProvider>

const { messages, isStreaming } = useTambo();

Commands and code are distilled from the project's own documentation — always check the official repo for the latest.

// When to use it

• Add a chat interface that renders charts, summaries, and data visualizations from natural-language requests
• Build interactable surfaces like shopping carts, spreadsheets, or task boards that update as users refine their asks
• Turn an existing React component library into agent-callable tools without rewriting the components
• Ship an AI analytics dashboard where the assistant chooses and fills in the right visualization

// How Tambo compares

Tambo alongside other open-source generative ui sdks tools AI/TLDR tracks, ranked by GitHub stars.