add-components-to-registry

レジストリにコンポーネントを追加する

既存の React コンポーネントを、AI がレンダリングできる Tambo 登録済みコンポーネントに変換します。

クイックスタート

# Point to a component file or folder
/add-components-to-registry src/components/ProductCard.tsx
/add-components-to-registry src/components/cards/

ワークフロー

1. コンポーネントを読む - props、型、目的を分析します
2. Zod スキーマを生成する - prop の型から propsSchema を作成します
3. 説明を書く - AI が使用するタイミングを判断できるようにします
4. レジストリに追加する - lib/tambo.ts を更新します

ステップ 1：コンポーネントを分析する

コンポーネントファイルを読み、次の内容を抽出します。

• コンポーネント名
• Props のインターフェース／型
• レンダリングする内容（説明に使用）
• オプションの props と必須の props

入力例

// src/components/ProductCard.tsx
interface ProductCardProps {
  name: string;
  price: number;
  imageUrl?: string;
  onSale?: boolean;
  rating?: number;
}

export function ProductCard({
  name,
  price,
  imageUrl,
  onSale,
  rating,
}: ProductCardProps) {
  return (
    <div className="product-card">
      {imageUrl && <img src={imageUrl} alt={name} />}
      <h3>{name}</h3>
      <p>
        ${price}
        {onSale && " (On Sale!)"}
      </p>
      {rating && <span>★ {rating}/5</span>}
    </div>
  );
}

ステップ 2：Zod スキーマを生成する

TypeScript の型を .describe() を使った Zod に変換します。

import { z } from "zod";

export const ProductCardSchema = z.object({
  name: z.string().describe("Product name"),
  price: z.number().describe("Price in dollars"),
  imageUrl: z.string().optional().describe("Product image URL"),
  onSale: z.boolean().optional().describe("Whether product is on sale"),
  rating: z.number().optional().describe("Rating out of 5"),
});

型の対応表

TypeScript	Zod
string	z.string()
number	z.number()
boolean	z.boolean()
string[]	z.array(z.string())
"a" | "b"	z.enum(["a", "b"])
optional	.optional()
Date	z.string().describe("ISO date string")
Record<K,V>	z.record(z.string(), z.number())

ステップ 3：説明を書く

説明は、AI がこのコンポーネントをいつレンダリングするかを伝えます。具体的に記述します。

// Bad: Too vague
description: "Shows a product";

// Good: Tells AI when to use it
description: "Displays a product with name, price, and optional image/rating. Use when user asks to see product details, browse items, or view catalog entries.";

ステップ 4：レジストリに追加する

// lib/tambo.ts
import { TamboComponent } from "@tambo-ai/react";
import { ProductCard } from "@/components/ProductCard";
import { ProductCardSchema } from "@/components/ProductCard.schema";

export const components: TamboComponent[] = [
  {
    name: "ProductCard",
    component: ProductCard,
    description:
      "Displays a product with name, price, and optional image/rating. Use when user asks to see product details, browse items, or view catalog entries.",
    propsSchema: ProductCardSchema,
  },
  // ... other components
];

一括登録

フォルダーを指定された場合は、すべての .tsx ファイルを処理します。

src/components/cards/
├── ProductCard.tsx    → Register as "ProductCard"
├── UserCard.tsx       → Register as "UserCard"
├── StatCard.tsx       → Register as "StatCard"
└── index.ts           → Skip (barrel file)

次のファイルはスキップします。

• バレルエクスポート（index.ts）
• React コンポーネントをエクスポートしないファイル
• テストファイル（.test.tsx、.spec.tsx）
• ストーリーファイル（*.stories.tsx）

スキーマファイルの配置場所

スキーマをコンポーネントの隣に配置します。

src/components/
├── ProductCard.tsx
├── ProductCard.schema.ts    # Zod schema
├── UserCard.tsx
└── UserCard.schema.ts

または、専用のスキーマフォルダーに配置します。

src/
├── components/
│   ├── ProductCard.tsx
│   └── UserCard.tsx
└── schemas/
    ├── ProductCard.schema.ts
    └── UserCard.schema.ts

複雑な Props の扱い

ネストされたオブジェクト

// TypeScript
interface Address {
  street: string;
  city: string;
  zip: string;
}
interface Props {
  address: Address;
}

// Zod
const AddressSchema = z.object({
  street: z.string().describe("Street address"),
  city: z.string().describe("City name"),
  zip: z.string().describe("ZIP/postal code"),
});

const PropsSchema = z.object({
  address: AddressSchema.describe("Shipping address"),
});

コールバック（スキップ）

propsSchema にコールバックを含めないでください。AI は関数を指定できません。

// TypeScript
interface Props {
  name: string;
  onClick: () => void; // Skip this
}

// Zod - only data props
const PropsSchema = z.object({
  name: z.string().describe("Display name"),
  // onClick omitted - AI provides data, not behavior
});

Children（スキップ）

children は含めないでください。AI はコンポーネントをレンダリングしますが、コンポーネントを組み合わせるわけではありません。

// Skip children prop in schema

確認

登録後、チャットで確認します。

「価格が 999 ドルのノートパソコンの製品カードを表示してください」

AI は適切な props を指定して ProductCard をレンダリングするはずです。