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>.

Installation

npm create tambo-app my-tambo-app
cd my-tambo-app
npx tambo init      # choose cloud or self-hosted
npm run dev

Or add to an existing project:

npm install @tambo-ai/react
npx tambo init

Quick Start

import { TamboProvider, useTambo, useTamboThreadInput } from "@tambo-ai/react";
import { z } from "zod/v4";

// 1. Register components with Zod schemas
const components = [
  {
    name: "Graph",
    description: "Displays data as charts",
    component: Graph,
    propsSchema: z.object({
      data: z.array(z.object({ name: z.string(), value: z.number() })),
      type: z.enum(["line", "bar", "pie"]),
    }),
  },
];

// 2. Wrap your app
function App() {
  return (
    <TamboProvider
      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
      userKey={currentUserId} // Required: identifies thread owner
      components={components}
    >
      <ChatInterface />
    </TamboProvider>
  );
}

// 3. Use hooks
function ChatInterface() {
  const { messages, isStreaming } = useTambo();
  const { value, setValue, submit, isPending } = useTamboThreadInput();

  return (
    <form
      onSubmit={async (e) => {
        e.preventDefault();
        await submit();
      }}
    >
      {messages.map((msg) => (
        <Message key={msg.id} message={msg} />
      ))}
      {isStreaming && <LoadingIndicator />}
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button disabled={isPending}>Send</button>
    </form>
  );
}

Key Hooks

| Hook | Description | | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | | useTambo() | Primary hook - messages, streaming state, thread management | | useTamboThreadInput() | Handle user input, image uploads, and message submission | | useTamboThread() | Fetch a single thread by ID (React Query) | | useTamboThreadList() | Fetch thread list with filtering and pagination | | useTamboStreamStatus() | Monitor prop-level streaming status for progressive loading | | useTamboSuggestions() | Generate contextual suggestions | | useTamboComponentState() | Bidirectional component state synced with the backend | | useTamboVoice() | Voice input and transcription |

Features

• Generative Components - AI renders the right component based on conversation
• Interactable Components - Persistent stateful components that update as users refine requests
• MCP Integration - Connect to Linear, Slack, databases, or your own MCP servers
• Local Tools - Define browser-side functions the AI can call
• Streaming - Props stream to components as the LLM generates them

MCP Dependency Note

@modelcontextprotocol/sdk is included automatically when you install @tambo-ai/react.

If you import from @tambo-ai/react/mcp and use features that require schema validation (like component prop schemas via propsSchema, or tool schemas via inputSchema/outputSchema), install the optional peer dependencies:

Zod 3 (^3.25.76) and Zod 4 (^4) are both supported. We recommend Zod 4 for new projects. zod-to-json-schema@^3.25.1 is tested and known to support both.

Install exactly one of the following (do not install both Zod 3 and Zod 4):

# Recommended (Zod 4)
npm install zod@^4 zod-to-json-schema@^3.25.1

# Or, for existing projects using Zod 3
npm install zod@^3.25.76 zod-to-json-schema@^3.25.1

Learn More

• GitHub - Full documentation, examples, and ⭐ star us!
• Docs - Guides and API reference
• UI Library - Pre-built components
• Discord - Community and support

License

MIT - see LICENSE

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