Draw on your app.Ship changes instantly.
Draw and annotate changes directly on top of your localhost website. Your coding agent sees your sketches and implements the changes in real-time — making web development faster than ever.
Add to your workspace
Set up draw2agent in your favorite coding environment in under a minute.
Option 2: Manual Configuration
Add to .cursor/mcp.json:
{
"mcpServers": {
"draw2agent": {
"command": "npx",
"args": ["-y", "draw2agent@latest"]
}
}
}Why draw2agent?
Supercharge your development workflow by bridging the gap between visual intent and code.
Draw Directly on Your App
Open an overlay on your running localhost app. Sketch UI changes, draw arrows, circle elements — your coding agent sees it all.
Real-Time Code Changes
Your annotations are instantly sent to your coding agent via MCP. Watch as your drawn changes become actual code in seconds.
Works With Any Framework
React, Next.js, Vue, Svelte, plain HTML — if it runs on localhost, draw2agent works with it. Zero config required.
Multi-Agent Compatible
Works seamlessly with Cursor, Antigravity, Claude Code, and other MCP-compatible coding agents and IDEs.
Annotate & Describe
Add text labels, arrows, and notes alongside your drawings. Give your agent precise context for pixel-perfect implementation.
Faster Iteration Loops
Skip the back-and-forth of describing UI changes in text. Draw what you want, get it built — 10x faster development cycles.
How It Works
Three simple steps to transform your development workflow.
Install & Connect
Add draw2agent as an MCP server to your favorite coding IDE or agent. One command, zero configuration.
Draw Your Changes
Open the drawing overlay on your running localhost app. Sketch, annotate, and mark exactly what you want changed.
Watch It Build
Your agent receives the annotations via MCP and implements the changes in real-time. See your code update live.