Customizing

Customizing

Change what the AI can render

Edit src/lib/tambo.ts to add or remove entries in the components and tools arrays.

Components

Each component has:

• name — Identifier the AI uses to choose the component.
• description — Tells the AI when to use it.
• component — The React component.
• propsSchema — Zod schema for the props the AI can pass.

Example:

import { Graph, graphSchema } from "@/components/tambo/graph";

export const components: TamboComponent[] = [
  {
    name: "Graph",
    description: "Render charts (bar, line, pie, scatter, box, heatmap). Use buildChartFromData to get { data, title }, then pass to Graph.",
    component: Graph,
    propsSchema: graphSchema,
  },
  // ...
];

Tools

Each tool has:

• name — Tool name the model calls.
• description — When and how to use it (include Jupyter-first guidance if relevant).
• tool — Async or sync function implementing the tool.
• toolSchema — Zod schema for the tool arguments (e.g. z.function().args(z.object({ ... }))).

Example:

{
  name: "getUploadedDataset",
  description: "Get the content of a dataset the user uploaded in chat (Dataset ID or inline). When this returns null, use Jupyter MCP to load from paths like work/holdings.csv...",
  tool: async ({ datasetId }) => { /* ... */ },
  toolSchema: z.function().args(z.object({ datasetId: z.string().optional() })),
}

More options

You can find more options (custom components, tool patterns, elicitations) at tambo.co/docs.

---

P.S. Tambo is 100% open source — tambo-ai/tambo. Idea credits and feature credit go to Claude.