This project provides a real-time, pixel art office simulation to visualize Claude Code operations. It targets developers and power users seeking to understand and monitor complex AI agent workflows, offering an animated, interactive representation of task execution and agent management. The primary benefit is enhanced operational visibility and debugging capabilities for AI agent systems.

How It Works

The application employs a WebSocket architecture for real-time state synchronization between a FastAPI backend and a Next.js/PixiJS frontend. It simulates a "boss" Claude agent orchestrating "employee" subagents within an animated office environment. Core design choices include a multi-mode whiteboard for diverse data visualization and event processing for dynamic updates, enabling a clear, visual representation of agent activities and system states.

Quick Start & Requirements

• Primary install/run command: Clone the repository, cd claude-office, then run make install-all followed by make dev-tmux. Access the visualizer at http://localhost:3000.
• Prerequisites: Python 3.13+, Node.js 20+ (Bun auto-detected), uv, and the Claude Code CLI.
• Optional AI Enhancements: Requires a Claude subscription and a CLAUDE_CODE_OAUTH_TOKEN set in backend/.env for AI-generated agent names and task summaries.
• Links: Quick Start Guide, Architecture, Whiteboard Modes, Docker Guide, AI Summary documentation, Backend README, Frontend README, Hooks README.

Highlighted Details

• Real-time pixel art office simulation visualizing Claude Code operations with animated boss and employee agents.
• Features 11 distinct whiteboard visualization modes (e.g., todo list, remote workers, tool usage pie chart) accessible via keyboard shortcuts.
• Optional AI-powered features for agent naming and task summarization, leveraging Claude Haiku.
• Dynamic city skyline window with a real-time day/night cycle and animated drifting clouds.
• WebSocket architecture ensures seamless, real-time state updates between backend and frontend.

Maintenance & Community

The project shows recent activity with updates in March 2026, indicating active development. Contributions are welcomed, with guidelines provided for pull requests. Specific community channels (e.g., Discord, Slack) or sponsorship details are not detailed in the provided README.

Licensing & Compatibility

The provided README does not explicitly state the project's license. This omission requires further investigation before adoption, especially concerning commercial use or integration with closed-source projects.

Limitations & Caveats

AI-powered features are optional and depend on a paid Claude subscription for the necessary OAuth token; without it, the visualizer functions but displays raw agent IDs and tool names. The project is under active development, with frequent updates potentially introducing breaking changes.