<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/>Choose the right visualization for your data
Compare datasets side-by-side with automatic coloring
Click handlers and hover tooltips for deeper exploration
Toggle legends, grid lines, and custom color palettes
Switch to line charts for time-series or continuous data.
<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/>Charts work with just data, xKey, and series. Title, description, legend, and grid are optional.
<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" } ]}/>Copy components/tool-ui/chart and the shared directory into your project. The shared folder contains utilities used by all Tool UI components. The tool-ui directory should sit alongside your shadcn ui directory.
This component requires the following shadcn/ui components:
pnpm dlx shadcn@latest add card chartimport { 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/>;Define a tool that returns chart data, then render the component with runtime validation.
// Backend toolimport { 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-uiimport { 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); }}/>Prop
Type
Prop
Type
Prop
Type
<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 chartimport { 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);
}}
/>