Инструмент drawgent переносит ИИ-агентов на холст Excalidraw

Представьте доску Excalidraw, на которой набросана архитектура нового лендинга или пайплайна генерации графики. Вы берёте виртуальный маркер, пишете рядом с кривым прямоугольником AGENT: переписать этот блок на чистый React и добавить анимацию появления, отпускаете клавиатуру — и через пару секунд текстовый стикер начинает пульсировать, а на холсте оживает курсор с именем 🤖 Agent. Разработчик выложил в открытый доступ drawgent — инструмент, превращающий бесконечную векторную доску в наглядный командный пункт для ИИ-ассистентов разработки Claude Code, Codex и opencode.

Под капотом проекта нет тяжелых визуальных надстроек: кодовая база на 78,7% состоит из Rust и на 16,3% из JavaScript (оставшиеся проценты делят CSS — 2,4%, Makefile — 1,1%, Nix и Dockerfile — по 0,6%, а также HTML — 0,3%). Программа поднимает локальный сервер на порту 7300 и связывает визуальные объекты со средой исполнения через протокол ACP (Agent Control Protocol). Чтобы модель понимала геометрию сцены, drawgent делает снимки экрана через скрытый Headless Chrome, передавая скриншот и координаты элементов напрямую в контекст ассистента.

Быстрый старт и подключение к терминалу

Для запуска понадобятся установленный консольный клиент выбранного помощника (claude, codex или opencode), а в случае с Claude и Codex — еще и среда Node.js версии не ниже 18 вместе с npm. Управление полностью сведено к терминальным командам:

• drawgent setup <agent> — шаг первичной настройки: утилита проверяет наличие всех системных зависимостей, генерирует файл конфигурации по адресу ~/.config/drawgent/config.toml, готовит адаптеры ACP, протоколы MCP и среду Headless Chrome.
• drawgent up — запускает локальный сервер на адресе 127.0.0.1:7300, поднимает свежую сессию выбранного ИИ-агента и сразу распахивает интерактивный холст в окне браузера.
• drawgent up --attach [id] — позволяет привязать графическую доску к процессу, который уже запущен и выполняет задачи в рабочей директории.

Интеграция с каждым ассистентом решена технически по-своему. Сессии Claude Code утилита ищет через команду claude agents --json. Поскольку прямого открытого API для вторжения в чужой активный терминал у Claude нет, drawgent подключается методом форка — создаёт независимое ответвление с полной копией истории предыдущего диалога. Ассистент opencode работает в полностью живом режиме через локальный сервер (например, при запуске с ключами opencode --port 4096 или opencode serve): инструменты подтягиваются на лету, а реплики мгновенно дублируются между терминальным интерфейсом и веб-панелью. Codex находит сессии в каталоге ~/.codex/sessions и связывается с графической сценой через команду очереди codex queue --thread <id>.

Как устроено визуальное управление

Основная работа разворачивается вокруг привычных жестов на доске. Справа находится выдвижная панель чата: через неё отправляют обычные текстовые промпты, наблюдают за потоковым выводом рассуждений модели, одобряют предлагаемые патчи кода или в любой момент жмут кнопку экстренной остановки. Но куда интереснее контекстное взаимодействие прямо на холсте.

• Текстовые метки: достаточно написать AGENT: рядом с любым блоком или соединить заметку стрелкой с нужной фигурой. Ровно через 2,5 секунды после того, как вы перестали нажимать клавиши, задача улетает ассистенту вместе со снимком окружения. Разобравшись с кодом, агент стирает вызов и оставляет на его месте аккуратную зелёную плашку DONE: с кратким отчётом.
• Лазерные зоны: по нажатию клавиши K включается стандартная лазерная указка Excalidraw. Любой обведённый или заштрихованный контур запечатывается в красную рамку, а все штрихи, нанесённые в течение 4 секунд, склеиваются в единую зону интереса. В чате тут же появляется компактный чип со списком захваченных элементов.
• Совместные сессии: если запустить инструмент с флагом --room и передать ссылку вида https://excalidraw.com/#room=<id>,<key>, агент заходит в общую комнату полноправным участником под именем 🤖 Agent. Трафик шифруется ключом комнаты, а вы видите физические движения курсора модели, когда она правит элементы.

В распоряжении агента находится целый стек MCP-инструментов (Model Context Protocol). Он умеет запрашивать сцену через get_scene, снимать скриншоты с автоматическим приближением к конкретным объектам через get_screenshot по их идентификаторам, выполнять add_elements, на лету генерировать блок-схемы через add_mermaid, а также применять команды update_elements, delete_elements, clear_canvas, list_instructions, resolve_instruction и выставлять свой текущий прогресс через set_status. Синхронизация интерфейса, доставка команд и опрос состояния системы идут через эндпоинты HTTP и WebSocket, включая проверку работоспособности сервера на /api/health и постоянный сокет /ws.

В проекте есть честные шероховатости, о которых разработчик предупреждает заранее. Для отрисовки скриншотов пока строго необходим установленный браузер Chrome (переход на нативный автономный движок рендеринга пока только в планах). Живое подключение к сессиям Codex пока не тестировалось на авторизованных платных учётных записях, а в рамках одной рабочей папки поддерживается только одна холст-сцена, которая пока не умеет синхронизировать вставленные внешние картинки или прикреплённые файлы. Проверить стабильность сборки на своей машине авторы предлагают встроенным набором тестов: cargo test, scripts/smoke.mjs, scripts/e2e-browser.mjs, scripts/room-e2e.mjs и scripts/laser-e2e.mjs.

Для арт-директоров и дизайнеров, работающих с генеративным кодом, это редкий шанс перестать переводить смыслы на язык терминала. Пропадает необходимость описывать словами взаимное расположение блоков, отступы и логические связи в текстовом окне чата: вы просто рисуете стрелку от одного компонента к другому, обводите нужный кусок виртуальным маркером и получаете готовый скрипт, не покидая привычной доски набросков. Проектирование интерфейсов и систем окончательно перестаёт быть монологом в командной строке