DrawCMS

• 

  Generate with ChatGPT's in-app browser

• 

  DrawCMS Editor

• 

  Playing Steps

Inspiration

AI-made code changes are fast, but understanding their architectural and business-process impact is often not. Animated diagrams are still tedious to create by hand, and most diagram tools are inaccessible to AI agents. WebMCP changes that. We built the first browser-based diagram editor that speaks MCP natively, letting agents turn code changes into living, animated system diagrams.

What it does

DrawCMS is an open-source editor for animated technical diagrams (architecture, sequence, BPMN, etc.) built on React Flow + GSAP. It registers 8 WebMCP tools via navigator.modelContext, so an AI agent (e.g., ChatGPT agentic browsing) can build, animate, and narrate diagrams directly on the live canvas. no API keys, no servers, no simulated mouse clicks. Humans and agents co-edit the same canvas; every agent edit is one undoable Cmd+Z batch.

How we built it

Next.js 16 + React 19 + React Flow v12 for the canvas, GSAP for motion. The agent layer exposes tools like drawcms_replace_diagram, drawcms_set_motion, and drawcms_set_story through the browser's native navigator.modelContext API (with legacy fallback), backed by a visual grammar registry (~100 elements: including UML, ER, BPMN, and AWS/GCP/Azure icons) so agents know what to draw and how to animate it. Local-first storage, PNG/GIF export. the site deployed to Cloudflare worker.

Challenges we ran into

Designing tool schemas that give agents enough structure to produce good-looking animated diagrams (visual grammar + auto-layout + sensible motion defaults) while keeping edits incremental and reversible. Also handling the browser WebMCP API gracefully, non-supporting browsers just render the ordinary editor.

Accomplishments that we're proud of

A single prompt like "Build an animated diagram of a checkout request flowing through API gateway, queue, and database" makes a real animated diagram build itself before your eyes, and it runs with zero backend. Fully keyboard-accessible, 360 green tests, one-click deploy buttons for Vercel/Netlify/Render/Cloudflare.

What we learned

Exposing tools natively from the web app (WebMCP) makes agent integration almost free compared to scraping or browser extensions and the same tools double as a cleaner programmatic API for the product.

What's next for DrawCMS - Motion Diagram Canvas for AI Agent

Extend agent support to asset-based elements (generic Iconify icons, user images)

Built With

• gsap
• nextjs
• react-flow
• tailwind
• webmcp