How full the model's context window is: a ring that opens into a per-source token breakdown, with a Compact action near the limit.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/context-meter
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { useChat } from "@ai-sdk/react";4import { ContextMeter } from "@/components/nextui/context-meter";56export function ChatHeader() {7const { messages } = useChat();8// Send token usage from your route with messageMetadata, e.g.9// result.toUIMessageStreamResponse({ messageMetadata: ({ part }) =>10// part.type === "finish" ? { inputTokens: part.totalUsage.inputTokens } : undefined })11const last = messages.at(-1)?.metadata as { inputTokens?: number } | undefined;12const used = last?.inputTokens ?? 0;1314return (15<ContextMeter16max={200_000}17segments={[18{ label: "System + tools", tokens: 15_000 },19{ label: "Messages", tokens: Math.max(0, used - 15_000) },20]}21onCompact={() => {22/* summarize older turns, then replace them with the summary */23}}24/>25);26}
| Prop | Type | Default | Description |
|---|---|---|---|
| segments | { label: string; tokens: number }[] | – | What fills the window, in order. Each gets a shade in the bar and a row in the breakdown |
| max | number | 200000 | Size of the model's context window in tokens |
| warnAt | number | 0.8 | Share of the window where the meter turns amber and offers to compact; red from 95% |
| onCompact | () => void | – | Called by the Compact button. Leave out to hide the button |
| compacting | boolean | false | Show the compacting state while you summarize |
| open | boolean | – | Controlled open state of the breakdown |
| defaultOpen | boolean | false | Starting open state when uncontrolled |
| onOpenChange | (open: boolean) => void | – | Called when the pill is clicked |
| autoPlay | boolean | false | Loop a conversation filling the window, warning and compacting, for demos |
| className | string | – | Extra classes on the wrapper |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.