A premium, glassmorphic team analytics dashboard built with React, Vite, and TypeScript to aggregate, analyze, and visualize Cursor AI query volumes, token consumption, and estimated costs across your developer team.
Designed for organizations and teams, this dashboard features deep, multi-user analytics:
- Global Header Selectors: Integrated User (developer emails) and AI Model select dropdowns filter the entire dashboard dynamically in real-time.
- Instant Dynamic Recalculation: KPI highlights, daily cost trends, model compositions, and user rankings recalculate at sub-millisecond speeds inside React
useMemohooks upon filter changes. - Cost Breakdown by Developer: A dedicated panel displaying spend rankings, query counts, and progress allocation bars for active team members.
- Team Activity Metrics: High-end insights tracking total active developers, average spend per developer, and identifying the team's most active member.
- Filter Cross-Isolation: Selecting a specific developer immediately updates the Model Breakdown to show only that developer's utilized models. Conversely, selecting a specific AI model updates the Developer Breakdown to rank only the users who have queried that model.
- Deduplication Safeguards: The parser aggregates multiple CSV exports and eliminates duplicates using unique request fingerprints (
${date}_${user}_${model}_${totalTokens}), ensuring identical concurrent queries from different developers are completely preserved.
Follow these steps to ingest and visualize your latest Cursor AI usage data:
- Log in to your Cursor Settings Dashboard.
- Go to the Usage or billing section.
- Click the Export CSV button to download your historical AI query logs.
Place your downloaded CSV file into the /data folder located at the root of the project:
cursor-usage/
├── data/
│ ├── user1_export.csv # Drop your team's exports here
│ ├── *.csv # Drop as many export files as you want
│ └── processed.json # Compiled automaticallyNote: The compiler automatically merges and deduplicates all data entries.
-
Development Compilation: Re-compile your data manually or automatically by launching the development server:
pnpm dev
-
Production Builds (Automated Bundling): When compiling the production bundle, the pre-build hook triggers the compiler automatically, generating the static JSON cache before the pages bundle.
pnpm build
-
Manual Override Compilation: Explicitly compile raw data into
/public/processed.jsonat any time by running:pnpm compile
pnpm installpnpm compile
pnpm devOpen http://localhost:8080 (or the custom port outputted in your console) to view your premium Cursor analytics dashboard.
- KPI Highlights: Dynamic metrics for Accumulated Spend, Total AI Queries, Total Tokens Consumed, and Cache Savings Rate.
- Cost Trends Chart: High-performance native SVG area chart showing daily spend history over the last 30 active days.
- Model Breakdown: Rankings showing cost and request weights for each utilized LLM (e.g.,
gpt-4o,claude-3-5-sonnet,gemini-2.5-pro). - Composition visualizer: Color-coded multi-segment token ratio bar (Cache Read vs. Input w/ Cache Write vs. Input w/o Cache Write vs. Outputs).
- Developer Rankings: Allocation metrics and average team activity details.
- Raw Logs Explorer: Text searching (by user, model, date), page size selectors, and precise pagination controls with custom estimated cost badges.