draw2agent ✏️

在你的网站上绘图，你的AI代理能看见。

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

👉 立即体验： draw2agent.vercel.app

演示

Related MCP server: Peek

快速开始

1. 添加到你的IDE（一次性配置）

Cursor (~/.cursor/mcp.json)：

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

2. 使用它

告诉你的代理：

“使用 draw2agent 修复导航栏”

1. 🌐 代理在你的页面上打开带绘图工具浏览器

2. ✏️ 直接在网站上绘制圆圈、箭头、文字

3. 📸 点击提交

4. 🤖 代理读取视觉上下文并应用代码更改

工作原理

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

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

launch_ipad_canvas

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

launch_scratch

打开空白的Excalidraw白板——无需目标URL。从零开始绘制UI模型、线框图或图表。你的代理接收绘图并实现设计。

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 并输入：

   • Organization or user: zero-abd

   • Repository: draw2agent

   • Workflow filename: publish.yml

3. 保存。

这也满足了npm的双因素认证要求，因此即使账户启用了2FA也能正常发布。 （备选方案：创建一个具有发布权限的npm细粒度访问令牌， 将其添加为 NPM_TOKEN 仓库密钥，并在发布步骤中设置 NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}。）

许可证

MIT