ContextWindowMeter

Markdown

How full the model’s context window is and what fills it, drawn to scale from the numbers your server supplies.

Used in Analytics.

Use it for: How full the context window is and what fills it.
Not for: A single cost or token number. Try UsageMeter or ContextInspector.

Context window14,500 of 32,000 tokens (45%)

Measured · Oct 16, 2026, 9:30 AM

Loading example…

Installation

npm install @stackunseen/ui

import { ContextWindowMeter } from '@stackunseen/ui';

Styles: @stackunseen/ui/styles.css

Usage and props

Segments come from your server, not from counting in the browser. A percentage shows only with a limit; an estimate says what it was estimated from; an unknown window shows the reason.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

value: Measurement<{ segments, limit? }> · warnAt? · label? · locale?

How state and callbacks work

All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract: value: Measurement<{ segments, limit? }> · warnAt? · label? · locale?
Keeps honest: Segments come from your server, not from counting in the browser. A percentage shows only with a limit; an estimate says what it was estimated from; an unknown window shows the reason.
MCP: read_component "ContextWindowMeter" on the docs endpoint

Open the Markdown file

Keyboard and customization

Keyboard

Tab reaches controls; Enter or Space activates buttons. Accordions use arrow keys, Home and End. Select menus support arrows and typeahead; Escape closes menus and dialogs and restores focus.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio

ContextWindowMeter