Back to components

AI Interfaces

Context Compression Preview

A compaction preflight showing which conversation sections will be kept, summarized, or dropped.

contextcompressiontokens

Installation

Copy and paste the code into your project.

Accessibility notes

Every section exposes its token impact and exact keep, summarize, or drop decision.

Context compression

Compaction preview

−7.5k tokens
  • Decisions

    1.8k

    Keep
  • Discussion

    8.4k → 1.2k

    Summarize
  • Duplicates

    2.1k

    Drop
Projected context5.4k / 16k

Preview accent

TypeScript
const sections = [{ label: "Decisions", action: "Keep" }, { label: "Discussion", action: "Summarize" }, { label: "Duplicates", action: "Drop" }]; export function ContextCompressionPreview() { return <ul>{sections.map((section) => <li key={section.label}>{section.label}: {section.action}</li>)}</ul>; }
Usage
<ContextCompressionPreview />

Related components

Context window

25.4k / 32k

79% used
System
4.2k
Conversation
12.8k
Sources
8.4k

6.6k tokens available for response

AI Interfaces

Context Window Meter

Intermediate

A token allocation breakdown for system instructions, conversation history, and retrieved sources.

tokenscontextobservability
View component

Context window

Token allocation

23.9kof 32k

  • System
    4.2k
  • History
    9.8k
  • Retrieval
    5.1k
  • Response
    4.8k

8.1k tokens remain for tools, retries, and safety margin.

AI Interfaces

Token Budget Allocator

Intermediate

A context-window planner showing how instructions, history, retrieval, and response capacity consume tokens.

tokenscontextbudget
View component

Agent memory

Eduardo workspace

3 saved
  • Prefers compact dashboards
  • Uses eval scorecards
  • Ships with dark themes

AI Interfaces

Agent Memory Card

Intermediate

A compact memory summary card for personalized agents and workspace context.

agentmemorycontext
View component