Context Budget Meter
Context window by part: system prompt, documents, history, overflow and what to trim. Pro · AI chat and agents › Tokens and context
How an LLM's context window is spent: system prompt, memory, documents, history and tool output as one bar against the limit, with the reserve kept for the answer, the overflow past the limit and the fewest cuts that would make it fit.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add context-budget-meternpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ContextBudgetMeter } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
segments * | ContextSegment[] | Parts of the prompt in the order they are sent: system, memory, documents, history, tool output. | |
limit * | number | The model's context window in tokens. | |
reserve | number | 0 | Tokens kept free for the answer. Default 0. |
warnAt | number | 0.85 | Share of the window that turns the meter amber. Default 0.85. |
onTrim | (segmentId: string, tokens: number) => void | Adds Trim buttons to the suggested cuts; called with the segment and how many tokens to cut. | |
variant | 'full' | 'compact' | 'full' | full (default) adds the legend, breakdown and trim plan; compact is the bar and one line. |
loading | boolean | false | Tokens are being counted: skeleton. |
error | ReactNode | Counting failed: shown instead of the meter. | |
title | ReactNode | Heading. Default: labels.title. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading (default 3). |
locale | string | BCP 47 locale for numbers; defaults to the ThemeProvider's. | |
labels | Partial<Omit<ContextBudgetMeterLabels, 'statuses' | 'kinds'>> & { statuses?: Partial<Record<BudgetStatus, string>>; kinds?: Partial<Record<ContextSegmentKind, string>>; } | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Token Usage — Token spend display
- 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
Previous: Token Usage · Next: Prompt Editor · All AI chat and agents