Loading...
Registering Components with TamboProvider
Learn how to register components using the TamboProvider for static component registration.
The @tambo-ai/react package provides hooks to help with component registration. One of the main approaches is using the TamboProvider component for static registration.
Using the TamboProvider
You can pass a list of components directly to the TamboProvider component. All components will be visible to Tambo hooks and components rendered inside the provider.
import { TamboProvider } from "@tambo-ai/react";
import { z } from "zod";
import { WeatherDisplay } from "@/components/WeatherDisplay";
import { UserProfile } from "@/components/UserProfile";
// Define simple Zod schemas for component props
const WeatherDisplayProps = z.object({
city: z.string(),
temperature: z.number(),
condition: z.string(),
});
const UserProfileProps = z.object({
name: z.string(),
email: z.string(),
avatar: z.string().optional(),
});
const components = [
{
name: "WeatherDisplay",
description: "A display of the weather in a city",
component: WeatherDisplay,
propsSchema: WeatherDisplayProps,
},
{
name: "UserProfile",
description: "A user profile card with avatar and basic information",
component: UserProfile,
propsSchema: UserProfileProps,
},
];
<TamboProvider components={components}>
<App />
</TamboProvider>;