Skip to content

README.md

Latest commit

 

History

History
257 lines (190 loc) · 11.9 KB

README.md

File metadata and controls

257 lines (190 loc) · 11.9 KB
Raw

agents-ui — visualize your Claude Code

Claude Code CLI UI
(aka Claude Code Agents Management Studio)

Quickstart · Contributing · GitHub

MIT License Stars


claude-code-agents-ui-small.mp4

What is agents-ui?

Open-source visual orchestration for Claude Code

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
Claude Code		 Anthropic SDK
Anthropic SDK		 Bun
Bun		 Nuxt 3
Nuxt 3		 Tailwind CSS
Tailwind CSS		 Bash
Bash

If it's in your .claude folder, it's here.


agents-ui is right for you if

  • ✅ 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 .claude files cumbersome or disorganized

Features

🤖 Agent Management

Visual editor for .claude/agents/*.md. Configure models, instructions, and memory.

🔗 Relationship Graph

Visual map of agents, commands, and skills. Identify dependencies and gaps at a glance.

⚡ Command Builder

Create reusable slash commands with argument hints and safety configurations.

🧪 Agent Studio

Iterate faster with live testing. Inspect execution and refine prompts in real time.

🔄 Workflow Builder

Build multi-step AI pipelines visually. Chain agents and control execution order.

🧠 Skill Management

Centralized skill management. Import skills from GitHub or create custom ones.

🖥️ CLI Terminal

Full PTY terminal emulator with integrated context monitoring and WebSocket streaming.

📊 Real-time Metrics

Live token counting, cost tracking, and file system change monitoring.

🌍 Explore & Templates

Browse and import community agent templates and marketplace resources instantly.

Problems agents-ui solves

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.

Why agents-ui is special

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.

What agents-ui is not
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.

Quickstart

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 dev

Open http://localhost:3000 — agents-ui will automatically load your ~/.claude setup.

Requirements: Bun (recommended) or Node.js 18+


FAQ

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.


Development

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

Roadmap

  • ✅ 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

Community & Contributing

We welcome contributions! See the CONTRIBUTING.md for details.


Star History

Star History Chart


License

MIT © 2026 Ngxba, agents-ui contributors


Open source under MIT. Built for developers who want to see their agents in action.