# Shadcn AI Usage blocks

> Spend planning and month to date spend views for AI product workspaces, by token volume, model, budget and caps.

- Type: Pro blocks (AI & Agents)
- Page: https://reui.io/blocks/ai-agents/ai-usage
- Blocks: 2
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## When to use

- A self-serve planner where an admin sets next month's token volume, model and add-ons against a budget
- A month to date breakdown of AI spend by model, team, agent and API key, with the caps at risk
- A budget, run rate or volume discount readout inside an AI product's own account area

## When not to use

- Staff back office for invoices, subscriptions, dunning and metered charges: use the [Billing blocks](https://reui.io/blocks/solutions/billing.md)
- Public plan tiers or an upgrade paywall shown before anyone has usage: use the [Pricing blocks](https://reui.io/blocks/marketing/pricing.md)
- An operator console for provider health, routing and quotas across an org: use the [AI Ops blocks](https://reui.io/blocks/solutions/ai-ops.md)

## Agent notes

- `AiUsage` takes no props and calls no API; every figure comes from typed constants in components/data.tsx, so swap them for your data
- Money prints through en-US USD helpers such as `formatDollars` in formatters.ts, so another currency starts there

## Third-party libraries

- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react), used by 2 of 2 blocks (the docs follow the latest Motion, with no React API break since v12)
- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/), used by 1 of 2 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 1 of 2 blocks

## Blocks

- [Usage Planner](https://reui.io/blocks/ai-agents/ai-usage/ai-usage-1.md): Usage planner with a stepped token ruler, model cards and a live spend estimate. Best for a self-serve page where a workspace admin sets next month's token volume, model and add-ons and sees the bill against a budget.
- [Spend Map](https://reui.io/blocks/ai-agents/ai-usage/ai-usage-2.md): Spend map that fans monthly AI spend out by model, team, agent and API key. Best for a month to date view of where AI spend goes by model, team, agent and API key, with caps at risk and one item's daily spend and projection.

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.
