Agents
Context Meter
How full the context window is, with tokens and cost on hover.
Context Meter shows how much of the model's context window a conversation uses, as a ring that warms from ink to amber to red. Hover for the token breakdown and cost.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/context-meter.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/context-meter.
Builds on: hover-card
Usage
import { ContextMeter } from "@/components/ui/context-meter";
<ContextMeter used={84000} max={200000} cost={0.42} />API reference
ContextMeter
| Prop | Type | Default | Description |
|---|---|---|---|
| used · max | number | — | Tokens. |
| breakdown | { input?; output?; cached?; reasoning? } | — | Hover detail. |
| cost | number | — | Dollars. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: context window indicator · token usage ui · llm token counter react · ai cost meter · shadcn ai context