Sending Thread Messages

Sending thread messages

We recommend using the useTamboThreadInput hook to send messages to the thread.

import { useTamboThreadInput } from "@tambo-ai/react";

const { value, setValue, submit } = useTamboThreadInput();

The value is the value of the message that you want to send.

The setValue is the function that you can use to update the value of the message.

To send a user's message to tambo, you can use the submit function:

You can also pass in an optional options object to the submit function.

setValue("What is the weather like today?");

await submit({
  streamResponse: true, // We recommend streaming the response to the user
});

You can use isPending and error to show a loading state or an error state:

if (isPending) {
  return <div>Loading...</div>;
}

if (error) {
  return <div>Error: {error.message}</div>;
}

You can also use the sendThreadMessage function to send messages to the thread:

const { sendThreadMessage } = useTamboThread();

await sendThreadMessage("What is the weather like today?", {
  streamResponse: true,
});

Adding Context to Messages

When sending messages, you can include additional context that will be sent along with the user's message. This is useful for providing extra information that tambo should consider when generating a response.

With useTamboThreadInput

await submit({
  streamResponse: true,
  additionalContext: {
    pageInfo: {
      url: "/weather",
    },
    location: "San Francisco",
    units: "fahrenheit",
  },
});

With sendThreadMessage

await sendThreadMessage("What is the weather like today?", {
  streamResponse: true,
  additionalContext: {
    pageInfo: {
      url: "/weather",
    },
    location: "San Francisco",
    units: "fahrenheit",
  },
});

The additionalContext parameter accepts a Record<string, any> object, allowing you to pass any structured data as context.

Context Helpers

Tambo can automatically include context helpers with every message when they are configured. Configure helpers either:

• Globally on TamboProvider via the contextHelpers prop, or
• Locally on a page/layout using TamboContextHelpersProvider (active only while mounted)

Prebuilt helpers include:

• currentTimeContextHelper: Returns current timestamp
• currentPageContextHelper: Returns current page URL/title information

You can also define custom context helpers and register them either globally with TamboProvider or locally with TamboContextHelpersProvider. Any active helpers will be automatically merged into the message context. If the same key is registered in multiple places at different times, the most recently mounted registration takes precedence while it’s mounted.

Your manual additionalContext will be merged with any resolved helper results. For example, if the currentTimeContextHelper context helper is passed, the above code would result in a combined context like:

{
  "pageInfo": {
    "url": "/weather"
  },
  "location": "San Francisco",
  "units": "fahrenheit",
  "userTime": {
    "timestamp": "2025-01-15T20:30:00.000Z"
  }
}