The latest articles on DEV Community by Shreyash Chaurasia (@shreyashchaurasia). https://dev.to/shreyashchaurasia https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3980907%2F1f4f6297-e2e8-40e3-b767-f5f9b236ba2a.jpeg https://dev.to/shreyashchaurasia en Shreyash Chaurasia Fri, 04 Sep 2026 16:21:50 +0000 https://dev.to/shreyashchaurasia/building-aetherdraw-an-agent-native-infinite-whiteboard-with-webmcp-330b https://dev.to/shreyashchaurasia/building-aetherdraw-an-agent-native-infinite-whiteboard-with-webmcp-330b <h1> Building AetherDraw: An Agent-Native Infinite Whiteboard with WebMCP </h1> <p>Visual whiteboards like Excalidraw, Miro, and FigJam are the ultimate playground for human thinking. Whenever I need to design a system architecture, trace a data pipeline, or organize a brainstorm, I immediately open a canvas. Spatial layout feels natural to humans because our brains process relationships and hierarchies through physical arrangement.</p> <p>However, for AI agents, visual whiteboards have always been a complete black box.</p> <h2> The Canvas Dilemma for AI Agents </h2> <p>Today, if you want an AI model to interact with a spatial canvas, you are usually stuck with two poor options:</p> <ol> <li> <strong>The Vision Approach:</strong> Taking screenshots, feeding them into a multimodal LLM, and hoping the model can approximate pixel coordinates. This takes several seconds per step, burns tokens, and is prone to spatial hallucinations.</li> <li> <strong>The Brittle Automation Approach:</strong> Simulating fragile mouse drag-and-drop events on raw HTML5 canvas elements. A slight change in viewport pan, zoom, or browser window size breaks the entire interaction.</li> </ol> <p>When the W3C Web Model Context Protocol (WebMCP) specification was published, the solution became obvious. Instead of forcing AI agents to squint at canvas pixels from the outside, the web application can expose its internal scene AST, geometric bounds, and layout algorithms directly to the browser runtime via <code>document.modelContext</code>.</p> <p>That is why I built AetherDraw for the DevPost WebMCP Challenge 2026.</p> <h2> What is AetherDraw? </h2> <p>AetherDraw is an open-source, agent-native infinite whiteboard. It takes the battle-tested Excalidraw canvas engine and extends it with a suite of 11 schema-typed tools organized into four functional layers:</p> <ol> <li><p><strong>Spatial Inspection:</strong> <code>get_canvas_state</code>, <code>get_selected_elements</code>, <code>find_elements</code><br> Serializes the visual scene into a structured AST. The agent receives element bounds, labels, and connection maps in single-digit milliseconds.</p></li> <li><p><strong>Algorithmic Synthesis:</strong> <code>create_diagram</code><br> Accepts high-level node and edge definitions, computes non-overlapping layout coordinates via Dagre (Sugiyama DAG), centers the title, and auto-frames the camera to fit the screen.</p></li> <li><p><strong>Fine-Grained Mutation:</strong> <code>add_elements</code>, <code>update_elements</code>, <code>delete_elements</code>, <code>connect_elements</code><br> Performs atomic edits, property changes, and smart cubic Bezier arrow routing.</p></li> <li><p><strong>Layout &amp; Theming:</strong> <code>apply_auto_layout</code>, <code>apply_theme</code>, <code>export_canvas</code><br> Reorganizes messy clusters and switches color palettes across 7 curated themes (Classic, Nordic Frost, Cyberpunk Neon, Pastel Dream, Blueprint, Minimal Dark, Solarized).</p></li> </ol> <h2> True Bi-Directional Co-Creation </h2> <p>What makes this exciting is true human-agent collaboration:</p> <ul> <li>You sketch a box with the pen tool and write "Auth Service".</li> <li>The agent calls <code>get_canvas_state</code>, detects your hand-drawn box, understands its coordinates, and uses <code>connect_elements</code> to wire it to the rest of the backend architecture.</li> <li>A smooth Bezier arrow connects the shapes in 1ms without cutting through the box or disturbing your text.</li> </ul> <h2> How the Layout and Routing Engine Works </h2> <p>Rather than having the AI model guess (x, y) coordinates, AetherDraw offloads spatial layout to deterministic graph algorithms:</p> <ul> <li> <strong>Hierarchical DAGs:</strong> Integrated Dagre computes vertex ranks and minimizes edge crossings in O(|V| + |E|) time.</li> <li> <strong>Smooth Bezier Routing:</strong> A custom routing engine calculates smooth cubic Bezier curves between shapes: <code>B(t) = (1-t)^3 P0 + 3(1-t)^2 t P1 + 3(1-t) t^2 P2 + t^3 P3, t in [0, 1]</code> </li> <li> <strong>Obstacle Avoidance:</strong> If intermediate shapes sit between source and target, the route diverts into outer gutter corridors to avoid line crossings.</li> <li> <strong>Viewport Auto-Framing:</strong> Mathematical camera fitting calculates diagram bounding boxes and applies a clamped zoom factor so the diagram fills the screen cleanly.</li> </ul> <h2> Live Telemetry &amp; Developer Inspector </h2> <p>To make WebMCP observable, AetherDraw includes a slide-out Developer Inspector that lists all registered tool schemas, streams live execution events, and displays execution duration timers down to the millisecond.</p> <h2> Links and Resources </h2> <ul> <li> <strong>Live Application:</strong> <a href="https://aetherdraw.onrender.com" rel="noopener noreferrer">https://aetherdraw.onrender.com</a> </li> <li> <strong>DevPost Project Page:</strong> <a href="https://devpost.com/software/aetherdraw" rel="noopener noreferrer">https://devpost.com/software/aetherdraw</a> </li> <li> <strong>Video Demonstration:</strong> <a href="https://youtu.be/Eb6vBb6xG7I" rel="noopener noreferrer">https://youtu.be/Eb6vBb6xG7I</a> </li> <li> <strong>GitHub Repository:</strong> <a href="https://github.com/ShreyashChaurasia/AetherDraw" rel="noopener noreferrer">https://github.com/ShreyashChaurasia/AetherDraw</a> </li> <li> <strong>WebMCP Manifest:</strong> <a href="https://aetherdraw.onrender.com/webmcp.json" rel="noopener noreferrer">https://aetherdraw.onrender.com/webmcp.json</a> </li> </ul> <p>If you are interested in WebMCP or agentic web interfaces, feel free to check out the repo and try it out!</p> ai javascript opensource webmcp