← На главную

Agent Draw: рисует на tldraw по голосу — код под MIT, SDK проприетарный

06.07.2026 14:50 · hackernews

Разработчики из студии, сделавшей игру 2draw на базе tldraw, пошли дальше и встроили в неё AI-агента. Получился инструмент Agent Draw: пока вы ведёте презентацию, агент рисует за вас на холсте. Достаточно выделить прямоугольник на бесконечном холсте tldraw и сказать, что там должно быть — к тому моменту, как вы отведёте взгляд, рисунок уже готов. Можно набросать несколько областей подряд, они встанут в очередь и отрисуются по очереди.

В основе — официальный Agent starter kit от tldraw. Это заготовка, где агент уже умеет создавать и двигать фигуры через чат, работает на Cloudflare Worker. Авторы надстроили поверх неё голосовой пайплайн и систему очередей.

Тестировали модели на двух запросах: «нарисуй диаграмму принятия решений» и «нарисуй человека, играющего в крикет». claude-opus-4.8 справился отлично с обоими: аккуратная диаграмма из примитивов и полноценная сцена с игроком, нарисованная пером. claude-haiku-4.5 нарисовал хорошую диаграмму, но для крикета остался в рамках примитивов и подписи — никакого динамичного рисунка. google/gemini-2.5-flash-lite просто бросил оба задания почти в самом начале.

Технически всё собрано из нескольких частей. Кастомный инструмент AreaCaptureTool перехватывает прямоугольник выделения через редактор tldraw, тот же механизм, что у штатного лассо. Как только выделение завершено, открывается микрофон — AreaRecorder обёртка над браузерным MediaRecorder. Аудио уходит на Cloudflare Worker, который отправляет его на транскрипцию в Mistral's Voxtral и возвращает текст.

Очередь работает через модульный конечный автомат: если вы начали новое выделение, старое автоматически останавливается и попадает в FIFO-очередь. Обработчик разбирает сессии по одной: транскрипция → отрисовка. Именно сериализация решает проблему, когда два захвата бились друг с другом на холсте. Вместо потокового распознавания сделали дискретную модель «захватил → сказал → рисует».

Для агента используют agent.prompt, который крутится, пока модель не доделает всё сама, а не делает один шаг и останавливается. Из рабочего режима выкинули два действия, которые добавляли лишние вызовы модели: setMyView (бессмысленно прыгает камерой) и review (проверка на наложения). Это сократило число обращений примерно вдвое — правка заняла две строки в AgentModeDefinitions.ts.

Последний штрих — специальный блок в системном промпте, который запрещает модели тупо печатать услышанный текст на холсте. Вместо этого агент разбирает запрос и выбирает визуальную форму: нарисовать объект, схему с подписями, диаграмму со стрелками или график. Если непонятно — просто рисует что-то, не зависая в уточнениях. Весь инструмент регистрируется через стандартные оверрайды tldraw, получает свою иконку в панели и хоткей «A».

Код Agent Draw распространяется под MIT, как и стартовый набор. Но сам SDK tldraw — проприетарный: для публичного развёртывания нужна лицензия, для некоммерческих проектов — бесплатная hobby-лицензия.

Читать оригинал →