AI & AgentsPro

Context Meter

How full the model's context window is: a ring for the prompt toolbar or a bar with a breakdown.

Usage

bash

npm install @wunderui/react

Then import what you need:

tsx

import { ContextMeter } from "@wunderui/react"

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

The bar above the prompt offers to summarize the chat; the ring in the toolbar shows the same fill level.

Context window

172k of 200k tokens

Nearly full — older messages get summarised next.

⌘↵

Prop	Type	Default
used / limit	number	—
breakdown	{ label: string; tokens: number; className?: string }[]	none
variant	"ring" \| "bar"	"ring"
label	string	"Context window"
warnAt	number	0.8
warning	ReactNode	"Nearly full — older messages get summarised next."