Context Meter

How full the context window is. A small ring for the toolbar that shifts to warning at 80% and destructive at 95%, with a breakdown on hover.

Installation

pnpm dlx shadcn@latest add @jds/context-meter

Usage

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

<ContextMeter
  used={usage.totalTokens}
  max={200_000}
  breakdown={[
    { label: "System and tools", tokens: 12_400 },
    { label: "Messages", tokens: 48_000 },
  ]}
/>

API Reference

ContextMeter

Prop	Type	Default
`used` Tokens currently in context.	number	–
`max` Context window size.	number	–
`breakdown` Shown in the hover card.	{ label, tokens }[]	–
`showLabel` Percentage next to the ring.	boolean	true

Command Bar Conversation