Agent-HTML CLI
CLI создает холст, где ИИ-агент строит дашборды, отчеты и макеты как React-артефакты, а правки привязаны к блокам страницы
- 347 ★ репозитория
- Последний коммит
- Apache-2.0
Расширенный доступ
Почему такой уровень
- Агент пишет и запускает в локальном dev-сервере исполняемый React-код, который при просмотре работает в браузере
- Команда init создает в проекте новые файлы с правилами и ресурсами, которые агент читает как инструкции
Установка
- Работает в
Ручная установка
npm install agent-htmlСтавит пакет в проект.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент пишет и запускает в локальном dev-сервере исполняемый React-код, который при просмотре работает в браузере
- Команда init создает в проекте новые файлы с правилами и ресурсами, которые агент читает как инструкции
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Agent-HTML дает агенту место для ответов, которые не помещаются в Markdown: дашбордов, таблиц и графиков, канбан-досок, сравнений и макетов продукта. Команда npx agent-html init создает в проекте рабочее пространство agent-html с правилами, ресурсами и папкой artifacts. Агент пишет туда артефакты на React и TypeScript, а команда npx agent-html dev поднимает хост Canvas на Vite. Хост находит артефакты, рисует их, показывает диагностику проверки и накладывает управление для просмотра блоков. Пакет @agent-html/react задает протокол Artifact и Block: у каждой видимой области страницы есть стабильный адрес. Благодаря этому правку можно адресовать одному блоку: подсказка уходит агенту вместе с идентификатором блока, файлом реализации и краткой историей взаимодействия. Темы переключаются пресетами хоста, а исходники артефактов остаются на семантических токенах и классах Canvas. Правила, примеры, данные и компоненты лежат рядом с артефактами в файловой системе, поэтому контекст не пропадает вместе с чатом.
Для кого. Разработчикам и аналитикам, которые просят Claude Code или Codex собрать интерактивный отчет, дашборд или макет и хотят править его по частям.
Подходит, если
- Дорожную карту надо показать полосами по командам, а текстовый список в Markdown не передает структуру
- Отчет по данным должен содержать фильтруемые таблицы и графики, которые заказчик сможет листать
- Правка нужна только в одном блоке макета, и агенту хочется передать ее с адресом этого блока
- Вывод агента должен жить в файлах проекта и открываться после закрытия чата
- Внутренний инструмент с канбан-доской нужно набросать за один сеанс и посмотреть в браузере
Не подходит, если
- Ответ состоит из текста и кода: простой Markdown проще и не требует dev-сервера
- Нужен готовый продакшен-сайт: Canvas предназначен для артефактов и их просмотра, а не для публикации
- Лицензия нужна единая на весь код: условия различаются по пакетам, и перед использованием нужно открыть файл LICENSE в каждом пакете
- Среда без Node.js и npm, где нельзя запускать Vite
Пример запроса к агенту
Прочитай agent-html/README.md и agent-html/AGENTS.md и собери в agent-html/artifacts дашборд продаж с таблицей и графикомОграничения
- Условия лицензии различаются по пакетам: корневой LICENSE указывает Apache-2.0, но автор советует смотреть папку, которую используют.
- Репозиторий переработан: прежние приложение и рантайм вынесены в папку _archive и сохранены для справки, их использовать не стоит.
- Хост Canvas работает как локальный dev-сервер на Vite. Для просмотра артефактов нужен запущенный npx agent-html dev.
- Документация Canvas лежит в папке apps/docs репозитория, а рабочие правила для агента после init появляются в agent-html/AGENTS.md.
Как отключить. Пакет убирает команда `npm uninstall agent-html`. Рабочее пространство удаляют вместе с папкой agent-html в проекте, сохранив нужные артефакты заранее.
Частые вопросы
Как поставить Agent-HTML?
Выполните npm install agent-html, затем npx agent-html init в корне проекта и npx agent-html dev. Первая команда создает папку agent-html с правилами и артефактами, вторая запускает хост Canvas в браузере.
Что такое Artifact и Block?
Artifact — страница на React, которую пишет агент. Block — именованная область внутри нее со стабильным идентификатором. Хост показывает такие области при просмотре и может отправить агенту подсказку про один блок, а не про всю страницу.
Где хранятся результаты работы агента?
В файловой системе проекта, в папке agent-html/artifacts. Правила, примеры, данные, схемы и вспомогательные компоненты лежат рядом, поэтому следующий сеанс агента читает их заново.
Чем Agent-HTML отличается от обычного HTML-ответа?
HTML-файл остается статичным документом, а артефакт Agent-HTML проверяется хостом, получает темы и принимает адресные правки по блокам. Исходный код артефакта отделен от внутренностей хоста и привилегированных API.
С какими агентами работает Agent-HTML?
Хост не привязан к одному агенту: правила лежат в agent-html/README.md и AGENTS.md, и любой агент с доступом к файлам и терминалу, например Claude Code или Codex, читает их и пишет артефакты. Запрос из README для всех агентов одинаковый.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
CLI-инструментыЛокальный веб-интерфейс к Claude Code, Codex, OpenCode, pi, Hermes и OpenClaw: агент отвечает в чате живыми React-компонентами
Панель разметки для React-страниц: клик по элементу дает агенту селектор и контекст, скиллы настраивают подключение и сами ведут критику интерфейса
Скилл учит агента собирать чат ИИ-агента на 26 компонентах Agent Elements: карточки инструментов, ввод, стриминг
CLI, который дает агенту смотреть работающее приложение на React: дерево компонентов, props, state, hooks и профилирование рендеров
Сканер доступности для агентов и CI: рендерит страницу в Chromium с axe-core или линтит исходники React, Vue и Angular.
Офлайн-справочник по Ant Design для агента: свойства, токены, демо и журнал изменений antd версий 3–6 командами.
Коротко о README
README начинается с идеи, что Markdown ограничивает агента, и описывает Canvas как слой для богатых ответов. Далее перечислены пакеты agent-html и @agent-html/react, возможности хоста и примеры: канбан, графики, таблицы, темы. Быстрый старт состоит из трех команд. В конце даны ссылки на документацию и команды разработки.