add-components-to-registry

向注册表添加组件

将现有的 React 组件转换为 Tambo 注册组件，以便 AI 可以渲染它们。

快速开始

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

工作流

1. 阅读组件 - 分析属性、类型和用途
2. 生成 Zod 架构 - 根据属性类型创建 propsSchema
3. 编写描述 - 帮助 AI 知道何时使用该组件
4. 添加到注册表 - 更新 lib/tambo.ts

步骤 1：分析组件

阅读组件文件并提取：

• 组件名称
• 属性接口/类型
• 组件的渲染内容（用于编写描述）
• 可选属性与必需属性

输入示例

// 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 架构

使用 .describe() 将 TypeScript 类型转换为 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)

跳过以下文件：

• barrel 导出文件（index.ts）
• 未导出 React 组件的文件
• 测试文件（.test.tsx、.spec.tsx）
• story 文件（*.stories.tsx）

架构文件位置

将架构文件放在组件旁边：

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

或放在专用的 schemas 文件夹中：

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

处理复杂属性

嵌套对象

// 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 应使用适当的属性渲染 ProductCard。