shadcn.io is not affiliated with official shadcn/ui
Token Count Monitoring Block for Vue
Input tokens for the last 24 requests as stacked columns of cache read, cache write and uncached, a dashed budget line you move between 6,000, 8,000 and 10,000, a diamond on every request over it, and a cursor that reads each request.
Installation
Overview
See which requests blew the input budget and how much of the input came from the cache, with this token count panel for Vue with Ark UI. It is Tokenfern, an LLM usage monitor (made up), counting the last 24 requests of one service. A hairline frame with a plus mark on each corner holds 24 columns on one token scale: cache read solid, cache write mid grey and uncached light, so the parts differ by weight, not by colour. A dashed line marks the input budget per request, a Toggle Group in the header moves it between 6,000, 8,000 and 10,000 tokens, and every column over the line carries a diamond. A hidden range over the plot is the cursor: it reads one request's three parts, its output tokens and its time to first token. Under the plot three figures give the share of input read from the cache, how many requests went over, and how much heavier the same input would be with no cache, from typed example weights that are not a price list. Guides draw the frame and its bands; the entrance is CSS only. For teams that cache long prompts and want to see what a budget would cut.
FAQ
How do I use my own counts?
Edit requestOf at the top of the file, or replace REQUESTS with 24 objects of read, keep (cache write), fresh (uncached), out and ttft. The demo builds them from a seeded wobble so the page is the same on every load. Columns, the over-budget diamonds, the three figures and the table for screen readers are all derived from those objects. The budgets are BUDGETS and the example weights are WEIGHT_READ, WEIGHT_KEEP and WEIGHT_FRESH.
What does the budget line do?
It is a comparison line, not a limit. Choosing 6,000, 8,000 or 10,000 moves the dashed line, recounts the requests whose total input is above it and redraws the diamonds. The plot keeps one scale up to 12,000 tokens so columns never change height when the budget moves, and a polite status line reads the new count about 600 ms later.
How does the cursor work?
It is a native range laid over the plot, named Request, whose value text is the request id, its time and its input total. Arrow keys move it one request, Home and End jump to the ends, and dragging scrubs it. It starts on the request with the most input. The line under the figures updates at once; a status line speaks it after a short pause so a drag is not read out request by request.
Are the weights real prices?
No. The three weights are typed examples of how much one input token counts by kind, only there to turn the cache share into a multiple. Use your own plan's rates and the same arithmetic. The text under the weights says the counts follow the cache fields an Anthropic API reports; nothing in the panel calls it.
What is real here and what is typed?
All of it is typed: the requests, the times and the weights are examples, and nothing is counted. The product is made up. In your app feed the same shapes from the usage fields your API returns for each response, and nothing else in the panel needs to change.
Can I read it without colour?
Yes. The parts differ by weight (solid, mid, light), the budget is a dashed line with its own label, over-budget requests carry a diamond, and the figures under the plot and a hidden table of all 24 requests are the chart's text equivalent. On a phone half the time labels are hidden and the columns narrow.