Skip to content

Context

How much of the model’s context window is used: a percentage and a ring, opening to the breakdown on hover, tap or Enter. From 90% it turns the warning tone and says “Almost full”.

Sourcecomponents/context.tsx

Usage

Context usage
import { Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextOutputUsage, ContextReasoningUsage, ContextTrigger } from "@/components/context";import type { ContextUsage } from "@/components/context";
export function ContextUsageSample({ usage }: { usage: ContextUsage }) {  return (    <Context usedTokens={84_000} maxTokens={200_000} usage={usage} cost="$0.42">      <ContextTrigger />      <ContextContent>        <ContextContentHeader />        <ContextContentBody>          <ContextInputUsage />          <ContextOutputUsage />          <ContextReasoningUsage />          <ContextCacheUsage />        </ContextContentBody>        <ContextContentFooter />      </ContextContent>    </Context>  );}

When to use

Use when

How much of the model's context window is used: the percentage as text, opening to a named Progress, the usage breakdown and a cost you format. Warns "Almost full" from 90%

Don’t use when

Progress of a task (use Progress); prices looked up by model (pass cost yourself)