オープンソースのWebダッシュボードが、リモートワークフローのClaudeトークン使用量を追跡します

開発者が、リモート環境やヘッドレス環境でのClaudeトークン使用量を追跡するWebベースのダッシュボード「react-ai-token-monitor」をオープンソース化しました。このツールは、既存のデスクトップ監視ツールがサーバー、開発コンテナ、CI、またはSSHワークフローでうまく機能しないために作成されました。

主な詳細

このダッシュボードは、chokidarウォッチャーとServer-Sent Events（SSE）を使用して、ローカルの~/.claude/projects/**/*.jsonlファイルをリアルタイムで解析し、ライブアップデートを実現します。Opus、Sonnet、Haikuモデルおよびキャッシュの読み書き操作に対する現在のAPI価格に基づいてコストを計算します。

機能には以下が含まれます：

• モデルの内訳
• キャッシュ効率のドーナツチャート
• GitHubスタイルのアクティビティヒートマップ
• 週次および月次のトレンド
• 3D概要グラフ（純粋なSVG）
• ダークテーマ
• 外部API呼び出しなし - すべてのデータはローカルに保持

開発者自身の2026年3月の使用データは以下を示しました：

• 消費されたトークン数：660万
• API価格での相当価値：4,808ドル
• セッション数：129
• キャッシュ読み取りが使用量を支配し、一部の日では100%の効率（214万以上のキャッシュトークン）
• 高トークン日（ピーク997K）が常に最も生産的とは限らない
• Haikuが予想以上にキャッシュ経由で多く出現

セットアップと使用方法

ツールを実行するには：

npm install && npm run dev

サーバーは0.0.0.0にバインドされ、電話やブラウザからのネットワークアクセスが可能です。このツールはMITライセンスで、Claude Codeを使用して構築されました。

開発者は、CSVエクスポート、制限アラート、マルチプロジェクトサポートなどの追加機能についてコミュニティからのフィードバックを求めています。