Context Meter

Ring showing how much of a model's context window the next request would take, sized for a composer toolbar.

19%79%96%116%

Installation

npx shadcn@latest add miskibin/chat-components/context-meter

Usage

"use client"

import { ContextMeter } from "@/components/ui/context-meter"

export function Meter({ used, total }: { used: number; total: number }) {
  return <ContextMeter used={used} total={total} />
}

Examples

Click for the numbers

interactive renders a button instead of a span, so the meter works as a popover trigger and the host decides what the breakdown says.

In the composer

The meter is h-7, so it lines up with everything else in tools. Pair it with onTextChange and the ring follows the draft as it is typed.

16%

Notes

Tenths at the bottom of the window

Under a tenth of the window the value carries one decimal (1.5%), and whole percents above it. Three short turns into a 128k context all round to the same 1%, and a gauge that never moves reads as broken rather than empty.

Two numbers, both yours

used is whatever the host can account for — tokens a backend reported, an estimate over the transcript, or both added together. total should be the window the model is actually served with, which for a local runtime is often far below what the architecture supports.

API reference

ContextMeter

used*number: Tokens the next request would carry.
total*number: The usable context window. Zero or negative renders nothing.
warnAtnumber = 0.75: Fraction at which the ring stops being quiet.
dangerAtnumber = 0.9: Fraction at which the ring turns destructive.
showFromnumber = 0.05: Below this fraction the meter renders nothing, so an untouched composer stays clean.
interactiveboolean = false: Renders a button instead of a span, for use as a popover or dialog trigger.
hideValueboolean = false: Drops the percentage and leaves the ring alone.
label(used: number, total: number) => string: Replaces the hover title. Return "" to drop it.
sizenumber = 14: Ring diameter in px.

Data slots

Every part below is addressable from a parent, so you can restyle internals without forking the component.

context-metercontext-meter-ringcontext-meter-arccontext-meter-value