Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Context Window Token Usage AI Block for React

Pick a model and see one stacked bar of what fills its context window, a legend with token counts and shares that add to 100, a toggle group that lists the items in each part, and a button that drops the oldest ten turns.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people see what is using up a conversation's context, with this inspector for React with Base UI. Windowmark, a context inspector, puts a Select of models in the header (Orvane 2 at 200K, Brellis Large at 1M, Brellis Small at 32K) and draws one stacked bar from edge to edge for System, Tools, Files and Conversation, with the free room after it. A legend gives each part's tokens and share, and a Toggle Group lists what is inside a part. The Shine Button Drop the oldest 10 turns takes the first ten turns out of the conversation and redraws the bar; Restore puts them back. For chat products, prompt tools and anything with a context limit.

FAQ

What stays in the page, and how do I make it real?

The items, the twenty turns and each model's window are typed in the file. The totals, the bar widths, the shares and the freed tokens are worked out from them. Nothing counts a real prompt. To wire it for real, return the token count of each part from your tokenizer and keep the rest.

Why do the shares always add to 100?

They are rounded by largest remainder: each share is rounded down, then the parts with the biggest fractions get the missing points. A part can read 1% when its exact share is 0.6%, but the total is never 99 or 101.

What happens on a small window?

Choose Brellis Small and the total is more than the 32K window, so the bar runs past it, a marker shows where the window ends and the sentence says by how much it is over. Dropping the oldest turns then brings it back down.

What does dropping turns do to the list?

The ten oldest turns stay in the list, struck through and marked Dropped, so nothing moves. Their tokens leave the bar, the legend and the totals, and Restore brings them back.

How does it work from the keyboard?

The model select and the toggle group both use the arrow keys, the list of items is a focusable scroll region, and the two buttons are real buttons. The status line announces each change.

How does it look on a phone?

The header select drops under the sentence, the legend becomes two columns, and the list keeps its fixed height and scrolls.

All 100 ai blocks