webdevpuneet.com

Related Snippets

144 in Dashboards category
1–6 of 60

Metric KPI Card Grid

Interact.js Draggable and Resizable Dashboard Panels with Snapping

Dragula Copy vs Move Lists with Spill Control

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Nested Sortable Tree with Keyboard Controls

AI Context Window Indicator — Free Token Window Usage Bar Snippet

AI Context Window Indicator · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsAI UIDashboard UI

Copy & paste

Source Code

<div class="cwi-card">
  <div class="cwi-head">
    <h3>Context window</h3>
    <span class="cwi-model">claude-opus &middot; 200K tokens</span>
  </div>

  <div class="cwi-bar-wrap">
    <div class="cwi-bar">
      <div class="cwi-fill" id="cwiFill"></div>
      <div class="cwi-band cwi-band-warn" style="left:70%;width:20%"></div>
      <div class="cwi-band cwi-band-crit" style="left:90%;width:10%"></div>
    </div>
    <div class="cwi-labels">
      <span>0</span><span>70%</span><span>90%</span><span>100%</span>
    </div>
  </div>

  <div class="cwi-stats">
    <span id="cwiUsedLabel">84,000 / 200,000 tokens</span>
    <span class="cwi-pct" id="cwiPctLabel">42%</span>
  </div>

  <button type="button" class="cwi-info-btn" id="cwiInfoBtn" aria-describedby="cwiTooltip">
    What happens when this fills up?
    <div class="cwi-tooltip" id="cwiTooltip">Once the context window fills, the assistant starts forgetting the oldest parts of the conversation to make room for new messages — long chats may lose early context. Starting a new conversation or summarizing resets it.</div>
  </button>

  <div class="cwi-demo">
    <button type="button" data-pct="25">Fresh chat</button>
    <button type="button" data-pct="78">Getting full</button>
    <button type="button" data-pct="96">Nearly full</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Fixed color-band backdrop
Static warning and critical zones stay visible regardless of current usage.
Live animated fill
The usage bar smoothly transitions width and color as usage changes.
Consequence-explaining tooltip
Explains in plain language what happens once the window fills, not just the percentage.
Three-tier thresholds
Safe, warning, and critical zones drive the fill color and percentage label together.
Token count + percentage
Shows both the raw used/limit numbers and a simplified percentage.
Demo state buttons
Jump between representative usage levels to preview every visual state.
Accessible tooltip trigger
aria-describedby links the info button to its tooltip content.
No dependencies
Pure HTML, CSS, and vanilla JavaScript.

About this UI Snippet

AI Context Window Indicator — Color Bands with a "What Happens Next" Tooltip

Screenshot of the AI Context Window Indicator snippet rendered live

Long AI conversations eventually run into a limit most users don't understand: the context window. This snippet builds a visual indicator, in plain HTML, CSS, and vanilla JavaScript, that shows how full the current conversation's context window is, using color bands to signal safe, warning, and critical zones, plus a hover tooltip that explains in plain language what actually happens once it fills up.

Color bands as a fixed backdrop, fill as the live value

The bar has two layers: static .cwi-band elements mark the warning zone (70-90%) and critical zone (90-100%) as a subtle tinted backdrop, while a separate .cwi-fill element animates its width to the live usage percentage and changes color once it crosses into those zones. Seeing both the current value *and* the zones it's approaching, rather than only a single-color bar, helps a user anticipate the limit before they hit it.

A tooltip that explains consequences, not just numbers

Most usage indicators stop at "70% used" and leave the user to guess what that means. This one includes an info button with a tooltip explaining, specifically, that the assistant will start forgetting the oldest messages once the window fills — the actual behavior users experience as a confusing "why did it forget what I said earlier" moment. Naming the real consequence turns an abstract percentage into something actionable (start a new conversation, or ask for a summary).

Demo buttons simulate a growing conversation

The Fresh chat / Getting full / Nearly full buttons jump between representative usage levels, since a live iframe demo can't accumulate real conversation tokens — a stand-in for what a real integration would update after every model response.

Where this fits in an AI product

Pair it with an AI token usage meter — the context indicator tracks the *current conversation's* window while the usage meter tracks the *billing period's* total consumption, two related but distinct numbers. It also complements an AI chat interface as a persistent header widget, or an AI function call trace in agent products where tool outputs consume context quickly.

Customizing it

Wire setUsage() to your actual token count after each model turn (most APIs report usage in their response), adjust the warning/critical thresholds for your model's real context size, or add an auto-summarize action button that appears once the critical band is reached.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA context window bar renders at 42% usage with safe/warning/critical bands visible.
  2. 2
    Click the demo buttonsFresh chat, Getting full, and Nearly full jump the bar between representative levels.
  3. 3
    Watch the color shiftPast 70% the fill turns amber; past 90% it turns red, matching the background bands.
  4. 4
    Hover the info buttonA tooltip explains what happens to the conversation once the window fills.
  5. 5
    Edit LIMIT and thresholdsChange LIMIT to your model's real context size and adjust tier() breakpoints.
  6. 6
    Wire up real usageCall setUsage(pct) after each model response using your API's reported token count.

Real-world uses

Common Use Cases

AI chat product headers
Place live context usage above a message composer in an AI chat interface, so users see how full the conversation is before it silently truncates.
Agent and tool-use consoles
Track how fast long tool outputs consume the window, pairing with an AI function call trace to explain exactly why usage jumped.
Token usage dashboards
Combine with an AI token usage meter to separate this session's context fill from the total billed across the whole account.
Document summarisation tools
Warn users before a large upload overflows the model, with safe, warning and critical bands visible as a fixed backdrop behind the animated fill.
Developer debugging panels
Help developers diagnose why a long conversation starts forgetting early messages, using the tooltip's plain-language explanation of what happens when the window fills.
Related: Alert Rule Threshold Builder
See the Alert Rule Threshold Builder for a related dashboards pattern worth pairing with this one.
Related: Incident Status Summary Widget
See the Incident Status Summary Widget for a related dashboards pattern worth pairing with this one.
Related: DNS Propagation Checker Widget
See the DNS Propagation Checker Widget for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

A context window is the maximum amount of text (measured in tokens) a model can consider at once, including the full conversation history. Unlike billing usage, which resets monthly, the context window fills up within a single conversation and directly affects what the model can "remember" — which is why it needs a separate, real-time indicator distinct from an account-level usage meter.

Most chat products start truncating or summarizing the oldest messages to make room for new ones once the window fills, which is why users sometimes notice the assistant "forgetting" something said earlier in a long conversation. The tooltip in this snippet states that consequence directly so the percentage isn't just an abstract number.

Rendering the zones as a fixed backdrop lets a user see how close they are to the next threshold even before they reach it — a bar at 60% still shows exactly where the 70% warning zone begins. A single dynamically-colored fill would only reveal the current state, not the upcoming boundary.

Most LLM APIs return usage metadata (prompt and completion token counts) with every response. Sum the running conversation total, divide by the model's actual context window size, and call setUsage(pct) after each turn to keep the indicator live.

Track the current percentage as component state, derive the tier with a small pure function, and bind it to the fill width and color classes. Recompute it whenever new usage data arrives from your chat API's response, typically in the same handler that appends the assistant's reply to the conversation.