I Built a Visual Dashboard for Claude Code (Because I Was Tired of Managing Text Files)

Thuong Truong — Fri, 07 Nov 2025 07:04:36 +0000

Here's What Happened

So I've been using Claude Code for a few months now. It's genuinely incredible - an AI coding assistant that actually understands what you're trying to build. But there was one thing driving me absolutely crazy:

Everything was managed through text files.

Want to create a custom slash command? Create a .md file.
Need to configure an agent? Edit config.json.
Setting up hooks? More text editing.

Don't get me wrong - I love my terminal. But when you're juggling 10+ projects, each with their own commands, skills, and configurations, things get messy fast.

I'd find myself asking:

"Wait, which project had that command I wrote?"
"What was the syntax for configuring hooks again?"
"Did I already set up the test automation hook here?"

Three weeks ago, I got fed up and spent a weekend building a solution.

The result? ClaudeX - a web-based dashboard for Claude Code that I honestly can't work without anymore.

npm install -g claudex
cd your-project
claudex init
claudex start

🎉 http://localhost:4200 opens and you've got a full visual workspace.

Why This Matters (At Least to Me)

Look, I'm not saying the CLI approach is bad. For simple projects, it's fine. But here's what I was dealing with:

The Old Way:

30 minutes setting up commands for each new project
Copy-pasting from old projects (and forgetting where I put them)
No idea what templates or best practices existed
Writing the same hooks over and over
Zero discoverability - you had to know something existed to use it

Now with ClaudeX:

2 minutes to set up everything
136+ templates ready to use (commands, skills, agents, hooks)
Visual search and filtering
Dark mode that doesn't hurt my eyes at 2 AM
Can actually see what I'm building

Honestly? It's like going from Notepad to VSCode. You don't realize how much friction there was until it's gone.

What You Actually Get

Okay, enough backstory. Here's what's inside:

The Web Interface (It's Actually Pretty)

I'm not a designer, but I tried. Dark mode by default (because of course), flat design, no unnecessary animations. Just a clean dashboard where you can:

Browse and search 136+ templates
Edit markdown with live preview
Drag-and-drop to organize
See all your configurations in one place

136+ Templates (This Took Forever)

I spent way too much time curating these:

41 Command Templates:

/spec - Turn ideas into specs
/plan - Generate implementation plans
/cook - Develop with AI guidance
/debug - Smart debugging assistance
/git:pr - Auto-generate PRs
Plus 36 more...

70+ Skill Templates:

Next.js, React, TypeScript, Tailwind
AWS, Docker, Kubernetes
OpenAI, Claude API integration
And a bunch more I keep finding useful

14 Agent Presets:

Planner, Debugger, Code Reviewer
UI/UX Designer, Copywriter
Database Admin, DevOps Expert
You get the idea

19 Hook Templates:
This is where it gets interesting. Want to auto-format after every change? Auto-run tests? Auto-deploy when tests pass? There are templates for all of that.

The Workflow Automation (My Favorite Part)

Set up hooks once, forget about them:

# You run this in Claude Code:
/cook

# ClaudeX automatically:
# 1. Formats your code (Prettier)
# 2. Runs linting (ESLint)
# 3. Executes tests (Jest/Vitest)
# 4. If tests pass → deploys to staging
# 5. If anything fails → rolls back

# You didn't do anything. It just happened.

I haven't manually run prettier in weeks.

Screenshot to Code (This Is Wild)

There's an MCP server integration that turns screenshots into React code using Google's Gemini Vision API.

Setup:

Get a free Google API key
Enable the MCP server in ClaudeX
Paste a screenshot in Claude Code
Say "make this in React"

It actually works. I've used it for landing pages, dashboards, even design system components. Not perfect, but it gets you 80% there.

Try It (Takes 2 Minutes)

You need Claude Code installed first. If you don't have it:

# macOS/Linux/WSL
curl -fsSL https://claude.ai/install.sh | bash

# Windows PowerShell
irm https://claude.ai/install.ps1 | iex

Then install ClaudeX:

npm install -g claudex

cd your-project
claudex init
claudex start

Browser opens at http://localhost:4200. That's it.

(You can also use npx claudex if you don't want to install globally)

Real Example: How I Use This Daily

Let me show you my actual workflow building a SaaS product last week.

The Project: User authentication system for a Next.js app

Old me (2 hours of setup):

Create .claude/commands/spec.md manually
Google "how to configure Claude agents"
Write hooks for testing and deployment
Repeat for 5 different commands
Finally start coding
Forget to run tests
Deploy broken code
Cry

New me (5 minutes):

Open ClaudeX → Click "Templates" → Add these:

Commands:

/spec - Describe what I want, get a full spec
/plan - Turn spec into implementation steps
/cook - Build it with AI assistance
/test - Run the test suite

Skills:

Next.js
TypeScript
Tailwind CSS

Hooks:

Auto-format with Prettier (after every change)
Auto-test with Jest (after every change)
Auto-deploy to Vercel (after tests pass)

Done. Now I just code:

# In Claude Code
/spec "user auth with email/password, password reset, session management"
# → Full spec appears

/plan
# → Step-by-step implementation plan

/cook
# → Claude builds it
# → Code gets formatted automatically
# → Tests run automatically
# → Green checkmarks everywhere

/test
# → Full suite passes

/git:pr "Add user authentication"
# → PR created
# → Code review happens

The difference: I'm building features, not managing configuration files.

The Part That Surprised Me

You know what I didn't expect? How much I use the template library.

At first, I thought "oh cool, some starter templates." But then I kept discovering useful stuff:

There's a /journal command that creates daily dev logs
There's a Design Thinking skill for feature planning
There's a hook that backs up files before risky operations
There's a /design:3d command that generates 3D visualizations

I've probably only used 30% of the templates. But those 30% have saved me probably 50+ hours over the last month.

Some Cool Stuff You Can Do

Instant Project Setup

You start a new Next.js project. Old way: spend 30 minutes setting up commands, hooks, skills. New way: Click "Next.js Full Stack" template pack → Everything configured in 30 seconds.

Screenshot to Code

Literally paste a screenshot, say "make this in React." Uses Google's Gemini Vision. I've built entire landing pages this way. It's absurd.

Git Automation

Set up hooks that:

Run tests before every commit
Auto-generate commit messages from your changes
Create PR descriptions automatically
Request reviews from the right people

I barely touch git commands anymore.

Team Sync

Export your entire workspace as JSON. Share with your team. Everyone has identical setups. No more "works on my machine" because of different Claude configurations.

What's Next

I'm working on:

Favorites system (because 136 templates is a lot)
Full-text search (find that command you wrote 2 months ago)
Template versioning (so you can roll back when you break something)
Plugin system (if you want to add your own features)

But honestly? It's pretty complete now. I use it every day and rarely think "I wish it had X."

The Technical Bits (For the Curious)

Stack:

Backend: Node.js + Express (REST API + WebSocket)
Frontend: React 19 + Vite + Tailwind
Storage: Just files (everything in .claude/ directory)
No database, no auth, no cloud services

Performance:

Server starts in < 2 seconds
Page loads in < 1.5 seconds
Search is instant (< 100ms)
Hot reload on file changes

Security:

Everything sandboxed to .claude/ directory
No telemetry or tracking
All processing happens locally
Your code never leaves your machine

Built it over a weekend, then spent 2 weeks fixing bugs and adding polish. Now it's solid.

Who's This For?

You'll love it if:

You use Claude Code professionally
You manage multiple projects
You're tired of text file management
You want proven templates instead of starting from scratch
You value automation

Maybe skip it if:

You only use Claude Code casually
You prefer pure CLI workflows
You don't mind manual configuration
You're on a potato computer (needs Node.js 18+)

Try It (No Really, It's Free)

npm install -g claudex
cd your-project
claudex init
claudex start

Or without installing:

npx claudex init
npx claudex start

Open http://localhost:4200 and poke around. If you hate it, just delete .claude/ and move on. If you like it, star the repo I guess?

GitHub: ClaudeX

Common Questions

"Does this replace Claude Code?"

No. It's a visual manager for Claude Code's configuration. You still use Claude Code for actual development.

"Can I use my own templates?"

Yes. Create them in the UI, or write markdown files and import them.

"What if I break something?"

Export your workspace before making changes. One-click restore if things go wrong.

"Will this slow down my workflow?"

The opposite. You spend less time managing config files and more time building.

"Is it secure?"

Everything runs locally. No cloud services, no telemetry. Your code stays on your machine.

"Why is it free?"

Because I built it for myself and figured others might find it useful. MIT license, do whatever you want with it.

What's the Catch?

There isn't one. It's free, open source (MIT), and runs locally. No subscriptions, no telemetry, no cloud dependencies.

I built it because I needed it. If you find it useful, cool. If not, that's fine too.

Final Thoughts

Look, Claude Code is already incredible. ClaudeX just makes it less annoying to manage.

If you're spending hours setting up projects, copy-pasting configurations, or forgetting which commands you wrote, give it a shot.

Worst case: you delete it and waste 5 minutes.
Best case: you save 50+ hours over the next few months.

npm install -g claudex
claudex init
claudex start

GitHub: tct68/claudex

Let me know what you think (or if you break something).

Built by a developer who got tired of managing text files.

ai #productivity #claude #showdev #opensource #automation #webdev #typescript #react #nodejs

DEV Community: Thuong Truong