What is Claude Code Lens?

This project is a fork of claude-code-agents-ui originally created by Ngxba.

Open-source visual orchestration for Claude Code

If Claude Code is the engine, CCLens is the dashboard

Claude Code Lens is a Nuxt 3-based visual dashboard and CLI tool for managing Claude Code agents, commands, skills, workflows, and plugins. It provides a GUI layer and terminal-native CLI 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 CCLens as a standalone desktop application for even tighter integration with your local environment.

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

CCLens 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

Quickstart

Install globally (recommended)

# npm
npm install -g @qingwave/cclens && cclens

# bun
bun install -g @qingwave/cclens && cclens

Open http://localhost:3030 — CCLens will automatically load your ~/.claude setup.

Requirements: Node.js 22+

Try without installing

npx @qingwave/cclens
# or
bunx @qingwave/cclens

Run from source

git clone https://github.com/qingwave/claude-code-lens.git
cd claude-code-lens
bun install
bun run dev

Requirements: Bun and Node.js 22+

CLI Mode

No server needed. Run commands directly from your terminal:

cclens -s "fix login bug"       # Search sessions by content, select to resume
cclens sessions                 # Browse recent sessions, select to resume
cclens export "auth bug" -o out.md  # Export a session to markdown
cclens cleanup                  # Remove empty sessions
cclens projects                 # List all projects
cclens rename ~/work/old ~/work/new  # Rename a project in ~/.claude
cclens agents                   # List agents
cclens skills / commands / workflows / plugins / memory / mcp
cclens stats                    # Overview: tokens, cost, activity
cclens -h                       # Show all commands

Problems CCLens solves

| Without CCLens | With CCLens | | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | ❌ 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 CCLens is special

CCLens 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 CCLens 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. CCLens 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. | CCLens runs locally on your machine for maximum privacy and access to your local files. |

FAQ

Where is my data stored? Everything is stored in your standard ~/.claude directory. CCLens reads and writes directly to those files.

Do I need a separate Anthropic API key? CCLens uses the same environment variables as your Claude Code setup. If anthropic is configured in your shell, CCLens will find it.

Can I still use the CLI? Yes! CCLens 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 at http://localhost:3030
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
• ✅ CLI Mode (search, sessions, agents, memory, stats...)
• ⚪ Desktop Application
• ⚪ Artifacts & Deployments
• ⚪ Multiple Session History

Community & Contributing

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

• GitHub Issues — bugs and feature requests
• GitHub Discussions — ideas and RFC

Star History

License

MIT © 2026 qingwave, based on claude-code-agents-ui by Ngxba