跳到主要內容

開源套件二次開發

Token Monitor 團隊 AI 用量看板

想知道同事實際怎麼用 AI：誰在用哪些工具、用了多少、花了多少、訂閱額度還剩多少。我們以開源的 Token Monitor（MIT，支援 Claude Code、Codex、Cursor 等 43 種以上 AI coding 工具）收集每台電腦的用量紀錄，用 Hub 把多台機器彙整起來，再補上官方沒有的網頁儀表板，用瀏覽器就能看整個團隊的使用狀況。

AI Token 用量監控

這個系統做到什麼

  • 依電腦分開看：每位同事的電腦在用哪些 AI 工具、今日與本月的 token 數和費用、最後一次回報的時間
  • 只讀各工具留在電腦上的用量紀錄（token 數、模型、時間），不讀 prompt，也不讀程式碼
  • Claude、Codex 等訂閱方案的剩餘額度與重置時間，加上近 14 天的每日用量趨勢
  • 也可以直接改 Token Monitor 的原始碼（MIT 授權）：用量改存資料庫、新電腦裝好就自動連上 Hub、架自己的更新通道，整個團隊導入不必一台一台設定

內頁截圖

實際線上畫面，含客戶資料的欄位已遮蔽。 點圖可看原尺寸。

  • 儀表板上半部：今日、本月、全部與活躍四張卡片，下面是工具排行、Token 組成、每日趨勢與各方案剩餘額度。
    儀表板上半部：今日、本月、全部與活躍四張卡片，下面是工具排行、Token 組成、每日趨勢與各方案剩餘額度。
  • 儀表板下半部：每台電腦的系統、版本、今日與本月用量、最後回報時間；電腦名稱已模糊處理。
    儀表板下半部：每台電腦的系統、版本、今日與本月用量、最後回報時間；電腦名稱已模糊處理。

其他作品

同一類服務的案例排在前面。

  • eSIM 226 電商

    電商網站

    eSIM 226 電商

    面向旅客的 eSIM 電商：八種語系、多幣別顯示、綠界／藍新金流，訂單付款後自動向上游供應商配發 eSIM 並寄出安裝信。

    • 八語系、多幣別，日本客人看到日圓
    • 付款完成自動向兩家上游供應商配發、失敗自動切換

    Next.js · PostgreSQL · Keycloak · 綠界／藍新 · Kubernetes

    看內頁電商網站前往網站
  • eSIM 電商後台

    後台系統

    eSIM 電商後台

    同一套電商的營運後台：商品、售價、訂單、退款、供應商與金流一站管理，還會主動把「收了錢卻沒出貨」這種事挑出來給人看。

    • 今日訂單、營收、待付款、待出貨一眼看完
    • AI 售價建議與批次上下架

    Next.js · PostgreSQL · Keycloak · GA4 Data API

    看內頁電商網站
  • v-terminal 開發平台

    Harness／內部工具

    v-terminal 開發平台

    我們自己的網頁版開發與維運平台：終端機、Kubernetes、Helm GitOps 部署、CI、Registry 與 AI 開發代理全部在一個畫面裡。這個官網就是用它從零上線的。

    • Git push → 自架 Runner 建置 → Harbor → Helm 同步，一條龍
    • AI 開發台：用手機下指令，代理讀 Spec、改程式、跑測試

    Next.js · Node.js · SQLite · @kubernetes/client-node · Claude Agent SDK

    看內頁Harness