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 Token Usage Meter — Free Prompt/Completion Usage Bar Snippet

AI Token Usage Meter · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsAI UIData VisualizationDashboard UI

Copy & paste

Source Code

<div class="tum-card">
  <div class="tum-head">
    <div>
      <h3>Token usage</h3>
      <p>This billing period · <span id="tumLimitLabel">50,000</span> token plan</p>
    </div>
    <span class="tum-badge" id="tumBadge">Healthy</span>
  </div>

  <div class="tum-count">
    <span id="tumUsed">0</span>
    <span class="tum-of">/ <span id="tumLimit">50,000</span> tokens</span>
  </div>

  <div class="tum-track">
    <div class="tum-seg tum-prompt" id="tumPromptSeg" style="width:0%"></div>
    <div class="tum-seg tum-completion" id="tumCompletionSeg" style="width:0%"></div>
  </div>

  <div class="tum-legend">
    <span><i class="tum-dot tum-dot-prompt"></i>Prompt <b id="tumPromptVal">0</b></span>
    <span><i class="tum-dot tum-dot-completion"></i>Completion <b id="tumCompletionVal">0</b></span>
  </div>

  <div class="tum-warning" id="tumWarning" hidden>
    You're approaching your token limit for this period. Requests may be throttled once you reach 100%.
  </div>

  <div class="tum-actions">
    <button type="button" id="tumSimulate">Simulate request</button>
    <button type="button" id="tumReset" class="tum-ghost">Reset</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

Segmented usage bar
Prompt and completion tokens render as adjacent colored segments in one track.
Live running counter
A large tabular-number counter updates on every simulated request.
Tiered warning colors
Healthy, near-limit, and over-limit states drive the bar, badge, and warning text together.
Contextual warning message
Appears only once usage crosses 80%, explaining throttling risk.
Simulate request button
Demonstrates the meter filling the way real API calls would accrue usage.
Prompt/completion legend
Exact token split reported below the bar with color-matched dots.
Reset control
Zeroes usage instantly for repeat demos.
No dependencies
Pure HTML, CSS, and vanilla JavaScript.

About this UI Snippet

AI Token Usage Meter — Segmented Prompt/Completion Bar with Live Warnings

Screenshot of the AI Token Usage Meter snippet rendered live

Any product billing by tokens — a chat app, an API platform, an IDE copilot — needs a way to show users how much of their allowance they've burned through before they hit a wall. This snippet builds a live token usage meter in plain HTML, CSS, and vanilla JavaScript: a segmented bar that splits usage into prompt tokens and completion tokens, a running counter, and a tiered warning state, all driven from two numbers.

Two segments, one bar

Most token-billed products separate prompt tokens (what you send) from completion tokens (what the model generates), often priced differently. Rather than two separate bars, render() draws both as adjacent segments of one track — tum-prompt in indigo, tum-completion in green — so the full picture of "where did my usage go" is visible in a single glance, with a small legend below reporting the exact split.

Simulate request, not a slider

Instead of a slider (which implies the user controls consumption directly), the demo exposes a "Simulate request" button that adds a randomized prompt/completion pair each click, the way a real request would land. This is closer to how token usage actually accrues — in discrete bursts from real calls — and makes the meter feel alive without needing a backend.

Tiered warning that changes the whole bar's color

Once total usage crosses 80% of the limit, both segments and the status badge shift from indigo/green to amber; at 100% they shift to red and a warning message appears explaining that requests may be throttled. The tier is computed once and applied everywhere — the badge, the bar segments, and the warning visibility — so nothing can disagree about the current state, the same pattern used in this library's quota usage meter.

Where this fits in an AI product

Place it in account settings next to an AI model comparison table so users understand both what a model costs and how much they've used, or pair it with an AI context window indicator — the usage meter tracks billing-period totals while the context indicator tracks the current conversation's window.

Customizing it

Swap the simulate button for a real event listener on your streaming response handler, wire LIMIT to the user's actual plan, and replace the random prompt/completion split with real numbers returned by your API's usage metadata.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA dark "Token usage" card renders at 0 used against a 50,000 token limit.
  2. 2
    Click Simulate requestA randomized prompt/completion pair adds to the counter and the segmented bar fills.
  3. 3
    Watch the tiers changePast 80% the bar and badge turn amber; at 100% they turn red and a warning appears.
  4. 4
    Check the legendPrompt and completion totals report separately below the bar.
  5. 5
    Reset the demoClick Reset to zero out usage and try again.
  6. 6
    Wire up real dataReplace the simulate handler with your API's actual usage response.

Real-world uses

Common Use Cases

AI product billing pages
Show plan consumption with prompt and completion tokens as adjacent coloured segments, so users see not only how much they used but what used it.
API developer usage dashboards
Track token spend beside a rate limit status panel, separating request pacing from total volume consumed.
Chat product settings
Pair with an AI chat interface so users can see allowance burn as they converse, with a warning message appearing past 80%.
Context versus billing views
Show next to an AI context window indicator, explaining why a long chat both fills the window and costs more.
Team and seat usage reports
Aggregate per-seat token use on an admin page, next to an AI model comparison table that helps choose cheaper models.
Related: API Response Inspector
See the API Response Inspector for a related dashboards pattern worth pairing with this one.
Related: SSL Certificate Expiry Monitor
See the SSL Certificate Expiry Monitor for a related dashboards pattern worth pairing with this one.
Related: Support Ticket Backlog Widget
See the Support Ticket Backlog Widget for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Most token-billed AI products price prompt and completion tokens differently, and users often want to know which side of a request is driving their usage. Drawing them as adjacent segments of one track keeps the total usage readable at a glance while still exposing the split, with an exact breakdown in the legend below.

A slider implies the user directly controls how much they've used, which misrepresents how token billing actually works — usage accrues in discrete bursts from real API calls. The simulate button adds a randomized prompt/completion pair per click, mimicking that bursty accrual pattern more honestly than a continuous drag control.

A single tier() function classifies total usage as ok (under 80%), warn (80-99%), or over (100%+). That tier value drives the bar segment colors, the status badge, and whether the warning message is shown — all from one computed value, so they can never show conflicting states.

Replace the simulate button's random values with the actual prompt_tokens and completion_tokens your API returns per request (most LLM APIs include this in response metadata), accumulate them into promptUsed and completionUsed, and call render() after each request completes.

Track promptUsed and completionUsed as component state, derive the tier and segment widths with a computed value or useMemo, and call your update function whenever new usage data arrives from your API. The tier logic and markup structure port unchanged.