Context

import { Button } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
import { Progress } from "@/components/ui/progress"

const usage = {
  input: 8420,
  output: 1260,
  reasoning: 980,
  limit: 128_000,
}

const used = usage.input + usage.output + usage.reasoning

Context shows how much of the model's context window the conversation has used. The trigger shows the share used, and a Hover Card opens a Progress bar with the input, output and reasoning tokens.

Installation

Context is built with the Hover Card, Progress and Button components.

$ pnpm dlx shadcn@latest add @esuiss/hover-card @esuiss/progress @esuiss/button

Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add hover-card progress button

Usage

<HoverCard>
  <HoverCardTrigger
    delay={10}
    closeDelay={100}
    render={<Button variant="outline" size="sm" />}
  >
    {percent}% context
  </HoverCardTrigger>
  <HoverCardContent className="flex w-64 flex-col gap-3">
    <div className="flex items-center justify-between gap-3 text-sm">
      <span className="font-medium">Context</span>
      <span className="text-muted-foreground">
        {used} / {limit}
      </span>
    </div>
    <Progress value={percent} aria-label="Context used" />
  </HoverCardContent>
</HoverCard>

<HoverCard openDelay={10} closeDelay={100}>
  <HoverCardTrigger asChild>
    <Button variant="outline" size="sm">
      {percent}% context
    </Button>
  </HoverCardTrigger>
  <HoverCardContent className="flex w-64 flex-col gap-3">
    <div className="flex items-center justify-between gap-3 text-sm">
      <span className="font-medium">Context</span>
      <span className="text-muted-foreground">
        {used} / {limit}
      </span>
    </div>
    <Progress value={percent} aria-label="Context used" />
  </HoverCardContent>
</HoverCard>

<HoverCard delay={10} closeDelay={100}>
  <Button variant="outline" size="sm">
    {percent}% context
  </Button>
  <HoverCardContent className="flex w-64 flex-col gap-3">
    <div className="flex items-center justify-between gap-3 text-sm">
      <span className="font-medium">Context</span>
      <span className="text-muted-foreground">
        {used} / {limit}
      </span>
    </div>
    <Progress value={percent} aria-label="Context used" />
  </HoverCardContent>
</HoverCard>

AI SDK

Read usage from the metadata on the agent's message. messageMetadata runs when the stream finishes.

app/api/chat/route.ts

return result.toUIMessageStreamResponse({
  messageMetadata: ({ part }) => {
    if (part.type === "finish") {
      return { usage: part.totalUsage }
    }
  },
})

const usage = message.metadata?.usage
const used = (usage?.inputTokens ?? 0) + (usage?.outputTokens ?? 0)
const percent = Math.round((used / limit) * 100)

limit is the model's context window. The AI SDK does not send it, so set it from the model you use.

API Reference

See Hover Card and Progress.

Accessibility

The trigger is a button, so the breakdown opens on focus as well as on hover.
Give the progress bar an accessible name with aria-label, such as "Context used".
Put the share in the trigger text, so it is announced without opening the card.

import { View } from "react-native"
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/ui/popover"
import { Progress } from "@/components/ui/progress"
import { Text } from "@/components/ui/text"

const usage = [
  { label: "Input", value: "11,200" },
  { label: "Output", value: "3,900" },
  { label: "Reasoning", value: "1,300" },
]

export function AiContextExample() {
  return (
    <View className="items-start">
      <Popover>

import EsuissUI
import SwiftUI

struct ContextExample: View {
  @State private var open = false

  var body: some View {
    Button("8% context") { open = true }
      .buttonStyle(.variant(.outline, size: .sm))
      .popover(isPresented: $open) {
        PopoverContent(width: 288) {
          PopoverHeader {
            PopoverTitle("16,400 of 200,000 tokens")
            PopoverDescription("Claude Opus 5.5")
          }
          ProgressView(value: 8, total: 100)

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.ButtonSize
import com.esuiss.ui.components.ButtonVariant
import com.esuiss.ui.components.Popover

Context on mobile is built from the same parts as on the web: Popover, Progress, Button. The example above is a static demo; connect it to your agent by rendering the same parts from your messages.

Installation

$ pnpm dlx @esuiss/ui@latest add popover progress button

$ pnpm dlx @esuiss/ui@latest add popover progress button --platform swift

$ pnpm dlx @esuiss/ui@latest add popover progress button --platform kotlin

API Reference

See Popover, Progress, Button.

Usage

<HoverCard>
  <HoverCardTrigger
    delay={10}
    closeDelay={100}
    render={<Button variant="outline" size="sm" />}
  >
    {percent}% context
  </HoverCardTrigger>
  <HoverCardContent className="flex w-64 flex-col gap-3">
    <div className="flex items-center justify-between gap-3 text-sm">
      <span className="font-medium">Context</span>
      <span className="text-muted-foreground">
        {used} / {limit}
      </span>
    </div>
    <Progress value={percent} aria-label="Context used" />
  </HoverCardContent>
</HoverCard>

<HoverCard openDelay={10} closeDelay={100}>
  <HoverCardTrigger asChild>
    <Button variant="outline" size="sm">
      {percent}% context
    </Button>
  </HoverCardTrigger>
  <HoverCardContent className="flex w-64 flex-col gap-3">
    <div className="flex items-center justify-between gap-3 text-sm">
      <span className="font-medium">Context</span>
      <span className="text-muted-foreground">
        {used} / {limit}
      </span>
    </div>
    <Progress value={percent} aria-label="Context used" />
  </HoverCardContent>
</HoverCard>

<HoverCard delay={10} closeDelay={100}>
  <Button variant="outline" size="sm">
    {percent}% context
  </Button>
  <HoverCardContent className="flex w-64 flex-col gap-3">
    <div className="flex items-center justify-between gap-3 text-sm">
      <span className="font-medium">Context</span>
      <span className="text-muted-foreground">
        {used} / {limit}
      </span>
    </div>
    <Progress value={percent} aria-label="Context used" />
  </HoverCardContent>
</HoverCard>

AI SDK

Read usage from the metadata on the agent's message. messageMetadata runs when the stream finishes.

app/api/chat/route.ts

return result.toUIMessageStreamResponse({
  messageMetadata: ({ part }) => {
    if (part.type === "finish") {
      return { usage: part.totalUsage }
    }
  },
})

const usage = message.metadata?.usage
const used = (usage?.inputTokens ?? 0) + (usage?.outputTokens ?? 0)
const percent = Math.round((used / limit) * 100)

limit is the model's context window. The AI SDK does not send it, so set it from the model you use.

import { View } from "react-native" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/ui/popover" import { Progress } from "@/components/ui/progress" import { Text } from "@/components/ui/text" const usage = [ { label: "Input", value: "11,200" }, { label: "Output", value: "3,900" }, { label: "Reasoning", value: "1,300" }, ] export function AiContextExample() { return ( <View className="items-start"> <Popover>