🎮 Pixel Agents · ver trabajar a tus agentes en pixel-art¶

Material de aula · el momento "wow" del módulo avanzado · 3 minutos para desplegarlo en vivo

Un cierre divertido y visual para la parte de Claude Code y subagentes: en lugar de mirar texto corriendo por la terminal, cada agente que tienes trabajando aparece como un personaje de pixel-art en una oficina virtual. Camina hasta su escritorio, se sienta y muestra un bocadillo con lo que está haciendo —«Leyendo README.md», «Ejecutando npm test», «Escribiendo app.py»— en tiempo real. Convierte algo abstracto (varios agentes de IA trabajando a la vez) en una escena que se entiende de un vistazo.

Es la metáfora perfecta para el mensaje del curso: tú diriges un pequeño equipo de agentes; ellos hacen el primer borrador.

¿Prefieres verlo sin instalar nada?

Abre la recreación autocontenida que viene en el repo —una oficina pixel-art animada, sin red ni dependencias— ideal para proyectar aunque falle el wifi: demo-plan-b/pixel-agents-oficina.html. Pulsa ＋ Lanzar agente delante de la clase.

Despliegue rápido (el de verdad)¶

Un solo comando en la Terminal. No pide API keys y es de código abierto (licencia MIT):

npx pixel-agents

Se abre un servidor local; copia la URL que imprime (algo como http://localhost:3000) y ábrela en el navegador. Para elegir puerto:

npx pixel-agents --port 3100

Requisito previo (importante)¶

Pixel Agents no crea agentes: los dibuja. Los personajes son las sesiones de Claude Code que ya tengas corriendo. Así que primero:

Ten Claude Code instalado y con sesión iniciada (lo hicimos en el notebook 00-preparacion y en el módulo avanzado).
Abre una o varias sesiones de Claude Code trabajando en algún proyecto (por ejemplo, pídeles que ordenen una carpeta o generen un archivo).
Lanza npx pixel-agents en otra pestaña de la Terminal.
Vuelve al navegador: verás aparecer un personaje por cada agente activo. 🎉

Guion para proyectarlo en clase (2 min)¶

Momento	Qué haces	Qué dices
Preparar	Deja 2–3 sesiones de Claude Code lanzadas con alguna tarea (ordenar carpeta, generar Excel)	«Tengo tres agentes trabajando ahora mismo en mi ordenador…»
Revelar	Ejecuta `npx pixel-agents` y abre la URL	«…y así es como los veo: cada uno es un miembro de mi equipo»
Narrar	Señala los bocadillos según cambian	«Este está leyendo un archivo, este ejecutando una prueba, este pensando el siguiente paso»
Cerrar	Vuelve a la diapositiva de subagentes	«Vosotros sois el director de este equipo: repartís el trabajo y revisáis el resultado»

Otras formas de usarlo¶

Extensión de VS Code — busca «Pixel Agents» en el panel de extensiones (identificador pablodelucca.pixel-agents). Muestra la oficina dentro del propio editor.

Desde el código fuente (solo si quieres trastear o hacer tu propia build):

git clone https://github.com/pixel-agents-hq/pixel-agents.git
cd pixel-agents
npm install
npm run build
node dist/cli.js

¿Y los agentes de Codex/ChatGPT?¶

Hoy Pixel Agents solo dibuja agentes de Claude Code. Se podría extender a Codex (que también corre en tu terminal) escribiendo un adaptador; el diseño técnico, con sus límites y un stub de código, está esbozado en Pixel Agents · adaptador Codex. ChatGPT/Gemini web quedan fuera: viven en la nube y no dejan rastro local que observar.

Si algo falla (plan B)¶

npx no responde o no hay Node → usa directamente la recreación autocontenida del repo; se ve igual de bien y no necesita internet.
No aparece ningún personaje → asegúrate de que hay al menos una sesión de Claude Code activa antes de lanzar npx pixel-agents (lee tus sesiones de ~/.claude/projects/).
Versión de Node antigua → actualiza Node (LTS reciente) y vuelve a probar.

Ficha técnica (para curiosos)¶

Dato	Valor
Qué es	Capa de visualización de agentes de IA como personajes pixel-art
Despliegue	`npx pixel-agents` (servidor local) o extensión de VS Code
Requiere	Claude Code instalado · sin API keys propias
Stack	TypeScript · servidor Fastify · interfaz React + Canvas
Licencia	MIT (libre y gratuito)
Repositorio	github.com/pixel-agents-hq/pixel-agents

Encaja con la gobernanza del curso

Pixel Agents solo observa lo que hacen tus agentes de Claude Code (lee los eventos localmente); no envía tus datos a ningún sitio ni ejecuta acciones por su cuenta. Aun así, aplica el mismo criterio que con cualquier herramienta nueva: instálala desde su fuente oficial y revisa la guía de gobernanza de datos antes de usarla con proyectos reales.