Registering Components
Learn how to register components with Tambo.
One of the core features of Tambo is its ability to intelligently respond to user messages with UI components filled with relevant data instead of just text. With this ability, Tambo allows your users to conversationally control your app with AI assistance rather than simply have questions answered.
Tambo does not, however, generate components from scratch on-the-fly. Instead, you "tell" Tambo which components are available and what props they expect using a registerComponent
call.
The @tambo-ai/react
package provides hooks to help with this.
Core Concepts
Component Registration
There are two main approaches to registering components with Tambo:
1. 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.
When creating the list of components, you may not yet have access to the tools callbacks that you need, because they may need additional context or authentication.
You can still register the component without the tools using this approach, and then register the tools later with addToolAssociation
. See the Tools documentation for more information.
2. Dynamic Registration
For runtime registration, use the registerComponent
function from the useTamboRegistry()
hook:
Note that dynamic registration makes tools available to all components within the <TamboProvider>
component.
Props Definition Options
You have two options for defining the props your components expect:
Using Zod (Recommended)
You can also use z.describe()
to provide extra guidance to the AI:
Using a JSON-like Object (Alternative)
Now when a user sends a message asking about something related to your components, Tambo can respond with the appropriate component filled with relevant data!