Registering Components

Register your React components as UI tools that Tambo can intelligently choose and populate with data. Tell Tambo which components are available and what props they expect. This enables conversational control of your app where users can ask for specific functionality and Tambo responds with the appropriate component filled with relevant data.

const components: TamboComponent[] = [
  {
    name: "WeatherDisplay",
    description: "A display of the weather in a city",
    component: WeatherDisplayComponent,
    propsSchema: WeatherDisplayPropsSchema,
  },
  {
    name: "UserProfile",
    description: "A user profile card with avatar and basic information",
    component: UserProfileComponent,
    propsSchema: UserProfilePropsSchema,
  },
];

<TamboProvider components={components}>
  <App />
</TamboProvider>;