{
  "markdown": "# draw2agent ✏️\n\n[![npm version](https://img.shields.io/npm/v/draw2agent)](https://www.npmjs.com/package/draw2agent)\n[![mcp-registry](https://img.shields.io/badge/mcp--registry-io.github.zero--abd%2Fdraw2agent%402.1.1-blue)](https://registry.modelcontextprotocol.io/?q=draw2agent)\n\nDraw on your website. Your AI agent sees it.\n\n**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.\n\n👉 **Try it out at:** [draw2agent.vercel.app](https://draw2agent.vercel.app)\n\n## Demo\n\n[![draw2agent demo video](https://img.youtube.com/vi/siv1ioOnOXk/maxresdefault.jpg)](https://youtu.be/siv1ioOnOXk)\n\n## Quick Start\n\n### 1. Add to your IDE (one-time)\n\n**Cursor** (`~/.cursor/mcp.json`):\n```json\n{\n  \"mcpServers\": {\n    \"draw2agent\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"draw2agent@latest\"]\n    }\n  }\n}\n```\n\n### 2. Use it\n\nTell your agent:\n> \"Use draw2agent to fix the navbar\"\n\n1. 🌐 Agent opens your browser with drawing tools on your page\n2. ✏️ Draw circles, arrows, text directly on your website\n3. 📸 Click **Submit**\n4. 🤖 Agent reads the visual context and applies code changes\n\n## How It Works\n\n```\nYour Dev Page (proxied)\n├── Your original page content\n└── Excalidraw overlay (transparent, on top)\n    ├── Draw mode: annotate directly on the page\n    ├── Select mode: interact with the page normally (Esc)\n    └── Submit: screenshot + DOM + annotations → agent\n```\n\n## Tools\n\nThe MCP server exposes the following tools:\n\n| Tool | Description |\n|---|---|\n| `launch_canvas` | Opens your dev page with the drawing overlay |\n| `launch_ipad_canvas` | Serves the page on your LAN and returns a QR code for drawing from iPad/mobile |\n| `launch_scratch` | Opens a standalone Excalidraw whiteboard for freehand sketching |\n| `get_drawing_state` | Returns screenshot, DOM nodes, and annotations for the current state |\n\n### `launch_canvas`\nThe 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.\n\n### `launch_ipad_canvas`\nSame as `launch_canvas`, but serves the proxy on your computer's local network (LAN) address. Automatically opens a new browser tab on your computer with a QR code. Scan it from your iPad or phone — connected to the **same Wi-Fi network** — to draw annotations with touch. Perfect for whiteboard-style feedback sessions. No internet tunnel required, so it's fast and reliable.\n\n### `launch_scratch`\nOpens 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.\n\n### `get_drawing_state`\nReturns the last captured drawing state (screenshot, DOM nodes, annotations) without launching a new session. Useful for re-fetching context.\n\n## Releasing\n\nPublishing to npm is automated via GitHub Actions ([`.github/workflows/publish.yml`](.github/workflows/publish.yml)).\nTo cut a release, just bump the version and push to `main`:\n\n```bash\nnpm version patch   # or minor / major — updates package.json\ngit push origin main\n```\n\nWhen `package.json`'s `version` changes on `main`, the workflow builds the\nserver + overlay and publishes the new version to npm. You can also trigger it\nmanually from the **Actions** tab (e.g. to publish the current version).\n\n### One-time setup: npm Trusted Publishing\n\nThe workflow authenticates with npm via OIDC — **no `NPM_TOKEN` secret needed**.\nConfigure the trusted publisher once:\n\n1. Go to [npmjs.com/package/draw2agent](https://www.npmjs.com/package/draw2agent) → **Settings** → **Trusted Publisher**.\n2. Choose **GitHub Actions** and enter:\n   - Organization or user: `zero-abd`\n   - Repository: `draw2agent`\n   - Workflow filename: `publish.yml`\n3. Save.\n\nThis also satisfies npm's 2FA requirement, so publishing works even with\naccount 2FA enabled. (Alternative: create an npm **Granular Access Token** with\npublish rights, add it as the `NPM_TOKEN` repo secret, and set\n`NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}` on the publish step instead.)\n\n## License\n\nMIT\n",
  "bytes": 4260,
  "sha": "0e990bb454b6c887bc30cfbb7a155300a110df97cf18b98401985900eede8476",
  "repo_slug": "zero-abd/draw2agent",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_zero_abd_draw2agent_ab4d3588/readme"
}