Quickstart · Contributing · GitHub
claude-code-agents-ui-small.mp4
If Claude Code is the engine, agents-ui is the dashboard
agents-ui is a Nuxt 3-based visual dashboard for managing Claude Code agents, commands, skills, workflows, and plugins. It provides a GUI layer on top of the ~/.claude directory, allowing users to create, edit, and organize their Claude Code configuration without touching markdown files directly.
It looks like a studio — but under the hood it has relationship graphs, real-time metrics, visual workflow builders, and terminal emulation.
Manage your agents visually, not through scattered markdown.
| Step | Example | |
|---|---|---|
| 01 | Define the agent | Create a "Senior Frontend" agent with specific instructions. |
| 02 | Build skills | Import or create custom tools and capabilities for your team. |
| 03 | Run & Monitor | Execute commands in the terminal and watch real-time metrics. |
COMING SOON: Desktop App — Run agents-ui as a standalone desktop application for even tighter integration with your local environment.
| Works with |
 Claude Code |
Anthropic SDK |
 Bun |
 Nuxt 3 |
 Tailwind CSS |
 Bash |
If it's in your .claude folder, it's here.
- ✅ You want a visual way to manage your Claude Code agents
- ✅ You coordinate many different commands and skills and want to see how they connect
- ✅ You want to monitor token usage and costs in real-time
- ✅ You want to build multi-step workflows visually instead of manually chaining agents
- ✅ You want a clean, real-time chat interface for testing agent behaviors
- ✅ You find editing scattered
.claudefiles cumbersome or disorganized
Visual editor for .claude/agents/*.md. Configure models, instructions, and memory.
|
Visual map of agents, commands, and skills. Identify dependencies and gaps at a glance. | Create reusable slash commands with argument hints and safety configurations. |
| Iterate faster with live testing. Inspect execution and refine prompts in real time. | Build multi-step AI pipelines visually. Chain agents and control execution order. | Centralized skill management. Import skills from GitHub or create custom ones. |
| Full PTY terminal emulator with integrated context monitoring and WebSocket streaming. | Live token counting, cost tracking, and file system change monitoring. | Browse and import community agent templates and marketplace resources instantly. |
| Without agents-ui | With agents-ui |
|---|---|
❌ You edit scattered markdown files in ~/.claude and lose track of which agent uses which skill. |
✅ A single visual control layer shows you exactly how everything connects with relationship graphs. |
| ❌ You have no visibility into how many tokens you're using or what the actual cost of a session is until it's over. | ✅ Real-time metrics surface token usage and costs as they happen, helping you stay within budget. |
| ❌ Chaining agents together requires manual coordination and jumping between multiple terminal windows. | ✅ Visual workflow builder lets you chain agents into pipelines and inspect intermediate results easily. |
| ❌ Testing a new prompt or agent behavior requires re-running CLI commands and manually parsing output. | ✅ Agent Studio provides a clean chat interface with SSE streaming for instant feedback and debugging. |
| ❌ Finding and importing community skills is a manual process of cloning repos and copying files. | ✅ GitHub import flow lets you point to a repo and choose which skills to import directly into your setup. |
agents-ui handles the visual orchestration of Claude Code correctly.
| Real-time Context Monitoring. | Tracks tokens, costs, file changes, and tool calls as they happen in your terminal sessions. |
| Visual Relationship Mapping. | Automatically detects links between agents, commands, and skills to build a live dependency graph. |
| Native Claude Code Integration. | Built directly on top of the @anthropic-ai/claude-agent-sdk for authentic agent interactions. |
| SSE-powered Agent Studio. | Streams agent thinking, tool use, and text deltas for a responsive, real-time testing experience. |
| Workflow Visualization. | Models complex AI pipelines as nodes and edges, making multi-step processes easy to understand. |
| Zero-Config Data Layer. | Directly reads and writes to your existing ~/.claude directory—no new database or account required. |
| Not a replacement for CLI. | It's a GUI companion. You can still use the Claude CLI alongside it whenever you want. |
| Not an LLM provider. | We don't provide models. agents-ui uses your existing Anthropic API keys and Claude Code setup. |
| Not a general-purpose IDE. | It's specifically optimized for the Claude Code ecosystem and .claude configurations. |
| Not a hosted service. | agents-ui runs locally on your machine for maximum privacy and access to your local files. |
Open source. Self-hosted. Use your local Claude Code setup.
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.
Requirements: Bun (recommended) or Node.js 18+
Where is my data stored?
Everything is stored in your standard ~/.claude directory. agents-ui reads and writes directly to those files.
Do I need a separate Anthropic API key?
agents-ui uses the same environment variables as your Claude Code setup. If anthropic is configured in your shell, agents-ui will find it.
Can I still use the CLI?
Yes! agents-ui is a companion. Changes you make in the UI reflect in your .claude files immediately, and vice versa.
How does the relationship graph work?
It scans your agent, command, and skill files for references to each other (like agent: in frontmatter or /command in text) and builds the graph dynamically.
bun run dev # Start dev server (Nuxt + SSE)
bun run build # Build for production
bun run preview # Preview production build
bun run typecheck # Run TypeScript type checking- ✅ Visual Agent Editor
- ✅ Relationship Graph
- ✅ Workflow Builder
- ✅ GitHub Skill Import
- ✅ Real-time Metrics (Tokens/Cost)
- ✅ Integrated Terminal Emulator
- ✅ Chat-based Agent Studio
- ✅ Marketplace & Plugin System
- ⚪ Desktop Application
- ⚪ Artifacts & Deployments
- ⚪ Multiple Session History
We welcome contributions! See the CONTRIBUTING.md for details.
- GitHub Issues — bugs and feature requests
- GitHub Discussions — ideas and RFC
MIT © 2026 Ngxba, agents-ui contributors
Open source under MIT. Built for developers who want to see their agents in action.