Inspiration
Visual collaboration tools were built for people clicking through the same interface. Agents usually sit outside that room: they see a screenshot or pasted summary, but not the live board, the user's selection, the open discussion, or the latest revision.
Pinboard puts people and the agents they bring into one shared visual workspace.
What it does
Pinboard combines an Excalidraw canvas, anchored discussions, decisions, and realtime multiplayer editing. In a WebMCP-capable browser, the active board registers typed tools that let an agent read the board semantically, edit canvas elements, add diagrams near the user's focus, ask questions, reply, and record decisions.
Agent contributions are labelled Agent via <participant>. Writes require the revision the agent read and an idempotency key. If somebody changes the board first, Pinboard rejects the stale mutation instead of overwriting newer work.
Why WebMCP
The browser already has the context the agent needs: the current board, visible area, selected objects, active discussion, and latest revision. WebMCP exposes that context directly as structured tools, so the agent does not need to infer state from pixels or guess its way through the UI.
Alice and Bob can share one durable board while each person's agent works from that person's private focus. Selection and viewport never become shared presence.
How we built it
The frontend uses React 19, TypeScript, Vite, Tailwind CSS, and Excalidraw. Anonymous solo boards stay in IndexedDB.
Multiplayer runs on Cloudflare Workers. Every room maps to one SQLite-backed Durable Object that serializes canvas state, discussions, decisions, revisions, sessions, one-use WebSocket tickets, and idempotency records. Native hibernatable WebSockets carry realtime updates, while Firebase Authentication gates room creation and multiplayer sessions.
The WebMCP adapter feature-detects document.modelContext, builds its tool list from live board state, and registers tools with abortable lifecycles. Zod provides runtime validation and JSON Schema.
Challenges
The hard part was keeping human edits, agent writes, private attention, reconnects, and dynamic tools consistent under concurrency. We added revision conflicts, idempotent operations, bounded payloads, semantic pagination, capability-link protection, and deterministic failure tests.
Accomplishments
Pinboard works as a useful human canvas without WebMCP. With WebMCP enabled, an agent can understand the live board and contribute to the exact place its user means. Pinboard hosts no model and needs no model API key; participants bring their own agent.
What we learned
Agent-native UI needs stronger contracts than click automation. Tools need current context, explicit trust boundaries, bounded reads, conflict behavior, and visible provenance. WebMCP gave us the browser-level surface for that work.
What's next
The MVP deliberately omits invite revocation, roles, file uploads, audit export, and approval-gated agent actions. Those are next after the core collaboration loop.
Built With
- cloudflare-durable-objects
- cloudflare-workers
- codex
- excalidraw
- firebase-authentication
- playwright
- react
- sqlite
- typescript
- vitest
- webmcp
- websockets
- zod