Build Your Own API Usage Dashboard To Track Multiple Providers Using Lovable
- Harshal
- Mar 1
- 3 min read
Build Notes for an API usage tracker using Lovable, Supabase, and n8n
Track API usage and costs across multiple providers in one dashboard. Catch runaway spending before it happens. Build your own ("BYO") dashboard with Lovable, Supabase, and n8n.
I spent 45 minutes building this and 40 minutes recording and writing this. You need 2 minutes to read this.
Related:
Problem Context
When building hobby or side projects, you may use multiple API providers. You know your day-to-day usage is not very high or expensive. But, you worry about catastrophic failures—stolen tokens, runaway loops, unexpected spikes.
Each provider has its own dashboard and billing page. Checking each separately is slow and scattered. Buying an API usage monitoring platform is an added expense.
Solution Via App
This dashboard gives you one view for all providers so you spot problems early.
App lives here: API Usage Dashboard
Video walkthrough:
Open the dashboard to see current usage and costs for each API provider in one view. The dashboard tracks:
OpenAI, Gemini, and Anthropic (LLMs)
ElevenLabs (text-to-speech, ASR)
Tavily and Firecrawl (web scraping)
Tado (via Home Assistant for smart home)
SERP API (search queries)
Pinecone (RAG vector store)
But you cannot track a few platforms including Perplexity this way. Those platforms only had monitoring dashboards, not API.
Features:
Current usage and costs in one view
CSV export
Light and dark mode
Authentication (sign-in enabled, sign-up disabled since API keys are hard-coded)
Selectable time range
Tech Stack:
Lovable - frontend and AI copilot
Supabase - backend for Lovable to fetch and normalize usage data for most APIs
n8n - workflow automation to fetch and normalize usage data for tado
Perplexity - to understand use of tado API, find APIs or steps for some services
OpenAI - Dall-E 3 to generate logo
Learnings
Changes I had to make:
Data formats: Each API provider has a different data format and billing structure. Supabase and n8n workflows handle the mapping and normalization so the dashboard shows consistent units. But 1 day graphs can look fine while hiding data issues. I had to evaluate the exact API command—like telling a data analyst the data gotchas.
Some providers do not expose usage data through their APIs.
Data structure: Providers structure data differently. Some give cumulative usage, some give per-day usage. Some give only one number, some give a timeseries.
Authentication: The dashboard is read-only and requires authentication. Without authentication, anyone with the URL could see usage patterns. I kept it simple: sign-in for me, no sign-up for others yet.
Real-time alerts: I considered real-time alerts for threshold breaches (for example, spending over $50 in a day). I skipped that for now. The dashboard refreshes often enough and I want to solve the problem when I face it, not over-engineer the solution.
Trend charts: I wanted historical trend charts. That requires storing time-series data, so I am storing it in supabase or n8n's datatables.
n8n for tricky APIs: n8n works well for tricky APIs that you are very familiar with and when you need a data persistence layer.
Lovable and Supabase: Lovable plus Supabase works well for most APIs. They did a great job figuring out the right API path and parameters for most providers, probably by adding API spec docs to the Agent's context using web browsing tool.
Security: Since I had all my API keys in the platform, I needed a way to lock this down under authentication. If you decide to publish a webapp, consider the security and privacy measures you want to take.
Single-user: This was primarily a single-user dashboard. Instead of keeping the API keys writable from settings page, I wrote them via DB edits to supabase.
Security scanners: I used the lovable security scanners but probably wasted a lot of credits. The scanner kept flagging the same things again and again and kept giving several false positives.
Related:
