Real-time visualization of repository structure - watch Claude Code edit your codebase
npm install seeclaudecodeReal-time visualization of your repository structure while Claude Code edits your codebase.
- Architecture Graph - Interactive diagram showing your project's directory structure with pan/zoom
- Sunburst View - Radial visualization of your codebase hierarchy
- File Explorer - Traditional tree view with change tracking
- Real-time Git Diff - See exactly what changed in any file or directory
- Live Highlighting:
- Yellow pulse - Files with pending changes (git diff)
- Green pulse - Files currently being edited
``bash`
npm install -g seeclaudecode
npx seeclaudecode
``
/plugin marketplace add ninajlu/seeclaudecode
/plugin install seeclaudecode
Once installed, start the visualization anytime with:
``
/seeclaudecode:start
This launches SeeClaudeCode in the background so you can watch Claude edit your codebase in real-time.
Want to use /seeclaudecode instead of /seeclaudecode:start? Install the standalone skill:
`bash`
npx seeclaudecode --install-skill
This installs the skill to ~/.claude/skills/seeclaudecode/ so you can invoke it with just /seeclaudecode.
`bashQuick start with npx (no install needed)
npx seeclaudecode
When started without a directory argument, you'll see an interactive menu:
`
Select a directory to monitor: 1) Current directory
/Users/you/projects
2) my-app
/Users/you/projects/my-app
Or enter a custom path
š Directory:
`Switching Directories
While running, you can switch to a different directory at any time:
- Type a new path and press Enter to switch
- Type
quit or exit to stopOptions
| Option | Description |
|--------|-------------|
|
-p, --port | Port to run server on (default: 3847) |
| -n, --no-open | Don't automatically open browser |
| --install-skill | Install standalone skill for /seeclaudecode command |
| -h, --help | Show help message |
| -v, --version | Show version number |How It Works
1. Start SeeClaudeCode (it will prompt for a directory or use the one you specify)
2. Open the displayed URL in your browser
3. Run Claude Code in the same directory
4. Watch as files pulse and highlight when Claude makes changes
5. Click on any file or directory to see the git diff
6. Switch directories anytime by typing a new path
Views
$3
An interactive node-based diagram showing your project structure. Changed files appear below their parent directories with pulsing yellow highlights.$3
A radial visualization where each ring represents a directory level. Click on segments to see diffs for that directory.$3
A traditional tree view showing all files with color-coded change indicators.Visual Indicators
| Indicator | Meaning |
|-----------|---------|
| Yellow pulsing | Pending changes (in git diff) |
| Green pulsing | Currently being edited |
| Purple nodes | Directories |
| Green nodes | Code files (.js, .ts, .py, etc.) |
| Pink nodes | Style files (.css, .scss) |
| Orange nodes | Config files (.json, .yaml) |
| Blue nodes | Documentation (.md, .txt) |
Requirements
- Node.js 18.0.0 or higher
- Git (for diff functionality)
Development
`bash
Clone and install
git clone
cd seeclaudecode
npm installRun locally
npm start /path/to/repoLink for global testing
npm link
seeclaudecode /path/to/repo
`Architecture
`
seeclaudecode/
āāā .claude-plugin/
ā āāā plugin.json # Claude Code plugin manifest
āāā skills/
ā āāā start/
ā āāā SKILL.md # /seeclaudecode:start skill
āāā bin/
ā āāā cli.js # CLI entry point
āāā public/
ā āāā index.html # Main HTML structure
ā āāā styles.css # Styling and animations
ā āāā app.js # Frontend visualization logic
āāā server.js # Express server with WebSocket & file watching
āāā package.json
``MIT