📦

io.github.zero-abd/draw2agent

Name: io.github.zero-abd/draw2agent
Rating: 1.9

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

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