Token Usage

Token spend display. Pro · AI chat and agents › Tokens and context

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add token-usage

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { TokenUsage } from 'valyro-ui-pro';

Prop	Type	Default
`input` *	`number`		Uncached prompt tokens.
`output` *	`number`		Generated completion tokens.
`cached`	`number`	`0`	Prompt tokens served from the cache.
`cost`	`number`		Total cost in `currency`.
`currency`	`string`	`'USD'`	ISO 4217 code. Default USD.
`locale`	`string`		BCP 47 locale for numbers and the cost; defaults to the ThemeProvider's, then the browser's.
`contextWindow`	`number`		The model's context window in tokens; shows how full it is.
`variant`	`'inline' \| 'card'`	`'inline'`	`inline` fits under a message; `card` is the detailed breakdown.
`title`	`ReactNode`		Card heading. Defaults to `labels.title`.
`labels`	`Partial<TokenUsageLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Context Budget Meter — Context window by part: system prompt, documents, history, overflow and what to trim
AI Chat Window — AI chat window
Chat Message — Messages with streaming output
Message Branches — Message versions and a conversation branch tree
Streaming Text — Smooth token streaming
Markdown Preview — Rendered Markdown
Response Feedback — Answer rating and a rubric for reviewers
Prompt Composer — Prompt field with attachments
Inline Suggestion — Inline autocomplete suggestion
Model Selector — AI model picker
Model Comparison — Side-by-side answers from several models
Prompt Library — Prompt library with variables