AI Components / Token Tracker
Token Tracker
Token usage, cost, and latency display. Compact inline or detailed card with budget progress.
ai-workflow v0.3.0
Playground
Examples
Compact
<ai-token-tracker inputTokens="423" outputTokens="156" cost="0.0024" latency="1200" model="GPT-4o"></ai-token-tracker>Detailed
<ai-token-tracker mode="detailed" inputTokens="1250" outputTokens="890" cost="0.0089" latency="2400" model="Claude 3.5" budget="1.00" style="max-width: 400px;"></ai-token-tracker>Import
import { AiTokenTracker } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-token-tracker';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
inputTokens | number | 0 | Input tokens |
outputTokens | number | 0 | Output tokens |
cost | number | 0 | Cost in dollars |
latency | number | 0 | Latency in ms |
model | string | — | Model name |
budget | number | 0 | Budget limit |
mode | "compact" | "detailed" | "compact" | Display mode |
Events
| Event | Detail | Description |
|---|---|---|
ai-token-click | {inputTokens, outputTokens, cost, latency, model} | Clicked |