Context
A model context-window meter with a token + cost breakdown.
Overview
Context is the context-window meter for a chat footer. The trigger shows a
percent and a ring gauge; the hover card breaks usage down — input, output,
reasoning, cache — with per-line token counts and, when a modelId is given,
tokenlens-derived cost.
$ npx morpha-ui add contextUsage with the AI SDK
Feed it the usage from a finished response:
<Context
maxTokens={200_000}
usedTokens={usage.totalTokens ?? 0}
usage={usage}
modelId="anthropic:claude-3-5-sonnet"
>
<ContextTrigger />
<ContextContent>
<ContextContentHeader />
<ContextContentBody>
<ContextInputUsage />
<ContextOutputUsage />
<ContextReasoningUsage />
</ContextContentBody>
<ContextContentFooter />
</ContextContent>
</Context>Installation
Distributed via the Morpha CLI: npx morpha-ui add context. Ported from
AI Elements; depends on ai and tokenlens.
npx morpha-ui add contextAPI Reference
Prop
Type