Locara
← All components Chat & messaging

TokenCount

Inline token meter for the current input (different from global ContextMeter). Pluggable tokenize callback.

Inspired by Cursor's per-input meter at the bottom of the composer.

Preview

What it looks like.

340 / 2.8K 2.2K / 2.8K 2.7K / 2.8K 340 tokens
Usage

Drop it into your app.

import { TokenCount } from '@locara/components'

<TokenCount text={composerValue} max={2800} />

// With an accurate tokenizer (e.g. via tiktoken WASM):
<TokenCount text={composerValue} max={32000} tokenize={tiktoken.count} />

Or copy the source into your repo: locara add token-count

Design notes

Why it works this way.

TokenCount is the *current input* counter — separate from ContextMeter, which shows total context-window usage across the whole conversation. The default heuristic blends ~4 chars/token (English) with ~1.33 tokens/word; for accuracy, pass a real tokenizer via the `tokenize` prop.