Skip to main content
Atelier's bright 3D workshop — AI-agent robots at their desks, one glowing as it works

ATELIER // live workspace

Atelier – A 3D Workshop for AI Coding Agents

  • Design
  • Full-Stack Engineering
  • 3D & Motion

A bright studio where a crew of AI coding agents does real work on a real repo — a studio, not a control room.

The crew

A brief flows down the org-chart

  • Youbriefs & approvals
  • Atlaslead
  • Vegaworker
  • Novaworker
  • Orionworker
  • Lyraworker

Atlas decomposes “Add a hosted checkout page and verify incoming webhooks.” into tasks and delegates down to the crew.

The board

Tasks light up the kanban

  • Pending

    Verify webhook HMAC signatureVega

  • Queued

    Document the checkout flowLyra

  • Running

    Build POST /checkout endpointVega

  • On-hold

    Hosted checkout form UINova

The work

A worker's screen glows as the terminal streams

vega@orbit-pay · build POST /checkout

$ npm installadded 142 packages in 3.1s$ npm test✓ creates a checkout session✓ rejects an unknown amount✓ returns 200 with a session id12 passing (1.4s)

The change

A real diff appears — read it, then decide

nova · src/ui/CheckoutForm.tsx

@@  src/ui/CheckoutForm.tsx+  export function CheckoutForm({ onPay }) {+    const [email, setEmail] = useState('');+    const [card, setCard]   = useState('');+    return <form onSubmit={() => onPay({ email, card })}>…+  }

The gate

You approve the merge

Finished (guarded) — review the diff, then merge. The permission gate is enforced in code, not suggested.

merged

In the room

Agent orchestration collapsed into one legible studio.

  • // studio

    A real 3D studio

    A bright, hand-built Three.js workshop (WebGPU, with a WebGL2 fallback) where each agent is a robot at a desk — its screen glows while it works.

  • // orchestrate

    Org-chart orchestration

    Assemble a crew as a tree — a lead that plans and delegates, workers that execute — and watch a brief flow down into assigned tasks.

  • // isolate

    Real work, isolated

    Every task runs in its own git worktree and branch; your main is never touched until you review the diff and approve the merge.

  • // supervise

    Supervise, don’t babysit

    A kanban board, a live terminal, real git diffs, and inline approve/deny for any guarded action — the whole run legible at a glance.

  • // providers

    Bring your own brain

    Each agent runs on Ollama (local, free), OpenAI, Gemini, or Claude — provider-agnostic, mixable within one team.

  • // craft

    Modelled, not borrowed

    An original robot mascot I modelled and rigged in Blender — the same rig you’re watching work above.

A crew you can shape

Design your team as an org-chart — drag to re-parent, set each agent’s autonomy, allowed paths, and model. The same six status colours drive the cards, the kanban lanes, and the robots’ overhead pills, so one glance across the room tells you who’s working, who’s blocked, and what’s safe to merge.

Youbriefs & approvals
Atlaslead · guardedollama/llama3.1
  • Vegaworker · autonomousollama/llama3.1
  • Novaworker · guardedollama/llama3.1
  • Orionworker · guardedollama/llama3.1
  • Lyraworker · guardedollama/llama3.1

Bring your own brain

  • Ollama
  • OpenAI
  • Gemini
  • Claude

The same six status colours

  • idle
  • working
  • awaiting
  • done
  • conflict
  • error

Under the hood

A TypeScript monorepo — a headless orchestration core, a thin transport, and a React 19 + Three.js client.

  • TypeScript
  • React 19
  • Three.js
  • React Flow
  • Zustand
  • Vite
  • ws

  • // orchestration-core

    A headless core

    A provider-agnostic tool-calling loop, a git worktree manager, and a permission gate — enforced in code, not suggested.

  • // own-loop

    Its own agent loop

    It implements the loop directly, rather than wrapping an SDK — the orchestrator, the tool calls, and the retries are all from scratch.

  • // isolation

    A worktree per task

    Each agent works in its own git worktree and branch; your main is never touched until you review the diff and approve the merge.

  • // transport

    A thin WebSocket server

    It streams the run to a React 19 + Three.js client; the org-chart editor is built on React Flow.

  • // rendering

    WebGPU, with a WebGL2 fallback

    The app renders on WebGPU where it can and falls back to WebGL2; this portfolio page ships the WebGL2 path.

  • // provider-agnostic

    Bring your own brain

    Ollama, OpenAI, Gemini, or Claude — each agent picks a model, mixable within one team. The providers are integrations, not the foundation.

It’s a personal flagship — somewhere to push on real-time 3D, multi-agent orchestration, and the craft of making something deeply technical feel alive. I designed, built, and 3D-modelled all of it.