Chart

Display interactive data visualizations.

npx tool-agent "integrate the chart component to visualize data with interactive charts"

npx shadcn@latest add @tool-ui/chart

"How did I spend money this week?" is a question best answered visually. Chart renders bar or line visualizations inline in the conversation. You pass data, an x-axis key, and one or more series. The assistant can show spending breakdowns, revenue trends, or performance over time without describing the numbers in prose.

Role: Information. For displaying data the user reads. See Design Guidelines for how component roles work.

Getting Started

Run this once from your project root.

npx tool-agent "integrate the chart component to visualize data with interactive charts"

npx shadcn@latest add @tool-ui/chart

Render Chart in your UI with tool-compatible props.

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/>;

import { type Toolkit } from "@assistant-ui/react";import { Chart } from "@/components/tool-ui/chart";import { safeParseSerializableChart } from "@/components/tool-ui/chart/schema";export const toolkit: Toolkit = {  showChart: {    type: "backend",    render: ({ result }) => {      const parsed = safeParseSerializableChart(result);      if (!parsed) {        return null;      }      return <Chart {...parsed} />;    },  },};