π¦
io.github.zero-abd/draw2agent
Draw on your website, let your AI agent see it. Visual context for code generation via MCP.
0 installs
Trust: 37 β Low
Devtools
Ask AI about io.github.zero-abd/draw2agent
Powered by Claude Β· Grounded in docs
I know everything about io.github.zero-abd/draw2agent. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Loading tools...
Reviews
Documentation
draw2agent βοΈ
Draw on your website. Your AI agent sees it.
draw2agent is an MCP server that lets you draw annotations directly on top of your local dev page. When you submit, your IDE agent receives a screenshot, structured DOM data, and annotation context to make precise code edits.
π Try it out at: draw2agent.vercel.app
Demo
Quick Start
1. Add to your IDE (one-time)
Cursor (~/.cursor/mcp.json):
{
"mcpServers": {
"draw2agent": {
"command": "npx",
"args": ["-y", "draw2agent"]
}
}
}
2. Use it
Tell your agent:
"Use draw2agent to fix the navbar"
- π Agent opens your browser with drawing tools on your page
- βοΈ Draw circles, arrows, text directly on your website
- πΈ Click Submit
- π€ Agent reads the visual context and applies code changes
How It Works
Your Dev Page (proxied)
βββ Your original page content
βββ Excalidraw overlay (transparent, on top)
βββ Draw mode: annotate directly on the page
βββ Select mode: interact with the page normally (Esc)
βββ Submit: screenshot + DOM + annotations β agent
The MCP server exposes two tools:
| Tool | Description |
|---|---|
launch_canvas | Opens your dev page with the drawing overlay |
get_drawing_state | Returns screenshot, DOM nodes, and annotations |
License
MIT

