Component State

Tambo can track the internal state of generated components using useTamboComponentState, providing valuable context for responding to subsequent user messages.

Benefits

• Tambo uses component state as context for responding to user messages
• State persists when historical messages are recalled

How It Works

Components registered with tambo often have internal state values that update what's rendered as users interact. For example, an "email sending" component might include:

 
export const EmailSender = () => {
  ...
  const [emailBody, setEmailBody] = useState("") // tracks the message being typed
  const [isSent, setIsSent] = useState(false) // tracks whether the 'send' button has been clicked
  ...
}

For tambo to understand these state values when users say things like "finish this email for me" or "did I send that email earlier?", simply replace useState with useTamboComponentState:

import { useTamboComponentState } from "@tambo-ai/react";
 
export const EmailSender = () => {
  ...
  const [emailBody, setEmailBody] = useTamboComponentState("");
  const [isSent, setIsSent] = useTamboComponentState(false);
  ...
}

Keep in mind that the component state will only be updated when the component is re-rendered, so if you are streaming props into the component, you will need to manually update the state when the props change.

Good news for you is that we have a solution for that in the next section.