AI / Agent Systems
Making Agents Watchable: The Delegation and an AI Team in a 3D Office
Multi-agent systems usually live inside a log file. The Delegation puts them in a 3D office in your browser: agents sit at desks, hand off work, and stop for your approval at critical steps.
The hardest part of working with multi-agent systems isn’t technical, it’s perceptual: you can’t see what’s happening. Five agents share a task, hand work off to each other, one waits on another’s output — and you follow all of it line by line in a terminal log.
The Delegation attacks this from an unusual angle: it places agents inside a 3D office. In a browser-based simulation the agents walk around as characters, sit at desks, work at computers, and communicate through speech bubbles. In its own words, a “no-code 3D playground to explore, design, and interact with Agentic AI systems.”
Project facts
The project is built by Arturo Paracuellos (unboring.net). One notable detail: the developer states this version was built entirely using Google Antigravity as the primary IDE and powered by Gemini 3 Flash.
| Attribute | Value |
|---|---|
| Developer | Arturo Paracuellos (arturitu) |
| Version | v0.2.0 |
| Stars | ~570 |
| Forks | ~105 |
| Primary language | TypeScript |
| Model provider | Gemini API (BYOK) |
| License | MIT for code, CC BY-NC 4.0 for 3D assets |
Figures as of July 2026. It’s a small project next to the others on this list, but it does one thing: it makes agent behavior visible.
The agent layer: how you build the team
This is where the no-code part lives. A Team Editor built on React Flow lets you wire agents and the workflow between them as nodes. If you don’t want to start from scratch, six team templates ship with it — Creative Agency, Film Studio, and PR Agency among them.
- Per-agent model assignment: you can give each role a different Gemini model. Flash for roles that need latency, Pro for roles that need reasoning.
- PR-style workflows: agents you flag pause once they produce output and wait for your approval. You review and merge it much like a pull request.
- An “Auto-approve output” toggle: there if you want to remove the gate entirely — but leaving it on is the actual safety mechanism.
- Cost and token tracking: you see how much each agent spent.
- Technical logs: raw traces and tool calls stay exposed — the visual layer doesn’t hide information, it adds a layer on top of it.
Multimodal generation
The agents don’t only produce text. Nano Banana is wired in for images, Lyria 3 for music, and Veo 3.1 for video. So in a Film Studio template, the agents can genuinely write a treatment and generate stills and video.
The simulation layer: the technical side
The visual part is real 3D engine work and technically the most interesting piece here. Three.js’s WebGPU pipeline runs on a hybrid GPU/CPU architecture, with TSL used on the shader side.
| Component | What it does |
|---|---|
| NavMesh pathfinding | With three-pathfinding, characters walk the office without colliding with obstacles |
| Points of Interest | Agents “claim” spots like desks and computers, so two never sit at the same desk |
| State machine | Transitions between walking, sitting, working, and talking |
| 3D speech bubbles | Surfaces agent-to-agent communication in the scene |
| Agent Inspector | Click an agent and read its “thoughts” |
| Kanban and action logs | Overlays a 2D status layer on top of the 3D scene |
Tech stack: Three.js (WebGPU + TSL), React, React Flow, Zustand for state, the Gemini API for inference, Blender-authored models with an instanced animation system, TypeScript, and Vite.
How to run it
Two paths: use the hosted demo, or run it locally. Either way you bring your own Gemini API key (BYOK).
- 01
Get a Gemini API key from Google AI Studio.
- 02
For a quick look, open the live demo directly and paste your key.
- 03
To run locally, clone the repo.
- 04
Install dependencies with npm install.
- 05
Start the dev server with npm run dev.
- 06
Open the address it prints — usually http://localhost:3000/the-delegation.
- 07
Pick a team template, assign models to agents, and start the first task with the approval gate left on.
The licensing detail to watch
This project uses a dual license, and you need to know it if you’re taking anything into commercial work:
| Scope | License | What it means |
|---|---|---|
| Source code (logic, shaders, UI) | MIT | Free to use, modify, and distribute |
| 3D models and assets | CC BY-NC 4.0 | Personal and educational use is fine; commercial use requires permission |
Roadmap
- An office and 3D space editor
- Letting agents modify the environment themselves
- Deeper embodied AI and richer animations
- Spatial interaction between humans and agents
- Long-term memory across projects
- Decoupling the architecture and a UX/UI overhaul
Who is it for?
This isn’t an orchestration framework for running production workloads. Its value is in explanation and teaching: showing a team or a client how multi-agent systems actually work, trying out a design pattern, or having something concrete in hand when you argue for why approval gates are necessary.
I find it genuinely useful as a showcase tool. Explaining agent architecture in prose is hard; letting someone watch one agent wait on another does the job much faster.