Token 用量儀表

以分段色條呈現 AI 上下文視窗的組成（系統提示、對話歷史、當前輸入等），數字平滑滾動累加，用量超過 80% 轉橘、超過 95% 轉紅並震動警示，hover 各區段可查看明細 tooltip，適合聊天應用的 token 監控面板。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

Token 上限limit

128000

標題title

警示門檻warnAt

0.8

危險門檻dangerAt

0.95

動畫時長（秒）duration

1.1

<AiTokenUsageMeter />

安裝

npx shadcn@latest add https://webberui.com/r/ai-token-usage-meter.json

或在 components.json 設定 registries 後，改用 @webberui/ai-token-usage-meter 安裝。

安裝依賴後，從 registry JSON（/r/ai-token-usage-meter.json 的 files[0].content）複製 ai-token-usage-meter.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import { TokenUsageMeter } from "@/components/ui/ai-token-usage-meter";

<TokenUsageMeter
  limit={128000}
  segments={[
    { label: "系統提示", tokens: 3200 },
    { label: "對話歷史", tokens: 52400 },
    { label: "當前輸入", tokens: 6800 },
  ]}
/>

Props

Prop	型別	預設值	說明
`segments`	`TokenSegment[]`	—	各區段的 token 用量，依序渲染於色條中
`limit`	`number`	—	上下文視窗的 token 上限
`title`	`string`	`"Token 用量"`	儀表標題，同時作為 aria-label
`duration`	`number`	`1.1`	色條增長與數字滾動的動畫時長（秒）
`warnAt`	`number`	`0.8`	警示門檻（0–1），用量比例超過後轉為橘色
`dangerAt`	`number`	`0.95`	危險門檻（0–1），超過後轉為紅色並震動警示
`className`	`string`	—	透傳到最外層容器

TokenSegment 型別：

欄位	型別	預設值	說明
`label`	`string`	—	區段名稱（例如：系統提示、對話歷史、當前輸入）
`tokens`	`number`	—	該區段佔用的 token 數
`color`	`string`	內建調色盤	區段顏色（任何 CSS 顏色值），未提供時依索引輪替取色

可及性

整體以 role="meter" 搭配 aria-valuenow 與 aria-valuetext 曝露目前用量，輔助科技可直接讀出「x / y tokens」
百分比與狀態文字置於 aria-live="polite" 區域，跨越警示門檻時會即時播報
使用者系統開啟「減少動態效果」時，停用色條增長、數字滾動與震動警示，直接顯示最終狀態
狀態不只依賴顏色傳達：同時提供百分比、剩餘／超出 token 數與文字標籤（餘裕充足、接近上限、已超出上限）
除 hover tooltip 外，底部圖例常駐顯示各區段名稱與數值，鍵盤與觸控使用者也能取得完整資訊

Token 用量儀表

Playground

安裝

使用

Props

可及性

On this page