1Sponsor

Token Usage

Compact token counter showing prompt and completion usage with optional cost estimate; also exports ContextMeter for visualising context window fill

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/token-usage.json

Usage

import { TokenUsage, ContextMeter } from "@/components/ui/token-usage";
<TokenUsage prompt={2450} completion={890} model="gpt-4o" showCost />

API Reference

TokenUsage

PropTypeDefault
promptnumberrequired
completionnumberrequired
modelstringundefined
showCostbooleanfalse

ContextMeter

PropTypeDefault
usednumberrequired
limitnumberrequired
labelstringundefined
showPercentbooleantrue
warnAtnumber75
criticalAtnumber90
widthnumber20