Canvas Skill

• Вы хотите, чтобы ИИ-агент отправлял сгенерированную HTML-страницу (дашборд, игру, визуализацию) на ваш Mac, iPhone или Android-устройство в реальном времени.
• Вы создаёте прототип интерактивного HTML-контента и вам нужна живая перезагрузка — сохраните файл, и подключённый холст обновится автоматически.
• Вам нужно, чтобы агент удалённо выполнял JavaScript внутри работающего WebView (например, обновлял данные графика без полной перезагрузки).
• Вы хотите захватить скриншот отрендеренного содержимого холста из рабочего процесса агента.

• Вы не используете узлы OpenClaw — этот навык предназначен исключительно для экосистемы OpenClaw Mac/iOS/Android.
• Вам нужно публиковать контент публично или для пиров, не использующих Tailscale; сервер предназначен только для локального доступа/LAN/Tailscale.
• Вы хотите встроить полноценный браузер или отображать произвольные внешние URL — хост канваса обслуживает только файлы из настроенного локального корневого каталога.

Пять отдельных действий — present, hide, navigate, eval и snapshot — дают агентам точный контроль над тем, что отображается на узле. Откройте URL-адрес, замените содержимое с помощью navigate, выполните JavaScript без перезагрузки страницы или сделайте снимок экрана — всё это в рамках одного навыка.

Когда liveReload: true (значение по умолчанию), хост canvas отслеживает корневой каталог через chokidar и внедряет WebSocket-клиент в HTML-файлы. Сохранение любого файла мгновенно обновляет подключённые canvas-холсты, что делает итеративную генерацию HTML быстрой и удобной.

HTTP-сервер может привязываться к loopback-интерфейсу, LAN-интерфейсу, интерфейсу Tailscale или выбирать режим автоматически. Правильное имя хоста автоматически передаётся узлам через мост, поэтому контент загружается корректно независимо от сетевой топологии.

Действие eval позволяет агентам выполнять произвольный JavaScript внутри активного WebView холста. Это обеспечивает динамическое обновление — передачу новых данных в диаграмму, запуск анимаций или чтение состояния DOM — без перехода на новую страницу.

Действие snapshot захватывает скриншот текущего холста на указанном узле и возвращает его агенту, обеспечивая визуальный осмотр или журналирование отрисованного содержимого.

Агент генерирует HTML-панель мониторинга, суммирующую данные (например, показатели продаж, системную статистику), и записывает её в ~/clawd/canvas/dashboard.html. Затем он вызывает canvas action:present, указывая на узел вашего Mac, и панель мониторинга немедленно появляется в представлении Canvas Skill.

Поместите самодостаточную HTML5-игру в корень холста, а затем попросите агента отобразить её на подключённом узле iPhone. Впоследствии агент может вызвать hide или переключиться на другое демо без каких-либо ручных действий на устройстве.

Отобразите страницу с графиком один раз, затем используйте повторяющиеся действия eval для добавления новых точек данных в активный контекст JavaScript. График обновляется в реальном времени без перезагрузки страницы — удобно для мониторинга или вывода результатов агента в режиме реального времени.

В процессе разработки держите холст открытым на подключённом узле и редактируйте HTML-файлы в корне холста. Каждое сохранение запускает автоматическую перезагрузку, обеспечивая мгновенную визуальную обратную связь без необходимости вручную обновлять страницу или повторно выполнять команды.