draw2agent ✏️

Рисуйте на своём веб-сайте. Ваш ИИ-агент это увидит.

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) вашего компьютера. Автоматически открывает новую вкладку браузера с QR-кодом. Отсканируйте его с iPad или телефона — подключённых к той же Wi-Fi сети — чтобы рисовать аннотации касанием. Идеально подходит для сессий обратной связи в стиле белой доски. Не требует интернет-туннеля, поэтому работает быстро и надёжно.

launch_scratch

Открывает пустой холст Excalidraw — целевой URL не нужен. Рисуйте макеты интерфейсов, вайрфреймы или диаграммы с нуля. Ваш агент получает рисунок и реализует его.

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

Когда version в package.json меняется в ветке main, рабочий процесс собирает сервер + оверлей и публикует новую версию в npm. Вы также можете запустить его вручную из вкладки Actions (например, чтобы опубликовать текущую версию).

Одноразовая настройка: доверенная публикация в npm

Рабочий процесс аутентифицируется в npm через OIDC — секрет 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. Сохраните.

Это также удовлетворяет требованию 2FA в npm, поэтому публикация работает даже при включённой двухфакторной аутентификации. (Альтернатива: создайте Granular Access Token в npm с правами на публикацию, добавьте его как секрет репозитория NPM_TOKEN и укажите NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} в шаге публикации.)

Лицензия

MIT