Leia

• 

  Shared board with the team.

Inspiration

Most "AI agent" demos are really just a chatbot wearing a different UI: you type, the model replies, nothing about the page actually changes. WebMCP made me want to try the opposite — a page where the agent isn't just talking at the app, it's reaching into it, changing real state that a human can see, edit, and pick back up.

I've spent time building multi-agent AI systems and real-time 3D interfaces before, and I wanted to bring that experience into something built specifically for this challenge: a shared workspace where a person and their agent are genuinely working on the same thing at the same time, not taking turns in a chat log.

What it does

Leia is a shared board — a real, persistent plan — plus a team of seven AI specialists (Smith for code, Scout for research with live web search, Keeper for context, Scribe for writing, Planner for breakdowns, Warden for review, Analyst for numbers) orchestrated by Leia herself.

You and your agent can both:

• Add items to the board — a plan either of you can see and build on
• Move items through todo → doing → done
• Delegate a board item to the team — Leia routes it to the right specialist, the specialist does the work, and the result lands back on the item itself, which flips to done

Every change renders live in a 3D scene: the board's items orbit as glowing motes labeled by who added them (you or your agent), and a beam of light flows from Leia's core to whichever specialist a task gets routed to. Nothing here is decorative — the visualization is the shared state, rendered from the same event stream both the human UI and the agent's tool calls write to.

This is what makes it a strong fit for WebMCP specifically: the board is real state living on the server, not something either side re-derives or guesses at. Before WebMCP, an agent visiting a page like this could read the board by scraping the DOM at best, and could never write to it without a person doing the clicking. WebMCP is what lets the agent add, move, and delegate board items directly, through the exact same operations the human UI uses, with the exact same validation and guarantees — so an agent using this page isn't a second-class user guessing at buttons, it's a first-class collaborator working the same plan.

That's also what's newly possible here. Before this, a person and an agent working on "the same plan" usually meant one of two things: the agent works in its own head and reports back in text (no shared, inspectable state), or the person has to relay everything back and forth by hand. With Leia, a person can lay out a rough plan, an agent can pick it up mid-stream — read what's already there, see what the team is currently doing, search what happened earlier in the session — and extend it without duplicating or losing anything. The person watches it happen live, in the same board, in the same 3D scene, and can take back over at any point. Neither side is guessing what the other did.

How we built it

The frontend is Vite + TypeScript + three.js. It registers ten tools on the browser's WebMCP interface: five for the board (list_board, add_board_item, update_board_item, remove_board_item, delegate_board_item) and five for the team (delegate_task, ask_companion, list_companions, get_team_status, recall_workspace_memory). Every tool calls the same backend endpoints the human UI itself uses — there's no separate "agent path" with different rules, which is the whole point of building the board as real state instead of a chat wrapper.

Registration is defensive on purpose: I found during testing that the WebMCP preview has moved where it lives on the browser object between Chrome Canary builds (navigator.modelContext in earlier drafts, document.modelContext in some current builds), so the client checks both rather than betting on one.

The backend is Node + Express + the Anthropic API. It holds the actual board state and runs a two-tier router — a small model call decides which specialist a task belongs to by meaning, with a keyword-scoring fallback if that call fails. Every board mutation, whether it came from the human UI or an agent's tool call, broadcasts over a single Server-Sent Events stream, which is what keeps the 3D scene, the chat feed, and the board panel all showing the same reality at the same time.

Challenges we ran into

Getting the WebMCP registration right. Between the spec moving under me and Chrome's own preview builds changing where the API lives, I ended up building small, direct verification loops — checking document.modelContext vs navigator.modelContext from the actual browser console, then confirming registered tools with Chrome's built-in WebMCP DevTools panel — instead of trusting that "it should work."

Making the shared state trustworthy, not just functional. Once agent and human writes hit the same board, a few real bugs showed up that wouldn't exist in a single-user chat app: a board item could be delegated twice at once (paying for the same API call twice), an item could be deleted while a delegation was still in flight, and the activity feed once reported a mutation as successful before checking whether it actually was, so a failed edit could show up as a false success. All of these got caught by testing the actual failure paths (concurrent requests, mid-flight deletes, malformed input) rather than only the happy path, and fixed before submission.

Keeping a public demo on a real API key safe. Since this runs on a paid key anyone can reach, I locked CORS to the deployed frontend, sanitize all rendered user/agent content so injected markup can't execute, rate-limit and cap concurrency per session, and added a live token/cost readout so the actual spend is visible rather than assumed.

Accomplishments that we're proud of

The board genuinely works as shared state, not a text wrapper: a person can add an item, an agent can pick it up, delegate it, and the outcome lands back on the same item — verified end to end, including from a real agent context inside Chrome's WebMCP tooling, not just by calling the tools manually.

I also pushed past the happy path before calling it done: cross-origin requests from an unrelated domain are rejected, injected HTML in board content renders as inert text, two browser tabs on the same session stay in sync in real time, and a dropped connection recovers on its own instead of silently going stale. None of that shows up as a headline feature, but it's the difference between a demo that works once for a screenshot and one that holds up under someone actually poking at it.

What we learned

Real collaboration between a person and an agent isn't about the agent sounding smart in a chat window — it's about both sides being able to see, trust, and build on the same state. Once I stopped treating the agent's actions as "just another conversation" and started treating them as real writes to a real, shared, validated data structure, an entire category of design questions — What happens if both sides touch the same thing at once? What does the human see when the agent acts? How do you keep it honest under load? — became concrete and answerable instead of hand-wavy.

What's next for Leia

A few directions I'd want to take this further: richer board items (attachments, sub-tasks, due dates) so the shared plan can carry more of the real work instead of just titles and notes; letting a companion proactively flag when it disagrees with how a board item is set up, instead of only acting when asked; and exploring WebMCP's declarative form-based API alongside the imperative one, so parts of the page can expose tools without any JavaScript registration at all.

Built With

• css3
• dompurify
• express.js
• html5
• javascript
• jszip
• node.js
• render
• rest
• server-sent-events
• three.js
• typescript
• vercel
• vite
• webgl
• webmcp