A visual agent dashboard for Claude - watch AI agents work in a 3D hex-grid interface
npm install claude-dojoA visual agent dashboard for Claude AI - watch agents work in an interactive 3D hex-grid interface.
- 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
- Node.js >= 18.0.0
- Anthropic API key (or AWS credentials for Bedrock)
``bashSet your API key
export ANTHROPIC_API_KEY="your-api-key-here"
This starts the server and opens the dashboard in your browser at
http://localhost:3001.$3
`bash
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.$3
`bash
npx claude-dojo@latest
`Configuration
$3
| 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 |$3
To use Claude via AWS Bedrock instead of the Anthropic API:
`bash
Set environment variables
export CLAUDE_CODE_USE_BEDROCK=1
export AWS_REGION=us-east-1
export ANTHROPIC_MODEL=anthropic.claude-sonnet-4-20250514-v1:0Ensure AWS credentials are configured
aws configureRun 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 localStorageDevelopment
`bash
Clone the repository
git clone https://github.com/anthropics/claude-dojo.git
cd claude-dojoInstall dependencies
npm installRun in development mode (hot reload)
npm run devBuild for production
npm run buildStart 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
$3
`bash
Use a different port
PORT=3002 npx claude-dojo
`$3
Ensure you have write permissions to the
.claude-dojo/` directory in your working directory.MIT
Built with Claude Code (claude-opus-4-5-20250514)