Defining Tambo Components

Tell Tambo which components it can use in responses, what they are for, and what props they expect by defining a TamboComponent for each.

import { z } from "zod";
import { DataChart } from "@/components/DataChart";
import { TamboProvider } from "@tambo-ai/react";

// Define the schema with Zod
export const DataChartProps = z.object({
  data: z.object({
    labels: z.array(z.string()),
    values: z.array(z.number()),
  }),
  type: z.enum(["bar", "line", "pie"]),
});

const tamboComponents: TamboComponent[] = [
  {
    component: DataChart,
    name: "DataChart",
    description: "Displays data as a chart",
    propsSchema: DataChartProps,
  },
];

<TamboProvider components={tamboComponents}>
  <App />
</TamboProvider>;

Note that when using zod's .optional() on a field, tambo may not attempt to generate any value for the prop.

You can also use z.describe() to provide extra guidance to the AI:

import { z } from "zod";
import { DataChart } from "@/components/DataChart";
import { TamboProvider } from "@tambo-ai/react";

// Define schema with descriptions for AI
export const DataChartProps = z
  .object({
    data: z
      .object({
        labels: z
          .array(z.string())
          .describe("Use single words or short phrases."),
        values: z.array(z.number()).describe("Use whole numbers."),
      })
      .describe("A component for displaying data in various chart formats"),
    type: z
      .enum(["bar", "line", "pie"])
      .describe(
        "Use a chart type that is appropriate for the data. Only use pie charts when less than 5 values.",
      ),
  })
  .describe("A component for displaying data in various chart formats");

const tamboComponents: TamboComponent[] = [
  {
    component: DataChart,
    name: "DataChart",
    description: "Displays data as a chart",
    propsSchema: DataChartProps,
  },
];

<TamboProvider components={tamboComponents}>
  <App />
</TamboProvider>;

Now when a user sends a message asking about something related to your components, Tambo can respond with the appropriate component filled with relevant data!