agnt

Дайте своему ИИ-агенту для написания кода суперспособности браузера.

👁 Go Version
👁 MCP
👁 npm
👁 PyPI
👁 License

Что такое agnt?

agnt — это новый тип инструментов, разработанный для эпохи разработки с помощью ИИ. Он выступает в качестве моста между вашим ИИ-агентом и браузером, расширяя возможности во время сеансов «vibe coding».

Когда вы работаете с Claude Code, Cursor или другими инструментами ИИ, agnt позволяет вашему агенту:

• Видеть то же, что и вы — скриншоты, инспекция DOM и визуальная отладка

• Слышать вас напрямую — отправка сообщений из браузера вашему агенту

• Вместе набрасывать идеи — рисование прототипов прямо на вашем интерфейсе

• Отлаживать в реальном времени — перехват ошибок, сетевого трафика и метрик производительности

• Тестировать на любом устройстве — туннелирование на телефоны и BrowserStack с полной инструментацией

• Расширять окно контекста — структурированные данные используют меньше токенов, чем ваши описания

Демонстрация

👁 Sketch Demo

Рисуйте прототипы прямо в запущенном приложении, а затем отправляйте их своему ИИ-агенту

Видение: расширение возможностей вашего агента

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

• Видеть визуальный результат своих изменений

• Знать, когда возникают ошибки JavaScript

• Понимать проблемы с версткой, с которыми вы сталкиваетесь

• Получать обратную связь, не заставляя вас печатать её вручную

agnt меняет это. Он создает двусторонний канал между вашим браузером и ИИ-агентом:

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Your Browser │ ←──► │ agnt │ ←──► │ AI Agent │
│ │ │ │ │ │
│ - See changes │ │ - Proxy traffic│ │ - Receives │
│ - Send notes │ │ - Capture errors│ │ context │
│ - Draw sketches│ │ - Inject tools │ │ - Acts on │
│ - Click to log │ │ - Route messages│ │ feedback │
└─────────────────┘ └─────────────────┘ └─────────────────┘

Быстрый старт

Установка

npm (рекомендуется):

npm install -g @standardbeagle/agnt

pip/uv:

pip install agnt
# or
uv pip install agnt

Из исходного кода:

git clone https://github.com/standardbeagle/agnt.git
cd agnt
make build && make install-local

Как MCP-сервер (Claude Code, Cursor и др.)

Добавьте в свою конфигурацию MCP:

{
 "mcpServers": {
 "agnt": {
 "command": "agnt",
 "args": ["mcp"]
 }
 }
}

Или установите как плагин для Claude Code:

/plugin marketplace add standardbeagle/agnt
/plugin install agnt@agnt

Как PTY-обертка (улучшенный терминал)

Оберните свой ИИ-инструмент для функций наложения:

agnt run claude --dangerously-skip-permissions
agnt run cursor
agnt run aider

Это добавляет меню наложения терминала (Ctrl+P) и включает мост сообщений между браузером и терминалом.

Режим канала (бета-версия — только для Claude Code)

Бета / Экспериментально: Режим канала требует форкнутого MCP SDK и флага разработки в Claude Code. Поведение и схема могут измениться.

Claude Code v2.1.80+ может получать ошибки браузера в реальном времени, диагностику и взаимодействия пользователя в качестве push-событий в контексте — без PTY-обертки. Добавьте channel { enabled true } в .agnt.kdl и запустите с помощью claude --dangerously-load-development-channels server:agnt. См. раздел «Режим канала» в CLAUDE.md для получения полной схемы, формата событий и инструмента channel_reply для отправки сообщений обратно в наложение браузера.

Основные функции

1. Суперспособности браузера

Запустите прокси, и ваш агент получит «глаза» в браузере:

proxy {action: "start", id: "app", target_url: "http://localhost:3000"}

Теперь ваш агент может:

// Take screenshots
proxy {action: "exec", id: "app", code: "__devtool.screenshot('current-state')"}

// Inspect any element
proxy {action: "exec", id: "app", code: "__devtool.inspect('#submit-button')"}

// Audit accessibility
proxy {action: "exec", id: "app", code: "__devtool.auditAccessibility()"}

// Check what the user clicked
proxy {action: "exec", id: "app", code: "__devtool.interactions.getLastClickContext()"}

2. Плавающий индикатор

Каждая проксируемая страница получает небольшую плавающую иконку жука. Нажмите на неё, чтобы:

• Отправлять сообщения напрямую вашему ИИ-агенту

• Делать скриншоты определенных областей

• Выбирать элементы для логирования их деталей

• Открыть режим эскиза для создания прототипов

Больше не нужно переключаться по Alt-Tab, чтобы описать то, что вы видите — просто нажмите и отправьте.

3. Режим эскиза (Sketch Mode)

Нажмите кнопку эскиза и рисуйте прямо на своем интерфейсе:

• Прямоугольники, круги, стрелки и рисование от руки

• Элементы прототипа: кнопки, поля ввода, стикеры

• Сохраняйте и отправляйте агенту одним кликом

Идеально подходит для того, чтобы сказать «я хочу кнопку здесь» или «эта верстка неправильная», не печатая ни слова.

4. Перехват ошибок в реальном времени

Ошибки JavaScript автоматически перехватываются и становятся доступны вашему агенту:

proxylog {proxy_id: "app", types: ["error"]}
→ {message: "TypeError: Cannot read property 'map' of undefined",
 stack: "at ProductList (products.js:42)",
 timestamp: "..."}

Ваш агент видит ошибки по мере их возникновения, а не тогда, когда вы вспоминаете о них.

5. Расширение окна контекста

Структурированные данные потребляют меньше токенов, чем описания на естественном языке:

• Сводки ошибок — proxylog {types: ["error"]} вместо «Я вижу TypeError на строке 42, который говорит...»

• Контекст клика — interactions.getLastClickContext() вместо «Я нажал на синюю кнопку в заголовке...»

• Состояние DOM — inspect('#element') вместо «там есть div с несколькими вложенными span и...»

• Консолидированные трассировки стека — предварительно обработанные стены ошибок React в виде кратких сводок

• Статус одним взглядом — структурированный JSON, который ваш агент может эффективно анализировать

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

Инструменты MCP

API браузера (50+ функций)

Прокси внедряет window.__devtool с мощными средствами диагностики:

Инспекция элементов

__devtool.inspect('#element') // Full element analysis
__devtool.getPosition('#element') // Bounding box and position
__devtool.isVisible('#element') // Visibility check

Визуальная отладка

__devtool.highlight('.items') // Highlight elements
__devtool.mutations.highlightRecent() // Show recent DOM changes
__devtool.screenshot('name') // Capture screenshot

Доступность (a11y)

__devtool.auditAccessibility() // Full a11y audit with score
__devtool.getContrast('#text') // Color contrast check
__devtool.getTabOrder() // Tab navigation order

Взаимодействия

__devtool.interactions.getLastClick() // Last click details
__devtool.interactions.getLastClickContext() // Full click context
__devtool.selectElement() // Interactive picker

Режим эскиза

__devtool.sketch.open() // Enter sketch mode
__devtool.sketch.save() // Save and send to agent
__devtool.sketch.toJSON() // Export sketch data

Конфигурация

Создайте .agnt.kdl в корне вашего проекта для автоматического запуска скриптов, прокси и настройки уведомлений браузера:

// Scripts to run via daemon process manager
scripts {
 dev {
 run "npm run dev" // Shell command (recommended)
 autostart true
 url-matchers "(Local|Network):\\s*{url}"
 }

 api {
 command "go" // Or use command + args
 args "run" "./cmd/server"
 autostart true
 env {
 GIN_MODE "debug"
 }
 cwd "./backend"
 }
}

// Reverse proxies with traffic logging
proxies {
 frontend {
 script "dev" // Link to script for URL auto-detection
 }

 backend {
 target "http://localhost:8080"
 autostart true
 max-log-size 2000
 }
}

// Browser notifications when AI responds
hooks {
 on-response {
 toast true // Show toast notification
 indicator true // Flash bug indicator
 sound false // Play notification sound
 }
}

// Toast appearance
toast {
 duration 4000
 position "bottom-right" // top-right, top-left, bottom-right, bottom-left
 max-visible 3
}

Запустите /setup-project в Claude Code для интерактивной генерации этой конфигурации.

Сопоставители URL для конкретных фреймворков:

Архитектура

agnt использует архитектуру демона для постоянного состояния:

┌─────────────────────┐ ┌─────────────────────────────────────┐
│ AI Agent │ │ agnt │
│ (Claude Code, etc.)│◄─────►│ │
│ │ MCP │ ┌────────────────┐ │
└─────────────────────┘ │ │ MCP Server │ │
 │ └───────┬────────┘ │
 │ │ socket │
 │ ▼ │
┌─────────────────────┐ │ ┌────────────────────────────────┐ │
│ Browser │◄──────┼──│ Daemon │ │
│ │ proxy │ │ ProcessManager │ ProxyManager │ │
│ __devtool API │ │ └────────────────────────────────┘ │
│ Floating Indicator │ └─────────────────────────────────────┘
│ Sketch Mode │
└─────────────────────┘

Ключевые проектные решения:

• Параллелизм без блокировок с использованием sync.Map и атомиков

• Ограниченная память с использованием кольцевых буферов

• Процессы и прокси сохраняются при отключении клиента

• Фронтенд на JavaScript без зависимостей

Документация

Полная документация →

# Run docs locally
cd docs-site
npm install && npm start

Варианты использования

• Vibe coding — оставайтесь в потоке, пока ваш агент видит всё

• Визуальная отладка — показывайте, а не рассказывайте: рисуйте эскизы того, что не так

• Мобильное тестирование — туннелируйте ваш сервер разработки для тестирования на реальных устройствах с интеграцией Cloudflare/ngrok + BrowserStack

• Тестирование доступности — автоматизированные аудиты a11y во время разработки

• Отслеживание ошибок — ловите ошибки фронтенда раньше пользователей

• Обзоры UI — аннотируйте дизайны прямо в работающем приложении

• Удаленное сотрудничество — делитесь визуальным контекстом с вашим агентом

Требования

• Node.js 18+ или Go 1.24+

• ИИ-помощник, совместимый с MCP

Миграция с devtool-mcp

agnt — это новое название для devtool-mcp. Существующие пользователи:

# npm
npm uninstall -g @standardbeagle/devtool-mcp
npm install -g @standardbeagle/agnt

# pip
pip uninstall devtool-mcp
pip install agnt

Обновите свою конфигурацию MCP, чтобы использовать команду agnt с аргументами ["mcp"].

Лицензия

MIT

Участие в разработке

Вклад приветствуется! См. документацию для получения подробной информации об архитектуре.

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?Related Servers