React Waveform / Chart Copilot
A copilot that says “there is ringing after the edge” is far more useful when it also shows where on the trace it means. So each answer carries the region it refers to and lights it up on the signal — the chart is yours, the copilot just annotates it.
qspi0 SCLK step response
Signal copilot
Ask about this signal:
Pick a question — the copilot answers and highlights the exact region of the trace it means.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| title | string | Chart heading |
| children | React.ReactNode | The chart / waveform to annotate |
| insights | CopilotInsight[] | { id, question, answer, region? } — region in % of width |
Answers that point
The difference between a chatbot bolted next to a chart and a real chart copilot is deixis — the ability to say "there." Each insight carries an optional region, and selecting its question highlights that span of the trace in accent-bold while the answer appears below. A reader gets the explanation and the location together, which is how a human expert would actually teach you to read a signal: not "there is overshoot" but "this is the overshoot."
Bring your own chart
The component is deliberately agnostic about what it annotates — pass any Kelvin chart, waveform, or inline SVG as children, and the copilot overlays its highlight on top. In production the insights come from your model given the chart data; here they are authored, so the pattern is fully visible in a static export with no live call. Keep questions in the user's words ("Is settling within spec?"), because a copilot is judged on whether it answers the question you actually have.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.