# AI Usage Meter

Token consumption and budget control panel in an AI workspace.

- id: `ai-usage-meter`
- Page: https://agentic-ui-kit.com/components/ai-usage-meter
- Live preview: https://agentic-ui-kit.com/live/component/ai-usage-meter

## Install

```bash
agentic-ui add ai-usage-meter
npx shadcn@4.17.0 add @agentic-ui/ai-usage-meter
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** token-breakdown, cost-vs-budget-tracking, model-cost-distribution, timeframe-switching, threshold-alert-state, rate-limit-saturation, interactive-budget-adjustment, empty-state, error-recovery, keyboard-navigation
- **Intents:** track-status, monitor-live, explore-detail, configure
- **Suits domains:** ai-workspace, billing, analytics, saas, devtools
- **Interaction:** timeframe-switch, budget-limit-adjustment, breakdown-tab-toggle, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** token consumption and budget control panel in an AI workspace, widget for monitoring inference cost and rate limits in developer consoles, billing and LLM model quota section in multi-tenant SaaS platforms, AI agent operations dashboard with per-model consumption tracking
- **Avoid when:** metrics that do not involve token consumption or inference cost, purely fixed-subscription billing with no volumetric usage component
- **Preserve when adapting:** meter-aria-contract, budget-threshold-color-logic, token-type-breakdown-hierarchy, model-cost-distribution-layout
- **Replace when adapting:** workspace-usage-data, currency-formatting, model-catalog-names
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, progress
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** AI App (blueprint)
- **Registry dependencies:** lib-primitives