View Claude Code

Interactive visualization tool for Claude Code agents, skills, and commands

View Claude Code is a powerful tool that visualizes your Claude Code agents, skills, and commands in an interactive graph. Perfect for understanding agent-skill relationships, navigating complex configurations, and executing agents/skills directly from the UI.

Features

• Interactive Graph Visualization - Beautiful hierarchical layout showing all agents, skills, and commands
• Global + Local Support - Scans both project .claude/ and global ~/.claude/ directories
• Smart Relationship Mapping - Automatically detects and visualizes agent-skill connections
• One-Command Setup - Just run npx viewcc - no installation needed
• Execute from UI - Run agents and skills directly from the graph interface
• Visual Clarity - Color-coded nodes with distinct styling for local vs global scope
• Zero Configuration - Works out of the box with any Claude Code project
• Responsive Design - Smooth zoom, pan, and navigation controls

Quick Start

Prerequisites

Required:

• Node.js 18+ - The visualizer runs on Node.js. Download here
  • Includes npx (required to run the command)
  • Check your version: node --version

Project Requirements:

• A Claude Code project with a .claude/ directory
  • If you don't have one, run claude in your project folder
  • Or use this tool to explore any existing Claude Code project

Optional:

• Claude Code CLI - For executing agents/skills from the UI

Installation

No installation required! Just run with npx:

# Navigate to any Claude Code project
cd ~/my-claude-project

# Run visualizer
npx viewcc

That's it! The visualizer will:

• Scan your project's .claude/ directory
• Scan your global ~/.claude/ directory
• Start the server
• Open your browser automatically

Usage

Basic usage:

# Visualize current project (local + global)
npx viewcc

# Visualize specific project
cd /path/to/my-claude-project
npx viewcc

CLI Options:

Option	Description	Default
-p, --port <number>	Server port	3000
--no-open	Don't open browser automatically	false
--no-scan	Skip scanning, use existing data	false
-v, --verbose	Show detailed logs	false

Examples:

# Use custom port
npx viewcc --port 8080

# Don't open browser (useful for remote servers)
npx viewcc --no-open

# Skip rescanning (faster startup)
npx viewcc --no-scan

# Debug mode with verbose logging
npx viewcc --verbose

# Combine options
npx viewcc --port 5000 --no-open --verbose

How It Works

Node Types

Type	Color	Description
Agent	Blue	AI assistants with specific tasks
Skill	Green	Reusable capabilities with scripts/webapp
Command	Amber	Slash commands (/command-name)

Scope

Scope	Border Style	Location
Local	Solid	.claude/ in project
Global	Dashed (orange)	~/.claude/ in home

Use the Global toggle button to show/hide global nodes.

Edge Types

Type	Style	Meaning
uses	Solid indigo	Agent uses a skill/command
calls	Dashed purple	Agent calls another agent

Hierarchy

• Level 0: Top-level agents with child agents
• Level 1+: Child agents
• Rightmost: Skills and commands

Controls

Action	Effect
Click node	View details in sidebar
Click "Execute"	Run agent/skill via Claude Code
Scroll	Zoom in/out
Drag background	Pan around
Drag node	Move node position
Click background	Deselect node
Global button	Toggle global nodes visibility

Development

Local Development

If you want to modify or contribute:

# Clone the repository
git clone https://github.com/kubony/claude-code-visualizer
cd claude-code-visualizer

# Install dependencies
npm install

# Build the project
npm run build

# Link locally
npm link

# Test in any Claude Code project
cd ~/other-project
viewcc

Project Structure

claude-code-visualizer/
├── src/                    # TypeScript source
│   ├── cli.ts              # CLI entry point
│   ├── scanner.ts          # Project scanner
│   └── server.ts           # Express server
├── lib/                    # Compiled JavaScript
├── dist/                   # Built webapp
└── .claude/
    └── skills/
        └── agent-skill-visualizer/
            └── webapp/     # React/TypeScript app

Building from Source

# Build everything (TypeScript + webapp)
npm run build

# Webapp only
cd .claude/skills/agent-skill-visualizer/webapp
npm install
npm run dev    # Development mode
npm run build  # Production build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development Setup

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built for Claude Code by Anthropic
• Inspired by the need to visualize complex agent-skill relationships

Contact

• GitHub: @kubony
• Issues: GitHub Issues

---

Made with Claude Code