draw2agent 1.0.0

package/README.md

@@ -0,0 +1,53 @@
+# 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.
+
+## Quick Start
+
+### 1. Add to your IDE (one-time)
+
+**Cursor** (`~/.cursor/mcp.json`):
+```json
+{
+  "mcpServers": {
+    "draw2agent": {
+      "command": "npx",
+      "args": ["-y", "draw2agent"]
+    }
+  }
+}
+```
+
+### 2. Use it
+
+Tell your agent:
+> "Use draw2agent to fix the navbar"
+
+1. 🌐 Agent opens your browser with drawing tools on your page
+2. ✏️ Draw circles, arrows, text directly on your website
+3. 📸 Click **Submit**
+4. 🤖 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

package/bin/draw2agent.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '../dist/index.js';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }