Why I Built This
I've been using Claude Code for over six months. What started as simple single-agent Q&A has evolved into a system where 5+ agents collaborate simultaneously — one handles social media operations, another manages the GitHub community, and others coordinate development across multiple projects.
The complexity is on a completely different level. And the problem? It's all hand-written config files.
Claude Code agent definitions live in .claude/agents/name.md. Skills go in .claude/skills/name.md. Workflows are .claude/workflows/name.yaml. Project instructions sit in CLAUDE.md. These files have dependencies on each other, but there's no way to see the full picture.
Changing one agent's prompt means opening the agents directory, finding the right file, editing it, then checking that CLAUDE.md references are still correct, and verifying that the workflow edge relationships haven't broken. For any non-trivial team setup, a single debugging session means jumping between five or six files.
I needed a GUI.
What is claude-studio?
claude-studio is a visual editor for the ~/.claude/ directory.
That sentence captures the entire design philosophy. No new runtime. No invented config format. Nothing beyond what Claude Code already does. It simply turns your existing markdown, yaml, and json config files into something you can drag, click, and preview.
Every action you take in the GUI — creating an agent, connecting workflow edges, configuring an MCP server — writes standard files into .claude/. Close claude-studio, open Claude Code, and your agent team runs exactly the same, because it reads the same files.
claude-studio (design) → ~/.claude/ (files) → Claude Code (runtime)
Core Features
1. DAG Workflow Editor
This is the heart of claude-studio. Multi-agent collaboration is fundamentally a directed acyclic graph (DAG) — agents are nodes, and the edges between them represent communication patterns.
claude-studio provides 4 edge types to describe different collaboration modes:
| Edge Type | Meaning | Visual Style |
|---|---|---|
| Dispatch | Task assignment, execution dependency | Solid gray |
| Report | Feedback, results reporting | Dashed cyan |
| Sync | Peer-to-peer collaboration | Dotted purple |
| Roundtrip | Bidirectional dispatch + report | Solid teal, double arrow |
These 4 types were distilled from real-world usage. For example, a Commander agent dispatches tasks to an ops agent (dispatch), the ops agent reports results back (report), and two parallel ops agents share information (sync). Most similar tools only offer a single edge type, but in real multi-agent workflows, semantic distinction matters.
2. Agent and Skill Management
There are two ways to create agents: choose from 9 built-in templates, or generate with AI.
The built-in templates cover common scenarios — code review, TDD guidance, security checks, documentation updates, and more. After selecting a template, you can edit the prompt in Monaco Editor with live preview.
Skills work the same way — create from templates or write manually. Created skills can be drag-and-dropped onto agent nodes in the workflow canvas.
3. AI Workflow Generation
This is my favorite feature. Describe the workflow you want in plain text — something like "Code review pipeline with security check" or "TDD workflow for KMP project" — and claude-studio calls claude -p to generate a complete DAG, including agent definitions, edge relationships, skill bindings, and checkpoints.
The generated result appears on the canvas for further refinement. Don't like something? Change it. Save, and it takes effect immediately.
4. Visual MCP and Settings Configuration
Claude Code's MCP server config, hooks config, and permissions all live in settings.json. Hand-writing JSON is error-prone. claude-studio provides a form-based config UI that writes directly to settings.json.
5. Plugin Export
The entire agent team you build in claude-studio — agents, skills, workflows, settings — can be exported as a standard Claude Code plugin package with one click. Others install the plugin and get your complete team configuration.
6. CLAUDE.md Auto-Sync
When you save a workflow, claude-studio automatically syncs the team structure, agent roles, and workflow definitions into CLAUDE.md. Design your team visually, and Claude Code picks it up on next startup — no extra configuration needed.
Technical Implementation
The tech stack is fairly standard:
- Frontend Framework: Next.js (App Router)
- Flow Engine: React Flow v12 — custom nodes, edges, and interactions
- Code Editor: Monaco Editor — for editing agent prompts and skill definitions
- Styling: Tailwind CSS + Lucide Icons
- Language: TypeScript full-stack
The architecture has four layers:
┌─────────────────────────────────┐
│ GUI (React + React Flow v12) │ ← Visual layer
├─────────────────────────────────┤
│ Next.js API Routes │ ← Service layer
├─────────────────────────────────┤
│ ~/.claude/ (source of truth) │ ← Data layer
├─────────────────────────────────┤
│ Claude Code (runtime) │ ← Runtime
└─────────────────────────────────┘
The key design decision is "the data layer is the file system." No database, no cloud storage — ~/.claude/ is the single source of truth. The benefits:
- Fully compatible with Claude Code — same files
- Version control comes free with git
- No accounts or logins required
Getting Started
One command, no install required:
npx claude-code-studio
Custom port:
npx claude-code-studio --port 3200
Development mode:
git clone https://github.com/androidZzT/claude-studio.git
cd claude-studio
npm install
npm run dev -- -p 3100
Comparison with Similar Tools
There aren't many tools doing Claude Code visualization. The ones I've evaluated:
- CC Workflow Studio (VS Code extension) — workflow visualization only, no config or agent management
- Agent Flow — runtime visualization, read-only, no editing
- claude-code-manager — TUI tool, no GUI, no DAG
claude-studio's positioning is a GUI that simultaneously covers config management + DAG orchestration + team collaboration modeling. The semantic distinction between 4 edge types is a unique design that proves useful in real multi-agent workflows.
What's Next
The product is still in the polishing phase. Core capabilities are working, but there's plenty of room for improvement in the details.
Near-term focus:
- Better real-time status display during workflow execution
- Improved AI generation accuracy
- More agent templates
Feedback, issues, and PRs are all welcome.
MIT licensed.
Top comments (0)