# Defining Tambo Components
URL: /concepts/components/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.

```tsx
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:

```tsx
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>;
```

<Callout type="info" title="Interactable Components">
  This registration approach is for components that Tambo generates from scratch. If you want to pre-place components on your page and let Tambo modify them, use [Interactable Components](./interactable-components) instead—they register themselves automatically when mounted.
</Callout>

<Callout type="warn" title="Want Both Capabilities?">
  If you want Tambo to both modify pre-placed interactable components AND be able to generate new instances inline, register the component in the `TamboProvider` components array as well.
</Callout>

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!