OrbitFlo.co

Inspiration

WebMCP flips the usual agent story. Instead of an agent living in a separate tab with its own copy of your data, the page itself offers tools and the agent works in your session, on your screen. Orbit Flo was already built so that every domain operation is a plain async function over an authenticated Supabase client, with row-level security as the real boundary. That made it the right app to hand to an agent: the agent could only ever do what the signed-in person could do, by construction rather than by prompt.

What it does

Orbit Flo takes software projects from idea to done: kanban boards that run Docked → Ready to Launch → Launching → In Orbit, a daily flight plan with one primary item, milestones, markdown notes with orbit: links between tasks, an inbox for stray thoughts, mind maps that autosave and convert nodes into tasks, notes or milestones, and shared workspaces with link invitations, roles and assignment. All of it inside a live WebGL galaxy.

Through WebMCP it registers thirteen tools with document.modelContext, so a browser-hosted agent can read today's plan, capture thoughts, file them as tasks, move cards, add work to the plan, write notes, add milestones and search the workspace. Each mutating tool invalidates the right queries, so the human watches the agent's work land on the board live.

How we built it

React 19, TypeScript, Vite and Tailwind on the front; Supabase (Postgres, auth, row-level security) behind it; TanStack Query owns server state. The WebMCP layer is one module, src/features/agent/agent-tools.ts, that wraps the existing domain functions: each tool validates its input, calls the same function the UI calls with the same client, and ends with a query invalidation. Registration is feature-detected and scoped to an AbortController, so a browser without WebMCP runs the app unchanged and switching workspaces re-registers the tools against the workspace on screen.

The privilege model is machine-verified: CI replays every migration onto a fresh Postgres and runs catalog assertions over grants and policies on every pull request, so a tool can never exceed what the database allows.

Challenges we ran into

• No browser on the development machine exposed document.modelContext, so the tool layer was built against the specification and a recorded fake, with the absent-API path tested first. The first real integration run happened days before the deadline.
• Making the agent's work visible instantly meant auditing which query keys every mutation touches; the demo moment depends on it.
• Autosave for mind maps surfaced a latent server bug: the graph-replace RPC dropped conversion links on every save. It shipped with a migration that snapshots them first.

Accomplishments that we're proud of

• The agent and the person share one workspace, one session and one screen, and the board updates as the agent talks.
• Nothing destructive is exposed: no deletes, no member or role management, and a test pins the tool list so a fourteenth tool is a failing build.
• The whole thing is open source, including the schema and the CI that guards its privilege model.

What we learned

Agent tooling is cheapest when the app already has clean, client-scoped domain functions and a real authorization boundary underneath them. The tool layer then becomes wiring plus validation, and the security story is the same one the UI already tells.

What's next

Streaming page context to the agent (provideContext), tools for maps and the crew (assign, mention), and a guest mode so judges and visitors can try the agent without shared credentials.

Built With

• playwright
• postgresql
• react
• react-flow
• supabase
• tailwind
• tanstack-query
• typescript
• vercel
• vite
• webmcp