Skip to main content
← Back to Projects
Agent Office logo

Agent Office

Pixel-art virtual office that visualises your AI agents working in real time. Watch Claude Code agents spawn, sit at desks, take coffee breaks, and chat in a Slack-style panel — isometric, animated, and popular on social media.

TypeScriptReactViteElectronWebSocketsRemotionPixel Art

Overview

A pixel-art office that turns the abstract sprawl of multi-agent AI workflows into something you can watch. Each Claude Code agent gets a desk, a sprite, and a status; they chat, queue, take breaks, and finish tasks visibly. Includes a Dunder Mifflin mode that swaps the cast for the cast of The Office, with in-character chatter and prop overlays.

The Problem

Multi-agent workflows are invisible by default. Logs and dashboards tell you what happened but not how it felt. I wanted a way to actually see agents working, partly as a debugging surface and partly because the medium itself tells a better story than the logs.

The Approach

Isometric pixel-art scene rendered in the browser, driven by a WebSocket bridge that listens to live Claude Code activity. Agents are sprites with state machines (idle, working, on break, chatting). The Slack-style panel mirrors agent chatter as real messages. Remotion handles the recorded clips that ended up doing most of the work on social.

Outcome

Picked up real traction on social media, driven mostly by the Dunder Mifflin mode clip. More importantly it works as a debugging tool. You can see at a glance when an agent is stuck, looping, or waiting. Open source, with a config schema for adding your own cast and rooms.

More Projects