Change one and the preview follows.
ask(question: string, history: Step[]) => Promise<ChartAnswer>RequiredinitialStepplaceholderstring'Ask about your data'onAnswer(question: string, answer: ChartAnswer) => voidThrough a ref: type(), send(), back(), point(), shape()
usage.tsx
<AskChartask={ask}/>
A whole page, ready to paste.
page.tsx
"use client"
import { AskChart } from "@/components/detent/components/askchart/AskChart"
import type { ChartAnswer } from "@/components/detent/components/askchart/AskChart"
// Swap this for a call to your own model or route.
async function ask(question: string): Promise<ChartAnswer> {
return {
headline: "Europe is catching up with the US",
detail: `Your question: ${question}`,
categories: ["Q1", "Q2", "Q3", "Q4"],
series: [
{ id: "us", label: "United States", values: [1_120_000, 1_160_000, 1_140_000, 1_180_000] },
{ id: "eu", label: "Europe", values: [760_000, 880_000, 960_000, 1_050_000] },
],
lead: "eu",
format: "currency",
kind: "bars",
source: "Sales ledger",
}
}
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center p-6">
<div className="w-full max-w-[640px]">
<AskChart ask={ask} placeholder="Ask about revenue" onAnswer={(q, a) => console.log(q, a)} />
</div>
</main>
)
}