Token Counter

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`	—	Number of input tokens used
`outputTokens` Required	`number`	—	Number of output tokens used
`maxTokens`	`number`	`4096`	Maximum token limit for the model
`inputCostPer1K`	`number`	`0.03`	Cost per 1K input tokens (USD)
`outputCostPer1K`	`number`	`0.06`	Cost per 1K output tokens (USD)
`showCost`	`boolean`	`true`	Show cost estimation
`showBreakdown`	`boolean`	`true`	Show token breakdown
`variant`	`'default' \| 'compact'`	`'default'`	Visual style variant
`warningThreshold`	`number`	`70`	Warning threshold (percentage)
`dangerThreshold`	`number`	`90`	Danger threshold (percentage)
`isRTL`	`boolean`	`false`	Whether text direction is RTL
`label`	`string`	—	Label for the counter
`labelAr`	`string`	—	Label in Arabic

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.

RTL Considerations

The counter works seamlessly in RTL layouts. All text, numbers, and badges adapt to RTL direction. Use Arabic number formatting automatically.

LTR (English)

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

RTL (العربية)

استخدام الرموز

٢٬١٠٠of ٤٬٠٩٦

51.3%

Input Tokens

١٬٢٥٠

Output Tokens

٨٥٠

Estimated Cost‏٠٫٠٨٨٥ US$

‏٠٫٠٣٠٠ US$/1K إدخال • ‏٠٫٠٦٠٠ US$/1K إخراج

Related Components

Model Selector

Choose AI models with different token limits

Parameter Slider

Adjust max tokens parameter

Chat Message

Display messages that consume tokens