Context meter

Free · MIT

What fills the model's context budget, as a ring in the composer that opens to a breakdown: system, instructions, Know, the thread, tools, files. Counts are the service's own token counts; the ring warns past 80%. When a new count arrives the ring sweeps to it and changes colour at the warning line; it draws its first value in place, with no sweep from zero.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/context-meter

Brings in: know, locale, popover, utils

Usage

TSX · The example above

"use client"

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

export default function Example() {
  return (
    <ContextMeter
      className="max-w-md"
      limit={200_000}
      segments={[
        { label: "System prompt", tokens: 3_200, kind: "system" },
        { label: "Help-centre articles", tokens: 21_000, kind: "knowledge" },
        { label: "This conversation", tokens: 46_500, kind: "thread" },
        { label: "Tool results", tokens: 12_800, kind: "tools" },
      ]}
    />
  )
}

<ContextMeter>

Prop	Type	Default	Description
segmentsrequired	`ContextSegment[]`	—	What fills the context window, by kind, in tokens.
limitrequired	`number`	—	The model's context window, in tokens.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under contextMeter in <LocaleProvider strings={{ … }}>; the table is exported as contextMeterStrings.

Key	English
thousands	{n}k
label	Context: {used} of {limit} tokens used
context	Context
usage	{used} / {limit} tokens
nearlyFull	Nearly full. Older thread turns will be summarised to make room.