Claude UI Tool — Design skill for Claude Code

Claude Agent Management

A full-stack web UI for managing Claude Code configuration — agents, commands, skills, workflows, MCP servers, and settings — with a built-in terminal and chat interface.

**Stack:** Vite + React + TypeScript (frontend) · FastAPI + Python (backend)

Features

• Agents — Create and edit Claude Code agent definitions
• Commands — Manage slash commands (/commands)
• Skills — Define and edit reusable skills
• Workflows — Build multi-step agent workflows
• MCP Servers — Configure Model Context Protocol servers
• Settings — Edit Claude Code settings.json directly
• Graph View — Visualize relationships between entities
• Terminal — Embedded PTY terminal (xterm.js)
• Chat — Real-time Claude chat via WebSocket

Project Structure

claude_agent_management/
├── backend/        # Python FastAPI (port 8000)
├── frontend/       # Vite + React + TypeScript (port 5173)
└── start.sh        # One-command startup script

Quick Start

./start.sh

This will:

1. Create a Python virtual environment and install backend dependencies (first run)
2. Install frontend npm dependencies (first run)
3. Start both servers concurrently

• Frontend: http://localhost:5173
• Backend API: http://localhost:8000
• API docs: http://localhost:8000/docs

Press `Ctrl+C` to stop both servers.

Manual Setup

Backend

Requires Python 3.11+

cd backend
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
uvicorn backend.main:app --reload --host 0.0.0.0 --port 8000 --app-dir ..

Frontend

Requires Node.js

cd frontend
npm install
npm run dev

Environment Variables

Variable	Default	Description
CLAUDE_DIR	~/.claude	Path to Claude config directory

Pages

Route	Page
/	Dashboard
/agents	Agents list
/agents/:slug	Agent editor
/commands	Commands list