Agentic UI/TokenUsageIndicator

TokenUsageIndicator

AI 모델의 토큰 사용량을 시각적으로 표시하는 컴포넌트입니다.

Installation

bash
npx axis-cli add token-usage-indicator --agentic

Interactive Demo

토큰 사용량2.5k / 4.1k
61.0% 사용$0.0050

Modes

Full (기본)

토큰 사용량2.8k / 4.1k
68.4% 사용$0.0056

Compact

2.8k/4.1k

States

Normal (50%)

토큰 사용량2.0k / 4.1k
50.0% 사용

Warning (85%)

토큰 사용량3.5k / 4.1k
85.0% 사용

Critical (98%)

토큰 사용량4.0k / 4.1k
98.0% 사용

⚠ 토큰 한도에 거의 도달했습니다.

Usage

tsx
import { TokenUsageIndicator } from '@axis-ds/agentic-ui'

export function Example() {
  return (
    <TokenUsageIndicator
      current={3200}
      max={4096}
      cost={0.0064}
      warningThreshold={0.8}
    />
  )
}

Props

currentRequired
Type:number

현재 사용된 토큰 수

maxRequired
Type:number

최대 토큰 한도

cost
Type:number
Default:-

비용 (USD)

warningThreshold
Type:number
Default:0.8

경고 임계값 (0-1)

compact
Type:boolean
Default:false

컴팩트 모드

className
Type:string
Default:-

추가 CSS 클래스