CO Draft WebMCP

A shared board where humans and AI agents collaborate using WebMCP.

Comment

Inspiration

The future of human-AI collaboration doesn't require separate APIs, authentication layers or complex backend services. WebMCP proves that when an agent and a human interact with the same code on the same page, magic happens, they see each other's changes in real-time, build together and trust is transparent.

What it does

Co-Draft is a shared task board where humans and AI agents collaborate in real-time. You add notes via a form (like a human), and at the exact same time, an AI agent can add, remove or list notes using WebMCP tools. Same functions. Same state. Same page. No API keys, no backend complexity, no session management, just a webpage that exposes JS functions as tools that both humans and agents can call.

How I built it

  1. Core app: Plain HTML/CSS/JavaScript, deployed to Vercel
  2. State management: Single array (cards) held in browser memory
  3. WebMCP registration: document.modelContext.registerTool() wraps the four functions (addCard, removeCard, listCards, clearBoard)
  4. UI binding: The same addCard() that the form button calls is what the agent tool invokes, one function, two callers
  5. Styling: Gradient design, responsive layout, CSS pseudo-classes for live agent-interaction feedback
  6. Deployment: Vercel for instant hosting, GitHub for version control

Challenges I ran into

  1. WebMCP browser support: Chrome 149+ has native support; older browsers need the extension. I added feature detection so the app degrades gracefully.
  2. State persistence: Browser memory clears on refresh. I decided to keep it simple for the MVP, but documented how to add Firebase/Supabase for real persistence.
  3. Testing without desktop: Building on a tablet meant we couldn't easily test the full WebMCP inspector. I solved this by verifying tools register correctly in the console, then tested the human UI thoroughly.

Accomplishments that I'm proud of

  1. Excellent documentation: Comprehensive README with API docs, extension ideas, troubleshooting and examples so others can fork and build on this.
  2. Mobile-first: Built entirely on a Samsung tablet, responsive design works on any screen size.
  3. Proof of concept: I proved that WebMCP isn't just theory, a human and an agent can truly collaborate on the same live interface with zero backend.

What I learned

  1. WebMCP is a paradigm shift: Traditional APIs separate human UI from agent access. WebMCP unifies them, the same page, same code, one state.
  2. Transparency builds trust: When an agent action updates the UI you're looking at, you don't need to check logs or JSON responses. You see it happen.
  3. Simplicity scales: I started with one function (addCard). By the end, I had four tools, beautiful styling, error handling and input validation, all because I kept the core idea simple.

What's next for CO Draft WebMCP

  1. Persistent backend: Integrate Firebase or Supabase so notes survive page refreshes and sync across devices.
  2. Rich media: Extend cards to support images, links, embeds, agents can describe what to add, humans review.

Built With

Share this project:

Updates