Skip to content
W
Book a call

Project 01 / 04 · AI agents · Next.js · Supabase

HQ, an AI virtual office

An animated office building where AI agents work as my team, with a CEO dashboard, approvals and a runner on my own PC.

  • AI agents
  • Claude Code
  • Next.js 16
  • Supabase
  • Approvals
HQ, an AI virtual office screenshot

(01) Why I built it

Why I built it

I run an agency next to a full-time architecture role, and the work was spread across chats, folders and my own memory. I wanted a team that could plan and do real work while I was busy, without ever acting on anything risky behind my back. So I built them an office.

(02) How it works

How it works

  1. 01

    A building you can walk into

    The office is a side-view tower. Visitors meet Robin at reception in the lobby. Staff take a PIN-locked lift up to the floors: a penthouse with my office and Alfred, the chief of staff; a workshop for Lucius (development) and Vicki (video); and a team floor for sales, social, SEO, copy and finance.

  2. 02

    Chat that turns into plans

    Each agent has a WhatsApp-style chat. Agents never start work from a chat message. They reply with a plan, the plan becomes an approval card in my dashboard, and nothing runs until I approve it.

  3. 03

    A runner on my PC does the work

    A small runner process sends a heartbeat every 15 seconds, so the building shows Open or Closed. Chat replies go through Claude Code with read-only tools. Approved plans run with edit tools inside that agent's own folder.

  4. 04

    Guardrails by design

    Deleting, pushing, deploying, sending and spending are always denied to the agents and turned into approval requests instead. The runner also handles hand-offs between agents, recovers unanswered messages after a crash, and pauses itself when it hits a usage limit.

  5. 05

    A CEO office with the numbers

    My office holds the KPIs, revenue, approvals, inbox, invoices and leads. The PIN is hashed with scrypt, sessions are signed cookies, failed attempts lock out, and the database rejects every request that doesn't come from the server.

Stack · Next.js 16 · React 19 · Tailwind 4 · Supabase (Postgres + RLS) · Claude Code · Node runner

(03) Screens

HQ lobby with Robin at reception and the street outside
The lobby. Robin takes messages when the office is closed.
Full view of the HQ virtual office tower
The whole building. Floors stay frosted until a staff PIN opens the lift.

What it taught me

What it taught me

Agents are only as useful as the boundaries around them. The plan, approve, run loop is what made me trust them with real work, and it came from the same habit I use with human teams: agree what done looks like before anyone starts.

Talk about a build ↗All projects

Next project

Alfred, a voice AI agent