Claude Dojo

A visual agent dashboard for Claude AI - watch agents work in an interactive 3D hex-grid interface.

Features

• 3D Hex Grid Visualization - Watch multiple Claude sessions as interactive hexagonal tiles with real-time status updates
• Subagent System - Visualize spawned subagents (Explore, Plan, Bash, Read, Write, Glob) orbiting their parent session
• Real Tool Execution - Claude can read/write files and execute shell commands on your system
• Permission System - Approve or deny file writes and command execution (like Claude Code CLI)
• Real-time Streaming - Watch responses stream in as Claude generates them
• Token Tracking - Visual context bar showing token usage with color-coded thresholds
• Session Persistence - Sessions survive server restarts
• Slash Commands - 14 built-in commands with autocomplete
• Markdown Rendering - Rich formatting with syntax-highlighted code blocks
• Resizable Panels - Drag to adjust the canvas/chat split

Quick Start

Requirements

• Node.js >= 18.0.0
• Anthropic API key (or AWS credentials for Bedrock)

Installation

# Set your API key
export ANTHROPIC_API_KEY="your-api-key-here"

# Run with npx (no install needed)
npx claude-dojo

This starts the server and opens the dashboard in your browser at http://localhost:3001.

CLI Options

npx claude-dojo [options]

Options:
  --dangerously-skip-permissions  Skip all permission prompts (auto-approve everything)
  --help, -h                      Show help message

Warning: The --dangerously-skip-permissions flag will auto-approve all file writes and shell commands without prompting. Use with caution and only in trusted environments.

Upgrading

npx claude-dojo@latest

Configuration

Environment Variables

| Variable | Description | Default | |----------|-------------|---------| | ANTHROPIC_API_KEY | Your Anthropic API key | Required (unless using Bedrock) | | PORT | Server port | 3001 | | ANTHROPIC_MODEL | Claude model to use | claude-sonnet-4-20250514 | | CLAUDE_CODE_USE_BEDROCK | Use AWS Bedrock instead of Anthropic API | false | | AWS_REGION | AWS region for Bedrock | us-east-1 | | CLAUDE_DOJO_NO_BROWSER | Don't auto-open browser on start | false |

AWS Bedrock Support

To use Claude via AWS Bedrock instead of the Anthropic API:

# Set environment variables
export CLAUDE_CODE_USE_BEDROCK=1
export AWS_REGION=us-east-1
export ANTHROPIC_MODEL=anthropic.claude-sonnet-4-20250514-v1:0

# Ensure AWS credentials are configured
aws configure

# Run Claude Dojo
npx claude-dojo

The Bedrock SDK is included - no additional installation needed.

Slash Commands

Type / in the input to see available commands with autocomplete.

| Command | Description | |---------|-------------| | /help | Show available commands and usage | | /status | Display session status, token usage, and system info | | /clear | Clear conversation history | | /compact | Compress context by summarizing older messages | | /todos | View and manage the task list | | /resume | List and resume previous sessions | | /rewind | Undo recent messages or restore snapshots | | /export | Export conversation to JSON or Markdown | | /model | View or change the Claude model | | /system | View or modify the system prompt | | /settings | View and modify session settings | | /file | Read a file into the conversation | | /search | Search for patterns in files | | /run | Execute a shell command |

Keyboard Shortcuts

| Key | Action | |-----|--------| | 1-9 | Select session by index (when not typing) | | Esc | Deselect current session | | / | Start typing a command | | Enter | Send message | | Shift+Enter | New line in message | | Tab | Accept autocomplete suggestion | | ↑/↓ | Navigate autocomplete options |

Permission System

When Claude tries to write files or execute commands, a permission dialog appears:

• Allow Once - Permit this specific operation
• Allow Always - Remember permission for similar operations this session
• Deny - Block the operation

Dangerous commands (like rm -rf, sudo) show enhanced warnings.

Tool Capabilities

Claude has access to real tools that execute on your system:

| Tool | Description | |------|-------------| | read_file | Read file contents | | write_file | Write content to files (requires permission) | | bash | Execute shell commands (requires permission) | | glob | Find files matching patterns | | task | Spawn specialized subagents |

Data Storage

• Sessions: Persisted to .claude-dojo/sessions/ in your working directory
• Panel width: Stored in browser localStorage

Development

# Clone the repository
git clone https://github.com/anthropics/claude-dojo.git
cd claude-dojo

# Install dependencies
npm install

# Run in development mode (hot reload)
npm run dev

# Build for production
npm run build

# Start production server
npm start

Architecture

claude-dojo/
├── client/          # React frontend with Three.js 3D visualization
│   ├── src/
│   │   ├── components/  # UI components (HexGrid, SessionPanel, etc.)
│   │   ├── hooks/       # Custom React hooks
│   │   ├── stores/      # Zustand state management
│   │   └── types/       # TypeScript types
│   └── dist/        # Production build
├── server/          # Express backend
│   ├── src/
│   │   ├── commands/    # Slash command handlers
│   │   ├── claudeService.ts  # Claude API integration
│   │   └── sessionManager.ts # Session persistence
│   └── dist/        # Compiled server
└── bin/             # CLI entry point

Troubleshooting

Port already in use

# Use a different port
PORT=3002 npx claude-dojo

Sessions not persisting

Ensure you have write permissions to the .claude-dojo/ directory in your working directory.

License

MIT

Credits

Built with Claude Code (claude-opus-4-5-20250514)