draw2agent

draw2agent ✏️

ウェブサイト上に描画すると、AI エージェントがそれを確認できます。

draw2agent は、ローカルの開発ページ上に直接注釈を描画できる MCP サーバーです。送信すると、IDE エージェントはスクリーンショット、構造化された DOM データ、注釈のコンテキストを受け取り、コードを正確に編集できます。

👉 こちらからお試しください： draw2agent.vercel.app

デモ

クイックスタート

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	描画オーバーレイ付きで開発ページを開きます
launch_ipad_canvas	LAN 上でページを配信し、iPad／モバイル端末から描画するための QR コードを返します
launch_scratch	フリーハンドでスケッチできる、独立した Excalidraw ホワイトボードを開きます
get_drawing_state	現在の状態のスクリーンショット、DOM ノード、注釈を返します

launch_canvas

中核となるツールです。ローカルホストの開発サーバーをプロキシし、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 シークレットは不要です。 Trusted Publisher を一度設定してください：

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