Free Guide

This Guide Is 100% Free

Enjoy the full guide — no payment required. But if you want more, we have 9 courses on AI, content creation, automation, and development. Full access for just $39.90 — grab it before the price goes up.

Pixel Agents Office
Pixel Agents

Your AI Agents Now Have a Pixel Office

Pixel Agents is a VS Code extension that turns Claude Code into a living pixel world. Each agent walks, sits at a desk, types, reads, and waits — depending on what it's actually doing right now.

100% FreeVS Code ExtensionReal-Time Sync
How It Works
Why It Matters

AI Coding, Visualized

0+
agents
in one office
0+
12+
tools tracked
0ms
500ms
sync interval
Our Experience

How We Use Pixel Agents

When I run 3-4 Claude Code agents in parallel, I used to lose track of what each one was doing. Pixel Agents turned chaos into a clear picture — I literally see who's writing code, who's searching files, and who's waiting for my input.

Codearia Team
Anton, Codearia
CEO & Instructor
0+
Agents at once
0+
Tools tracked
0
Character states
0
Platforms
The Difference

Before vs After Pixel Agents

!

Without Pixel Agents

Terminal tabs pile up — you forget which agent is doing what

No visibility into agent activity until it finishes or asks a question

Agents waiting for input go unnoticed for minutes

Context-switching between multiple terminal sessions kills focus

No fun — just walls of text scrolling in terminals

With Pixel Agents

Each agent is a visible character — you see status at a glance

Real-time animation: typing = writing code, reading = analyzing files

Waiting agents are immediately visible — no missed prompts

One visual dashboard for all agents, zero context-switching

Your coding sessions become a pixel adventure

Setup Flow

Get Started in 4 Steps

From installation to a fully animated pixel office in under 5 minutes.

01

Install the Extension

30 seconds

Search for "Pixel Agents" in VS Code Extensions marketplace and click Install. Requires VS Code 1.105.0 or newer.

02

Ensure Claude Code CLI is Ready

Already done?

Pixel Agents reads Claude Code's JSONL transcripts from ~/.claude/projects/. Make sure Claude Code CLI is installed and authenticated.

03

Launch an Agent

1 click

Click the "+ Agent" button in the Pixel Agents panel. This opens a Claude Code terminal, and a pixel character appears in the office.

04

Watch Your AI Team Work

Real-time

Give tasks to your agents. Their pixel characters animate in real-time: walking to a desk to write code, reading files, running commands, or waiting for your input.

What Is Pixel Agents?

Pixel Agents is a lightweight VS Code extension that visualizes AI coding agents as animated pixel characters. It doesn't modify Claude Code or connect to it via API — it observes the JSONL transcript files that Claude Code creates in ~/.claude/projects/. Every 500ms, the extension reads new lines and maps tool calls to character animations.

New to Claude Code? Read our Mastering Claude guide

Canvas 2D
Canvas 2D
BFS
BFS
FSM
FSM
500ms
500ms

Lightweight game loop — zero impact on your coding performance

Open Source

GitHub Repository

Pixel Agents is fully open-source. Clone the repo, explore the code, contribute, or just install the extension directly from VS Code Marketplace. Everything you need to get started is in the README.

Quick Install

1Open VS Code → Extensions (Ctrl+Shift+X)
2Search "Pixel Agents"
3Click Install — done!
View on GitHub
DIY Guide

Set Up Pixel Agents

Step-by-step guide to getting your pixel office running.

1 / 8

01.Install VS Code 1.105.0+

Make sure you have the latest version of VS Code installed. Pixel Agents requires version 1.105.0 or newer for the Webview API features it uses.

VS CodeWebview API
Benefits

Key Features

Visual Agent Tracking

Each Claude Code session becomes a pixel character with distinct animations for every state: idle, walking, typing, reading, searching, and waiting.

Canvas 2DSpritesAnimation

12+ Tool Recognition

Pixel Agents recognizes Read, Edit, Write, Bash, Glob, Grep, WebFetch, WebSearch, Task/Agent, AskUserQuestion, and more — each with its own animation.

JSONL ParsingTool Mapping

Multi-Agent Office

Run multiple Claude Code agents simultaneously. Each gets its own desk and character. Sub-agents from the Task tool spawn as separate characters linked to their parent — see your whole AI team at once.

Parallel AgentsTeam View

Office Layout Editor

Built-in editor to design your office: paint floors, place walls, arrange furniture. Undo/redo with 50 levels, export/import layouts as JSON. Grid expandable up to 64x64 tiles.

EditorLayoutsJSON Export

Speech Bubbles & Sounds

Visual speech bubbles appear when an agent needs your input or permission. Optional sound notifications chime when an agent finishes its turn — never miss a prompt again.

AlertsSpeech BubblesAudio
Stack

Tech Under the Hood

Canvas 2D
BFS Pathfinding
Finite State Machine
JSONL Parser
VS Code Webview API
Claude Code CLI
TypeScript
Sprite Engine

The Result: Full Visibility

With Pixel Agents, you transform a chaotic multi-agent workflow into a clear, visual experience. No more forgotten terminals, missed prompts, or lost context. Your AI team is right there on screen — and it looks cool while working.

Ready to Build Real AI Systems?

This guide is just the beginning. Our courses take you from zero to production — with structured curriculum, practical projects, and expert guidance.