# Spend Map block

> Spend map that fans monthly AI spend out by model, team, agent and API key

Month to date AI spend as a fan map: a budget dial splits spend by model, team, agent and API key, flags caps at risk and inspects one item's daily spend. ReUI Frame, Badge, IconTile; shadcn Chart, ToggleGroup, DropdownMenu, Progress, InputGroup; Motion. AI spend, cost breakdown.

- Type: Pro block
- Category: [AI Usage](https://reui.io/blocks/ai-agents/ai-usage.md)
- Page: https://reui.io/blocks/ai-agents/ai-usage/ai-usage-2
- MCP: `get_block("ai-usage-2")`
- Built with: Avatar, Badge, Button, Chart, Dropdown Menu, Frame, Icon Tile, Input Group, Item, Marker, Progress, Separator, Spinner, Toggle Group
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## 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

## Agent notes

- `DIMENSIONS` holds each split's leaves; their seed `spend` values must sum to the `WORKSPACE` spend, because every share divides by it
- Ask Nimbus answers come from `answerFor`, a canned stand in; send the question from `AskPanel` to your model API instead
- The `METRICS` Cost or Tokens toggle reorders only the splits and leaves; the budget dial and `LeafInspector` always show dollars

## When not to use

- An operator view of provider health, routing and quotas across a whole org: use the [AI Ops blocks](https://reui.io/blocks/solutions/ai-ops.md)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)

## Install

```bash
npx shadcn@latest add @reui/ai-usage-2
```

## About AI Usage blocks

### 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

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.