Context

Overview

Context mostra uso de tokens do modelo num HoverCard. Trigger é um button compacto com Progress circular; ao hover, abre painel com breakdown (input / output / reasoning / cached). Usa tokenlens pra calcular percentages relativos ao maxTokens do modelo.

Anatomy

<Context maxTokens={N} usedTokens={N} usage={...} modelId="...">
  ├─ <ContextTrigger />
  └─ <ContextContent>
       ├─ <ContextContentHeader />
       ├─ <ContextContentBody>
       │    ├─ <ContextInputUsage />
       │    ├─ <ContextOutputUsage />
       │    ├─ <ContextReasoningUsage />
       │    └─ <ContextCacheUsage />
       └─ <ContextContentFooter />
</Context>

Usage

<Context
  maxTokens={128_000}
  usedTokens={usage.totalTokens}
  usage={usage}
  modelId="claude-opus-4-7"
>
  <ContextTrigger />
  <ContextContent>
    <ContextContentHeader />
    <ContextContentBody>
      <ContextInputUsage />
      <ContextOutputUsage />
      <ContextReasoningUsage />
      <ContextCacheUsage />
    </ContextContentBody>
    <ContextContentFooter />
  </ContextContent>
</Context>

Props

Context (Root)

Herda de HoverCard — openDelay, closeDelay.

ContextTrigger

Aceita ComponentProps<typeof Button>. Default visual: ring de progresso SVG + porcentagem.

ContextContent · Header / Body / Footer

ContextInputUsage · OutputUsage · ReasoningUsage · CacheUsage

Linhas individuais. Cada uma lê do usage provider e mostra:

• Label (Input / Output / Reasoning / Cache)
• Valor numérico
• Mini-progress bar (porção do max)

Não aceitam props além de className — leem tudo do contexto.

Subcomponents

• Context — root, é HoverCard provider + ContextContext.
• ContextTrigger — botão compacto com ring SVG circular.
• ContextContent — popover content.
• ContextContentHeader/Body/Footer — slots semânticos.
• Context*Usage (Input / Output / Reasoning / Cache) — linhas de breakdown auto-leitas do usage.

useContextValue()

Hook interno que retorna { usedTokens, maxTokens, usage, modelId }. Use pra construir variantes custom de breakdown.

States

Cores específicas dependem do tema.

When to use

• Apps de IA com long-context — usuário precisa saber quando se aproxima do limite.
• Debug UI pra otimizar prompt size.
• Painéis admin de billing baseado em tokens.

When not to use

• Apps com modelo único curto onde o limite raramente importa.
• Surfaces simples — adiciona ruído visual.

Best practices

• Sempre passe modelId. Sem isso, footer não pode estimar custo.
• usage da própria response. AI SDK retorna usage em onFinish/finish — passe direto.
• Cuidado com cache em prompts dinâmicos. Cached tokens só contam se você usou caching explicitamente — sem isso, aparece 0.

Accessibility

Related

• HoverCard — base subjacente.
• Progress — barra linear (alternativa).
• AI SDK finish callback — fonte do usage.