# Shadcn AI Usage blocks

> Spend planning and month to date spend views, edge AI node fleets and local model settings for AI product workspaces.

- Type: Pro blocks (AI & Agents)
- Page: https://web.dev.reui.io/blocks/ai-agents/ai-usage
- Blocks: 4
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.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
- Inference on your own hardware: edge nodes under a power budget, or open weight models sized to a GPU server

## When not to use

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

## Agent notes

- `AiUsage` takes no props and calls no API; its figures are typed constants, mostly 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 3 of 4 blocks (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 3 of 4 blocks
- 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 4 blocks

## Blocks

- [Usage Planner](https://web.dev.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://web.dev.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.
- [Edge Nodes](https://web.dev.reui.io/blocks/ai-agents/ai-usage/ai-usage-3.md): Edge AI node fleet with an isometric inference box you open, inspect and power cap. Best for a fleet of on-prem edge inference boxes: usage, models, power mode and heat per node on an isometric device you control.
- [Local Models](https://web.dev.reui.io/blocks/ai-agents/ai-usage/ai-usage-4.md): Local model settings with a GPU server cutaway whose card LEDs show model memory. Best for settings for open weight models on a workspace GPU server, sized by precision, context and parallel requests.

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