![[ツール紹介] DeepSeek API 使用量分析ダッシュボードをオープンソース公開 — 純フロントエンド、ゼロアップロード、ドラッグ＆ドロップ](/_next/image?url=%2Fblog%2Fbru-no-cassettes-5148602_640.jpg&w=3840&q=75)
ここ数ヶ月、私たちのチームは複数のプロジェクトで DeepSeek API を集中的に活用してきました——AI支援コーディングから自動化ワークフローまで。APIコール数は右肩上がりです。
そして請求書が届きました。
問題：CSVが読解テストになった
DeepSeek の公式ダッシュボードは月次CSVエクスポートを提供しており、それは良いことです。しかし、いざそのファイルを開いて数百行の数字と向き合うと、頭に浮かぶのはただ一つの疑問だけです：
「で、どのプロジェクトが一番トークンを消費してるの？」
冗談ではありません。CSVには utc_date、model、api_key_name、type、amount といったフィールドがあり、データは網羅的ですが、人間が読むにはまったく適していません。次のような分析をしようと思ったら、Excel で手動ピボットテーブルを組む必要があります：
- 今月の総コストはいくらか？日次トレンドは？
- どの API キーが最も消費しているか？コストの内訳は？
- キャッシュヒット率は目標値に達しているか？最適化の余地は？
- モデル間の使用量比較は？
どの質問もかなりの手作業が必要で、しかも毎月繰り返さなければなりません。
解決策：自分たちでダッシュボードを作る
「コードで解決できることを手作業でやらない」がモットーのチームとして、私たちは可視化ツールを自作することにしました。
基本原則は3つ：
- 絶対的な安全性 — 請求データには機密コスト情報が含まれており、サーバーにアップロードしてはいけない
- 極限までシンプルな操作性 — CSV ファイルをドラッグ＆ドロップするだけで即座にグラフ表示、設定不要
- オープンソース — コードは公開し、誰でも監査・貢献できる
これらの原則に基づき、純粋なフロントエンドアーキテクチャを選択しました：Next.js 16 (App Router) + React 19 + TypeScript をフレームワーク層に、Papa Parse をブラウザ Worker スレッドでのCSV解析に、ECharts 5 をグラフレンダリングに採用。すべての計算とレンダリングは 100% ブラウザ内で実行され、バックエンドサーバーもデータベースもなく、データがデバイスの外に出ることは決してありません。
機能概要
4つの分析次元
| 次元 | グラフ種類 | 見えるもの |
|---|---|---|
| コスト分析 | 棒グラフ + ドーナツチャート | 日次コスト推移、キー別コスト分布 |
| 使用量分析 | 全幅テーブル | キー別トークン数、コスト、リクエスト数、コスト比率バー |
| キャッシュ分析 | 折れ線 + 積み上げ棒 | 日次ヒット率推移、キー別ヒット/ミス比較 |
| トレンド分析 | 切替可能な折れ線 | コスト/トークン/ヒット率/リクエスト数を自由に切替 |
実用的な特徴
- 複数月のスマート統合 — 複数月のファイルを一度にドロップ、ファイル名による自動ペアリング
- モデルフィルター — Apple スタイルのセグメントコントロールでモデル間切替
- バイリンガル UI — 中国語/英語切替、ダーク/ライトテーマの自動保存
- KPI カード — 4列の大数字表示：総コスト、総トークン数、キャッシュヒット率、アクティブキー数
アーキテクチャ：なぜ純フロントエンドなのか
請求データを扱う以上、プライバシーは妥協できない一線です。私たちが純フロントエンドアーキテクチャを選んだのは、バックエンド能力がないからではなく：
あなたの請求データは、最初から最後まで、あなた自身のブラウザメモリ内にのみ存在すべきだからです。
実装の詳細：
- CSV解析 — Papa Parse が Web Worker で非同期実行され、UI をブロックしない
- グラフレンダリング — ECharts 5 がリッチなインタラクティブチャートを提供
- テーマシステム — CSS カスタムプロパティ駆動のデュアルテーマ（ダーク/ライト）、Apple にインスパイアされたミニマルデザイン
- デプロイ — Vercel、静的サイト、グローバル CDN
コードは GitHub で完全にオープンソースです。監査、スター、コントリビューションをお待ちしています。
使い方
3ステップ、30秒：
- DeepSeek プラットフォーム にログインし、使用量ページで月を選択して CSV をエクスポート（
amount-*.csvとcost-*.csvがダウンロードされます） - https://deepseek-usage.xyz を開く
- ダウンロードした CSV ファイルをドラッグ＆ドロップ — 完了
登録不要、インストール不要です。
MindRose について
私たちは MindRose、中小製造業、物流企業、越境貿易業者向けに軽量なデジタルソリューションを提供することに特化したテクノロジーチームです。
私たちは曖昧な「DX」を売るのではなく、AI 技術とフルスタックアジャイル開発（Next.js、React、Mendix など）を活用し、実際の業務課題を解決するアプリケーションを数週間で提供します。
このダッシュボードは無料のオープンソースツールですが、その背後にある技術力とプロダクト思考は、商業プロジェクトに持ち込むものと同じです：まず問題を理解し、次に適切な技術で解決し、そして体験を完璧に磨き上げる。
もし以下のようなことをお考えでしたら：
- 企業向けのカスタムデータダッシュボードや BI ツールの構築
- AI をビジネスワークフローに深く統合
- モダンでエレガントな社内管理システムの構築
- このオープンソースプロジェクトをベースにしたさらなる協業
ぜひ お問い合わせ ページからご連絡ください。無料のボトルネック診断とカスタマイズ提案を提供しています。
今すぐ試す: https://deepseek-usage.xyz
GitHub リポジトリ: https://github.com/GavinCnod/deepseek-api-usage-analysis
スター ⭐ とコントリビューションをお待ちしています！