draw2agent

draw2agent ✏️

在你的网站上绘图。你的 AI Agent 可以看到。

draw2agent 是一个 MCP 服务，可让你直接在本地开发页面上绘制注释。提交后，你的 IDE Agent 会收到截图、结构化 DOM 数据和注释上下文，从而精准修改代码。

👉 立即体验： draw2agent.vercel.app

演示

快速开始

1. 添加到 IDE（一次性操作）

Cursor（~/.cursor/mcp.json）：

{
  "mcpServers": {
    "draw2agent": {
      "command": "npx",
      "args": ["-y", "draw2agent@latest"]
    }
  }
}

2. 开始使用

告诉你的 Agent：

“使用 draw2agent 修复导航栏”

1. 🌐 Agent 会打开浏览器，并在你的页面上显示绘图工具
2. ✏️ 直接在你的网站上绘制圆圈、箭头和文字
3. 📸 点击 提交
4. 🤖 Agent 会读取视觉上下文并应用代码修改

工作原理

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

工具

MCP 服务提供以下工具：

工具	描述
launch_canvas	打开带绘图覆盖层的开发页面
launch_ipad_canvas	在你的局域网中提供页面，并返回二维码，方便用 iPad／手机绘图
launch_scratch	打开独立的 Excalidraw 白板，供自由绘图
get_drawing_state	返回当前状态的截图、DOM 节点和注释

launch_canvas

核心工具——代理你的 localhost 开发服务器并注入 Excalidraw 覆盖层。直接在运行中的应用上绘制注释，然后提交，将视觉上下文发送给你的 Agent。该工具会一直等待，直到你提交。

launch_ipad_canvas

与 launch_canvas 相同，但会通过你电脑的局域网（LAN）地址提供代理服务，并在电脑上自动打开一个带二维码的新浏览器标签页。使用连接到同一 Wi-Fi 网络的 iPad 或手机扫描二维码，即可通过触控绘制注释。非常适合白板式反馈讨论。无需互联网隧道，因此速度快且稳定。

launch_scratch

打开空白的 Excalidraw 白板——无需目标 URL。可从头开始绘制 UI 模型、线框图或示意图。你的 Agent 会收到绘图并实现设计。

get_drawing_state

返回上次捕获的绘图状态（截图、DOM 节点和注释），而不会启动新会话。可用于重新获取上下文。

发布

通过 GitHub Actions 自动发布到 npm（.github/workflows/publish.yml）。 要发布新版本，只需更新版本号并推送到 main：

npm version patch   # or minor / major — updates package.json
git push origin main

当 package.json 中的 version 在 main 上发生变化时，工作流会构建服务和覆盖层，并将新版本发布到 npm。你也可以在 Actions 标签页中手动触发（例如发布当前版本）。

一次性设置：npm 可信发布

工作流通过 OIDC 向 npm 进行身份验证——无需设置 NPM_TOKEN 密钥。 只需配置一次可信发布者：

1. 前往 npmjs.com/package/draw2agent → Settings → Trusted Publisher。
2. 选择 GitHub Actions 并填写：
   • 组织或用户：zero-abd
   • 仓库：draw2agent
   • 工作流文件名：publish.yml
3. 保存。

这也满足 npm 的 2FA 要求，因此即使账户启用了 2FA，也能正常发布。（替代方案：创建具有发布权限的 npm Granular Access Token，将其添加为仓库密钥 NPM_TOKEN，并在发布步骤中设置 NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}。）

许可证

MIT