Pixel Agents
github.com/pablodelucca/pixel-agents- Category
- AI Agents
- Rank
- No. 132Tools index
- Pricing
- Open Source
- Type
- APP
- Use case
- Agent Building
- Interfaces
- Editor Extension
- Builder
- pablodelucca
- GitHub
- 9.4k stars
- Latest release
- v1.4.1
- Date
About
A VS Code extension that visualizes AI agents as pixel art characters in a virtual office. Each agent gets an animated character that reflects what it's actually doing - typing when writing code, reading when searching files, walking around the office.
What it does
Pixel Agents provides a local control surface for following multiple Claude Code sessions. It receives hook events, falls back to reading session transcripts, normalizes activity into shared events, and presents the result inside VS Code or a browser. Users can launch or focus sessions, spot permission and input waits, arrange workspaces into named office areas, and customize or exchange layouts and art assets.
Why it's ranked here
The appeal extends beyond decoration: it turns concurrent Claude sessions, sub-agents, teammates, permissions, and context use into one glanceable workspace. The same interface works in VS Code and standalone environments, while typed provider and transport boundaries give the architecture room to grow. The main reservation is immediate scope. Claude Code is the only implemented provider, and much of the broader orchestration vision remains planned.
What's good
Two detection paths improve practical coverage: hooks deliver immediate events, while transcript scanning supplies a fallback and extra detail. The standalone server supports terminal-heavy, remote, and non-VS Code workflows, with an option to disable its embedded terminal. Layouts persist across hosts, named areas can map folders to seats, and external packs can add characters, pets, or furniture. The project also documents unit, package-contract, and end-to-end checks.
Tradeoffs
Current compatibility centers on Claude Code despite an agent-neutral provider design. Codex, Gemini, Cursor, and other integrations are roadmap items, not shipped choices. Standalone mode observes matching workspace sessions but does not start Claude itself. Network exposure needs care because changing the default loopback binding can expose both the interface and WebSocket. The game-like orchestration ideas, including budgets, scores, richer furniture behavior, and direct task handoffs, are still future plans.
How to use it well
Use it when several Claude Code sessions make terminal tabs hard to scan, especially when permissions, waiting states, sub-agents, or team roles matter. Choose the VS Code panel for launching and focusing agents beside your editor. Choose the standalone browser for tmux, remote, or other editor setups. Treat it as an activity and session-awareness layer, not a general agent platform or task manager. Keep the server bound locally unless the network is trusted.
Technical notes+
package.json defines a TypeScript-oriented npm workspace spanning server and webview packages, with Fastify, WebSocket, React, Vite, esbuild, Vitest, Node test runner, and Playwright tooling described by its scripts and dependencies. core/src/provider.ts defines HookProvider and normalized AgentEvent contracts, while core/src/messages.ts supplies generated client and server message unions. core/src/transport.ts abstracts postMessage and WebSocket delivery. core/src/adapter.ts separates persisted agent state and settings from hosts, and core/src/schemas.ts defines shared persistence and layout shapes. docs/external-assets.md specifies manifest-driven PNG furniture packs, including rotation, state, animation, placement, and footprint metadata.
Observed
- License
- MIT, declared in package metadata.
- Primary language
- TypeScript, with typed core contracts and TypeScript build and checking scripts.
- Install surfaces
- VS Code Marketplace, Open VSX, and an npm-distributed standalone command.
- Interfaces
- VS Code extension panel and standalone browser application served by a CLI.
- Platform support
- Windows, Linux, and macOS.
- Runtime requirements
- Node.js 20 or later for standalone use, and VS Code 1.105.0 or later for the extension.
- Current agent support
- Claude Code is the shipped provider; other agent integrations are roadmap items.
- Testing structure
- Repository scripts cover webview tests, server tests, package-contract tests, and Playwright end-to-end tests.
Read from README.md, package.json, core/src/index.ts, core/src/adapter.ts, core/src/schemas.ts, core/src/messages.ts, core/src/provider.ts, core/src/constants.ts, core/src/transport.ts, core/src/paletteUtils.ts, core/src/teamProvider.ts, core/src/terminalAdapter.ts, core/src/normalizeProjectPath.ts, docs/external-assets.md, docs/research/claude-harness-spawn-formats.md.
What it can do
Visualize AI agents as pixel art characters
AI agent system → Animated pixel art characters in virtual office
Display real-time agent activity animations
AI agent current tasks and states → Visual animations showing typing, reading, walking
Create virtual office environment for multi-agent systems
Multiple AI agents → Interactive pixel art office workspace
Monitor AI agent status through visual interface
Agent behavior and task data → Real-time visual status indicators
Integrate AI agent visualization into VS Code
VS Code editor and AI agent system → VS Code extension with pixel art interface
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.