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

コアツール — localhost開発サーバーをプロキシし、Excalidrawオーバーレイを注入します。実行中のアプリに直接注釈を描画し、送信すると視覚的なコンテキストをエージェントに送信します。このツールは送信するまでブロックされます。

launch_ipad_canvas

launch_canvas と同じですが、プロキシをコンピュータのローカルネットワーク（LAN）アドレスで提供します。コンピュータ上でQRコード付きの新しいブラウザタブを自動的に開きます。同じWi-Fiネットワークに接続したiPadやスマートフォンからスキャンして、タッチで注釈を描画できます。ホワイトボード形式のフィードバックセッションに最適です。インターネットトンネルは不要なので、高速で信頼性があります。

launch_scratch

空白のExcalidrawホワイトボードを開きます — ターゲットURLは不要です。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

mainでpackage.jsonのversionが変更されると、ワークフローがサーバーとオーバーレイをビルドし、新しいバージョンをnpmに公開します。Actionsタブから手動でトリガーすることもできます（例：現在のバージョンを公開する場合）。

一度だけの設定: npm Trusted Publishing

ワークフローは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要件も満たされるため、アカウントで2FAが有効でも公開が機能します。（代替案：公開権限を持つnpm Granular Access Tokenを作成し、それをNPM_TOKENリポジトリシークレットとして追加し、公開ステップでNODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}を設定します。）

ライセンス

MIT