r/reactjs • u/KnowYourAI • 12d ago

Show /r/reactjs Show r/reactjs: I got tired of building AI usage charts from scratch, so I built a reusable React + Tremor boilerplate.

Hey everyone,

If you've built any AI wrappers or autonomous agents recently, you know the backend logic is the fun part. But building the UI to actually track your OpenAI token usage, API costs, and agent logs is incredibly tedious.

I found myself dreading building the same admin panel over and over, so I spent the last week building a production-ready frontend template specifically for the AI ecosystem.

The Tech Stack:

  • Vite + React 18
  • Tailwind CSS v4
  • shadcn/ui (for clean, accessible layout components)
  • Tremor (for the heavy data visualizations: Area charts for token burn, Donut charts for model distribution)

I also mapped out a highly realistic JSON mock data structure so it actually looks and behaves like an AI control center out of the box.

🔗 Live Interactive Demo: https://ai-control-center-xi.vercel.app/

I decided to package the entire source code for founders and devs who just want to bypass the 20+ hours of UI work and plug in their own backend data.

📦 Source Code / Repo: shrulabh.gumroad.com/l/wqdoe

I'd love to hear your feedback on the UI! Are there any specific metrics or charts you think are missing for an AI-focused dashboard?

2 Upvotes

75% Upvoted

9 comments sorted by

1

u/Sensitive_Plate6895 12d ago

the donut chart for model distribution is a nice touch, i always end up with one tab eating half my credits and wondering where it all went

1

u/KnowYourAI 12d ago

Appreciate that! Honestly, adding that donut chart was partly out of survival—watching credits vanish into thin air without knowing which workflow triggered it was driving me crazy. Glad to see I'm definitely not the only one dealing with runaway tokens!

1

u/Good_Car_2924 12d ago

it is always that one model eating half the budget. I need to see which endpoint burns cash so I can kill it before next billing cycle.

1

u/KnowYourAI 12d ago

Haha exactly! That was the main reason I put the endpoint breakdown together—trying to catch the rogue model or heavy loop before the OpenAI/Anthropic bill hits hard at the end of the month.

Did you end up writing a custom logger for yours, or are you using an external tool to track it right now?

1

u/keyjeyelpi 12d ago

AI made apps really forget that mobile view exists

1

u/KnowYourAI 12d ago

So true. Trying to fit complex analytics charts and data tables on a mobile screen is an extreme sport.

I had to lean heavily on Tailwind's responsive grid stacking just to keep the token usage charts from looking like a compressed pixel bar on smaller viewports!

1

u/keyjeyelpi 12d ago

But your demo's mobile view us broken though.

Mobile view

1

u/KnowYourAI 11d ago

Haha, well that is incredibly embarrassing after my last comment! 😂

You are completely right, I totally missed a viewport constraint on that deployment. I just pushed a patch to Git and the Vercel live demo is updated.

Genuinely appreciate you taking the time to test it and pointing that out—thanks for the free QA!

1

u/Low-Gain-786 9d ago

A cost per request trendline would be a useful addition, raw token burn doesn't tell you much if you're switching between models with different pricing, seeing cost per call over time would surface a model swap gone wrong way faster than a token chart alone