Token rate meterPro
Live tokens per second while a response streams, with a 30 s sparkline and the true average once the run ends.
On this page
ProA live run: tokens per second settling as the stream steadies, then the true average.
Installation
Usage
import { TokenRateMeter } from "@/components/ui/chatcn/pro/token-rate-meter"
<TokenRateMeter tokens={usage.outputTokens} status={status} />Pass the running output token count and the status; the meter derives the rate itself. It samples every 250 ms and shows a short exponential average, so a bursty stream reads as a steady figure. When the status becomes done the figure switches to tokens over total time. For the full breakdown after a run, use the free generation-stats.
Examples
States
ProWaiting for the first token, a stream that stops with an error and the inline footer.
Props
| Prop | Type | Notes |
|---|---|---|
tokens | number | Output tokens so far |
status | "waiting" | "streaming" | "done" | "error" | Default streaming |
window | number | Seconds of history in the sparkline. Default 30 |
sampleMs | number | Sampling interval. Default 250 |
variant | "panel" | "inline" | inline is one line for a message footer |
locale | string | Number formatting |
labels | Partial<TokenRateMeterLabels> | Every string, for translation |
Accessibility
- The figure is not a live region: it changes four times a second. When the run ends, a polite live region says once how many tokens came in how long, at what average.
- The sparkline is an image named after its window.
- Figures are tabular, so the readout never shifts sideways as it changes.
Motion
Nothing animates: the figure and the line update in place as samples arrive. The newest point is the kit's small square, only while streaming.