Pixel Agents

A VS Code extension that turns your AI coding agents into animated pixel art characters in a virtual office.

Each interactive AI terminal you open (Claude Code, Codex, or Gemini) spawns a character that walks around, sits at desks, and visually reflects what the agent is doing — typing when writing code, reading when searching files, waiting when it needs your attention.

This is the source code for the free Pixel Agents extension for VS Code — you can install it directly from the marketplace with the full furniture catalog included.

Features

• One agent, one character — every Claude Code, Codex, or Gemini terminal gets its own animated character
• Mixed providers in one workspace — run Claude, Codex, and Gemini agents side by side in the same panel
• Live activity tracking — characters animate based on what the agent is actually doing (writing, reading, running commands)
• Office layout editor — design your office with floors, walls, and furniture using a built-in editor
• Speech bubbles — visual indicators when an agent is waiting for input or needs permission
• Sound notifications — optional chime when an agent finishes its turn
• Sub-agent visualization — Task tool sub-agents spawn as separate characters linked to their parent
• Persistent layouts — your office design is saved and shared across VS Code windows
• Diverse characters — 6 diverse characters. These are based on the amazing work of JIK-A-4, Metro City.

Requirements

• VS Code 1.109.0 or later
• At least one supported CLI installed and configured:
  • Claude Code CLI
  • Codex CLI
  • Gemini CLI

Getting Started

If you just want to use Pixel Agents, the easiest way is to download the VS Code extension. If you want to play with the code, develop, or contribute, then:

Install from source

git clone https://github.com/pablodelucca/pixel-agents.git
cd pixel-agents
npm install
cd webview-ui && npm install && cd ..
npm run build

Then press F5 in VS Code to launch the Extension Development Host.

Usage

1. Open the Pixel Agents panel (it appears in the bottom panel area alongside your terminal)
2. Click + Agent to spawn a new agent terminal and its character
3. Pick a provider (Claude/Codex/Gemini) if prompted, or use your configured default provider
4. Start coding with your agent and watch the character react in real time
5. Click a character to select it, then click a seat to reassign it
6. Click Layout to open the office editor and customize your space

Layout Editor

The built-in editor lets you design your office:

• Floor — Full HSB color control
• Walls — Auto-tiling walls with color customization
• Tools — Select, paint, erase, place, eyedropper, pick
• Undo/Redo — 50 levels with Ctrl+Z / Ctrl+Y
• Export/Import — Share layouts as JSON files via the Settings modal

The grid is expandable up to 64×64 tiles. Click the ghost border outside the current grid to grow it.

Office Assets

The office tileset used in this project and available via the extension is Office Interior Tileset (16x16) by Donarg, available on itch.io for $2 USD.

This is the only part of the project that is not freely available. The tileset is not included in this repository due to its license. To use Pixel Agents locally with the full set of office furniture and decorations, purchase the tileset and run the asset import pipeline:

npm run import-tileset

Fair warning: the import pipeline is not exactly straightforward — the out-of-the-box tileset assets aren't the easiest to work with, and while I've done my best to make the process as smooth as possible, it may require some manual tweaking. If you have experience creating pixel art office assets and would like to contribute freely usable tilesets for the community, that would be hugely appreciated.

The extension will still work without the tileset — you'll get the default characters and basic layout, but the full furniture catalog requires the imported assets.

How It Works

Pixel Agents watches provider session transcripts to track what each agent is doing. For Claude and Codex it reads JSONL logs; for Gemini it reads session JSON snapshots. When an agent uses a tool (like writing a file or running a command), the extension detects it and updates the character's animation accordingly. No CLI modifications are required — it's purely observational.

The webview runs a lightweight game loop with canvas rendering, BFS pathfinding, and a character state machine (idle → walk → type/read). Everything is pixel-perfect at integer zoom levels.

Tech Stack

• Extension: TypeScript, VS Code Webview API, esbuild
• Webview: React 19, TypeScript, Vite, Canvas 2D

Known Limitations

• Agent-terminal sync — the way agents are connected to interactive terminal instances is not super robust and sometimes desyncs, especially when terminals are rapidly opened/closed or restored across sessions.
• Provider log format churn — status/tool tracking depends on local CLI log formats, which may change without notice and require parser updates.
• Feature parity across providers — Claude currently has the richest permission/sub-agent tracking. Codex and Gemini use best-effort parsing where equivalent signals are unavailable.
• Windows-only testing — the extension has only been tested on Windows 11. It may work on macOS or Linux, but there could be unexpected issues with file watching, paths, or terminal behavior on those platforms.

Roadmap

There are several areas where contributions would be very welcome:

• Improve agent-terminal reliability — more robust connection and sync between characters and Claude Code instances
• Better status detection — find or propose clearer signals for agent state transitions (waiting, done, permission needed)
• Community assets — freely usable pixel art tilesets or characters that anyone can use without purchasing third-party assets
• Agent creation and definition — define agents with custom skills, system prompts, names, and skins before launching them
• Desks as directories — click on a desk to select a working directory, drag and drop agents or click-to-assign to move them to specific desks/projects
• Claude Code agent teams — native support for agent teams, visualizing multi-agent coordination and communication
• Git worktree support — agents working in different worktrees to avoid conflict from parallel work on the same files
• Support for other agentic frameworks — OpenCode, or really any kind of agentic experiment you'd want to run inside a pixel art interface (see simile.ai for inspiration)

If any of these interest you, feel free to open an issue or submit a PR.

Contributions

See CONTRIBUTORS.md for instructions on how to contribute to this project.

Please read our Code of Conduct before participating.

Supporting the Project

If you find Pixel Agents useful, consider supporting its development:

License

This project is licensed under the MIT License.