How to Build a Local AI Coding Cost Monitoring Dashboard in 15 Minutes

How to Build a Local AI Coding Cost Monitoring Dashboard in 15 Minutes

Last week, while reviewing our team's monthly bill for Claude Code, I discovered that the hidden consumption from Cursor and Codex actually accounted for 40% of our budget. If you're leveraging multiple AI coding assistants, you've likely run into the same bottlenecks:

• Scattered platform bills make manual reconciliation time-consuming.
• Lack of early warning mechanisms for sudden overage charges.
• Difficulty in allocating costs across collaborative teams.

Today, I'll walk you through a step-by-step setup of the token-monitor project. In just 15 minutes, you'll have a dedicated local cost monitoring hub. Once complete, you'll be able to view real-time usage radar charts for all your connected AI tools, configure tiered alert thresholds, and sync settings across your laptop and cloud servers.

Prerequisites

Environment Requirements:

• Node.js ≥18.0 (LTS version recommended)
• Basic familiarity with Git
• At least one AI tool API Key (Claude/Cursor/OpenAI works)

💡 Why Node.js? The project is built on an Electron + Vite architecture, relying on Node's build toolchain for the desktop environment. If you haven't installed Node, head to nodejs.org and download the installer for your OS.

Quick Start: 4-Step Setup

1. Clone the Repository and Install Dependencies

git clone https://github.com/Javis603/token-monitor.git
cd token-monitor
npm install

⚠️ Note: Windows users encountering node-gyp compilation errors should install Visual Studio Build Tools in advance. You can also use npm install --build-from-source to bypass binary dependency issues.

2. Initialize Monitoring Configuration

Copy the example config file:

cp .env.example .env

Open .env and fill in the basic parameters:

DATABASE_URL=sqlite:./data/monitor.db
MONITOR_PORT=3001
SYNC_INTERVAL=300000  # 5-minute sync cycle

🔍 Configuration Breakdown: We use SQLite for local storage to eliminate network latency. Adjust SYNC_INTERVAL to change the cloud sync frequency. Keep the default value for your first run.

3. Bind AI Tool APIs

Before starting the service, register at least one monitoring source:

npm run register-tool

Follow the interactive prompts to input your API Key. Here's an example for Claude:

[?] Select tool type: claude-code
[?] Enter API Key: sk-ant-xxxxxxx...[hidden]
[?] Set monthly budget (¥): 500
✅ Successfully added Claude Code monitoring node

4. Launch the Dashboard Service

npm run dev

Navigate to http://localhost:3001 in your browser. The initial load will trigger a setup wizard. After configuring your account, the main panel will automatically render donut charts showing usage for each tool.

Real-World Scenario: Building a Team Alert System

Objective

Automatically push a warning message to WeCom (Enterprise WeChat) when daily total consumption exceeds 80% of the budget.

Implementation Steps

1. Enable the Alert Plugin
   Create plugins/alert.js in the project root:

   javascript 复制代码

   const axios = require('axios');
   module.exports = async (threshold) => {
     if (threshold.reach > 0.8) {
       await axios.post('https://qyapi.weixin.qq.com/cgi-bin/webhook/send', {
         msgtype: 'text',
         text: { content: `⚠️ AI Token Alert: ${threshold.tool} usage at ${threshold.percent}%` }
       });
     }
   };

2. Register the Plugin Hook
   Update config/hooks.json:

   json 复制代码

   {
     "onThresholdBreach": "./plugins/alert.js"
   }

3. Test the Alert Pipeline
   Run the following command in your terminal:

   bash 复制代码

   npm run trigger-alert -- --tool=cursor --percent=85

   If configured correctly, your WeCom group chat will receive the test notification.

Troubleshooting & Common Pitfalls

Next Steps

Once the base deployment is complete, consider trying the following:

1. Customize chart colors by modifying src/renderer/charts/CostRadar.vue.
2. Export CSV reports for financial auditing via /api/v1/usage.
3. Join GitHub Discussions to contribute to multi-tenant architecture design.

📌 Project Repo: Javis603/token-monitor Feel free to submit an Issue if you run into configuration challenges during your setup.