Token Counter

View on StorybookStorybook

Display and track token usage with cost estimation for AI model interactions. Features progress bar, breakdown by input/output, and visual warnings when approaching limits.

Preview

Token Usage

2,100of 4,096

51.3%

Input Tokens

1,250

Output Tokens

850

Estimated Cost$0.0885

$0.0300/1K input • $0.0600/1K output

Installation

Terminalbash

Usage

Reacttsx

Examples

With Cost Estimation

Token Usage

2,100of 4,096

51.3%

Input Tokens

1,250

Output Tokens

850

Estimated Cost$0.0885

$0.0300/1K input • $0.0600/1K output

tsx

Warning States

Safe (< 70%)

Token Usage

1,500of 4,096

36.6%

Input Tokens

1,000

Output Tokens

500

Estimated Cost$0.0600

$0.0300/1K input • $0.0600/1K output

Warning (70-90%)

Token Usage

Warning

3,200of 4,096

78.1%

Input Tokens

2,000

Output Tokens

1,200

Estimated Cost$0.1320

$0.0300/1K input • $0.0600/1K output

Danger (> 90%)

Token Usage

Near Limit

3,800of 4,096

92.8%

Input Tokens

3,000

Output Tokens

800

Estimated Cost$0.1380

$0.0300/1K input • $0.0600/1K output

tsx

Different Models with Pricing

GPT-4 (expensive)

GPT-4 Token Usage

2,500of 8,000

31.3%

Input Tokens

1,500

Output Tokens

1,000

Estimated Cost$0.1050

$0.0300/1K input • $0.0600/1K output

GPT-3.5 Turbo (affordable)

GPT-3.5 Token Usage

2,500of 4,096

61.0%

Input Tokens

1,500

Output Tokens

1,000

Estimated Cost$0.0043

$0.0015/1K input • $0.0020/1K output

Compact Variant

Token Usage

2,100of 4,096

51.3%

Input Tokens

1,250

Output Tokens

850

Estimated Cost$0.0885

$0.0300/1K input • $0.0600/1K output

tsx

Custom Thresholds

Customize when warnings appear (50% warning, 75% danger):

Token Usage

Near Limit

3,500of 4,096

85.4%

Input Tokens

2,500

Output Tokens

1,000

Estimated Cost$0.1350

$0.0300/1K input • $0.0600/1K output

tsx

Without Cost Display

Token Usage

2,100of 4,096

51.3%

Input Tokens

1,250

Output Tokens

850

Props

Name	Type	Default	Description
`inputTokens`Required	`number`	—
`outputTokens`Required	`number`	—
`maxTokens`	`number`	`4096`
`inputCostPer1K`	`number`	`0.03`
`outputCostPer1K`	`number`	`0.06`
`showCost`	`boolean`	`true`	Display cost estimate
`showBreakdown`	`boolean`	`true`
`variant`	`'default' \| 'compact'`	`'default'`
`warningThreshold`	`number`	`70`	Percentage of limit to show warning (default: 0.8)
`dangerThreshold`	`number`	`90`
`isRTL`	`boolean`	`false`
`label`	`string`	—
`labelAr`	`string`	—

Accessibility

Screen Reader

The component includes descriptive labels and tooltips. Token counts and costs are formatted with proper number formatting for screen readers.

Visual Indicators

Multiple visual cues indicate status: progress bar color, warning badge, and border color changes. This ensures warnings are visible even without relying solely on color.

Tooltips

Info icon provides context about tokens. Cost tooltip breaks down input/output costs separately for transparency.

Use Cases

Input length monitoring for API limits

Cost estimation before API calls

Context window usage display

Batch processing budget monitors

Best Practices

Do

✓ Update count in real-time as the user types
✓ Show visual warning as limit approaches
✓ Display both current count and maximum

Don't

✗ Don't block input when limit is reached — warn instead
✗ Don't use exact token counts when an estimate suffices
✗ Don't make the counter too prominent for short inputs

Related Components

Prompt Input

Chat input companion

Chat Message

Context for token counting

Model Selector

Model with token limits