TypeScript Types
TypeScript interfaces and types exported by @tambo-ai/react
The @tambo-ai/react package exports TypeScript types and interfaces to help you build type-safe AI applications.
TamboTool
The TamboTool interface defines the structure for registering tools with Tambo.
interface TamboTool {
name: string;
description: string;
tool: (...args: any[]) => any;
toolSchema: z.ZodFunction | JSONSchemaLite;
transformToContent?: (
result: any,
) => Promise<ChatCompletionContentPart[]> | ChatCompletionContentPart[];
}Properties
name
The unique identifier for the tool. This is how Tambo references the tool internally.
name: string;description
A clear description of what the tool does. This helps the AI understand when to use the tool.
description: string;tool
The function that implements the tool's logic. Can be synchronous or asynchronous.
tool: (...args: any[]) => any;toolSchema
A Zod function schema that defines the tool's parameters and return type. Can also be a JSON Schema object.
toolSchema: z.ZodFunction | JSONSchemaLite;Example:
toolSchema: z.function()
.args(z.string().describe("The city name"))
.returns(z.object({ temperature: z.number(), condition: z.string() }));transformToContent (optional)
A function that transforms the tool's return value into an array of content parts. Use this when your tool needs to return rich content like images or audio.
transformToContent?: (result: any) => Promise<ChatCompletionContentPart[]> | ChatCompletionContentPart[];By default, tool responses are stringified and wrapped in a text content part. The transformToContent function allows you to return rich content including images, audio, or mixed media.
Example:
transformToContent: (result) => [
{ type: "text", text: result.description },
{ type: "image_url", image_url: { url: result.imageUrl } },
];Learn more about returning rich content from tools.
TamboComponent
The TamboComponent interface defines the structure for registering React components with Tambo.
interface TamboComponent {
name: string;
description: string;
component: ComponentType<any>;
propsSchema?: z.ZodTypeAny | JSONSchema7;
propsDefinition?: any;
loadingComponent?: ComponentType<any>;
associatedTools?: TamboTool[];
}Properties
name
The unique identifier for the component.
name: string;description
A clear description of what the component displays or does. This helps the AI understand when to use the component.
description: string;component
The React component to render.
component: ComponentType<any>;propsSchema (recommended)
A Zod schema that defines the component's props.
propsSchema?: z.ZodTypeAny | JSONSchema7;propsDefinition (deprecated)
A JSON object defining the component's props. Use propsSchema instead.
propsDefinition?: any;loadingComponent (optional)
A component to display while the main component is loading.
loadingComponent?: ComponentType<any>;associatedTools (optional)
An array of tools that are associated with this component.
associatedTools?: TamboTool[];ChatCompletionContentPart
Content parts that can be sent to or received from the AI.
interface ChatCompletionContentPart {
type: "text" | "image_url" | "input_audio";
text?: string;
image_url?: { url: string; detail?: "auto" | "high" | "low" };
input_audio?: { data: string; format: "wav" | "mp3" };
}This type is used in the transformToContent function to define rich content responses.
TamboThreadMessage
A message in a Tambo thread.
interface TamboThreadMessage {
id: string;
role: "user" | "assistant" | "system" | "tool";
content: ChatCompletionContentPart[];
createdAt: string;
renderedComponent?: React.ReactNode;
component?: {
componentName: string;
props: any;
};
actionType?: string;
error?: string;
}TamboThread
A Tambo conversation thread.
interface TamboThread {
id: string;
messages: TamboThreadMessage[];
contextKey?: string;
createdAt: string;
updatedAt: string;
}GenerationStage
The current stage of AI response generation.
enum GenerationStage {
IDLE = "IDLE",
CHOOSING_COMPONENT = "CHOOSING_COMPONENT",
FETCHING_CONTEXT = "FETCHING_CONTEXT",
HYDRATING_COMPONENT = "HYDRATING_COMPONENT",
STREAMING_RESPONSE = "STREAMING_RESPONSE",
COMPLETE = "COMPLETE",
ERROR = "ERROR",
}ContextAttachment
Represents a context attachment that will be sent with the next user message.
interface ContextAttachment {
id: string; // Auto-generated unique identifier
displayName?: string; // Optional display name for UI rendering
context: string; // The context value that will be used in additionalContext
type?: string; // Optional type identifier for grouping/rendering
}Properties
id
Unique identifier for the attachment. Auto-generated when adding a context attachment.
id: string;displayName
Display name for UI rendering.
displayName: string;context
The context value that will be used in additionalContext when the next message is sent.
context: string;type
Optional type identifier for grouping/rendering multiple contexts of the same type.
type?: string;ContextAttachmentState
The state interface returned by the useTamboContextAttachment hook.
interface ContextAttachmentState {
attachments: ContextAttachment[];
addContextAttachment: (
contextAttachment: Omit<ContextAttachment, "id">,
) => ContextAttachment;
removeContextAttachment: (id: string) => void;
clearContextAttachments: () => void;
}Properties
attachments
Array of active context attachments that will be included in additionalContext when the next message is sent.
attachments: ContextAttachment[];addContextAttachment
Function to add a new context attachment. The id is automatically generated. All attachments are automatically registered together as a single merged context helper (key: contextAttachments) that returns an array of all active attachments.
addContextAttachment: (contextAttachment: Omit<ContextAttachment, "id">) =>
ContextAttachment;removeContextAttachment
Function to remove a specific context attachment by its ID. The context helper automatically updates to reflect the change.
removeContextAttachment: (id: string) => void;clearContextAttachments
Function to remove all active context attachments. The context helper automatically updates to reflect the change. Context attachments are automatically cleared after message submission (one-time use), so you typically don't need to call this manually.
clearContextAttachments: () => void;