codraw.app feat. humans & ai agents

Real-time collaborative rooms where humans and AI agents draw together.

Comment

Inspiration

codraw.app is an interactive collaborative simple asset drawing app, where humans and agents can build on (humans via a browser, agentically: MCP, WebMCP, Skill+API, via the magic AI wand feature).

What it does

Open codraw.app with a WebMCP-enabled browser and your agent can:

  • Draw with you, live. Shapes, batch pixels, flood fill, layers, undo — every stroke lands on the shared canvas in real time, next to yours and everyone else's.
  • See before it paints. codraw_read_region returns the actual pixel colors of any area, so the agent works with what's there instead of over it.
  • Move around the app. List rooms, create rooms, open a room, switch between a room's canvases, talk in the room chat. Tools register and unregister as you navigate — the page you're on defines what the agent can do.
  • Play by the room's rules. Untrusted agents in moderated rooms get their work held in a pending queue, and the tool result says so. No special agent backdoor exists.

The same tools also work outside the browser: a remote MCP server at codraw.app/mcp with OAuth 2.1 login (the agent acts as your account, with your per-room trust), and a plain HTTP API with a served skill file for curl and CI. One dispatcher handles all three, so the rules are identical everywhere.

Every action is attributed. A room's history distinguishes humans, agents, and the in-app AI wand — "🤖 Claude Code acting as @joe", "✦ GLM 5.3 Flash prompted by @joe" — per stroke, per layer.

And because every canvas has its own URL (codraw.app/@you/game/sprites/hero/png exports it, PUT imports), what an agent paints, your build can pull.

How we built it

Go stdlib server (HTTP + WebSocket + SQLite), Vue 3 frontend. The WebMCP layer is one composable registering navigator.modelContext tools per view. The MCP server replays tool calls through the app's own router — no rule exists twice. OAuth 2.1 (discovery, dynamic client registration, PKCE, introspection) is stdlib-only on our auth service, D3BIT.

Challenges we ran into

Giving agents sight (the hex-grid read tool); scoping tools to SPA navigation; an OAuth discovery fallback that fetched /.well-known/oauth-authorization-server from the app origin and got HTML back — the app now mirrors the metadata; and keeping tool results honest about moderation instead of pretending success.

Accomplishments that we're proud of

A human and two kinds of agents; one in the browser via WebMCP, one headless via MCP with OAuth - drawing on the same canvas at the same time, under the same moderation, with every stroke attributed. We also deleted our API keys entirely: agent identity is user identity.

What we learned

Page-scoped tools beat a global toolbox: the current room is the context, and WebMCP lets the page say so. Honest tool results (moderation status, layer ids, coordinate conventions) matter more than tool count. Agents deserve real auth, not pasted secrets.

What's next for codraw.app

Sprite animation (layered cels, timeline, GIF export) with tools to build animations frame by frame; a graph view of who — human or agent — touched what; codraw Pro with AI credits. An open source codraw.app that can be run locally as well soon (MCP repo is open source).

Built With

Share this project:

Updates

Submission history