Generative Components

Generative components are React components that Tambo creates and renders dynamically in response to user messages. Unlike Interactable components that you pre-place on the page, generative components are chosen and instantiated by Tambo based on the conversation context.

When you register a component with Tambo, you're giving Tambo the ability to decide when and how to render that component. Tambo analyzes the user's message, considers available components, and generates appropriate props to create a new instance of the component inline in the conversation.

Key characteristics:

• Created on-demand: Tambo generates new component instances in response to messages
• One-time rendering: Each message can produce a new component instance
• AI-driven selection: Tambo chooses which component to use based on the conversation
• Props generated by AI: Tambo generates the props values based on the user's request

How Generative Components Work

The lifecycle of a generative component follows this flow:

1. Registration

Components are registered with Tambo either statically (at app startup) or dynamically (at runtime). Registration provides Tambo with:

• The React component to render
• A name and description for identification
• A Zod schema defining valid props

const components: TamboComponent[] = [
  {
    name: "DataChart",
    description: "Displays data as a chart",
    component: DataChart,
    propsSchema: z.object({
      data: z.array(
        z.object({
          label: z.string(),
          value: z.number(),
        }),
      ),
      type: z.enum(["bar", "line", "pie"]),
    }),
  },
];

2. Component Selection

When a user sends a message, Tambo analyzes the request and available registered components. It uses the component's name and description to determine if a component is appropriate for the user's intent.

Tambo considers:

• The semantic meaning of the user's message
• Component descriptions and names
• The conversation context and history
• Available tools and resources

3. Props Generation

Once Tambo selects a component, it generates props that match the component's schema. The Zod schema acts as both validation and guidance:

• Required fields: Tambo must provide values for all non-optional fields
• Optional fields: Tambo may omit optional fields (marked with .optional())
• Type constraints: Enum values, number ranges, and string formats guide generation
• Descriptions: z.describe() provides hints about expected formats or usage patterns

// Schema with descriptions helps Tambo generate better props
const DataChartProps = z.object({
  data: z.array(
    z.object({
      label: z.string().describe("Short label text, 1-3 words"),
      value: z.number().describe("Numeric value for the data point"),
    }),
  ),
  type: z
    .enum(["bar", "line", "pie"])
    .describe("Use bar for comparisons, line for trends, pie for proportions"),
});

4. Component Rendering

Tambo renders the selected component with generated props as part of the assistant's message. The component appears inline in the conversation thread, creating a visual response alongside any text. Components rendered in messages become part of the conversation history, allowing Tambo to reference them in future messages.

Generative vs. Interactable Components

Understanding when to use each type helps you design effective Tambo applications:

Example scenarios:

• Generative: User asks "Show me sales data as a chart" → Tambo creates a new DataChart component
• Interactable: User has a shopping cart on the page → User asks "Add 3 more items" → Tambo updates the existing cart component's props

You can use both together: register a component as generative for on-demand creation, and also make it interactable for persistent instances.