Overview
Cost Estimate
Token usage and cost transparency display
tokenscosttransparency
Props
| Prop | Type | Default | Description |
|---|---|---|---|
breakdown | CostBreakdown | required | Cost breakdown object with inputTokens, outputTokens, totalTokens, inputCost, outputCost, totalCost, and optional model |
currency | string | "USD" | Currency code for cost display |
showTokens | boolean | false | Whether to display token counts alongside costs |
Docs
Every AI generation consumes compute resources, and costs can accumulate quickly when users iterate on prompts, chain multi-step workflows, or select premium models. The Cost Estimate pattern makes this spending visible by displaying projected expenses alongside the actions that incur them. Rather than hiding costs behind opaque credit systems or surprising users with end-of-month bills, it empowers them to compare the relative expense of different prompt, parameter, and model combinations before anything runs.
Variants
- Token-based breakdown — Displays input and output token counts alongside their per-unit cost, giving technically-oriented users precise visibility into resource consumption.
- Credit-based estimate — Translates raw compute costs into product-specific credits, simplifying the mental model for non-technical users at the expense of cross-platform comparability.
- Workflow-level rollup — Aggregates costs across chained steps or multi-action workflows, showing both per-step and total estimates.
Use Cases
- API playgrounds and developer tools where per-call costs vary
- Enterprise dashboards tracking team or project-level AI spend
- Multi-step agent workflows where each tool call has a cost
- Model selection interfaces where users compare price-performance
- Budget-conscious applications that need spend guardrails
Best Practices
- Make the unit of measurement explicit — tokens, characters, seconds, or credits — so users always know what they're looking at.
- Ground estimates in units people understand and display ranges when output length is unpredictable, updating during streaming.
- Break estimates into components (input cost, output cost, tool calls) so users can identify which part of a workflow is expensive.
- Suggest cheaper alternatives when available, such as a smaller model, batch processing, or cached responses.
- Position cost information at decision points — next to the generate button or model selector — not buried in settings or billing pages.