Charts Beta

import { lazy } from "react"
import { tool } from "ai"
import { z } from "zod"

import { defineFableComponent } from "@/lib/fable-ui/core"
import { chartTypes } from "./charts.types"

const Charts = lazy(() =>
  import("./charts").then((module) => ({ default: module.Charts })),
)

const chartTypeSchema = z.enum(chartTypes)
const chartValueSchema = z.union([
  z.string(),
  z.number(),
  z.boolean(),
  z.null(),
])
const chartDataRowSchema = z.record(z.string(), chartValueSchema)

const chartSeriesSchema = z.object({
  key: z.string().min(1),
  label: z.string().min(1).optional(),
  color: z.string().min(1).optional(),
})

const chartFormatSchema = z.object({
  value: z.enum(["number", "currency", "percent"]).optional(),
  locale: z.string().min(1).optional(),
  currency: z.string().min(1).optional(),
  compact: z.boolean().optional(),
})

export const showChartInputSchema = z.object({
  title: z.string().min(1),
  description: z.string().optional(),
  context: z.string().optional(),
  data: z.array(chartDataRowSchema).max(200),
  xKey: z.string().min(1).optional(),
  categoryKey: z.string().min(1).optional(),
  valueKey: z.string().min(1).optional(),
  series: z.array(chartSeriesSchema).min(1).max(8).optional(),
  availableChartTypes: z.array(chartTypeSchema).min(1).max(3).optional(),
  defaultChartType: chartTypeSchema.optional(),
  format: chartFormatSchema.optional(),
  emptyState: z
    .object({
      title: z.string().min(1),
      description: z.string().optional(),
    })
    .optional(),
})

export type ShowChartInput = z.infer<typeof showChartInputSchema>

export function createShowChartTool() {
  return tool({
    description:
      "Show a chart from static, display-ready data already available in the conversation. Supports line, bar, and pie chart payloads. Do not fetch model-owned URLs, invent data, run SQL, or perform host data access.",
    inputSchema: showChartInputSchema,
    execute: async (input) => input,
  })
}

export const showChartTool = createShowChartTool()

export const showChart = defineFableComponent({
  name: "show_chart",
  schema: showChartInputSchema,
  tool: showChartTool,
  renderer: {
    Component: Charts,
    loadingProps: { title: "Charts", data: [], isLoading: true },
    emptyProps: { title: "Charts", data: [] },
    errorProps: (description: string) => ({
      title: "Charts unavailable",
      data: [],
      error: { title: "Charts unavailable", description },
    }),
    toProps: (data: ShowChartInput) => ({ ...data }),
  },
})

---
tool: show_chart
component: Charts
---

# show_chart

Use `show_chart` when the assistant has static, display-ready data that is best understood as a line, bar, or pie chart.

Rules:

- Keep model-provided chart data small and explicit.
- Use `line` for trends over an ordered x-axis, `bar` for category comparison, and `pie` for part-to-whole slices.
- Include `xKey` and `series` for line/bar charts.
- Include `categoryKey` and `valueKey` for pie charts.
- Set `availableChartTypes` when the same payload can be viewed in more than one chart type.
- Do not let the model fetch URLs, query databases, run SQL, or decide authorization.
- For host-owned data, ask the host application to provide validated rows before calling this tool.

Rendering uses shadcn chart conventions on top of Recharts. Static model-provided rows are supported; developer-owned data fetching should happen outside the tool payload and pass validated rows into the component.