draw2agent 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -78
- package/dist/index.js +5 -4
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
# draw2agent ✏️
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/draw2agent)
|
|
4
|
-
[](https://registry.modelcontextprotocol.io/?q=draw2agent)
|
|
5
|
-
|
|
6
|
-
Draw on your website. Your AI agent sees it.
|
|
7
|
-
|
|
8
|
-
**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.
|
|
9
|
-
|
|
10
|
-
👉 **Try it out at:** [draw2agent.vercel.app](https://draw2agent.vercel.app)
|
|
11
|
-
|
|
12
|
-
## Demo
|
|
13
|
-
|
|
14
|
-
[](https://youtu.be/siv1ioOnOXk)
|
|
15
|
-
|
|
16
|
-
## Quick Start
|
|
17
|
-
|
|
18
|
-
### 1. Add to your IDE (one-time)
|
|
19
|
-
|
|
20
|
-
**Cursor** (`~/.cursor/mcp.json`):
|
|
21
|
-
```json
|
|
22
|
-
{
|
|
23
|
-
"mcpServers": {
|
|
24
|
-
"draw2agent": {
|
|
25
|
-
"command": "npx",
|
|
26
|
-
"args": ["-y", "draw2agent@latest"]
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
### 2. Use it
|
|
33
|
-
|
|
34
|
-
Tell your agent:
|
|
35
|
-
> "Use draw2agent to fix the navbar"
|
|
36
|
-
|
|
37
|
-
1. 🌐 Agent opens your browser with drawing tools on your page
|
|
38
|
-
2. ✏️ Draw circles, arrows, text directly on your website
|
|
39
|
-
3. 📸 Click **Submit**
|
|
40
|
-
4. 🤖 Agent reads the visual context and applies code changes
|
|
41
|
-
|
|
42
|
-
## How It Works
|
|
43
|
-
|
|
44
|
-
```
|
|
45
|
-
Your Dev Page (proxied)
|
|
46
|
-
├── Your original page content
|
|
47
|
-
└── Excalidraw overlay (transparent, on top)
|
|
48
|
-
├── Draw mode: annotate directly on the page
|
|
49
|
-
├── Select mode: interact with the page normally (Esc)
|
|
50
|
-
└── Submit: screenshot + DOM + annotations → agent
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## Tools
|
|
54
|
-
|
|
55
|
-
The MCP server exposes the following tools:
|
|
56
|
-
|
|
57
|
-
| Tool | Description |
|
|
58
|
-
|---|---|
|
|
59
|
-
| `launch_canvas` | Opens your dev page with the drawing overlay |
|
|
60
|
-
| `launch_ipad_canvas` | Creates a tunnel and returns a QR code for remote drawing from iPad/mobile |
|
|
61
|
-
| `launch_scratch` | Opens a standalone Excalidraw whiteboard for freehand sketching |
|
|
62
|
-
| `get_drawing_state` | Returns screenshot, DOM nodes, and annotations for the current state |
|
|
63
|
-
|
|
64
|
-
### `launch_canvas`
|
|
65
|
-
The core tool — proxies your localhost dev server and injects an Excalidraw overlay. Draw annotations directly on your running app, then submit to send visual context to your agent. The tool blocks until you submit.
|
|
66
|
-
|
|
67
|
-
### `launch_ipad_canvas`
|
|
68
|
-
Same as `launch_canvas`, but exposes the proxy over the internet via a secure tunnel.
|
|
69
|
-
|
|
70
|
-
### `launch_scratch`
|
|
71
|
-
Opens a blank Excalidraw whiteboard — no target URL needed. Sketch UI mockups, wireframes, or diagrams from scratch. Your agent receives the drawing and implements the design.
|
|
72
|
-
|
|
73
|
-
### `get_drawing_state`
|
|
74
|
-
Returns the last captured drawing state (screenshot, DOM nodes, annotations) without launching a new session. Useful for re-fetching context.
|
|
75
|
-
|
|
76
|
-
## License
|
|
77
|
-
|
|
78
|
-
MIT
|
|
1
|
+
# draw2agent ✏️
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/draw2agent)
|
|
4
|
+
[](https://registry.modelcontextprotocol.io/?q=draw2agent)
|
|
5
|
+
|
|
6
|
+
Draw on your website. Your AI agent sees it.
|
|
7
|
+
|
|
8
|
+
**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.
|
|
9
|
+
|
|
10
|
+
👉 **Try it out at:** [draw2agent.vercel.app](https://draw2agent.vercel.app)
|
|
11
|
+
|
|
12
|
+
## Demo
|
|
13
|
+
|
|
14
|
+
[](https://youtu.be/siv1ioOnOXk)
|
|
15
|
+
|
|
16
|
+
## Quick Start
|
|
17
|
+
|
|
18
|
+
### 1. Add to your IDE (one-time)
|
|
19
|
+
|
|
20
|
+
**Cursor** (`~/.cursor/mcp.json`):
|
|
21
|
+
```json
|
|
22
|
+
{
|
|
23
|
+
"mcpServers": {
|
|
24
|
+
"draw2agent": {
|
|
25
|
+
"command": "npx",
|
|
26
|
+
"args": ["-y", "draw2agent@latest"]
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 2. Use it
|
|
33
|
+
|
|
34
|
+
Tell your agent:
|
|
35
|
+
> "Use draw2agent to fix the navbar"
|
|
36
|
+
|
|
37
|
+
1. 🌐 Agent opens your browser with drawing tools on your page
|
|
38
|
+
2. ✏️ Draw circles, arrows, text directly on your website
|
|
39
|
+
3. 📸 Click **Submit**
|
|
40
|
+
4. 🤖 Agent reads the visual context and applies code changes
|
|
41
|
+
|
|
42
|
+
## How It Works
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
Your Dev Page (proxied)
|
|
46
|
+
├── Your original page content
|
|
47
|
+
└── Excalidraw overlay (transparent, on top)
|
|
48
|
+
├── Draw mode: annotate directly on the page
|
|
49
|
+
├── Select mode: interact with the page normally (Esc)
|
|
50
|
+
└── Submit: screenshot + DOM + annotations → agent
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Tools
|
|
54
|
+
|
|
55
|
+
The MCP server exposes the following tools:
|
|
56
|
+
|
|
57
|
+
| Tool | Description |
|
|
58
|
+
|---|---|
|
|
59
|
+
| `launch_canvas` | Opens your dev page with the drawing overlay |
|
|
60
|
+
| `launch_ipad_canvas` | Creates a tunnel and returns a QR code for remote drawing from iPad/mobile |
|
|
61
|
+
| `launch_scratch` | Opens a standalone Excalidraw whiteboard for freehand sketching |
|
|
62
|
+
| `get_drawing_state` | Returns screenshot, DOM nodes, and annotations for the current state |
|
|
63
|
+
|
|
64
|
+
### `launch_canvas`
|
|
65
|
+
The core tool — proxies your localhost dev server and injects an Excalidraw overlay. Draw annotations directly on your running app, then submit to send visual context to your agent. The tool blocks until you submit.
|
|
66
|
+
|
|
67
|
+
### `launch_ipad_canvas`
|
|
68
|
+
Same as `launch_canvas`, but exposes the proxy over the internet via a secure tunnel. Automatically opens a new browser tab on your computer with a QR code. Scan it from your iPad or phone to draw annotations with touch. Perfect for whiteboard-style feedback sessions.
|
|
69
|
+
|
|
70
|
+
### `launch_scratch`
|
|
71
|
+
Opens a blank Excalidraw whiteboard — no target URL needed. Sketch UI mockups, wireframes, or diagrams from scratch. Your agent receives the drawing and implements the design.
|
|
72
|
+
|
|
73
|
+
### `get_drawing_state`
|
|
74
|
+
Returns the last captured drawing state (screenshot, DOM nodes, annotations) without launching a new session. Useful for re-fetching context.
|
|
75
|
+
|
|
76
|
+
## License
|
|
77
|
+
|
|
78
|
+
MIT
|
package/dist/index.js
CHANGED
|
@@ -14337,10 +14337,11 @@ function createMcpServer() {
|
|
|
14337
14337
|
}
|
|
14338
14338
|
const tunnelUrl = await startTunnel(proxyPort);
|
|
14339
14339
|
const qr = await generateQR(tunnelUrl);
|
|
14340
|
-
|
|
14341
|
-
|
|
14342
|
-
|
|
14343
|
-
|
|
14340
|
+
const os = await import("os");
|
|
14341
|
+
const tempFile = path3.join(os.tmpdir(), `draw2agent-qr-${Date.now()}.html`);
|
|
14342
|
+
const html = `<!DOCTYPE html><html><body style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100px;min-height:100vh;margin:0;background:#1e1e2e;color:white;font-family:system-ui,sans-serif;"><h1>\u{1F4F1} Scan to Draw</h1><p style="margin-bottom:30px;opacity:0.8;">Scan this QR code from your iPad to start annotating remotely.</p><img src="${qr.dataUrl}" style="border-radius:12px;width:300px;height:300px;"/><p style="margin-top:30px;font-size:1.2rem;background:#ffffff10;padding:8px 16px;border-radius:8px;">${tunnelUrl}</p></body></html>`;
|
|
14343
|
+
fs3.writeFileSync(tempFile, html);
|
|
14344
|
+
await openBrowser(`file://${tempFile}`);
|
|
14344
14345
|
clearState();
|
|
14345
14346
|
const state = await waitForState();
|
|
14346
14347
|
await stopTunnel();
|