Context Window

Installation

Usage

import { ContextWindow } from "@/components/context-window";

<ContextWindow
  model="Sage 2"
  capacity={128000}
  threshold={0.85}
  start={{ system: 2400, tools: 3100, memory: 6800, documents: 18400, chat: 46200 }}
/>

The tape is the whole window, ruled in thousands of tokens. Each part takes its share of the width and has its own texture, so the parts read apart in light and dark mode and without color. Use it on the page for an AI product to explain memory, retrieval, and long conversations, or in an agent's settings to show what fills the window.

Examples

A smaller window

A 32k window for a coding assistant, with two parts renamed and the line at 80%.

Static

With animated={false}, the window shows its starting parts and nothing moves.

Behavior

• While the window is on screen, a reply streams in with moving stripes. When it finishes, it joins the chat and some turns fetch more documents, and the turn count goes up.
• When the window crosses the dashed line at threshold, the tape is outlined, the chat folds into a short summary, and only the newest documents stay. Then the next reply streams in.
• The sizes of the replies, the documents, and the summary scale with capacity.
• The line under the legend says what just happened, and screen readers hear it as it changes.
• With reduced motion enabled, the window shows its starting parts and nothing moves.
• The tape and the ruler are hidden from screen readers; the legend lists every part with its tokens.

Props

ContextWindowPart is "system" | "tools" | "memory" | "summary" | "documents" | "chat" | "reply".