Back to components

AI Interfaces

Token Budget Allocator

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

tokenscontextbudget

Installation

Copy and paste the code into your project.

Accessibility notes

Exact token counts and remaining capacity accompany the segmented visual allocation.

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.

Preview accent

TypeScript
const allocations = [{ label: "System", tokens: "4.2k" }, { label: "History", tokens: "9.8k" }, { label: "Retrieval", tokens: "5.1k" }, { label: "Response", tokens: "4.8k" }]; export function TokenBudgetAllocator() { return <ul>{allocations.map((item) => <li key={item.label}>{item.label}: {item.tokens}</li>)}</ul>; }
Usage
<TokenBudgetAllocator />

Related components

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

AI Interfaces

Context Compression Preview

Advanced

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

contextcompressiontokens
View component

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

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