Dynamic Registration

Learn how to register components dynamically using the useTamboRegistry hook for runtime registration.

For runtime registration of components, you can use the registerComponent function from the useTamboRegistry() hook. This approach allows you to register components based on conditions, user interactions, or other dynamic factors.

page.tsx

import { useEffect } from "react";
import { useTamboRegistry } from "@tambo-ai/react";
import { z } from "zod";
import { WeatherDisplay } from "@/components/WeatherDisplay";

// Define simple Zod schemas for component props
const WeatherDisplayProps = z.object({
  city: z.string(),
  temperature: z.number(),
  condition: z.string(),
});

export default function Page() {
  const { registerComponent } = useTamboRegistry();

  useEffect(() => {
    if(someCondition) {
        registerComponent({
            name: "WeatherDisplay",
            description: "A display of the weather in a city.",
            component: WeatherDisplay,
            propsSchema: WeatherDisplayProps,
        })
    }
  }, [registerComponent]);

  return (
    // Your page content
  );
}