---
title: "Agent spend"
description: "What AI agents cost: the period's total and change, daily spend against a dashed daily budget, and each agent's monthly limit with Edit limit and a pause switch."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/agent-spend
---

# Agent spend

What AI agents cost: the period's total and change, daily spend against a dashed daily budget, and each agent's monthly limit with Edit limit and a pause switch.

An agent and a period (last 7 days, last 30 days, this month) set the total in large figures, the change on the period before with an arrow and the words, and the chart: daily spend in ink over a dashed line for the daily budget, from the Pro area chart. The chart lives in its own file, loaded with React.lazy behind a skeleton of its exact height, so the chart runtime downloads only when it's drawn and nothing moves when it arrives. Each agent's monthly limit is a meter with spent and allowed. Near the limit the row says what's left and, at the last week's pace, when it runs out; at the limit it says the agent paused and what waits, in the error ink with an icon. Edit limit opens a currency field in place that takes whole pounds and no less than this month's spend, and a switch sets whether the agent pauses at its limit. Switching agent or period shows a skeleton of the chart's height for a moment, as yours would while loading (or pass loading). A period with no spend says so in the chart's place; in the sample, the catalogue writer has been paused at its limit all week.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/agent-spend
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, button, card, field, meter, number-field, select, separator, skeleton, switch, echarts-area-chart, echarts-tooltip

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More dashboards blocks

All 13, with install commands: https://ui.edbn.me/docs/blocks/dashboards (Markdown: https://ui.edbn.me/docs/blocks/dashboards.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt