AI Elements
Context
How much of the context window the conversation has used.
Context shows how much of the model's context window the conversation has used. It is a Hover Card with a Progress bar.
Installation
Context is built with the Hover Card and Progress components.
Usage
<template>
<UiHoverCard :open-delay="10" :close-delay="100">
<UiHoverCardTrigger as-child>
<UiButton variant="outline" size="sm"> {{ percent }}% context </UiButton>
</UiHoverCardTrigger>
<UiHoverCardContent class="flex w-64 flex-col gap-3">
<div class="flex items-center justify-between gap-3 text-sm">
<span class="font-medium">Context</span>
<span class="text-muted-foreground"> {{ used }} / {{ limit }} </span>
</div>
<UiProgress :model-value="percent" aria-label="Context used" />
</UiHoverCardContent>
</UiHoverCard>
</template>
AI SDK
Read usage from the metadata on the agent's message. messageMetadata runs when the stream finishes.
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.