components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tambo Components

Tambo组件

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

两种组件类型：生成式（AI按需创建）和交互式（预先放置，AI负责更新）。

Quick Start

快速开始

tsx

// Generative: AI creates when needed
const components: TamboComponent[] = [
  {
    name: "WeatherCard",
    component: WeatherCard,
    description: "Shows weather. Use when user asks about weather.",
    propsSchema: z.object({ city: z.string(), temp: z.number() }),
  },
];

<TamboProvider components={components}>
  <App />
</TamboProvider>;

tsx

// Generative: AI creates when needed
const components: TamboComponent[] = [
  {
    name: "WeatherCard",
    component: WeatherCard,
    description: "Shows weather. Use when user asks about weather.",
    propsSchema: z.object({ city: z.string(), temp: z.number() }),
  },
];

<TamboProvider components={components}>
  <App />
</TamboProvider>;

Generative Components

生成式组件

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

tsx

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

const WeatherCardSchema = z.object({
  city: z.string().describe("City name"),
  temperature: z.number().describe("Temperature in Celsius"),
  condition: z.string().describe("Weather condition"),
});

const components: TamboComponent[] = [
  {
    name: "WeatherCard",
    component: WeatherCard,
    description:
      "Displays weather for a city. Use when user asks about weather.",
    propsSchema: WeatherCardSchema,
  },
];

<TamboProvider apiKey={apiKey} components={components}>
  <App />
</TamboProvider>;

AI会根据用户消息动态选择并渲染这些组件。

tsx

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

const WeatherCardSchema = z.object({
  city: z.string().describe("City name"),
  temperature: z.number().describe("Temperature in Celsius"),
  condition: z.string().describe("Weather condition"),
});

const components: TamboComponent[] = [
  {
    name: "WeatherCard",
    component: WeatherCard,
    description:
      "Displays weather for a city. Use when user asks about weather.",
    propsSchema: WeatherCardSchema,
  },
];

<TamboProvider apiKey={apiKey} components={components}>
  <App />
</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

propsSchema：每个字段带有
```
.describe()
```
的Zod对象
description：告知AI何时使用该组件
流式处理：Props初始为
```
undefined
```
，需设为可选或优雅处理
使用
```
z.infer<typeof Schema>
```
获取TypeScript props类型

Interactable Components

交互式组件

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

tsx

import { withInteractable } from "@tambo-ai/react";
import { z } from "zod";

const NoteSchema = z.object({
  title: z.string().describe("Note title"),
  content: z.string().describe("Note content"),
  color: z.enum(["white", "yellow", "blue"]).optional(),
});

function Note({ title, content, color = "white" }: Props) {
  return (
    <div style={{ backgroundColor: color }}>
      <h3>{title}</h3>
      <p>{content}</p>
    </div>
  );
}

export const InteractableNote = withInteractable(Note, {
  componentName: "Note",
  description: "A note with editable title, content, and color",
  propsSchema: NoteSchema,
});

预先放置在UI中；AI可通过自然语言观察并更新其props。

tsx

import { withInteractable } from "@tambo-ai/react";
import { z } from "zod";

const NoteSchema = z.object({
  title: z.string().describe("Note title"),
  content: z.string().describe("Note content"),
  color: z.enum(["white", "yellow", "blue"]).optional(),
});

function Note({ title, content, color = "white" }: Props) {
  return (
    <div style={{ backgroundColor: color }}>
      <h3>{title}</h3>
      <p>{content}</p>
    </div>
  );
}

export const InteractableNote = withInteractable(Note, {
  componentName: "Note",
  description: "A note with editable title, content, and color",
  propsSchema: NoteSchema,
});

Interactable How It Works

交互式组件工作原理

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

自动注册：组件在挂载时自动完成注册
上下文同步：当前props自动对AI可见
工具注册：更新工具会自动注册
双向交互：用户编辑和AI更新均可生效

When to Use Each

适用场景对比

Generative	Interactable
AI creates on-demand	You pre-place in UI
One-time render	Persistent across session
Props generated once	AI can update props
Chat responses, dashboards	Settings, forms, task boards

生成式组件	交互式组件
AI按需创建	预先放置在UI中
一次性渲染	会话全程保持存在
Props仅生成一次	AI可更新Props
聊天回复、仪表板	设置面板、表单、任务看板