draw2agent 2.0.0 → 2.0.2

package/README.md

@@ -1,61 +1,79 @@
-# draw2agent ✏️
-
-[![mcp-registry](https://img.shields.io/badge/mcp--registry-io.github.zero--abd%2Fdraw2agent%401.3.4-blue)](https://registry.modelcontextprotocol.io/?q=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](https://draw2agent.vercel.app)
-
-## Demo
-
-[![draw2agent demo video](https://img.youtube.com/vi/siv1ioOnOXk/maxresdefault.jpg)](https://youtu.be/siv1ioOnOXk)
-
-## 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
+# draw2agent ✏️
+
+[![npm version](https://img.shields.io/npm/v/draw2agent)](https://www.npmjs.com/package/draw2agent)
+[![mcp-registry](https://img.shields.io/badge/mcp--registry-io.github.zero--abd%2Fdraw2agent%402.0.0-blue)](https://registry.modelcontextprotocol.io/?q=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](https://draw2agent.vercel.app)
+
+## Demo
+
+[![draw2agent demo video](https://img.youtube.com/vi/siv1ioOnOXk/maxresdefault.jpg)](https://youtu.be/siv1ioOnOXk)
+
+## Quick Start
+
+### 1. Add to your IDE (one-time)
+
+**Cursor** (`~/.cursor/mcp.json`):
+```json
+{
+  "mcpServers": {
+    "draw2agent": {
+      "command": "npx",
+      "args": ["-y", "draw2agent@latest"]
+    }
+  }
+}
+```
+
+### 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
+```
+
+## Tools
+
+The MCP server exposes the following tools:
+
+| Tool | Description |
+|---|---|
+| `launch_canvas` | Opens your dev page with the drawing overlay |
+| `launch_ipad_canvas` | Creates a tunnel and returns a QR code for remote drawing from iPad/mobile (does not block) |
+| `wait_for_ipad_submission` | Blocks and waits for the user to submit their drawing from the iPad. Must be called after `launch_ipad_canvas`. |
+| `launch_scratch` | Opens a standalone Excalidraw whiteboard for freehand sketching |
+| `get_drawing_state` | Returns screenshot, DOM nodes, and annotations for the current state |
+
+### `launch_canvas`
+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.
+
+### `launch_ipad_canvas` & `wait_for_ipad_submission`
+Exposes the proxy over the internet via a secure tunnel. Returns a QR code image to your agent so it can be displayed in the chat. You can scan it from your iPad or phone to draw annotations with touch. `wait_for_ipad_submission` blocks and waits for the actual drawing data.
+
+### `launch_scratch`
+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.
+
+### `get_drawing_state`
+Returns the last captured drawing state (screenshot, DOM nodes, annotations) without launching a new session. Useful for re-fetching context.
+
+## License
+
+MIT

package/dist/index.js

@@ -13827,6 +13827,9 @@ function rejectState(errorMsg) {
     rejectPendingState = null;
   }
 }
+function getState() {
+  return currentState;
+}
 function clearState() {
   currentState = null;
   isSessionClosed = false;
@@ -14303,7 +14306,7 @@ function createMcpServer() {
   );
   server2.tool(
     "launch_ipad_canvas",
-    "Launch a remote drawing canvas accessible from an iPad or mobile device. Creates a tunnel to expose the local dev page over the internet and returns a QR code that the user can scan from their iPad. The user draws annotations on their device, and this tool blocks until they submit, returning the visual context. Ideal for touch-based annotation workflows.",
+    "Launch a remote drawing canvas accessible from an iPad or mobile device. Creates a tunnel and returns a QR code image to show in the chat. You MUST immediately call `wait_for_ipad_submission` right after this tool to receive the actual drawing.",
     {
       targetUrl: external_exports.string().describe("The URL of the local dev server to overlay (e.g. http://localhost:3000)"),
       port: external_exports.number().optional().describe("Port for the draw2agent proxy server (default: 9742)")
@@ -14334,11 +14337,34 @@ function createMcpServer() {
         }
         const tunnelUrl = await startTunnel(proxyPort);
         const qr = await generateQR(tunnelUrl);
-        console.error(`
-[draw2agent] \u{1F4F1} iPad Canvas Ready!`);
-        console.error(`[draw2agent] \u{1F517} Scan this QR code or open: ${tunnelUrl}`);
-        console.error(qr.ascii);
         clearState();
+        return {
+          content: [
+            {
+              type: "text",
+              text: `iPad Canvas Ready! The QR code is attached. The user needs to scan it with their iPad.
+
+IMPORTANT: You must NOW immediately call the \`wait_for_ipad_submission\` tool without asking the user. That tool will wait for them to finish drawing and return the result.`
+            },
+            {
+              type: "image",
+              data: qr.dataUrl.replace(/^data:image\/\w+;base64,/, ""),
+              mimeType: "image/png"
+            }
+          ]
+        };
+      } catch (err) {
+        await stopTunnel();
+        return handleToolError(err, "launch_ipad_canvas");
+      }
+    }
+  );
+  server2.tool(
+    "wait_for_ipad_submission",
+    "Wait for the user to submit their drawing from the iPad. Must be called immediately after `launch_ipad_canvas`.",
+    {},
+    async () => {
+      try {
         const state = await waitForState();
         await stopTunnel();
         const customInstructions = readPromptFile(
@@ -14360,7 +14386,7 @@ function createMcpServer() {
         };
       } catch (err) {
         await stopTunnel();
-        return handleToolError(err, "launch_ipad_canvas");
+        return handleToolError(err, "wait_for_ipad_submission");
       }
     }
   );
@@ -14399,6 +14425,45 @@ function createMcpServer() {
       }
     }
   );
+  server2.tool(
+    "get_drawing_state",
+    "Returns the current drawing state including screenshot, DOM nodes, and annotations. Use this to retrieve the latest captured state without launching a new canvas session. Returns an error if no state has been captured yet.",
+    {},
+    async () => {
+      const state = getState();
+      if (!state) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: "\u274C No drawing state available. The user has not submitted any drawings yet. Use `launch_canvas`, `launch_ipad_canvas`, or `launch_scratch` first."
+            }
+          ],
+          isError: true
+        };
+      }
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify({
+              timestamp: state.timestamp,
+              targetUrl: state.targetUrl,
+              viewportSize: state.viewportSize,
+              drawingBounds: state.drawingBounds,
+              domNodes: state.domNodes,
+              annotationCount: state.annotations.length
+            }, null, 2)
+          },
+          {
+            type: "image",
+            data: state.annotatedScreenshot.replace(/^data:image\/\w+;base64,/, ""),
+            mimeType: "image/png"
+          }
+        ]
+      };
+    }
+  );
   return server2;
 }