Add Components To Registry

Add Components to Registry

Convert existing React components into Tambo-registered components that AI can render.

Quick Start

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

Workflow

1. Read component(s) - Analyze props, types, and purpose
2. Generate Zod schema - Create propsSchema from prop types
3. Write description - Help AI know when to use it
4. Add to registry - Update lib/tambo.ts

Step 1: Analyze Component

Read the component file and extract:

• Component name
• Props interface/type
• What it renders (for description)
• Optional vs required props

Example Input

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

Step 2: Generate Zod Schema

Convert TypeScript types to Zod with .describe():

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"),
});

Type Mapping

Step 3: Write Description

The description tells AI when to render this component. Be specific:

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

Step 4: Add to Registry

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

Batch Registration

When given a folder, process all .tsx files:

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

Skip files that:

• Are barrel exports (index.ts)
• Don't export React components
• Are test files (_.test.tsx, _.spec.tsx)
• Are story files (*.stories.tsx)

Schema File Location

Place schemas next to components:

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

Or in a dedicated schemas folder:

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

Handling Complex Props

Nested Objects

// 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"),
});

Callbacks (Skip)

Don't include callbacks in propsSchema - AI can't provide functions:

// 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 (Skip)

Don't include children - AI renders the component, doesn't compose it:

// Skip children prop in schema

Verification

After registration, verify in the chat:

"Show me a product card for a laptop priced at $999"

AI should render the ProductCard with appropriate props.