La oficina de Jules: una casa 3D con agentes IA que corre en tu navegador

Jules es la jefa de gabinete de una oficina que no existe, pero que puedes recorrer. Es una casa 3D que corre en tu navegador. Adentro trabajan 19 agentes repartidos en Desarrollo, Contenido, Ventas, Finanzas, el gimnasio y el Observatorio del Científico. Jules te los presenta con su voz y, cuando termina, la casa es tuya: tocas a los agentes y les das órdenes.

Esta guía te deja la oficina funcionando en tu computador y te muestra cómo cambiarla con Claude Code.

Qué es, en simple

• Es una casa en 3D hecha con React Three Fiber. Cada sala es un agente o una parte del negocio.
• Trae un recorrido guiado en el que Jules te explica qué hace cada agente.
• Al final puedes tocar a cada agente, ver su tarea y darle una orden.
• Es código tuyo, lo descargas, lo corres en tu máquina y lo cambias como quieras.

Qué necesitas

• Necesitas Node.js 22 o superior. Revisa tu versión con node -v.
• Necesitas un navegador moderno, como Chrome, Safari o Edge.
• Tu computador debe tener la aceleración gráfica activa. Si la pantalla sale negra, mira los problemas comunes más abajo.

Instalación paso a paso

1. Descarga el zip desde la descarga de la oficina.
2. Descomprímelo en una carpeta que puedas encontrar después, por ejemplo oficina-jules.
3. Abre la terminal dentro de esa carpeta.
4. Instala las dependencias:

npm install

5. Levanta la oficina:

npm run dev

6. Abre en tu navegador http://localhost:5180/?presentacion. Si la terminal muestra otro puerto, usa ese.
7. Toca «Empezar». Jules te presenta la oficina con su voz y al final te entrega la cámara.

Sin ?presentacion abres el modo laboratorio, donde puedes probar más agentes y vestirlos.

Para apagarla, vuelve a la terminal y presiona Ctrl + C.

Cómo se usa

• Para girar la vista, arrastra con el mouse o con un dedo en el celular.
• Para acercarte o alejarte, usa la rueda del mouse o pellizca en la pantalla.
• Para entrar a una sala, tócala.
• Para acercarte a un punto, haz doble toque sobre él.
• Para ver la casa completa, toca «Vista general», abajo a la izquierda.
• Para reiniciar el recorrido, presiona la tecla R.

Dar órdenes a los agentes

Cuando Jules dice «Ahora la manejas tú»:

1. Toca a un agente. Se abre su panel con su rol, su estado y su tarea.
2. Escribe una orden en el campo de orden o toca una de las sugerencias.
3. El agente te responde y Jules confirma con su voz.
4. El Integrador y el Ejecutivo de ventas esperan tu aprobación: tócalos y elige «Aprobar» o «Rechazar».

Las respuestas viven en tu computador, sin internet ni claves de API. Si quieres que piensen de verdad, pídele a Claude Code que las conecte a un modelo.

Pídeselo a Claude

Ábrela con Claude Code dentro de la carpeta y pídele cambios con palabras. Estos tres prompts te sirven de punto de partida:

1. Cambiar agentes y tareas

Los agentes del recorrido están en src/app/roster.ts.
Cambia los roles y las tareas para que hablen de mi negocio: [describe tu negocio].
Explícame qué archivos tocaste.

2. Renombrar las salas

Renombra los seis ambientes de la casa a los departamentos de mi empresa y cámbiales los colores.
Los nombres y colores están en src/oficina/render/layout.ts. No rompas el recorrido guiado.

3. Cambiar la voz del recorrido

Cambia el texto del recorrido que dice Jules para que se presente como asistente de mi equipo.
Mantén la misma duración de cada paso y no toques la lógica de la cámara.

Problemas comunes

• Si la pantalla sale negra, tu navegador tiene WebGL desactivado. Actívalo en la configuración de aceleración gráfica o prueba con otro navegador.
• Si no suena, los navegadores bloquean el audio hasta que tocas la página. Haz clic en «Empezar» y el sonido arranca.
• Si el puerto está ocupado, otro programa ya usa ese puerto. Cierra el que lo use o pídele a Claude que lo cambie.

En tres líneas

• Jules te presenta una oficina 3D con agentes que trabajan solos, y luego la manejas tú.
• Corre en tu navegador con Node.js 22 o superior: descomprimes el zip, npm install, npm run dev y abres localhost:5180/?presentacion.
• Cambia lo que quieras con Claude Code, con prompts claros y sin tocar la cámara.