<Chart
  id="chart-example"
  type="bar"
  title="Monthly Revenue"
  description="Revenue vs Expenses (2024)"
  data={[
      {
          "month": "Jan",
          "revenue": 4000,
          "expenses": 2400
      },
      {
          "month": "Feb",
          "revenue": 3000,
          "expenses": 1398
      },
      {
          "month": "Mar",
          "revenue": 5000,
          "expenses": 3200
      },
      {
          "month": "Apr",
          "revenue": 2780,
          "expenses": 3908
      },
      {
          "month": "May",
          "revenue": 1890,
          "expenses": 4800
      },
      {
          "month": "Jun",
          "revenue": 2390,
          "expenses": 3800
      }
  ]}
  xKey="month"
  series={[
      {
          "key": "revenue",
          "label": "Revenue"
      },
      {
          "key": "expenses",
          "label": "Expenses"
      }
  ]}
  showLegend
  showGrid
/>

<Chart
  id="chart-example"
  type="line"
  title="System Performance"
  description="CPU and Memory usage over time"
  data={[
      {
          "time": "00:00",
          "cpu": 45,
          "memory": 62
      },
      {
          "time": "04:00",
          "cpu": 32,
          "memory": 58
      },
      {
          "time": "08:00",
          "cpu": 67,
          "memory": 71
      },
      {
          "time": "12:00",
          "cpu": 89,
          "memory": 85
      },
      {
          "time": "16:00",
          "cpu": 76,
          "memory": 79
      },
      {
          "time": "20:00",
          "cpu": 54,
          "memory": 68
      }
  ]}
  xKey="time"
  series={[
      {
          "key": "cpu",
          "label": "CPU %"
      },
      {
          "key": "memory",
          "label": "Memory %"
      }
  ]}
  showLegend
  showGrid
/>

<Chart
  id="chart-example"
  type="bar"
  data={[
      {
          "day": "Mon",
          "steps": 8420
      },
      {
          "day": "Tue",
          "steps": 6200
      },
      {
          "day": "Wed",
          "steps": 9150
      },
      {
          "day": "Thu",
          "steps": 4800
      },
      {
          "day": "Fri",
          "steps": 7300
      }
  ]}
  xKey="day"
  series={[
      {
          "key": "steps",
          "label": "Steps"
      }
  ]}
/>

pnpm dlx shadcn@latest add card chart

import { Chart } from "@/components/tool-ui/chart";

<Chart
  id="monthly-revenue"
  type="bar"
  title="Monthly Revenue"
  description="2024 YTD"
  data={[
    { month: "Jan", revenue: 4000, expenses: 2400 },
    { month: "Feb", revenue: 3000, expenses: 1398 },
    // ...
  ]}
  xKey="month"
  series={[
    { key: "revenue", label: "Revenue" },
    { key: "expenses", label: "Expenses" },
  ]}
  showLegend
  showGrid
/>;

// Backend tool
import { tool, jsonSchema } from "ai";

const showChart = tool({
  description: "Display data as a chart",
  inputSchema: jsonSchema<{ metric: string }>({
    type: "object",
    properties: { metric: { type: "string" } },
    required: ["metric"],
    additionalProperties: false,
  }),
  async execute({ metric }) {
    const data = await fetchMetricData(metric);
    return {
      id: `chart-${metric}`,
      type: "line",
      title: `${metric} Over Time`,
      data,
      xKey: "date",
      series: [{ key: "value", label: metric }],
      showGrid: true,
    };
  },
});

// Frontend with assistant-ui
import { makeAssistantToolUI } from "@assistant-ui/react";
import {
  Chart,
  ChartErrorBoundary,
  parseSerializableChart,
} from "@/components/tool-ui/chart";

export const ShowChartUI = makeAssistantToolUI({
  toolName: "showChart",
  render: ({ result }) => {
    if (result === undefined) {
      return (
        <div className="bg-card/60 text-muted-foreground w-full max-w-xl rounded-2xl border px-5 py-4 text-sm shadow-xs">
          Loading chart…
        </div>
      );
    }

    const chart = parseSerializableChart(result);
    return (
      <ChartErrorBoundary>
        <Chart {...chart} />
      </ChartErrorBoundary>
    );
  },
});

<Chart
  id="custom-colors"
  type="bar"
  data={data}
  xKey="month"
  series={[
    { key: "revenue", label: "Revenue" },
    { key: "expenses", label: "Expenses" },
  ]}
  colors={["#22c55e", "#ef4444"]}
/>

<Chart
  id="clickable"
  type="line"
  data={data}
  xKey="time"
  series={[{ key: "value", label: "Value" }]}
  onDataPointClick={(point) => {
    console.log("Clicked:", point.xValue, point.yValue);
  }}
/>