能力标签
Token Usage Dashboard
🛠
AI工具

Token Usage Dashboard

基于 HTML · 开源免费,本地部署,数据完全自主可控
英文名:Tokdash
⭐ 15 Stars 🍴 5 Forks 💻 HTML 📄 MIT 🏷 AI 7.5分
7.5AI 综合评分
installableanalyticscost-trackingdashboard
✦ AI Skill Hub 推荐

Token Usage Dashboard 是 AI Skill Hub 本期精选AI工具之一。综合评分 7.5 分,整体质量较高。我们推荐使用将其纳入你的 AI 工具库,帮助提升工作效率。

📚 深度解析

Token Usage Dashboard 是一款基于 HTML 的开源工具,在 GitHub 上收获 0k+ Star,是installable、analytics、cost-tracking、dashboard领域中的优质开源项目。开源工具的最大优势在于代码完全透明,你可以审计每一行代码的安全性,也可以根据自身需求进行二次开发和定制。

**为什么要使用开源工具而非商业 SaaS?**
对于个人开发者和有隐私需求的用户,本地部署的开源工具意味着数据不离本机,不受第三方服务商的数据政策约束。同时,开源工具通常没有使用次数限制和月度费用,一次安装即可长期使用,对于高频使用场景的总拥有成本(TCO)远低于订阅制商业工具。

**安装与环境准备**
Token Usage Dashboard 依赖 HTML 运行环境。建议通过 pyenv(Python)或 nvm(Node.js)管理 HTML 版本,避免全局环境污染。对于新手用户,推荐先创建虚拟环境(python -m venv venv && source venv/bin/activate),再安装依赖,这样即使出现问题也可以随时删除虚拟环境重新开始,不影响系统稳定性。

**社区与维护**
GitHub Issue 和 Discussion 是获取帮助的最快渠道。在提问前建议先检查 Closed Issues(已关闭的问题),大多数常见问题都已有解答。遇到 Bug 时,提供 pip list 的输出、完整错误堆栈和最小可复现示例,能显著提高开发者响应速度。AI Skill Hub 将持续追踪 Token Usage Dashboard 的版本更新,及时通知重要功能变化。

📋 工具概览

Token Usage Dashboard是一款开源AI工具,提供了美观的可视化和分析功能,适用于LLM API的成本跟踪和监控。

Token Usage Dashboard 是一款基于 HTML 开发的开源工具,专注于 installable、analytics、cost-tracking 等核心功能。作为 GitHub 开源项目,它拥有活跃的社区支持和持续的版本迭代,代码完全透明可审计,支持本地部署以保护数据隐私。无论是个人使用还是集成到企业工作流,都能提供稳定可靠的解决方案。

GitHub Stars
⭐ 15
开发语言
HTML
支持平台
Windows / macOS / Linux
维护状态
轻量级项目,按需更新
开源协议
MIT
AI 综合评分
7.5 分
工具类型
AI工具
Forks
5

📖 中文文档

以下内容由 AI Skill Hub 根据项目信息自动整理,如需查看完整原始文档请访问底部「原始来源」。

Token Usage Dashboard是一款开源AI工具,提供了美观的可视化和分析功能,适用于LLM API的成本跟踪和监控。

Token Usage Dashboard 是一款基于 HTML 开发的开源工具,专注于 installable、analytics、cost-tracking 等核心功能。作为 GitHub 开源项目,它拥有活跃的社区支持和持续的版本迭代,代码完全透明可审计,支持本地部署以保护数据隐私。无论是个人使用还是集成到企业工作流,都能提供稳定可靠的解决方案。

📌 核心特色
  • 开源免费,支持本地部署,数据完全自主可控
  • 活跃的 GitHub 开源社区,持续迭代更新
  • 提供详细文档和使用示例,新手友好
  • 支持自定义配置,灵活适配不同使用环境
  • 可作为基础组件集成进现有技术栈或进行二次开发
🎯 主要使用场景
  • 本地部署运行,保护数据隐私,满足合规要求
  • 自定义集成到现有系统,扩展技术栈能力
  • 作为开源基础组件进行商业化二次开发
以下安装命令基于项目开发语言和类型自动生成,实际以官方 README 为准。
安装命令
# 克隆仓库
git clone https://github.com/JingbiaoMei/Tokdash
cd Tokdash

# 查看安装说明
cat README.md

# 按 README 完成环境依赖安装后即可使用
📋 安装步骤说明
  1. 访问 GitHub 仓库页面
  2. 按照 README 文档完成依赖安装
  3. 根据系统环境完成初始化配置
  4. 参考官方示例或文档开始使用
  5. 遇到问题可在 GitHub Issues 中查找解答
以下用法示例由 AI Skill Hub 整理,涵盖最常见的使用场景。
常用命令 / 代码示例
# 查看帮助
tokdash --help

# 基本运行
tokdash [options] <input>

# 详细使用说明请查阅文档
# https://github.com/JingbiaoMei/Tokdash
以下配置示例基于典型使用场景生成,具体参数请参照官方文档调整。
配置示例
# tokdash 配置说明
# 查看配置选项
tokdash --config-example > config.yml

# 常见配置项
# output_dir: ./output
# log_level: info
# workers: 4

# 环境变量(覆盖配置文件)
export TOKDASH_CONFIG="/path/to/config.yml"
📑 README 深度解析 真实文档 完整度 87/100 查看 GitHub 原文 →
以下内容由系统直接从 GitHub README 解析整理,保留代码块、表格与列表结构。

简介

<p align="center"> <a href="README.md">English</a> &nbsp;|&nbsp; <a href="README_CN.md">中文</a> </p>

<p align="center"> <a href="https://tokdash.github.io/"><img src="https://raw.githubusercontent.com/JingbiaoMei/tokdash/main/docs/assets/tokdash_logo_full.png" alt="Tokdash" width="420" /></a> </p>

<p align="center"> <b>Local token &amp; cost dashboard for AI coding tools</b> </p>

<p align="center"> <a href="https://opencode.ai/" title="OpenCode"><img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/agents/pills/opencode.png" alt="OpenCode" height="34"></a> <a href="https://openai.com/codex/" title="Codex"><img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/agents/pills/codex.png" alt="Codex" height="34"></a> <a href="https://www.claude.com/product/claude-code" title="Claude Code"><img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/agents/pills/claude.png" alt="Claude Code" height="34"></a> <a href="https://github.com/google-gemini/gemini-cli" title="Gemini CLI"><img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/agents/pills/gemini.png" alt="Gemini CLI" height="34"></a> <a href="https://openclaw.ai/" title="OpenClaw"><img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/agents/pills/openclaw.png" alt="OpenClaw" height="34"></a> <a href="https://github.com/MoonshotAI/kimi-cli" title="Kimi CLI"><img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/agents/pills/kimi.png" alt="Kimi CLI" height="34"></a> <a href="https://pi.dev/" title="Pi"><img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/agents/pills/pi.png" alt="Pi" height="34"></a> <a href="https://github.com/features/copilot" title="GitHub Copilot CLI"><img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/agents/pills/copilot.png" alt="GitHub Copilot CLI" height="34"></a> <a href="https://hermes-agent.nousresearch.com/" title="Hermes"><img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/agents/pills/hermes.png" alt="Hermes" height="34"></a> </p>

<p align="center"> <img src="https://img.shields.io/badge/FastAPI-009688?style=flat&logo=fastapi&logoColor=white" alt="FastAPI" /> <img src="https://img.shields.io/badge/Python-3.10+-3776AB?style=flat&logo=python&logoColor=white" alt="Python" /> <img src="https://img.shields.io/badge/License-MIT-green?style=flat" alt="License" /> <a href="https://tokdash.github.io/"><img src="https://img.shields.io/badge/Website-tokdash.github.io-1E40AF?style=flat&logo=githubpages&logoColor=white" alt="Website" /></a> <a href="https://tokdash.github.io/demo/"><img src="https://img.shields.io/badge/Live%20Demo-tokdash.github.io%2Fdemo-F59E0B?style=flat&logo=githubpages&logoColor=white" alt="Live Demo" /></a> </p>

<p align="center"> <b>Try it without installing → <a href="https://tokdash.github.io/demo/">tokdash.github.io/demo</a></b> </p>

Features

  • Exact token counts: Input/Output/Cache token breakdowns
  • Statusline integration [new]: drop a live token-usage indicator into Claude Code's statusline (or any agent that can hit a local HTTP endpoint) — see Quick start
  • Custom date ranges: Flatpickr date picker + quick range buttons (Today, Last 7 Days, This Month, etc.)
  • Contribution calendar: 2D heatmap + 3D isometric view with Tokens/Cost/Messages metrics
  • Session explorer: per-session drill-down for Codex, Claude Code, and OpenCode
  • 10 style themes: Elevated, Classic, Vibrant, Midnight, Paper, Liquid, Terminal, Brutalist, Arcade, Studio
  • Light & dark mode: auto-detects system preference, manual toggle
  • PWA support: installable as a progressive web app

<p align="center"> <a href="https://tokdash.github.io/demo/"> <img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/demo.png" alt="Tokdash dashboard — click for live demo" width="900" /> </a> </p> <p align="center"> <a href="https://tokdash.github.io/demo/"> <img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/demo-stats.png" alt="Tokdash stats & heatmap — click for live demo" width="900" /> </a> </p>

Prerequisites

Install (pip)

pip install tokdash
tokdash serve

Open: http://localhost:55423

Quick start

Live demo

A static demo of the current dashboard is hosted at tokdash.github.io/demo — no install required. (The project home page is tokdash.github.io.)

The demo runs the unmodified Tokdash frontend against an in-browser shim that returns deterministic, fully synthetic data. You can:

  • switch between Overview / Sessions / Stats / Pricing tabs,
  • pick any date range (or the Today / 7-day / 30-day shortcuts),
  • toggle light/dark and all 10 style themes,
  • drill into a synthetic Codex / Claude Code / OpenCode session,
  • browse the read-only pricing database.

Source for the demo lives at tokdash/tokdash.github.io. Nothing is uploaded; nothing is read from your machine.

Option A: run directly

python3 main.py

Option B: CLI wrapper (same server)

./tokdash serve ```

Open: http://localhost:55423

If port conflicts: - python3 main.py --port <port> - ./tokdash serve --port <port>

If you want to access Tokdash from another device (recommended): - Tailscale Serve (private to your tailnet): tailscale serve 55423 - SSH port-forward: ssh -L 55423:127.0.0.1:55423 <user>@<host>

Binding to 0.0.0.0 is possible, but not recommended: it listens on all interfaces and can expose the dashboard beyond your LAN (VPN/Wi-Fi/etc.). Only do this if you understand the risk and have firewall/auth in place.

Configuration

Tokdash is localhost-only by default.

  • TOKDASH_HOST (default: 127.0.0.1)
  • TOKDASH_PORT (default: 55423)
  • TOKDASH_CACHE_TTL (default: 120 seconds)
  • TOKDASH_ALLOW_ORIGINS (comma-separated, default: empty)
  • TOKDASH_ALLOW_ORIGIN_REGEX (default allows only localhost/127.0.0.1)

Example (remote access via Tailscale Serve; recommended):

tokdash serve --bind 127.0.0.1 --port 55423
tailscale serve --bg 55423

By default tokdash serve opens the dashboard in your browser once on startup. Pass --no-open to disable this (it is also skipped automatically in headless/SSH environments and in the background service templates).

4. Test the API is responding

curl 'http://127.0.0.1:55423/api/usage?period=today'


View logs if needed:
bash journalctl --user -u tokdash -f ```

API (local)

Tokdash is a local HTTP server. Common endpoints:

  • GET /api/usage?period=today|week|month|N
  • GET /api/usage?date_from=YYYY-MM-DD&date_to=YYYY-MM-DD
  • GET /api/tools?period=... (coding tools only)
  • GET /api/openclaw?period=... (OpenClaw only)
  • GET /api/sessions?tool=codex|claude|opencode&period=...
  • GET /api/stats (contribution calendar & statistics)

Example:

curl 'http://127.0.0.1:55423/api/usage?period=today'

Full API reference: docs/API.md — schema, parameters, and response shapes for every endpoint.

1. Upgrade the package

pip install --upgrade tokdash

Statusline integration

The local API can power a statusline item in your coding agent (Claude Code, etc.) showing live token/cost stats. Hand your agent this prompt:

"I would like to add a statusline item from the tokdash endpoint's API; it should show the total tokens used today."

Point it at docs/API.md for endpoint details and let it wire the rest.

<p align="center"> <img src="https://raw.githubusercontent.com/JingbiaoMei/Tokdash/main/docs/assets/demo-statusline.png" alt="Tokdash statusline integration example" width="900" /> </p>

🇨🇳 中文文档镜像 AI 翻译 2026-06-01
英文原文章节由系统翻译为中文摘要,便于快速理解。完整原文见上方 "📑 README 深度解析"。
📌 简介

Tokdash 是一个专为 AI 编程工具设计的本地 Token 与成本监控仪表盘。它能够帮助开发者实时追踪在使用 AI 辅助编程时的 Token 消耗情况及产生的费用,让 AI 使用成本变得透明、可控。

⚡ 功能介绍

Tokdash 提供精确的 Token 统计功能,支持对 Input、Output 及 Cache Token 进行细粒度拆解。其特色功能包括:支持将实时 Token 使用指标集成到 Claude Code 等 Agent 的 Statusline 中;内置 Flatpickr 日期选择器,支持自定义日期范围查询;并提供直观的 Contribution calendar 视图,方便开发者回顾历史消耗。

📋 环境依赖

运行 Tokdash 需要确保系统中已安装 Python 3.10 或更高版本。此外,您需要安装一个或多个受支持的客户端(Supported Clients)以确保数据能够正常采集。

🛠 安装步骤(Docker/pip/源码)

您可以通过 pip 快速安装并启动服务。执行命令 `pip install tokdash tokdash serve` 后,即可通过浏览器访问 `http://localhost:55423`。安装完成后,服务将作为本地 HTTP 服务运行。

🚀 使用教程

您可以直接通过 `python3 main.py` 运行程序,或者使用 CLI 封装命令 `./tokdash serve` 来启动服务器。如果遇到端口冲突,可以通过 `--port <port>` 参数指定其他端口。若需在其他设备上访问,推荐使用 Tailscale Serve 或 SSH port-forward 进行安全转发。

⚙️ 配置说明(含 MCP / env)

出于安全考虑,Tokdash 默认仅监听 localhost。您可以通过环境变量进行配置,例如 `TOKDASH_HOST`、`TOKDASH_PORT` 以及 `TOKDASH_CACHE_TTL`(缓存生存时间)。此外,您还可以通过 `TOKDASH_ALLOW_ORIGINS` 配置跨域访问权限,以适配不同的网络访问场景。

🔌 API 说明

Tokdash 提供本地 HTTP API 接口,支持通过 GET 请求获取特定时间段(如 today, week, month)的使用量数据。开发者可以根据日期范围查询详细统计,并针对不同的工具(如 codex, claude, opencode)或 OpenClaw 进行数据过滤。您可以使用 curl 命令测试 API 是否响应正常。

🔄 工作流/模块

您可以随时通过 `pip install --upgrade tokdash` 来升级软件包。对于高级用户,可以通过集成 Tokdash 的本地 API 到 Claude Code 等编程 Agent 的 Statusline 中,实现实时 Token 与成本统计的自动化展示。

🎯 aiskill88 AI 点评 A 级 2026-06-01

Token Usage Dashboard是一款开源AI工具,提供了美观的可视化和分析功能,适用于LLM API的成本跟踪和监控。虽然该工具的功能有限,但它仍然是一个值得关注的项目。

📚 实用指南(长尾问题)
适合谁
  • 构建多智能体协作系统的 Agent 开发者
最佳实践
  • Agent 任务先做 dry-run 验证工具调用链,再开启自主执行
常见错误
  • API key 直接提交到 git 仓库(请用 .env 并加入 .gitignore)
部署方案
  • CLI:直接 npm install -g / pip install,命令行调用
  • 云端托管:可放在 Vercel / Railway / Fly.io 等 PaaS 平台
相关搜索
Tokdash 中文教程Tokdash 安装报错怎么办Tokdash Agent 工作流Tokdash 与同类工具对比Tokdash 最佳实践Tokdash 适合谁用

⚡ 核心功能

👥 适合谁
  • 构建多智能体协作系统的 Agent 开发者
⭐ 最佳实践
  • Agent 任务先做 dry-run 验证工具调用链,再开启自主执行
⚠️ 常见错误
  • API key 直接提交到 git 仓库(请用 .env 并加入 .gitignore)

👥 适合人群

AI 技术爱好者研究人员和学生开发者和工程师技术创业者

🎯 使用场景

  • 本地部署运行,保护数据隐私,满足合规要求
  • 自定义集成到现有系统,扩展技术栈能力
  • 作为开源基础组件进行商业化二次开发

⚖️ 优点与不足

✅ 优点
  • +MIT 协议,可免费商用
  • +完全开源免费,无授权费用
  • +本地部署,数据完全自主可控
  • +开发者社区支持,遇问题可查可问
⚠️ 不足
  • 安装和初始配置可能需要一定技术基础
  • 功能完整性通常不如成熟商业产品
  • 技术支持主要依赖开源社区,响应速度不稳定
⚠️ 使用须知

AI Skill Hub 为第三方内容聚合平台,本页面信息基于公开数据整理,不对工具功能和质量作任何法律背书。

建议在沙箱或测试环境中充分验证后,再部署至生产环境,并做好必要的安全评估。

📄 License 说明

✅ MIT 协议 — 最宽松的开源协议之一,可自由商用、修改、分发,仅需保留版权声明。

🔗 相关工具推荐

📰 相关 AI 新闻
🍿 AI 圈相关吃瓜
🗺️ 相关解决方案
🧩 你可能还需要
基于当前 Skill 的能力图谱,自动补全的工具组合

❓ 常见问题 FAQ

Tokdash 是一款HTML开发的AI辅助工具。开源AI工具:📊 Token Usage Dashboard — Beautiful visualization and analytics for LLM API con。⭐15 · HTML 主要应用场景包括:Token Usage Dashboard适用于需要跟踪和分析LLM API成本的开发者和企业。。
💡 AI Skill Hub 点评

经综合评估,Token Usage Dashboard 在AI工具赛道中表现稳健,质量良好。如果你已有明确的使用需求,可以直接上手体验;如果还在评估阶段,建议对比同类工具后再做决策。

📚 深入学习 Token Usage Dashboard
查看分步骤安装教程和完整使用指南,快速上手这款工具
🌐 原始信息
原始名称 Tokdash
原始描述 开源AI工具:📊 Token Usage Dashboard — Beautiful visualization and analytics for LLM API con。⭐15 · HTML
Topics installableanalyticscost-trackingdashboard
GitHub https://github.com/JingbiaoMei/Tokdash
License MIT
语言 HTML
🔗 原始来源
🐙 GitHub 仓库  https://github.com/JingbiaoMei/Tokdash

收录时间:2026-06-01 · 更新时间:2026-06-01 · License:MIT · AI Skill Hub 不对第三方内容的准确性作法律背书。