How to show AI agent costs and token usage
Show cost where decisions are made: a running total on every run, cost per step in a trace, cost per agent rolling up a tree, and spend against a budget in settings. For tokens, show how full the context window is and what fills it, so people can act before a limit is hit.
Cost per run and per step
People want to know two things: what did this run cost, and which step made it expensive. A trace waterfall answers both – each LLM call, tool call and sub-agent with its duration, tokens and cost on one timeline.
- Trace Waterfall – Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent
Cost per agent
In multi-agent runs, put each agent's cost on its card and add the costs up per branch, so it's obvious which sub-agent burned the budget.
- Agent Tree – Who started whom – an orchestrator and its sub-agents as a live tree, with status, cost and time on every card, costs rolling up each branch, and branches that fold to one line
- Fan-out Grid – One agent hands a big job to many workers – every task a cell on a live grid that fills in as they get through it, with retries, failures, cost and the time left, and the details of any task on hover
Budgets and plans
For the account as a whole, show spend or credits against the limit, split by what used them, with a daily trend – and a clear warning before the limit, not an error after it.
- Usage Meter – Plan usage and AI credits – a stacked credits meter by category, daily sparkline, limits and a button that speaks up near the limit
- Compact Breakdown – A total split into its parts in one small card – numbers roll, the bar glides and the ranked rows trade places when the period changes
Tokens and the context window
Token counts mean little on their own. Show the context as a share of the window – system prompt, tools, files, chat – so people can see what to remove or when to compact the conversation.
- Context Window – What fills the model's context, as a field of cells – hover a part to light it up, remove files, and compact the conversation while its cells shimmer and clear
- Context Map – What fills an agent's context window, as a living treemap – system prompt, tools, memory, every file, the chat and tool results as tiles that glide as it grows, the free space dashed, and compaction squeezing old turns into a summary
Formatting money
- Round sensibly: $0.42 for a run, $1,240 for a month – not $0.4183291
- Show the currency once and line numbers up with tabular figures
- Animate totals as they grow, so a live run feels live
- Number Ticker – Odometer-style numbers – every digit rolls to its new value and counts in from zero when it scrolls into view
Questions
Should end users see what an agent costs?
If they pay per use or have a budget, yes – a running total per run and spend against their limit. If you charge a flat price, show it to admins and keep it out of the main interface.
Where do the cost numbers come from?
From the token counts your model provider returns with every response, multiplied by its prices. The components only display the numbers you pass in.
Updated 2026-10-29