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 (
    
      {imageUrl && }
      {name}
      
        ${price}
        {onSale && " (On Sale!)"}
      
      {rating && ★ {rating}/5}
    
  );
}

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

| 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 | z.record(z.string(), z.number()) |

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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: andrmaz
• Source: andrmaz/spec-driven-architecture
• License: MIT

Install and usage instructions live in the source repository linked above.