Guide · Open source

How to use Tambo: build generative UI in React

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Tambo is an open-source React SDK for generative UI. You register your own React components with Zod schemas, and an AI agent picks the right one and streams its props so users can interact with it. This guide shows you how to create a Tambo app, register components and understand the hooks and provider, and where the backend fits in. You will need Node.js, npm and an LLM API key.

Tambotambo-ai/tambo · ★ 11.2k · MIT Install options & downloads

Quick start

1Create the app. Run npm create tambo-app my-tambo-app to generate a new project with git and the Tambo setup.
2Enter the folder. Run cd my-tambo-app to move into the project directory.
3Start the dev server. Run npm run dev to start the app locally.
4Define your components. Register each component with a name, a description and a Zod propsSchema so the agent knows when and how to use it.
5Wrap the app in TamboProvider. Pass your apiKey, userKey or userToken, and components to TamboProvider, then render your chat and interactive components inside it.

What you need before you start

Tambo is built for React, and this guide assumes you can write code. The README lists Node.js and npm as the prerequisites for the quick start.

You also need an API key from an LLM provider. Tambo does not include a model of its own: you bring your own key from providers such as OpenAI, Anthropic, Gemini, Mistral, or any OpenAI-compatible provider.

Node.js and npm installed
Basic React and TypeScript knowledge
An API key from an LLM provider

Create and run a new Tambo app

Tambo provides a project generator. The generator also initializes git and the Tambo setup for you. Run these three commands in a terminal to create the project and start the dev server.

If you want a starting point with more built in, the README links two templates: an AI Chat with Generative UI template and an AI Analytics Dashboard template.

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

Register components with Zod schemas

Tambo needs to know which components the AI may use. You describe each one with a name, a description, the component itself and a propsSchema written with Zod. The schema defines the props, and Tambo turns these schemas into LLM tool definitions. The agent calls them like functions and Tambo renders the result.

Use a generative component when you want something rendered once in response to a message, such as a chart or summary. Use an interactable component when the UI should persist and update as the user refines a request, such as a task board or a note.

Generative components: rendered once per message (charts, summaries, data visualizations)
Interactable components: persist and update across the conversation (carts, spreadsheets, task boards)

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

Wrap your app with TamboProvider and use the hooks

Wrap your app in TamboProvider and pass it your apiKey, your components and a user identifier. You must provide either userKey or userToken so Tambo knows who owns the conversation thread. The source says to use userKey for server-side or trusted environments, and userToken, an OAuth access token, for client-side apps where the token carries the user identity.

Inside the provider, useTambo() gives you messages, streaming state and thread management. useTamboThreadInput() handles user input and message submission.

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

Add MCP servers and local tools (optional)

Tambo can connect to MCP servers, including Linear, Slack, databases or your own servers. The README says it supports the full MCP protocol: tools, prompts, elicitations and sampling. You pass the servers to TamboProvider as mcpServers, with a name, a url and a transport such as MCPTransport.HTTP.

For functions that must run in the browser, such as DOM changes, authenticated fetches or reading React state, define local tools with a name, description, tool function, inputSchema and outputSchema, then pass them to TamboProvider as tools.

Decide between Tambo Cloud and self-hosting

The hosted Tambo Cloud is shutting down, and new signups are closed. The README points to self-hosting for anyone who wants to keep running Tambo. Self-hosted runs the same backend on your own infrastructure via Docker. The backend manages conversation state and agent execution.

Follow the SELF-HOSTING.md file in the repository for the full setup. Plan for this step if you intend to keep the app running after the hosted service ends.

What people use it for

An AI chat that shows a chart when a user asks for sales by region
A task board that the agent updates when a user says add a task
An analytics dashboard with AI-generated visualizations
A chat app that connects to MCP servers such as Linear or Slack

Frequently asked questions

Is Tambo free to use?

Tambo is open source under the MIT licence, so you can read, modify and use the code under those terms. You still pay for your own LLM API usage through the provider you choose. The hosted Tambo Cloud is shutting down and new signups are closed.

What do I need to install Tambo?

The README lists Node.js and npm as prerequisites. You also need an LLM API key from a provider such as OpenAI or Anthropic, because Tambo uses the key you supply.

Can I use Tambo without writing code?

No. Tambo is a React SDK, and you write code to register components, configure the provider and build your interface. It is not a no-code tool.

Does Tambo work outside React?

No. The SDK is built for React, so non-React projects are not a good fit.

What happens to Tambo Cloud?

The hosted Tambo Cloud is shutting down, and new signups are closed. The README directs people who want to keep using Tambo to self-host the backend with Docker, following SELF-HOSTING.md.

How does Tambo compare to CopilotKit or the Vercel AI SDK?

The README lists CopilotKit and Vercel AI SDK as comparable projects. Tambo's distinguishing features in its README are registering components with Zod schemas so the agent streams their props, and a backend that manages conversation state and agent execution. Compare them against your own requirements before choosing.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Tambo suits React developers who want an AI chat to show charts, forms or boards instead of only text, and teams willing to self-host the backend with Docker. Skip it if you need the hosted Tambo Cloud, which is shutting down and closed to new signups, if your project is not React, or if you want a no-code tool.

Install options & downloads