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`	—
`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.

Related Components

Model Selector

Choose AI models with different token limits

Parameter Slider

Adjust max tokens parameter

Chat Message

Display messages that consume tokens