DOCSEARCHbyAlgolia
Submit Docs

Tambo AI Documentation

repository·main·Indexed 27 days ago

https://github.com/tambo-ai/tambo

An open-source generative UI toolkit for React that enables developers to build agents capable of rendering and interacting with UI components. Tambo AI manages streaming props, state management, and MCP integration. The toolkit includes a Tambo API with Swagger documentation, a Docs MCP server, and a test MCP server for tool development.

Tokens
217.8K
Snippets
551
Records
1.2K
Agent score
94%

What's inside Tambo AI

  1. Overview of tambo ui components

    main

    The tambo ui library provides React components categorized into Core and AI components:

    Core Components

    • Full UI: MessageThreadCollapsible, MessageThreadFull, MessageThreadPanel, ControlBar.
    • Message Thread Components: ThreadContent, ThreadList, ThreadHistory.
    • Message Elements: Message, MessageInput, MessageSuggestions.

    AI Components

    • Form Components: Form, InputFields.
    • Data Visualization: Graph.

  2. Overview of Tambo API v1 Design

    main

    The Tambo API v1 is a streaming-first API designed to support streamable UI components with props and state. It uses the AG-UI event system as its wire protocol for all streaming communication via Server-Sent Events (SSE).

    Key characteristics include:

    • Streaming-only: All responses are delivered via SSE; there are no synchronous endpoints.
    • Industry-aligned: Message, Content, and Tool types follow OpenAI and Anthropic conventions.
    • First-class Components: UI components are treated as content blocks and stream via tambo.component.* events.
    • Multi-component Support: A single response can return multiple components.
    • Tooling: Supports both server-side tools (e.g., MCP) which execute inline, and client-side tools which pause the stream for user interaction.
    • Ephemeral Runs: Runs are request-scoped; if the connection drops, the run is cancelled.

  3. Overview of @tambo-ai/react features

    main

    The @tambo-ai/react SDK provides several key capabilities for building AI-driven interfaces:

    • Main hook: useTambo() for core thread and message access.
    • User scoping: Managed via the userKey prop in the provider.
    • Thread input: useTamboThreadInput() for handling user text input.
    • Message format: Uses content blocks (text, component, tool_use, etc.).
    • Component state: useTamboComponentState() for bidirectional synchronization.
    • Streaming status: Accessible via streamingState.status (typed as RunStatus).
    • Data fetching: Built on top of React Query hooks.

  4. Overview of Tambo CLI Commands

    main

    The tambo CLI is used for project scaffolding, component management, and configuration.

    Key capabilities include:

    • Starting new projects from templates with create-app.
    • Setting up Tambo in existing projects with init.
    • Installing pre-built components with add.
    • Managing component lifecycles (listing, updating, upgrading, and migrating).

    All commands support the --help flag for detailed usage information.

  5. Overview of Tambo API v1 Architecture

    main

    The Tambo API v1 is implemented within the NestJS API server (apps/api) and is designed to coexist with existing API versions without breaking changes. It introduces /v1/ endpoints that follow a streaming-first design using AG-UI events as the wire protocol.

    Key architectural features include:

    • Industry-aligned types: Uses conventions similar to OpenAI and Anthropic.
    • Component Streaming: Supports first-class component streaming with props and state deltas.
    • Tool Execution Separation: Provides a clean separation between server-side (MCP) and client-side tool execution.

    The v1 module is organized as follows:

    • v1.controller.ts: Handles all v1 endpoints (threads, runs, messages, components).
    • v1.service.ts: Contains core v1 business logic.
    • dto/: Contains Data Transfer Objects for content, message, thread, run, and tool.
    • v1.errors.ts: Provides v1-specific error helpers.

  6. Understand Tambo CLI configuration behavior

    main

    The Tambo CLI is designed to be non-destructive when configuring your project.

    CLI Capabilities

    • Preserves existing styles: Your custom CSS is kept.
    • Adds only missing variables: It will not override your existing variables.
    • Backs up files: Creates .backup files before making any changes.
    • Shows diffs: Previews changes before they are applied.
    • Asks permission: Prompts the user before modifying existing files.

    CLI Limitations

    • Does not override existing variables: Your customizations are preserved.
    • Does not change your color scheme: It only adds missing standard variables.
    • Does not modify other CSS: It only touches CSS variable definitions.
    • Does not break existing config: It merges with your existing Tailwind configuration.

  8. Understand Tambo conversation storage structure

    main

    Tambo automatically persists all conversation data without requiring manual database configuration. The storage model consists of two main entities:

    Threads

    Threads act as containers for conversations. Each thread includes:

    • A unique ID.
    • Project association.
    • Timestamps (created and last updated).
    • Generation stage (idle, processing, complete, or error).
    • Optional metadata (custom properties or a context key).
    • Human-readable status messages during generation.

    Messages

    Messages are the content units within a thread. Each message includes:

    • Role: user, assistant (Tambo), system, or tool (function results).
    • Content Parts: Text, images, audio, or other media.
    • Generative Components: If Tambo responds with a generative component, the component definition and props are stored to allow re-rendering.
    • Component State: If components use useTamboComponentState, that state is persisted so components restore their exact state when re-rendering history.
    • Metadata: Context provided during sending, generation errors, and cancellation status.

  10. Use @tambo-ai/react-ui-base for custom UIs

    main
    The @tambo-ai/react-ui-base package provides unstyled base components, reusable hooks, and utilities to help you build custom UIs while leveraging Tambo's core functionality. It is designed to be tree-shakeable and UI-agnostic, meaning the hooks do not return JSX or depend on specific UI libraries like lucide-react.

  11. Use MCP Tools for External Integrations

    main
    MCP (Model Context Protocol) tools are provided by external servers (e.g., GitHub, Linear). These tools are automatically discovered and made available to Tambo when you connect to an MCP server either client-side or server-side. This allows you to use powerful, ready-made integrations without writing the tool logic yourself.

  12. Build Elicitation UIs with @tambo-ai/react-ui-base

    main

    Use the Elicitation component to build composable user interfaces for handling MCP (Model Context Protocol) form schemas. It manages schema parsing, validation, and response behaviors (accept/decline/cancel) while providing unstyled base primitives for custom UI implementation.

    import { Elicitation } from "@tambo-ai/react-ui-base/elicitation";

<Elicitation.Root request={request} onResponse={onResponse}>
  <Elicitation.Message />
  <Elicitation.Fields />
  <Elicitation.Actions />
</Elicitation.Root>