Token Counter

Tokens4,820 / 8,192
About this piece

Token Counter

Token-usage card with used of total readout and a fill bar that shifts emerald to amber to rose.

Usage

The import and the props worth knowing about, in one place.

import { Ai5 } from "@/components/beste/piece/ai5";

<Ai5
  surface="card"
  bordered={true}
  inverted={false}
  used={4820}
  total={8192}
  label="Tokens"
/>

More AI pieces

View all AI
stream142 tok/s
The quick brown fox jumps over

Token Stream

Live token visualizer with tone-tinted token chips, tokens-per-second rate, and a pulsing caret at the end.

Name three quick wins for our onboarding.

beste-10 tokens9 tok/s

Token Stream

Reply that arrives as word chips popping in one at a time while the footer counts tokens and updates a tokens-per-second figure, then holds and streams again.

end_turn248 / 1,024
Response completed normally.

Stop Reason

Completion stop reason card where the icon tile color flips per reason (end_turn, stop_sequence, tool_use, max_tokens) and shows the token count.

Context window92.0K / 200K
46% of window in use

Context Gauge

Context-window card with a tokens-used-of-max readout and a violet-to-fuchsia gradient fill bar.

42%
Monthly requests4,200 / 10,000resets in 12d

Usage Ring

Monthly quota meter with a tone-colored SVG donut arc, percentage in the middle, used/total request count, and reset countdown.

Research Copilot4 tools

Searches papers and drafts literature reviews on request.

Assistant Card

Catalog card for a configured assistant with a tone-filled bot tile, name, short description, and the tool count.