AI Token Usage
AI
Settings
Block
Display component for showing token consumption, limits, cost estimates, and usage breakdown. Includes warning states and multiple display variants.
Preview
Full token usage card with breakdown
Token Usage
120.0K tokens remaining
40% used
80.0K of 200.0K tokens$0.1600 spent
Estimated: +5.0K tokens
Resets in 17h 59m
Est. total cost: $0.4000
Warning State
Shows warning when approaching limit (75%+)
Token Usage
40.0K tokens remaining
80% used
160.0K of 200.0K tokens$0.3200 spent
Resets in 5h 59m
Est. total cost: $0.4000
Critical State
Shows critical warning when near limit (90%+)
Token Usage
10.0K tokens remaining
95% used
190.0K of 200.0K tokens$0.3800 spent
Estimated: +15.0K tokens
Exceeds limit
This request would exceed your token limit by 5.0K tokens
Est. total cost: $0.4000
Compact Variant
Smaller card without breakdown
45.0K / 100.0K
45%
Inline Variant
Single line for toolbars or headers
Minimal Variant
Just the progress bar
60.0K / 100.0K60%
Without Cost Display
Hide cost estimates
Token Usage
100.0K tokens remaining
33% used
50.0K of 150.0K tokens
Monitor your token usage
Props
AITokenUsage component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
tokensUsed* | number | — | Current number of tokens consumed |
tokenLimit* | number | — | Maximum token allocation |
costPer1k | number | 0.002 | Cost per 1000 tokens for estimates |
currency | string | '$' | Currency symbol for cost display |
breakdown | TokenBreakdown[] | — | Token usage breakdown by category |
estimatedTokens | number | — | Estimated tokens for pending request |
resetDate | Date | — | When token usage resets |
onRequestMore | () => void | — | Callback when user requests more tokens |
onRefresh | () => void | — | Callback to refresh usage data |
warningThreshold | number | 0.75 | Percentage (0-1) to show warning state |
criticalThreshold | number | 0.9 | Percentage (0-1) to show critical state |
showCost | boolean | true | Show cost estimates |
showBreakdown | boolean | true | Show expandable breakdown section |
variant | 'card' | 'compact' | 'inline' | 'minimal' | 'card' | Display variant |
tokenLabel | string | 'tokens' | Label for the token unit |
TokenBreakdown Type
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Category label |
tokens* | number | — | Token count for this category |
color | string | — | Color for the breakdown indicator |
Usage
Import and implementation example
import { AITokenUsage } from '@/blocks/ai-tools/ai-token-usage'
export default function Example() { const breakdown = [ { label: 'Input tokens', tokens: 45000, color: '#6366f1' }, { label: 'Output tokens', tokens: 30000, color: '#14b8a6' }, { label: 'System prompt', tokens: 5000, color: '#f59e0b' }, ]
return ( <AITokenUsage tokensUsed={80000} tokenLimit={200000} breakdown={breakdown} estimatedTokens={5000} resetDate={new Date(Date.now() + 1000 * 60 * 60 * 18)} onRequestMore={() => openUpgradeModal()} onRefresh={() => refetchUsage()} warningThreshold={0.75} criticalThreshold={0.9} /> )}Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Four variants: Card, compact, inline, and minimal displays
- Usage states: Normal, warning (75%), and critical (90%) thresholds
- Cost estimates: Calculate and display cost based on token usage
- Usage breakdown: Expandable breakdown by category
- Estimated preview: Show estimated tokens for pending requests
- Exceeds warning: Alert when estimated usage exceeds limit
- Reset countdown: Show time until usage resets
- Number formatting: Automatic K/M formatting for large numbers
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Progress bar uses visual indicatorColor-coded states for usage levelsButtons are native elementsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between interactive elements |
| Enter / Space | Expand breakdown or trigger actions |
Notes
- Color is not the only indicator - text shows percentage
- Consider adding role="progressbar" with aria-valuenow
- Warning/critical states have text descriptions