Build Your Own Dashboard for AI Coding Agents
If you've worked with AI coding assistants like Claude, you know the feeling: you fire off a prompt, wait a few seconds, and get back a block of code. But what's actually happening inside? How many tokens did that take? How long did the agent think about it? Did it call any tools along the way?
I built a lightweight dashboard that makes all of that visible. It's not a flashy product — it's a practical tool for developers who want to peek under the hood of their AI agent interactions. Here's why I think you'll find it useful.
What It Does
The Claude Code Agent Monitor is a web dashboard that captures and displays real-time telemetry from your AI coding agent sessions. Think of it like a logging UI specifically built for Claude, showing you:
- Current agent status (thinking, writing code, calling tools, waiting)
- Token usage per session and in realtime
- Tool call history with timestamps
- Latency breakdowns for each step
- Session logs you can search and filter
It connects to your local Claude instance or API endpoint and pulls data as the agent works. No cloud dependency. No external services. Just a clean dashboard running on your machine.
Why It's Cool
The best part is how straightforward the implementation is. The monitor doesn't try to be a full observability platform — it focuses on the one thing developers actually need when debugging agent behavior: visibility into what the agent is doing right now.
A few things that stand out:
- Real-time WebSocket updates — as the agent thinks, the dashboard refreshes without page reloads. You can watch token counts climb, see when a tool call fires, and notice when the agent suddenly stalls.
- Minimal setup — clone, build, and point it at your Claude instance. No database, no Docker Compose, no config files full of YAML.
- Search and filter — when you've run dozens of prompts, finding a specific session or tool call is easy. The search works across all fields, not just message text.
How to Try It
Getting started takes about 2 minutes if you have Node.js 18+ installed.
git clone https://github.com/hoangsonww/Claude-Code-Agent-Monitor
cd Claude-Code-Agent-Monitor
npm install
npm run dev
That starts the dev server. Then open http://localhost:5173 in your browser. The dashboard will look empty until you start a Claude session, at which point data begins flowing in.
If you're already running Claude locally via the API, point the monitor at your endpoint in the settings panel. The readme on the repo has the exact config options.
Final Thoughts
Honestly, this is one of those projects that solves a pain point I didn't realize I had until I built it. When you're iterating on prompts or debugging why an agent keeps calling the wrong tool, seeing the raw data in real time makes the whole process faster.
It's not revolutionary — it's just a well-made utility that does one thing and does it cleanly. If you work with Claude or similar coding agents regularly, give it a spin. You might find yourself leaving it open in a tab more often than you'd expect.
Built by @githubprojects