draw2agent ✏️

내 웹사이트에 그려보세요. 당신의 AI 에이전트가 그것을 봅니다.

draw2agent는 로컬 dev 페이지에 직접 주석을 그릴 수 있게 해주는 MCP 서버입니다. 제출하면 IDE 에이전트가 스크린샷, 구조화된 DOM 데이터, 그리고 정확한 코드 수정을 위한 주석 컨텍스트를 받습니다.

👉 지금 바로 사용해 보세요: https://draw2agent.vercel.app

데모

Related MCP server: Peek

빠른 시작

1. IDE에 추가 (일회성)

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

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

2. 사용하기

에이전트에게 말하세요:

"draw2agent를 사용해서 navbar를 수정해 줘"

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

핵심 도구입니다 — 로컬호스트 dev 서버를 프록시하고 Excalidraw 오버레이를 주입합니다. 실행 중인 앱에 직접 주석을 그린 다음 제출하면 에이전트에게 시각적 컨텍스트를 전달합니다. 이 도구는 제출할 때까지 차단됩니다.

launch_ipad_canvas

launch_canvas와 동일하지만 프록시를 컴퓨터의 로컬 네트워크(LAN) 주소로 서빙합니다. 자동으로 컴퓨터의 새 브라우저 탭을 열어 QR 코드를 표시합니다. 같은 Wi-Fi 네트워크에 연결된 iPad나 폰으로 스캔하여 터치로 주석을 그릴 수 있습니다. 화이트보드 스타일의 피드백 세션에 완벽합니다. 인터넷 터널이 필요 없으므로 빠르고 안정적입니다.

launch_scratch

대상 URL 없이 빈 Excalidraw 화이트보드를 엽니다. UI 목업, 와이어프레임, 다이어그램을 처음부터 스케치하세요. 에이전트가 그림을 받아 디자인을 구현합니다.

get_drawing_state

새 세션을 시작하지 않고 마지막으로 캡처된 드로잉 상태(스크린샷, DOM 노드, 주석)를 반환합니다. 컨텍스트를 다시 가져올 때 유용합니다.

배포

npm에 게시하는 것은 GitHub Actions (.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 Trusted Publisher

워크플로우는 OIDC를 통해 npm으로 인증합니다 — NPM_TOKEN 시크릿은 필요 없습니다. Trusted Publisher를 한 번 구성하세요:

1. npmjs.com/package/draw2agent → Settings → 당신의 Publisher 로 이동합니다.

2. GitHub Actions를 선택하고 입력하세요:

   • Organization 또는 user: zero-abd

   • Repository: draw2agent

   • Workflow filename: publish.yml

3. 저장하세요.

이것은 npm의 2FA 요구사항도 충족하므로 계정에 2FA가 활성화되어 있어도 게시할 수 있습니다. (대안: 게시 권한이 있는 npm Granular Access Token을 만들고, NPM_TOKEN 저장소 시크릿으로 추가하고, 게시 단계에 NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}을 설정하세요.)

라이선스

MIT