Tambo Components

Two component types: generative (AI creates on-demand) and interactable (pre-placed, AI updates).

Quick Start

tsx
1// Generative: AI creates when needed
2const components: TamboComponent[] = [
3  {
4    name: "WeatherCard",
5    component: WeatherCard,
6    description: "Shows weather. Use when user asks about weather.",
7    propsSchema: z.object({ city: z.string(), temp: z.number() }),
8  },
9];
10
11<TamboProvider components={components}>
12  <App />
13</TamboProvider>;

Generative Components

AI dynamically selects and renders these in response to user messages.

tsx
1import { TamboProvider, TamboComponent } from "@tambo-ai/react";
2import { z } from "zod";
3
4const WeatherCardSchema = z.object({
5  city: z.string().describe("City name"),
6  temperature: z.number().describe("Temperature in Celsius"),
7  condition: z.string().describe("Weather condition"),
8});
9
10const components: TamboComponent[] = [
11  {
12    name: "WeatherCard",
13    component: WeatherCard,
14    description:
15      "Displays weather for a city. Use when user asks about weather.",
16    propsSchema: WeatherCardSchema,
17  },
18];
19
20<TamboProvider apiKey={apiKey} components={components}>
21  <App />
22</TamboProvider>;

Generative Key Points

• propsSchema: Zod object with .describe() on each field
• description: Tells AI when to use the component
• Streaming: Props start undefined, make them optional or handle gracefully
• Use z.infer<typeof Schema> for TypeScript props type

Interactable Components

Pre-place in your UI; AI can observe and update props via natural language.

tsx
1import { withInteractable } from "@tambo-ai/react";
2import { z } from "zod";
3
4const NoteSchema = z.object({
5  title: z.string().describe("Note title"),
6  content: z.string().describe("Note content"),
7  color: z.enum(["white", "yellow", "blue"]).optional(),
8});
9
10function Note({ title, content, color = "white" }: Props) {
11  return (
12    <div style={{ backgroundColor: color }}>
13      <h3>{title}</h3>
14      <p>{content}</p>
15    </div>
16  );
17}
18
19export const InteractableNote = withInteractable(Note, {
20  componentName: "Note",
21  description: "A note with editable title, content, and color",
22  propsSchema: NoteSchema,
23});

Interactable How It Works

1. Auto-registration: Component registers when mounted
2. Context sending: Current props automatically visible to AI
3. Tool registration: Update tools registered automatically
4. Bidirectional: User edits and AI updates both work

When to Use Each