AI & Agents
Cost Meter
Spend against budget for a run, a day or a month — amber at 80%, red when it is gone.
Usage
Spend this run
€2.00 budget
€0.42
21% used€1.58 left
Spend today
€20 budget
€17
87% usedNearly spent
Spend this month
€200 budget
€240
120% usedBudget reached
Installation
npm install @wunderui/reactThen import what you need:
import { CostMeter } from "@wunderui/react"In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Budget & recovery
Spend, a failed run and an approval request side by side.
Spend today
$10 budget
$8.60
86% usedNearly spent
Rate limit exceeded.
Failed at
Draft the follow-up email· Attempt 2 of 3Send 12 emails
High riskTemplated follow-up to at-risk customers.
1 min ago
API Reference
| Prop | Type | Default |
|---|---|---|
| spent | number | — |
| budget | number | — |
| unit | "currency" | "tokens" | "requests" | "currency" |
| currency | string | "EUR" |
| period | "run" | "day" | "month" | "run" |
| warnAt | number | 0.8 |