Visualize, manage, and orchestrate your Claude Code ecosystem — all in one place.
Stop editing scattered .claude files.
Start building agents, workflows, and tools visually.
git clone https://github.com/Ngxba/claude-code-agents-ui.git
cd claude-code-agents-ui
bun install
bun run devOpen http://localhost:3000 — agents-ui will automatically load your ~/.claude setup.
Prerequisites: Bun (recommended) or Node.js 18+
Chat with your agents in a clean, real-time interface.
- Automatically detects all Claude session folders dynamically
- Instant feedback loop for prompts
- Great for testing behaviors quickly
- No need to jump back to CLI
Design and manage agents without touching markdown.
- Create, edit, and organize agents visually
- Configure models, instructions, and memory
- Use templates or build from scratch
Create reusable slash commands with structure and safety.
- Argument hints for better UX
- Allowed-tools configuration
- Organized folder structure
See how everything connects — instantly.
- Visual map of agents, commands, and skills
- Identify dependencies and gaps
- Understand your system at a glance
Iterate faster with live testing.
- Send messages and inspect execution
- Debug agent behavior in real time
- Refine prompts without context switching
Build multi-step AI pipelines visually.
- Chain agents into workflows
- Control execution order
- Inspect intermediate results
Extend your agents with reusable capabilities.
- Import skills from GitHub
- Create and manage custom skills
- Keep everything centralized
Kickstart faster with community resources.
- Discover agent templates
- Browse extensions
- Import and experiment instantly
Managing agents via scattered markdown files works… until it doesn’t.
agents-ui gives you:
- A single visual control layer
- Faster iteration cycles
- Better visibility into your system
The CLI can feel overwhelming.
agents-ui helps you:
- Learn visually instead of guessing configs
- Start with templates instead of blank files
- Build confidence before going deeper
- Nuxt 3 + Vue 3
- Nuxt UI + Tailwind CSS
- VueFlow (graph visualization)
- Bun
| Variable | Description | Default |
|---|---|---|
CLAUDE_DIR |
Path to your Claude config directory | ~/.claude |
We welcome contributions!
See CONTRIBUTING.md for setup and guidelines.