Chat

TokenCounter

Live token estimate with optional context-window bar; tone shifts at 70% / 90%.

Preview

~3tokens~142tokens~179tokens

pnpm add nyxis-ui

import { TokenCounter } from 'nyxis-ui';

<TokenCounter text={composer.value} modelId="claude-sonnet-4-5" showBar />;

Calls useTokenCount(text, modelId) from nyxis-ui/ai to compute a fast estimate.
Reads the model’s context window from the catalog and shifts colour at 70% (warn) and 90% (crit).
Pair with <ChatInput trailingSlot={...}> to surface a live counter in the composer.