Claude Office

A pixel art virtual office that visualizes your AI agents working in real-time. Watch Claude Code agents spawn, sit at desks, take coffee breaks, and chat in a Slack-inspired office chat panel — all rendered in an isometric pixel art office.

Update — Dunder Mifflin mode

Type /the-office in the Slack chat panel to flip the whole office into a Scranton-branch tribute. The room, the cast, and the chatter all swap over — Michael Scott runs the place, Jim is your assistant, and Dwight guards the beet cellar.

Pretzel day, every day

What changes when you toggle it on

• 27 cast members (Michael, Jim, Pam, Dwight, Kevin, Angela, Stanley, Creed, David Wallace, Bob Vance — the whole office) dealt to agent roles
• Role chatter swaps to in-character lines ("Bears. Beets. Battlestar Galactica.", "selling paper", "Schrute bucks awarded")
• Michael occasionally lands his signature "That's what she said 😏" when replying to finished work
• Character prop overlays — Michael rotates World's Best Boss mug / Dundie / Golden Ticket / Prison Mike bandana / "NO GOD PLEASE NO", Dwight gets the CPR dummy mask or a Schrute Buck, Jim keeps his jello stapler, Stanley gets a pretzel, Jan gets a Serenity by Jan candle, Oscar / Pam / Toby share the Finer Things Club
• Angela gets a follower cat and a head-cat (randomized from 12 cat sprites)
• Kevin's chili, pretzel day, and Finer Things Club references sprinkled through the break-room chatter

The cast

Easter-egg props

Each cast member gets a signature prop floating above their desk in place of the usual coffee/Red Bull bubble.

Toggle it off any time with /the-office again — state persists in localStorage.

Full office — agents working, chatting, and taking coffee breaks

Features

Live Agent Visualization

• Agents appear as pixel art characters that walk into the office through the door
• Each agent type gets a unique character sprite and desk assignment
• Agents show typing bubbles, take coffee/water breaks, and leave when done
• Boss character (you) with Red Bull, Claude with coffee
• Random office events: pizza deliveries, fire drills, power flickers, printer jams
• Day/night cycle with smooth transitions

AI-Powered Office Chat

• Back-and-forth conversation with Claude through the office chat panel
• Claude has a witty office manager personality with running jokes
• Multi-agent routing — mention a bug and the Debugger responds, ask about UI and Frontend answers
• Typing indicators, emoji reactions, read receipts
• Slash commands: /status, /agents, /help
• Chat history persists across restarts (SQLite)
• Proactive messages — agents announce when they start and finish work
• Smart macOS notifications for important events

Context-Aware AI

• Claude knows your current git branch and active agents
• Conversation memory — remembers the last 10 messages
• AI On/Off toggle to control token usage

Night mode — the office after dark, agents still grinding

Waiting for tokens... the office keeps itself entertained

How It Works

Claude Code hooks capture agent spawns, tool calls, and completions via PreToolUse and PostToolUse hooks. Events are sent to a local Express + WebSocket server, which broadcasts them to the React frontend.

Claude Code ──hook──> Express Server ──WebSocket──> React Frontend
                           │
                     SQLite (chat)
                           │
                   Chat AI Watcher ──claude -p──> Reply

Quick Start

# Clone
git clone https://github.com/W17ant/Claude-Office.git
cd Claude-Office

# Install
npm install

# Start everything (server + frontend + chat watcher)
bash scripts/start-office.sh

# Stop everything
bash scripts/stop-office.sh

Open http://localhost:3333 — the office is ready.

Auto-Permissions

The repo includes .claude/settings.json which auto-allows curl commands to the local office server (127.0.0.1:3334) and the start/stop scripts. This means the chat monitor cron and office commands run without permission prompts.

Connect Claude Code

Add the hook to ~/.claude/settings.json:

{
  "hooks": {
    "PreToolUse": [
      {
        "hooks": [{ "type": "command", "command": "bash /path/to/Claude-Office/hooks/agent-tracker.sh" }]
      }
    ],
    "PostToolUse": [
      {
        "hooks": [{ "type": "command", "command": "bash /path/to/Claude-Office/hooks/agent-tracker.sh" }]
      }
    ]
  }
}

Now spawn agents in Claude Code and watch them appear in the office.

Customise Your Character

The boss character (you) is configurable via office.config.json:

{
  "boss": {
    "name": "YourName",
    "sprite": "MyChar-1",
    "color": "#ff4444",
    "emoji": "crown"
  }
}

Creating a custom sprite

Use the Helper sprite sheet as a reference for the 4-direction layout — here's an example of mine next to it:

Here's Mini Claude — I asked Claude to describe itself after showing it the office with my avatar, then used the prompt to generate the sprite:

1. Open ChatGPT (with DALL-E image generation)
2. Upload public/sprites/characters/Helper.png as a reference
3. Ask it to generate a pixel art character in the same style and layout (4 directions: front-left, rear-right, front-right, rear-left)
4. Save the output and extract the sprites:

python3 scripts/extract-boss-sprite.py your-character.png MyChar-1

Chat

Agent Routing

The chat AI routes your messages to specialist agents based on keywords:

Just me and Claude — chatting in the office

Modes

Tech Stack

• Frontend: React + TypeScript + Vite
• Server: Express + WebSocket (ws)
• Storage: SQLite (better-sqlite3)
• Chat AI: Claude CLI (claude -p)
• Sprites: Custom pixel art (isometric)
• Desktop: Electron (optional)

Project Structure

Claude-Office/
├── src/                    # React frontend
│   ├── components/         # Character, SlackChat, FurnitureRenderer
│   ├── hooks/              # useAgentSocket (WebSocket + reconnect)
│   ├── styles/             # office.css, rooms.css
│   └── App.tsx             # Main app (agent lifecycle, events, chat)
├── server/                 # Express + WebSocket server
│   ├── index.js            # HTTP endpoints + WS broadcast
│   └── chat-db.js          # SQLite wrapper
├── scripts/                # Shell scripts
│   ├── start-office.sh     # Start everything
│   ├── stop-office.sh      # Stop everything
│   ├── chat-ai-watcher.sh  # Polls chat, generates Claude replies
│   └── gather-context.sh   # Git/agent context for prompts
├── hooks/                  # Claude Code hooks
│   └── agent-tracker.sh    # Forwards events to server
├── public/                 # Static assets
│   └── sprites/            # Pixel art characters + effects
└── electron/               # Optional Electron wrapper

Security

• Server binds to 127.0.0.1 only — not exposed to the network
• Event endpoint (/event) requires a Bearer token generated at startup
• Chat endpoints are unauthenticated (local single-user design)
• Auth token stored in ~/.agent-office/auth-token with 0600 permissions

Desktop App (Electron)

npm run dev:electron    # Development
npm run build:electron  # Build .dmg

License

MIT