draw2agent 1.3.3 → 2.0.0

package/README.md

@@ -1,9 +1,17 @@
 # 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)

package/dist/index.js

@@ -778,10 +778,10 @@ function mergeDefs(...defs) {
 function cloneDef(schema) {
   return mergeDefs(schema._zod.def);
 }
-function getElementAtPath(obj, path3) {
-  if (!path3)
+function getElementAtPath(obj, path4) {
+  if (!path4)
     return obj;
-  return path3.reduce((acc, key) => acc?.[key], obj);
+  return path4.reduce((acc, key) => acc?.[key], obj);
 }
 function promiseAllObject(promisesObj) {
   const keys = Object.keys(promisesObj);
@@ -1164,11 +1164,11 @@ function aborted(x, startIndex = 0) {
   }
   return false;
 }
-function prefixIssues(path3, issues) {
+function prefixIssues(path4, issues) {
   return issues.map((iss) => {
     var _a2;
     (_a2 = iss).path ?? (_a2.path = []);
-    iss.path.unshift(path3);
+    iss.path.unshift(path4);
     return iss;
   });
 }
@@ -1351,7 +1351,7 @@ function formatError(error48, mapper = (issue2) => issue2.message) {
 }
 function treeifyError(error48, mapper = (issue2) => issue2.message) {
   const result = { errors: [] };
-  const processError = (error49, path3 = []) => {
+  const processError = (error49, path4 = []) => {
     var _a2, _b;
     for (const issue2 of error49.issues) {
       if (issue2.code === "invalid_union" && issue2.errors.length) {
@@ -1361,7 +1361,7 @@ function treeifyError(error48, mapper = (issue2) => issue2.message) {
       } else if (issue2.code === "invalid_element") {
         processError({ issues: issue2.issues }, issue2.path);
       } else {
-        const fullpath = [...path3, ...issue2.path];
+        const fullpath = [...path4, ...issue2.path];
         if (fullpath.length === 0) {
           result.errors.push(mapper(issue2));
           continue;
@@ -1393,8 +1393,8 @@ function treeifyError(error48, mapper = (issue2) => issue2.message) {
 }
 function toDotPath(_path) {
   const segs = [];
-  const path3 = _path.map((seg) => typeof seg === "object" ? seg.key : seg);
-  for (const seg of path3) {
+  const path4 = _path.map((seg) => typeof seg === "object" ? seg.key : seg);
+  for (const seg of path4) {
     if (typeof seg === "number")
       segs.push(`[${seg}]`);
     else if (typeof seg === "symbol")
@@ -13371,13 +13371,13 @@ function resolveRef(ref, ctx) {
   if (!ref.startsWith("#")) {
     throw new Error("External $ref is not supported, only local refs (#/...) are allowed");
   }
-  const path3 = ref.slice(1).split("/").filter(Boolean);
-  if (path3.length === 0) {
+  const path4 = ref.slice(1).split("/").filter(Boolean);
+  if (path4.length === 0) {
     return ctx.rootSchema;
   }
   const defsKey = ctx.version === "draft-2020-12" ? "$defs" : "definitions";
-  if (path3[0] === defsKey) {
-    const key = path3[1];
+  if (path4[0] === defsKey) {
+    const key = path4[1];
     if (!key || !ctx.defs[key]) {
       throw new Error(`Reference not found: ${ref}`);
     }
@@ -13992,6 +13992,203 @@ function stopHttpServer() {
   }
 }
 
+// src/scratch-server.ts
+import http2 from "http";
+import fs2 from "fs";
+import path2 from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+var __dirname2 = path2.dirname(fileURLToPath2(import.meta.url));
+var OVERLAY_DIR2 = path2.resolve(__dirname2, "..", "overlay", "dist");
+var D2A_PREFIX2 = "/__d2a__";
+var MIME_TYPES2 = {
+  ".js": "application/javascript",
+  ".css": "text/css",
+  ".html": "text/html",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".woff2": "font/woff2",
+  ".woff": "font/woff",
+  ".ttf": "font/ttf"
+};
+var scratchServer = null;
+function getScratchHTML() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>draw2agent \u2014 Scratch Whiteboard</title>
+  <link rel="stylesheet" href="${D2A_PREFIX2}/draw2agent-overlay.css">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; overflow: hidden; background: #1e1e2e; }
+    /* In scratch mode, make the Excalidraw canvas fill the entire page with a visible background */
+    #draw2agent-root {
+      position: fixed !important;
+      inset: 0 !important;
+      z-index: 1 !important;
+    }
+    #draw2agent-root .d2a-canvas-container {
+      pointer-events: all !important;
+      position: fixed !important;
+      inset: 0 !important;
+      z-index: 1 !important;
+    }
+    /* Show a background for the Excalidraw canvas in scratch mode */
+    #draw2agent-root .excalidraw {
+      --ui-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+    /* Override transparent background for scratch mode */
+    #draw2agent-root .excalidraw .excalidraw__canvas {
+      background: #1e1e2e !important;
+    }
+  </style>
+</head>
+<body data-d2a-mode="scratch">
+  <script src="${D2A_PREFIX2}/draw2agent-overlay.js"></script>
+</body>
+</html>`;
+}
+function startScratchServer(port) {
+  return new Promise((resolve, reject) => {
+    if (scratchServer) {
+      resolve(`http://localhost:${port}`);
+      return;
+    }
+    scratchServer = http2.createServer((req, res) => {
+      const url2 = req.url || "/";
+      if (req.method === "OPTIONS") {
+        res.writeHead(204, {
+          "Access-Control-Allow-Origin": "*",
+          "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+          "Access-Control-Allow-Headers": "Content-Type"
+        });
+        res.end();
+        return;
+      }
+      if (url2 === `${D2A_PREFIX2}/capture` && req.method === "POST") {
+        let body = "";
+        req.on("data", (chunk) => body += chunk);
+        req.on("end", () => {
+          try {
+            const payload = JSON.parse(body);
+            payload.timestamp = (/* @__PURE__ */ new Date()).toISOString();
+            payload.targetUrl = "scratch://whiteboard";
+            setState(payload);
+            res.writeHead(200, {
+              "Content-Type": "application/json",
+              "Access-Control-Allow-Origin": "*"
+            });
+            res.end(JSON.stringify({ success: true }));
+            console.error("[draw2agent] \u2705 Scratch state captured successfully");
+          } catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            console.error("[draw2agent] \u274C Scratch capture error:", msg);
+            rejectState(`Failed to parse capture payload: ${msg}`);
+            res.writeHead(400, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: "Invalid JSON payload" }));
+          }
+        });
+        return;
+      }
+      if (url2 === `${D2A_PREFIX2}/close` && req.method === "POST") {
+        rejectState("User closed the draw2agent session.");
+        res.writeHead(200, {
+          "Content-Type": "application/json",
+          "Access-Control-Allow-Origin": "*"
+        });
+        res.end(JSON.stringify({ success: true }));
+        console.error("[draw2agent] \u{1F6D1} Scratch session closed by user");
+        return;
+      }
+      if (url2.startsWith(D2A_PREFIX2 + "/")) {
+        const filePath = path2.join(OVERLAY_DIR2, url2.slice(D2A_PREFIX2.length));
+        const ext = path2.extname(filePath);
+        const mime = MIME_TYPES2[ext] || "application/octet-stream";
+        fs2.readFile(filePath, (err, data) => {
+          if (err) {
+            res.writeHead(404, { "Content-Type": "text/plain" });
+            res.end("Not found");
+            return;
+          }
+          res.writeHead(200, {
+            "Content-Type": mime,
+            "Access-Control-Allow-Origin": "*",
+            "Cache-Control": "no-cache"
+          });
+          res.end(data);
+        });
+        return;
+      }
+      if (url2 === "/" || url2 === "/index.html") {
+        const html = getScratchHTML();
+        res.writeHead(200, {
+          "Content-Type": "text/html",
+          "Cache-Control": "no-cache"
+        });
+        res.end(html);
+        return;
+      }
+      res.writeHead(404, { "Content-Type": "text/plain" });
+      res.end("Not found");
+    });
+    scratchServer.listen(port, () => {
+      const url2 = `http://localhost:${port}`;
+      console.error(`[draw2agent] \u{1F3A8} Scratch whiteboard at ${url2}`);
+      resolve(url2);
+    });
+    scratchServer.on("error", (err) => {
+      reject(err);
+    });
+  });
+}
+function stopScratchServer() {
+  if (scratchServer) {
+    scratchServer.close();
+    scratchServer = null;
+  }
+}
+
+// src/tunnel.ts
+import localtunnel from "localtunnel";
+var activeTunnel = null;
+async function startTunnel(localPort) {
+  await stopTunnel();
+  const tunnel = await localtunnel({ port: localPort });
+  tunnel.on("close", () => {
+    console.error("[draw2agent] \u{1F50C} Tunnel closed");
+    activeTunnel = null;
+  });
+  tunnel.on("error", (err) => {
+    console.error("[draw2agent] Tunnel error:", err.message);
+  });
+  activeTunnel = tunnel;
+  console.error(`[draw2agent] \u{1F310} Tunnel opened: ${tunnel.url}`);
+  return tunnel.url;
+}
+async function stopTunnel() {
+  if (activeTunnel) {
+    activeTunnel.close();
+    activeTunnel = null;
+  }
+}
+
+// src/utils/qrcode.ts
+import QRCode from "qrcode";
+async function generateQR(url2) {
+  const [dataUrl, ascii] = await Promise.all([
+    QRCode.toDataURL(url2, {
+      type: "image/png",
+      width: 400,
+      margin: 2,
+      color: { dark: "#000000", light: "#ffffff" }
+    }),
+    QRCode.toString(url2, { type: "terminal", small: true })
+  ]);
+  return { dataUrl, ascii };
+}
+
 // src/utils/browser.ts
 import open from "open";
 async function openBrowser(url2) {
@@ -13999,14 +14196,50 @@ async function openBrowser(url2) {
 }
 
 // src/mcp-server.ts
-import fs2 from "fs";
-import path2 from "path";
-import { fileURLToPath as fileURLToPath2 } from "url";
-var __dirname2 = path2.dirname(fileURLToPath2(import.meta.url));
-var INSTRUCTIONS_PATH = path2.resolve(__dirname2, "..", "prompts", "agent-instructions.txt");
-var ERROR_INSTRUCTIONS_PATH = path2.resolve(__dirname2, "..", "prompts", "agent-error-instructions.txt");
-var CLOSE_INSTRUCTIONS_PATH = path2.resolve(__dirname2, "..", "prompts", "agent-close-instructions.txt");
+import fs3 from "fs";
+import path3 from "path";
+import { fileURLToPath as fileURLToPath3 } from "url";
+var __dirname3 = path3.dirname(fileURLToPath3(import.meta.url));
+var INSTRUCTIONS_PATH = path3.resolve(__dirname3, "..", "prompts", "agent-instructions.txt");
+var ERROR_INSTRUCTIONS_PATH = path3.resolve(__dirname3, "..", "prompts", "agent-error-instructions.txt");
+var CLOSE_INSTRUCTIONS_PATH = path3.resolve(__dirname3, "..", "prompts", "agent-close-instructions.txt");
+var IPAD_INSTRUCTIONS_PATH = path3.resolve(__dirname3, "..", "prompts", "agent-ipad-instructions.txt");
+var SCRATCH_INSTRUCTIONS_PATH = path3.resolve(__dirname3, "..", "prompts", "agent-scratch-instructions.txt");
 var DEFAULT_PORT = 9742;
+var DEFAULT_SCRATCH_PORT = 9743;
+function readPromptFile(filePath, fallback) {
+  try {
+    if (fs3.existsSync(filePath)) {
+      return fs3.readFileSync(filePath, "utf-8");
+    }
+  } catch (e) {
+    console.error(`[draw2agent] Failed to read ${path3.basename(filePath)}, using default.`, e);
+  }
+  return fallback;
+}
+function handleToolError(err, toolName) {
+  const message = err instanceof Error ? err.message : String(err);
+  let customInstructions = `\u274C Failed to capture canvas: ${message}`;
+  let isErrorResult = true;
+  if (message.includes("User closed the draw2agent session")) {
+    customInstructions = readPromptFile(
+      CLOSE_INSTRUCTIONS_PATH,
+      "The user closed the draw2agent session. Please summarize the changes you made."
+    );
+    customInstructions = customInstructions.replace(/launch_canvas/g, toolName);
+    isErrorResult = false;
+    stopHttpServer();
+    stopScratchServer();
+    stopTunnel();
+    clearProxyInfo();
+  } else {
+    customInstructions = readPromptFile(ERROR_INSTRUCTIONS_PATH, customInstructions).replace("{{ERROR_MESSAGE}}", message);
+  }
+  return {
+    content: [{ type: "text", text: customInstructions }],
+    isError: isErrorResult
+  };
+}
 function createMcpServer() {
   const server2 = new McpServer({
     name: "draw2agent",
@@ -14046,15 +14279,10 @@ function createMcpServer() {
         }
         clearState();
         const state = await waitForState();
-        let instructionsUrl = "";
-        let customInstructions = "Analyze the attached screenshot with user annotations and implement the requested UI changes in the codebase.";
-        try {
-          if (fs2.existsSync(INSTRUCTIONS_PATH)) {
-            customInstructions = fs2.readFileSync(INSTRUCTIONS_PATH, "utf-8");
-          }
-        } catch (e) {
-          console.error("[draw2agent] Failed to read agent-instructions.txt, using default.", e);
-        }
+        const customInstructions = readPromptFile(
+          INSTRUCTIONS_PATH,
+          "Analyze the attached screenshot with user annotations and implement the requested UI changes in the codebase."
+        );
         return {
           content: [
             {
@@ -14069,36 +14297,105 @@ function createMcpServer() {
           ]
         };
       } catch (err) {
-        const message = err instanceof Error ? err.message : String(err);
-        let customInstructions = `\u274C Failed to capture canvas: ${message}`;
-        let isErrorResult = true;
+        return handleToolError(err, "launch_canvas");
+      }
+    }
+  );
+  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.",
+    {
+      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)")
+    },
+    async ({ targetUrl, port }) => {
+      const proxyPort = port ?? DEFAULT_PORT;
+      try {
         try {
-          if (message.includes("User closed the draw2agent session")) {
-            if (fs2.existsSync(CLOSE_INSTRUCTIONS_PATH)) {
-              customInstructions = fs2.readFileSync(CLOSE_INSTRUCTIONS_PATH, "utf-8");
-            } else {
-              customInstructions = "The user closed the draw2agent session. Please summarize the changes you made.";
-            }
-            isErrorResult = false;
-            stopHttpServer();
-            clearProxyInfo();
-          } else {
-            if (fs2.existsSync(ERROR_INSTRUCTIONS_PATH)) {
-              customInstructions = fs2.readFileSync(ERROR_INSTRUCTIONS_PATH, "utf-8").replace("{{ERROR_MESSAGE}}", message);
-            }
+          const checkUrl = targetUrl.replace("://localhost", "://127.0.0.1");
+          await fetch(checkUrl);
+        } catch (err) {
+          if (err.cause?.code === "ECONNREFUSED") {
+            return {
+              content: [
+                {
+                  type: "text",
+                  text: `\u274C Connection refused to ${targetUrl}. There is no dev server running on that port. Please ask the user to confirm the correct local server URL.`
+                }
+              ],
+              isError: true
+            };
           }
-        } catch (e) {
-          console.error("[draw2agent] Failed to read fallback instructions.", e);
         }
+        const proxyInfo2 = getProxyInfo();
+        if (!proxyInfo2.running) {
+          const proxyUrl = await startHttpServer(targetUrl, proxyPort);
+          setProxyInfo(proxyUrl);
+        }
+        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();
+        const state = await waitForState();
+        await stopTunnel();
+        const customInstructions = readPromptFile(
+          IPAD_INSTRUCTIONS_PATH,
+          "Analyze the attached screenshot with user annotations and implement the requested UI changes in the codebase."
+        );
+        return {
+          content: [
+            {
+              type: "text",
+              text: customInstructions
+            },
+            {
+              type: "image",
+              data: state.annotatedScreenshot.replace(/^data:image\/\w+;base64,/, ""),
+              mimeType: "image/png"
+            }
+          ]
+        };
+      } catch (err) {
+        await stopTunnel();
+        return handleToolError(err, "launch_ipad_canvas");
+      }
+    }
+  );
+  server2.tool(
+    "launch_scratch",
+    "Open a standalone whiteboard for freehand drawing and sketching. No target URL needed \u2014 the user gets a blank Excalidraw canvas to sketch UI mockups, wireframes, or diagrams. The agent receives the drawing as visual context. This tool blocks until the user submits their sketch.",
+    {
+      port: external_exports.number().optional().describe("Port for the scratch whiteboard server (default: 9743)")
+    },
+    async ({ port }) => {
+      const scratchPort = port ?? DEFAULT_SCRATCH_PORT;
+      try {
+        const scratchUrl = await startScratchServer(scratchPort);
+        await openBrowser(scratchUrl);
+        clearState();
+        const state = await waitForState();
+        const customInstructions = readPromptFile(
+          SCRATCH_INSTRUCTIONS_PATH,
+          "The user has drawn a freehand sketch. Analyze it and implement the design."
+        );
         return {
           content: [
             {
               type: "text",
               text: customInstructions
+            },
+            {
+              type: "image",
+              data: state.annotatedScreenshot.replace(/^data:image\/\w+;base64,/, ""),
+              mimeType: "image/png"
             }
-          ],
-          isError: isErrorResult
+          ]
         };
+      } catch (err) {
+        return handleToolError(err, "launch_scratch");
       }
     }
   );