Arguseye
Локальный рендер React, Next.js и Vue компонентов из исходников проекта: скриншоты и снимки дерева доступности для ИИ-агентов через MCP и панель в VS Code.
- Можно попробовать бесплатно
- Да
- Без регистрации
- Да
- Русский интерфейс
- Нет
- Разработчик
- Ayush Niroula
- Страна
- Непал
Arguseye рендерит компоненты фронтенда прямо из исходников проекта и отдаёт результат ИИ-агенту как доказательство правки. Вместо запуска приложения или написания stories он собирает компонент на пакетах и стилях проекта в Chromium и возвращает обрезанный PNG, снимок дерева доступности, разрешённые и неразрешённые props, отпечаток исходников, тайминги, предупреждения и ошибки. Поддерживаются React (включая React Router и Remix), Next.js, Vue 3 и Nuxt, Svelte 5 и SvelteKit, Preact и Solid; глобальные стили, Tailwind, PostCSS, Sass, CSS-модули, ассеты и провайдеры из корневого layout собираются статически. Работать можно через MCP-сервер с пятью инструментами, через CLI или через расширение VS Code, где превью открывается рядом с кодом и обновляется на несохранённых правках. После изменения снимок сравнивается с базовым: видны изменённые пиксели, размеры, различия в дереве доступности и новые ошибки.
Возможности
Рендер из исходников
Компонент собирается из файла проекта и отрисовывается в Chromium без dev-сервера, запущенного приложения и заранее написанных stories.
Пакеты и стили проекта
Используются установленные версии библиотек, глобальные стили, Tailwind v3 и v4, Sass, CSS-модули, ассеты и провайдеры из корневого layout.
Props из реальных вызовов
list_usages находит все места вызова компонента и читает литеральные значения props; render_usages отдаёт до 12 изолированных вариантов за батч.
Скриншот и дерево доступности
Агент получает обрезанный PNG, читаемый снимок доступности, разрешённые и неразрешённые входные данные, отпечаток исходников, тайминги и список ошибок.
Сравнение до и после
Успешный рендер получает captureId; render_diff возвращает изображения до и после, подсветку изменений, разницу размеров и дерева доступности.
Панель в VS Code
Превью стоит рядом с редактором, обновляется на несохранённых правках, даёт пресеты вьюпорта, ручную правку типизированных props и сравнение с базой.
MCP, CLI и агенты
Одна команда установки прописывает MCP-сервер и навык для Claude Code, Codex, Cursor, Gemini CLI, Windsurf, GitHub Copilot и Antigravity; CLI работает без MCP.
Всё локально
Рендер идёт на машине разработчика, локальный HTTP-сервер слушает 127.0.0.1, код проекта никуда не отправляется.
Кому подойдёт
- Разработчики
Чтобы после правки компонента увидеть результат в реальных стилях проекта, сравнить с базовым снимком и получить от агента проверяемые визуальные доказательства.
- Дизайнеры
Чтобы проверять вёрстку компонентов на мобильной, планшетной и десктопной ширине и видеть, где контекст приложения не воспроизвёлся.
- Менеджеры проектов и продуктов
Чтобы принимать правки интерфейса по снимкам до и после с подсветкой изменённых пикселей, не поднимая приложение.
Как начать
- Установить Node.js 22 или новее, зависимости проекта и Chromium либо Google Chrome.
- Выполнить в каталоге проекта npx @ayushniroula/arguseye install claude — команда допишет MCP-конфиг и навык для выбранного агента.
- Перезапустить агент и попросить его отрендерить нужный компонент, например src/Card.tsx.
- Сохранить полученный captureId, отредактировать компонент и запросить render_diff для сравнения.
- Для работы без агента поставить расширение VS Code, открыть компонент и вызвать Preview Component.
Тарифы
Проект распространяется по лицензии MIT, платных тарифов нет. Нужны собственная машина с Node.js 22+ и установленный Chromium.
Ограничения
- Требуются Node.js 22 или новее, установленные зависимости проекта и совместимый Chromium либо Google Chrome.
- Серверный код Next.js и Nuxt не выполняется: его API заменены заглушками, а данные приходят пустыми с предупреждением — их нужно передавать через props.
- Состояния, зависящие от бэкенда, авторизации и произвольных провайдеров, не воспроизводятся.
- Это изолированные превью компонентов, а не интеграционные тесты: успешный рендер не подтверждает корректность поведения.
- В одном батче не больше 12 вариантов использования, в сессии хранится 64 снимка, после чего старый baseline нужно снимать заново.
- Нет облачного ревью и командных дашбордов; render_diff не воспроизводит actions, storage и контекст родительских элементов.
Платформы и интеграции
Соседи по смыслу
за последний месяц