components

Tambo コンポーネント

コンポーネントには、生成型（AI がオンデマンドで作成）とインタラクティブ型（あらかじめ配置し、AI が更新）の 2 種類があります。

クイックスタート

// 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>;

生成型コンポーネント

AI はユーザーのメッセージに応じて、これらを動的に選択してレンダリングします。

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

生成型コンポーネントのレンダリング

ComponentRenderer を使って、メッセージリスト内に AI 生成コンポーネントをレンダリングします。

import { ComponentRenderer } from "@tambo-ai/react";

function Message({
  message,
  threadId,
}: {
  message: TamboThreadMessage;
  threadId: string;
}) {
  return (
    <div>
      {message.content.map((block) => {
        switch (block.type) {
          case "text":
            return <p key={`${message.id}:text`}>{block.text}</p>;
          case "component":
            return (
              <ComponentRenderer
                key={block.id}
                content={block}
                threadId={threadId}
                messageId={message.id}
              />
            );
          default:
            return null;
        }
      })}
    </div>
  );
}

生成型コンポーネントの主なポイント

• propsSchema：各フィールドに .describe() を指定した Zod オブジェクト
• description：コンポーネントをいつ使用するかを AI に伝えます
• ストリーミング：Props は undefined から始まるため、オプショナルにするか、適切に処理してください
• TypeScript の props 型には z.infer<typeof Schema> を使用します

インタラクティブ型コンポーネント

UI にあらかじめ配置すると、AI は自然言語を通じて props を参照・更新できます。

import { withTamboInteractable } 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 = withTamboInteractable(Note, {
  componentName: "Note",
  description: "A note with editable title, content, and color",
  propsSchema: NoteSchema,
});

インタラクティブ型の仕組み

1. 自動登録：マウント時にコンポーネントが登録されます
2. コンテキストの送信：現在の props が自動的に AI から参照できるようになります
3. ツールの登録：更新用のツールが自動的に登録されます
4. 双方向：ユーザーによる編集と AI による更新の両方に対応します

それぞれを使う場面

生成型	インタラクティブ型
AI がオンデマンドで作成	UI にあらかじめ配置する
1 回限りのレンダリング	セッションを通じて維持される
Props は 1 回だけ生成される	AI が props を更新できる
チャットの応答、ダッシュボード	設定、フォーム、タスクボード