Overview
How might we design cost transparency so people can trust and act on AI output?
When this pattern fits
- Ideal for applications with usage-based pricing, credit systems, and platforms where cost awareness helps users manage spending and optimize usage.
When to skip or lighten it
- Flat unlimited consumer plans where showing micro-costs adds anxiety with no decision value.
- Internal demos on company-paid keys where cost UI distracts from the task.
- When estimates are so wrong that displaying them destroys trust.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Hiding cost until after a large agent run finishes.
Inconsistent units (credits vs dollars) across model picker and usage page.
“Free” labeling for actions that still burn shared team quotas.
No warning when a tool call will spend an order of magnitude more than a normal reply.
How products use it
| Product | Implementation |
|---|---|
| OpenAI / Anthropic consoles | Token and dollar usage visible per request and in billing dashboards. |
| Cursor | Surfaces premium model and agent usage against plan limits. |
| Perplexity / Claude Pro | Makes plan limits and upgraded modes legible at choice time. |
| Cloud LLM gateways | Per-team budgets and cost estimates before high-spend agent jobs. |
Real-world examples
How shipped products implement cost transparency, from our teardown guides.
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Cost Transparency" AI interface design pattern.
Pattern Definition:Frequently asked questions
What is cost transparency in AI product UX?
Cost transparency means showing users what an action will spend (tokens, credits, or money) before or during the run so they can pick the right model depth and avoid surprise usage.
Where should cost appear in the UI?
Near the decision: model or mode picker, agent confirmations, and any tool that multiplies spend. Mirror the same units on settings and billing for consistency.
How does cost transparency relate to autonomy budgets?
Autonomy budgets limit unattended steps or time. Cost transparency limits or shows spend. Agent products often need both so users control how far and how expensive a run can go.