Stop Coding AI Agents Blindly: The Delegation Exposes Multi-Agent Workflows in 3D

What if your AI agents could show you their thinking instead of hiding in black-box terminals? What if you could watch a creative director agent argue with a copywriter agent while they both physically walk to a meeting room in a 3D office?

Here's the brutal truth: most developers building multi-agent systems are flying blind. You're stitching together LangChain chains, debugging async orchestration, and praying your agents don't hallucinate each other into infinite loops. The delegation patterns you read about on Google AI blogs? Pure theory until you see them breathe.

Enter The Delegation — a no-code 3D playground that transforms abstract agentic AI into living, walking, talking simulations. Built by creative technologist Arturo Paracuellos, this open-source project doesn't just let you build multi-agent teams. It lets you inhabit their world.

No more guessing if your PR-review workflow actually works. No more wondering why your creative agent burned through $50 in API tokens. The Delegation exposes every thought, every token, every cost — in a gorgeous Three.js WebGPU office where your agents clock in, grab coffee, and collaborate.

Ready to stop debugging agents in the dark? Let's dive into the most visceral way to understand Agentic AI ever built.

What is The Delegation?

The Delegation is a no-code 3D playground designed to explore, design, and interact with Agentic AI systems. Created by Arturo Paracuellos and released as v0.2.0, it represents a radical departure from traditional agent development tools.

Unlike frameworks that trap you in YAML configurations and terminal logs, The Delegation drops you into a living 3D office environment where LLM-powered characters physically embody your agent architectures. Each agent isn't just a process ID — it's a 3D character with a desk, a role, and a mission.

The project targets three distinct audiences with surgical precision:

• AI enthusiasts who want to feel how delegation patterns work without drowning in boilerplate
• Educators seeking visceral demonstrations of multi-agent collaboration for students
• Creative developers building the next generation of autonomous systems

What makes The Delegation genuinely trend-worthy? It solves the observability crisis in agentic AI. Current tools give you JSON logs. The Delegation gives you behavior. Watch your "Film Studio" team's director agent walk to the editing bay while the VFX agent queues up Veo 3.1 video generation. See bottlenecks. Spot failures. Optimize in real-time.

The project also carries fascinating meta-significance: the entire v0.2.0 release was developed using Google Antigravity as the primary IDE, with Gemini 3 Flash powering the development itself. It's AI tools building AI tools — and now you can fork it on GitHub.

Key Features That Redefine Agent Development

Agentic AI System (v0.2.0)

Team Editor with React Flow: The visual node-based interface lets you architect complex multi-agent design patterns by dragging connections between roles. No code. No config files. Just pure systems thinking made tangible.

6 Predefined Industry Templates: Jumpstart with Creative Agency, Film Studio, PR Agency, and more. Each template encodes real-world delegation patterns from Google's official multi-agent pattern guides.

Multimodal Asset Generation: This is where it gets wild. Your agents don't just chat — they produce. Native integration with Google's creative stack yields:

• Nano Banana for images
• Lyria 3 for music
• Veo 3.1 for video

A single agent team can storyboard, score, and produce a trailer without human intervention.

Per-Agent LLM Assignment: Optimize cost and capability by assigning different Gemini models to specific roles. Flash for rapid research agents. Pro for reasoning-heavy strategy roles. The granularity is surgical.

Real-Time Cost & Token Tracking: Every API call surfaces its price tag. No more surprise $200 bills. The transparency is brutal and necessary.

PR-Style Workflows with Human-in-the-Loop: Agents can submit "pull requests" for their work, requiring your explicit approval before execution. This isn't gamification — it's production-grade governance.

Guardrails via Auto-Approve Controls: Toggle automatic approval per agent or globally. Maintain velocity without sacrificing oversight.

Technical Logs & LLM Traces: Raw tool calls, structured responses, and reasoning chains exposed in clean, scannable formats.

Embodied Simulation Engine

Hybrid GPU/CPU Architecture with Three.js WebGPU: The simulation leverages cutting-edge WebGPU compute for rendering and physics, delivering desktop-grade performance in the browser.

NavMesh Pathfinding via three-pathfinding: Agents don't teleport. They navigate. The office becomes a genuine constraint — agents queue for resources, path around obstacles, and claim specific Points of Interest (desks, seats, computers) based on their current tasks.

Dynamic State Machine: Characters transition organically between walking, sitting, working, and talking. Speech bubbles sync with 3D position. Expressions match emotional state.

Interactive Observability Layer

Team Flow Visualizer: Watch your node graph execute in real-time. See data flow between agents as glowing connections.

Simulated PR Review Modals: Click any pending agent proposal. Review, comment, merge, or reject — just like GitHub, but for AI decisions.

Agent Inspector: Select any 3D character to read their "thoughts", current mission, and complete interaction history.

Kanban & Action Logs: Track deliverables and tool-level interactions across the entire agency.

Use Cases: Where The Delegation Shines

1. Multi-Agent Architecture Education

Teaching delegation patterns through code alone is like teaching architecture with blueprints but no buildings. The Delegation lets students walk through a functioning system. They see supervisor-delegate patterns, parallelization, and sequential pipelines as physical behaviors. The 3D office becomes a persistent memory palace for complex concepts.

2. Creative Production Pipeline Prototyping

A Film Studio team can autonomously: research a topic (research agent), draft a script (writer agent), generate concept art (art agent via Nano Banana), compose a score (music agent via Lyria 3), and produce a teaser (video agent via Veo 3.1). You validate the workflow visually before committing to infrastructure costs.

3. Cost Optimization for Enterprise Agent Deployments

The real-time cost tracking transforms abstract pricing into concrete decisions. Notice your "Brainstorming" agent burning Pro tokens on trivial tasks? Reassign it to Flash. See your PR-review bottleneck causing idle agent time? Restructure the human-in-the-loop policy. The 3D visualization makes systemic inefficiencies impossible to ignore.

4. Human-AI Collaboration Interface Research

The Delegation prototypes the future of work. As agents gain physical presence, we can study: How do humans interrupt agents effectively? What spatial arrangements optimize collaboration? When should agents seek approval versus act autonomously? These questions matter for tomorrow's offices.

5. Guardrail and Safety Testing

Before deploying agents to production, simulate edge cases in the playground. Test what happens when an agent's output is rejected. Observe cascade failures when a supervisor agent goes offline. The 3D environment makes systemic risks visceral and memorable.

Step-by-Step Installation & Setup Guide

Getting The Delegation running takes under five minutes. Here's the complete workflow:

Prerequisites

• Node.js (v18+ recommended)
• npm or yarn
• A Gemini API key from Google AI Studio

Local Installation

Step 1: Clone the repository

git clone https://github.com/arturitu/the-delegation.git
cd the-delegation

Step 2: Install dependencies

npm install

This pulls in the full dependency tree including Three.js (WebGPU branch), React, React Flow, Zustand, and the three-pathfinding library.

Step 3: Configure your API key

Create a .env.local file in the project root:

# .env.local
NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_api_key_here

The application uses BYOK (Bring Your Own Key) architecture. Your key never leaves your session — all Gemini API calls are made directly from your browser.

Step 4: Run the development server

npm run dev

Step 5: Open the application

Navigate to the local URL shown in your terminal. The default path is:

http://localhost:3000/the-delegation

Production Deployment

For static deployment (GitHub Pages, Vercel, Netlify):

npm run build

The output is optimized for static hosting. Ensure your deployment platform supports the WebGPU headers required by Three.js.

Quick Start Without Installation

Prefer to experiment immediately? Use the live deployment with your Gemini API key. No clone, no install, pure exploration.

REAL Code Examples from the Repository

The Delegation's codebase demonstrates sophisticated patterns for bridging 3D simulations with agentic AI. Let's examine the actual implementation approaches from the project's architecture.

Example 1: Basic Project Setup and Dependency Installation

The foundation is deliberately minimal. The README specifies clean separation between engine concerns:

# Install all dependencies including Three.js WebGPU, React, and agent orchestration libraries
npm install

# Start the Vite-based development server with hot module replacement
npm run dev

The npm install command resolves the full dependency tree. Critical packages include three (WebGPU renderer), @react-three/fiber for React integration, reactflow for the team editor, and zustand for state management. The WebGPU backend is essential — the simulation falls back to WebGL2 but loses compute shader performance for NavMesh generation and crowd simulation.

Example 2: NavMesh Pathfinding Integration

The physical office navigation relies on three-pathfinding. While the repository doesn't expose raw pathfinding calls in the README, the architecture implies this implementation pattern:

// Conceptual implementation based on three-pathfinding integration
import { Pathfinding } from 'three-pathfinding';

// Initialize pathfinding with office NavMesh
const pathfinding = new Pathfinding();
const zoneID = 'office-floor-1';

// Load generated NavMesh from Blender-exported geometry
pathfinding.setZoneData(zoneID, navMeshGeometry);

// Agent requests path to target Point of Interest
function navigateAgentToDesk(agent, targetDesk) {
  const startPosition = agent.mesh.position;
  const targetPosition = targetDesk.position;
  
  // Calculate valid path through walkable office space
  const groupID = pathfinding.getGroup(zoneID, startPosition);
  const path = pathfinding.findPath(startPosition, targetPosition, zoneID, groupID);
  
  // Assign path to agent's movement controller
  agent.setNavigationPath(path);
  agent.transitionState('walking');
}

This pattern explains why agents don't clip through walls or furniture. The NavMesh encodes walkable surfaces, and three-pathfinding guarantees valid routes. The groupID handles multi-floor offices or disconnected walkable areas.

Example 3: State Machine for Agent Behaviors

The dynamic state transitions between walking, sitting, working, and talking follow a hierarchical state pattern:

// Agent state machine driving 3D animations and AI behavior
class AgentStateMachine {
  constructor(agent) {
    this.agent = agent;
    this.currentState = 'idle';
    this.states = {
      idle: new IdleState(this),
      walking: new WalkingState(this),
      working: new WorkingState(this),
      talking: new TalkingState(this)
    };
  }

  transition(newState, context = {}) {
    // Exit current state with cleanup
    this.states[this.currentState].exit();
    
    // Update 3D animation clip via instanced animation system
    this.agent.animationController.play(newState);
    
    // Sync UI speech bubble visibility
    this.agent.uiOverlay.setState(newState);
    
    // Enter new state with context (target desk, conversation partner, etc.)
    this.currentState = newState;
    this.states[newState].enter(context);
  }
}

// Working state triggers LLM task execution
class WorkingState {
  enter(context) {
    // Claim Point of Interest (desk/computer)
    context.desk.occupy(this.agent);
    
    // Trigger Gemini API call for assigned task
    this.agent.executeTask(context.task).then(output => {
      // Auto-approve or queue for human review based on guardrails
      if (this.agent.autoApprove) {
        this.agent.submitOutput(output);
      } else {
        this.agent.queueForReview(output);
      }
    });
  }
}

The state machine is the critical bridge between 3D presentation and AI execution. When an agent sits at a desk, the WorkingState doesn't just play a typing animation — it initiates the actual LLM call, streams the response, and handles approval workflows.

Example 4: Zustand Store for Cross-System Reactivity

The unified state layer connects React UI and Three.js simulation:

// Zustand store enabling bidirectional UI↔3D communication
import { create } from 'zustand';

const useDelegationStore = create((set, get) => ({
  // Agent registry: shared between 3D scene and React panels
  agents: new Map(),
  
  // Live team topology from React Flow editor
  teamGraph: { nodes: [], edges: [] },
  
  // Real-time cost accumulator for all Gemini API calls
  sessionCosts: { usd: 0, tokens: { input: 0, output: 0 } },
  
  // Pending PR reviews requiring human action
  reviewQueue: [],
  
  // Actions callable from both React components and 3D interactions
  registerAgent: (agent) => set(state => ({
    agents: new Map(state.agents).set(agent.id, agent)
  })),
  
  updateAgentThought: (id, thought) => {
    // Update 3D speech bubble
    get().agents.get(id)?.setThoughtBubble(thought);
    // Sync Agent Inspector panel if selected
    set(state => ({ lastThoughtUpdate: Date.now() }));
  },
  
  addCost: (cost) => set(state => ({
    sessionCosts: {
      usd: state.sessionCosts.usd + cost.usd,
      tokens: {
        input: state.sessionCosts.tokens.input + cost.tokens.input,
        output: state.sessionCosts.tokens.output + cost.tokens.output
      }
    }
  })),
  
  submitForReview: (agentOutput) => set(state => ({
    reviewQueue: [...state.reviewQueue, agentOutput]
  })),
  
  approveOutput: (outputId) => {
    const output = get().reviewQueue.find(r => r.id === outputId);
    output?.agent.executeApprovedOutput(output);
    set(state => ({
      reviewQueue: state.reviewQueue.filter(r => r.id !== outputId)
    }));
  }
}));

This store architecture is why clicking a 3D character updates the React inspector instantly, and why approving a PR in a modal immediately releases the agent to continue. Zustand's minimal reactivity overhead prevents frame drops in the WebGPU render loop.

Advanced Usage & Best Practices

Optimize Model Assignment Per Role

Don't default all agents to Gemini Pro. The Delegation's per-agent LLM assignment exists for cost control. Pattern: Flash for research and data extraction, Pro for synthesis and strategy, and reserve multimodal models (Veo, Lyria) exclusively for output-generation agents.

Design for Spatial Constraints

The 3D office isn't cosmetic — it's a genuine resource constraint. Too many agents with simultaneous compute needs? They'll queue for limited workstations. Design teams with physical awareness: parallelize independent tasks, sequentialize shared resource access.

Leverage PR Workflows for High-Stakes Outputs

Enable human-in-the-loop for any agent generating client-facing assets. The simulated PR review isn't bureaucracy — it's quality insurance. The modal interface lets you catch hallucinations before they become expensive mistakes.

Monitor Token Patterns in Technical Logs

Spiking input tokens often indicate prompt injection or runaway context windows. The raw LLM traces expose these patterns. Use them to refine your agent's system prompts iteratively.

Fork for Custom Environments

The dual-license (MIT for code, CC BY-NC 4.0 for assets) lets you replace the default office with your own Blender models. Build a factory floor. A hospital ward. A spacecraft bridge. The architecture supports arbitrary NavMesh environments.

Comparison with Alternatives

The Verdict: Choose The Delegation when you need to understand and communicate agent behavior visually. Choose AutoGen or CrewAI for production API deployments without simulation overhead. Use LangGraph when you need maximum workflow control and don't mind the complexity. The Delegation uniquely occupies the education, prototyping, and observability niche.

FAQ

Is The Delegation free to use?

The source code is MIT-licensed and free. However, you must bring your own Gemini API key (BYOK), and Google charges for API usage. The built-in cost tracker helps you control spending.

Can I use The Delegation for commercial projects?

The code (MIT license) can be used commercially. The 3D assets (CC BY-NC 4.0) cannot — they're restricted to personal and educational use. Replace the assets for commercial deployments.

Does it work without WebGPU?

Three.js falls back to WebGL2, but performance degrades significantly. The NavMesh generation and instanced animation systems benefit enormously from WebGPU compute shaders. Use Chrome 113+ or Edge 113+ for full functionality.

Can I add custom agent types?

Yes. The Team Editor uses React Flow's extensible node system. You can define new agent roles with custom system prompts, tool access, and assigned Gemini models. The 3D character representation can also be customized.

How does the human-in-the-loop approval work?

Agents with the human-in-the-loop property pause after generating output. A modal appears simulating a GitHub PR review. You can approve, request changes with feedback, or reject. The agent receives your response and continues accordingly.

Is my API key secure?

Your Gemini key is stored in browser session memory only. All API calls are made client-side directly to Google's endpoints. The project has no backend server collecting credentials.

Can agents remember across sessions?

Not yet. Inter-agent knowledge sharing is on the roadmap. Currently, each session starts fresh. For persistent memory, you'd need to fork and integrate a vector database.

Conclusion

The Delegation isn't just another agent framework. It's a paradigm shift in how we understand autonomous systems. By forcing agents into physical space — making them walk, wait, collide, and collaborate — it exposes the hidden dynamics that code alone conceals.

For educators, it's the most visceral teaching tool for multi-agent patterns yet built. For creative technologists, it's a production pipeline simulator that generates real assets. For researchers, it's a probe into the future of human-AI workspaces.

The v0.2.0 release is already impressive, but the roadmap hints at genuine ambition: dynamic environment modification, richer spatial interactions, and long-term agent memory. This is a project to watch — and more importantly, to fork, extend, and learn from.

Stop debugging your agents in terminal voids. Give them an office. Give them bodies. Give them The Delegation.

👉 Star, fork, and launch The Delegation on GitHub today — your agents are waiting for their desks.

Developed with ❤️ by Arturo Paracuellos. Built with Google Antigravity and Gemini 3 Flash.