React Hooks

The @tambo-ai/react npm package provides hooks that expose state values and functions to make building AI apps with Tambo simple.

Here you'll find a description of each state value and function, organized by hook.

useTamboRegistry

This hook provides helpers for component and tool registration.

registerComponent

const { registerComponent } = useTamboRegistry()

This function is used to register components with Tambo, allowing them to be potentially used in Tambo's responses.

registerTool

const { registerTool } = useTamboRegistry()

This function is used to register tools with Tambo.

registerTools

const { registerTools } = useTamboRegistry()

This function allows registering multiple tools at once.

addToolAssociation

const { addToolAssociation } = useTamboRegistry()

This function creates an association between components and tools.

componentList

const { componentList } = useTamboRegistry()

This value provides access to the list of registered components.

toolRegistry

const { toolRegistry } = useTamboRegistry()

This value provides access to the registry of all registered tools.

componentToolAssociations

const { componentToolAssociations } = useTamboRegistry()

This value provides access to the associations between components and tools.

useTamboThread

This hook provides access to the current thread and functions for managing thread interactions.

thread

const { thread } = useTamboThread()

The current thread object containing messages and metadata. Messages can be accessed via thread.messages. This value is kept up-to-date automatically by Tambo when messages are sent or received.

sendThreadMessage

const { sendThreadMessage } = useTamboThread()

Function to send a user message to Tambo and receive a response. A call to this function will update the provided thread state value.

To have the response streamed, use sendThreadMessage(message, {streamResponse: true}).

generationStage

const { generationStage } = useTamboThread()

Current stage of message generation. Possible values are:

• IDLE: The thread is not currently generating any response (Initial stage)
• CHOOSING_COMPONENT: Tambo is determining which component to use for the response
• FETCHING_CONTEXT: Gathering necessary context for the response by calling a registered tool
• HYDRATING_COMPONENT: Generating the props for a chosen component
• STREAMING_RESPONSE: Actively streaming the response
• COMPLETE: Generation process has finished successfully
• ERROR: An error occurred during the generation process

inputValue

const { inputValue } = useTamboThread()

Current value of the thread input field.

generationStatusMessage

const { generationStatusMessage } = useTamboThread()

Status message describing the current generation state, as generated by Tambo.

isIdle

const { isIdle } = useTamboThread()

Boolean indicating whether the thread is in an idle state (generationStage is IDLE, COMPLETE, or ERROR).

switchCurrentThread

const { switchCurrentThread } = useTamboThread()

Function to change the active thread by id. This will update the thread state value to the fetched thread.

addThreadMessage

const { addThreadMessage } = useTamboThread()

Function to append a new message to the thread.

updateThreadMessage

const { updateThreadMessage } = useTamboThread()

Function to modify an existing thread message.

setLastThreadStatus

const { setLastThreadStatus } = useTamboThread()

Function to update the status of the most recent thread message.

setInputValue

const { setInputValue } = useTamboThread()

Function to update the input field value.

useTamboThreadList

This hook provides access to the list of all threads for a project and their loading states.

data

const { data } = useTamboThreadList()

Array of threads or null if not yet loaded.

isPending

const { isPending } = useTamboThreadList()

Boolean indicating if threads are currently being fetched.

isSuccess

const { isSuccess } = useTamboThreadList()

Boolean indicating if threads were successfully fetched.

isError

const { isError } = useTamboThreadList()

Boolean indicating if an error occurred while fetching threads.

error

const { error } = useTamboThreadList()

Error object containing details if the fetch failed.

useTamboThreadInput

This hook provides utilities for building an input interface that sends messages to Tambo.

value

const { value } = useTamboThreadInput()

Current value of the input field.

setValue

const { setValue } = useTamboThreadInput()

Function to update the input field value.

submit

const { submit } = useTamboThreadInput()

Function to submit the current input value, with optional context and streaming configuration.

isPending

const { isPending } = useTamboThreadInput()

Boolean indicating if a submission is in progress.

isSuccess

const { isSuccess } = useTamboThreadInput()

Boolean indicating if the last submission was successful.

isError

const { isError } = useTamboThreadInput()

Boolean indicating if the last submission failed.

error

const { error } = useTamboThreadInput()

Error object containing details if the submission failed.

useTamboSuggestions

This hook provides utilities for managing AI-generated message suggestions.

suggestions

const { suggestions } = useTamboSuggestions()

List of available AI-generated suggestions for the next message.

selectedSuggestionId

const { selectedSuggestionId } = useTamboSuggestions()

ID of the currently selected suggestion.

accept

const { accept } = useTamboSuggestions()

Function to accept and apply a suggestion, with an option for automatic submission.

acceptResult

const { acceptResult } = useTamboSuggestions()

Detailed mutation result for accepting a suggestion.

generateResult

const { generateResult } = useTamboSuggestions()

Detailed mutation result for generating new suggestions.

isPending

const { isPending } = useTamboSuggestions()

Boolean indicating if a suggestion operation is in progress.

isSuccess

const { isSuccess } = useTamboSuggestions()

Boolean indicating if the last operation was successful.

isError

const { isError } = useTamboSuggestions()

Boolean indicating if the last operation resulted in an error.

error

const { error } = useTamboSuggestions()

Error object containing details if the operation failed.

useTamboClient

This hook provides direct access to the Tambo client instance.

client

const { client } = useTamboClient()

The Tambo client instance for direct API access.

useTamboComponentState

This hook is similar to React's useState, but allows Tambo to see the state values to help respond to later messages.

const [myValue, setMyValue] = useTamboComponentState()

value and setValue

const { value } = useTamboComponentState()

Current state value stored in the thread message for the given key.

setValue

const { setValue } = useTamboComponentState()

Function to update the state value, synchronizing both local state and server state.

useTamboContextHelpers

This hook provides dynamic control over context helpers.

getContextHelpers

const { getContextHelpers } = useTamboContextHelpers()

Returns the current map of registered helper functions keyed by name.

addContextHelper

const { addContextHelper } = useTamboContextHelpers()

Adds or replaces a helper at the given key.

removeContextHelper

const { removeContextHelper } = useTamboContextHelpers()

Removes a helper by key so it is no longer included in outgoing messages.

useCurrentInteractablesSnapshot

const snapshot = useCurrentInteractablesSnapshot()

Returns a cloned snapshot of the current interactable components.