tambo README

The project's README from github.com/tambo-ai/tambo. As one markdown file: README.md.

Tambo AI

Build agents that speak your UI

The open-source generative UI toolkit for React. Connect your components—Tambo handles streaming, state management, and MCP.

npm version License Last Commit Discord GitHub stars

tambo-ai/tambo | Trendshift

Start For Free • Docs • Discord

Tambo 1.0 is here! Read the announcement: Introducing Tambo: Generative UI for React

Table of Contents

What is Tambo?

Tambo is a React toolkit for building agents that render UI (also known as generative UI).

Register your components with Zod schemas. The agent picks the right one and streams the props so users can interact with them. "Show me sales by region" renders your <Chart>. "Add a task" updates your <TaskBoard>.

Get started in 5 minutes →

https://github.com/user-attachments/assets/8381d607-b878-4823-8b24-ecb8053bef23

What's Included

Tambo is a fullstack solution for adding generative UI to your app. You get a React SDK plus a backend that handles conversation state and agent execution.

1. Agent included — Tambo runs the LLM conversation loop for you. Bring your own API key (OpenAI, Anthropic, Gemini, Mistral, or any OpenAI-compatible provider). Works with agent frameworks like LangChain and Mastra, but they're not required.

2. Streaming infrastructure — Props stream to your components as the LLM generates them. Cancellation, error recovery, and reconnection are handled for you.

3. Tambo Cloud or self-host — Cloud is a hosted backend that manages conversation state and agent orchestration. Self-hosted runs the same backend on your infrastructure via Docker.

Most software is built around a one-size-fits-all mental model. We built Tambo to help developers build software that adapts to users.

Get Started

npm create tambo-app my-tambo-app  # auto-initializes git + tambo setup
cd my-tambo-app
npm run dev

Tambo Cloud is a hosted backend, free to get started with plenty of credits to start building. Self-hosted runs on your own infrastructure.

Check out the pre-built component library for agent and generative UI primitives:

https://github.com/user-attachments/assets/6cbc103b-9cc7-40f5-9746-12e04c976dff

Or fork a template:

Template Description
AI Chat with Generative UI Chat interface with dynamic component generation
AI Analytics Dashboard Analytics dashboard with AI-powered visualization

How It Works

Tell the AI which components it can use. Zod schemas define the props. These schemas become LLM tool definitions—the agent calls them like functions and Tambo renders the result.

Generative Components

Render once in response to a message. Charts, summaries, data visualizations.

https://github.com/user-attachments/assets/3bd340e7-e226-4151-ae40-aab9b3660d8b

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 and update as users refine requests. Shopping carts, spreadsheets, task boards.

https://github.com/user-attachments/assets/12d957cd-97f1-488e-911f-0ff900ef4062

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

Docs: generative components, interactable components

The Provider

Wrap your app with TamboProvider. You must provide either userKey or userToken to identify the thread owner.

<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
  userKey={currentUserId}
  components={components}
>
  <Chat />
  <InteractableNote id="note-1" title="My Note" content="Start writing..." />
</TamboProvider>

Use userKey for server-side or trusted environments. Use userToken (OAuth access token) for client-side apps where the token contains the user identity. See User Authentication for details.

Docs: provider options

Hooks

useTambo() is the primary hook — it gives you messages, streaming state, and thread management. useTamboThreadInput() handles user input and message submission.

const { messages, isStreaming } = useTambo();
const { value, setValue, submit, isPending } = useTamboThreadInput();

Docs: threads and messages, streaming status, full tutorial

Features

MCP Integrations

Connect to Linear, Slack, databases, or your own MCP servers. Tambo supports the full MCP protocol: tools, prompts, elicitations, and sampling.

import { MCPTransport } from "@tambo-ai/react/mcp";

const mcpServers = [
  {
    name: "filesystem",
    url: "http://localhost:8261/mcp",
    transport: MCPTransport.HTTP,
  },
];

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

https://github.com/user-attachments/assets/c7a13915-8fed-4758-be1b-30a60fad0cda

Docs: MCP integration

Local Tools

Sometimes you need functions that run in the browser. DOM manipulation, authenticated fetches, accessing React state. Define them as tools and the AI can call them.

const tools: TamboTool[] = [
  {
    name: "getWeather",
    description: "Fetches weather for a location",
    tool: async (params: { location: string }) =>
      fetch(`/api/weather?q=${encodeURIComponent(params.location)}`).then((r) =>
        r.json(),
      ),
    inputSchema: z.object({
      location: z.string(),
    }),
    outputSchema: z.object({
      temperature: z.number(),
      condition: z.string(),
      location: z.string(),
    }),
  },
];

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

Docs: local tools

Context, Auth, and Suggestions

Additional context lets you pass metadata to give the AI better responses. User state, app settings, current page. User authentication passes tokens from your auth provider. Suggestions generates prompts users can click based on what they're doing.

<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
  userToken={userToken}
  contextHelpers={{
    selectedItems: () => ({
      key: "selectedItems",
      value: selectedItems.map((i) => i.name).join(", "),
    }),
    currentPage: () => ({ key: "page", value: window.location.pathname }),
  }}
/>

const { suggestions, accept } = useTamboSuggestions({ maxSuggestions: 3 });

suggestions.map((s) => (
  <button key={s.id} onClick={() => accept(s)}>
    {s.title}
  </button>
));

Docs: additional context, user authentication, suggestions

Supported LLM Providers

OpenAI, Anthropic, Cerebras, Google Gemini, Mistral, and any OpenAI-compatible provider. Full list. Missing one? Let us know.

How Tambo Compares

Feature Tambo Vercel AI SDK CopilotKit Assistant UI
Component selection AI decides which components to render Manual tool-to-component mapping Via agent frameworks (LangGraph) Chat-focused tool UI
MCP integration Built-in Experimental (v4.2+) Recently added Requires AI SDK v5
Persistent stateful components Yes No Shared state patterns No
Client-side tool execution Declarative, automatic Manual via onToolCall Agent-side only No
Self-hostable MIT (SDK + backend) Apache 2.0 (SDK only) MIT MIT
Hosted option Tambo Cloud No CopilotKit Cloud Assistant Cloud
Best for Full app UI control Streaming and tool abstractions Multi-agent workflows Chat interfaces

Community

Join the Discord to chat with other developers and the core team.

Interested in contributing? Read the Contributing Guide.

Join the conversation on Twitter and follow @tambo_ai.

License

MIT unless otherwise noted. Some workspaces (like apps/api) are Apache-2.0.

Tambo AI Animation

For AI/LLM agents: docs.tambo.co/llms.txt

tambo (tambo-ai/tambo)

Searching Database…

11.2K ·GitHub
Tambo
Что это такое?Tambo — это открытый инструментарий для React, который позволяет создавать агентов, отображающих ваши собственные UI-компоненты («генеративный UI»), а не только текстовые ответы. Вы регистрируете компоненты с помощью Zod-схем, а агент решает, какой из них показать, и потоком передаёт в него пропсы.
Tambo — это просто библиотека для React или в нём есть и бэкенд?Это полноценное решение: SDK для React плюс бэкенд, который управляет состоянием диалога и самостоятельно запускает цикл работы LLM-агента. Бэкендом может быть облачный сервис Tambo Cloud или установка на вашей инфраструктуре через Docker.
Как начать работу с Tambo?Оберните приложение в TamboProvider, зарегистрируйте React-компоненты с Zod-схемами, которые описывают их пропсы, и либо используйте облачный Tambo Cloud, либо разверните бэкенд у себя. Есть готовые библиотеки компонентов и стартовые шаблоны (AI Chat with Generative UI, AI Analytics Dashboard), которые можно форкнуть.
Какие LLM-провайдеры можно использовать и нужен ли мой собственный API-ключ?Да, нужен собственный API-ключ от OpenAI, Anthropic, Google Gemini, Mistral, Cerebras или любого провайдера, совместимого с OpenAI. Tambo ведёт цикл диалога поверх того провайдера, который вы настроили.
Что нужно настроить, чтобы ИИ мог использовать мои компоненты?Каждый компонент, который агент должен отображать, нужно зарегистрировать с Zod-схемой: она становится определением инструмента для LLM. Также необходимо передать либо userKey (на стороне сервера), либо userToken (OAuth, на стороне клиента), чтобы определить, кому принадлежит каждая ветка диалога.
Можно ли развернуть Tambo у себя, а не использовать Tambo Cloud?Да. Tambo Cloud — это облачный вариант, но тот же бэкенд можно запустить на собственной инфраструктуре через Docker, если вы хотите хранить данные диалогов и оркестрацию у себя.
В чём разница между Generative и Interactable компонентами?Generative-компоненты отображаются один раз в ответ на сообщение, например графики или сводки. Interactable-компоненты сохраняются и обновляются по мере того, как пользователь продолжает уточнять запросы, например корзина покупок или доска задач.
Чем Tambo отличается от CopilotKit или Vercel AI SDK?В сравнительной таблице Tambo отмечено, что у него есть встроенная поддержка MCP, компоненты с сохранением состояния и автоматическое выполнение инструментов на стороне клиента. Vercel AI SDK требует ручного сопоставления инструментов с компонентами, а CopilotKit опирается на фреймворки агентов вроде LangGraph.
К чему можно подключить MCP-интеграцию Tambo?Tambo поддерживает полный протокол MCP (инструменты, промпты, elicitations и sampling), так что можно подключаться к таким сервисам, как Linear, Slack, базы данных или ваши собственные MCP-серверы.
Может ли ИИ вызывать функции, которые работают в моём браузере?Да, Tambo поддерживает Local Tools: функции, которые вы определяете и которые выполняются на стороне клиента, например для манипуляций с DOM, аутентифицированных fetch-запросов или чтения состояния React. ИИ может вызывать их так же, как любые другие инструменты.
What are similar projects?CopilotKit, OpenIntelligentUI, trueforge, composio, ai, LibreChat, openui, headroom
Which topics is it in?generative-ui, js, assistant, reactjs, langchain, model-context-protocol, chatbot, ui-components, docker-compose, anthropic, sdk, agents
Creator
tambo-ai
Size
289.9 MB
Stars
11.2K
Updated
CommitOct 09Releaseweb-v0.136.0Oct 09
Age
2y
Commits · 90 Days