BrowserTools MCP
Мониторит браузерные логи напрямую из IDE вроде Cursor для AI-инструментов, захватывая данные и проводя аудиты страниц.
Описание
BrowserTools — мощный инструмент для мониторинга и взаимодействия с браузером, интегрируемый в AI-IDE через Chrome-расширение, Node.js-сервер и MCP-протокол. Захватывает console logs, сетевую активность, скриншоты и DOM-элементы. Использует Puppeteer для headless-автоматизации и Lighthouse для аудитов: доступность (WCAG), производительность, SEO, лучшие практики и специфично для NextJS. Применения: автоматизация тестирования, улучшение AI-агентов в разработке веб-приложений, seamless интеграция без выхода из IDE.
Возможности
Захват логов и сети
Мониторит console logs, XHR-запросы/ответы и сетевую активность через Chrome-расширение.
Скриншоты и DOM
Автоматически захватывает скриншоты, анализирует выбранные DOM-элементы и вставляет в IDE.
Аудит доступности
Проверяет WCAG-соответствие: контраст, alt-текст, ARIA, навигацию с помощью Lighthouse.
Аудит производительности
Анализирует bottlenecks: render-blocking ресурсы, размер DOM, оптимизацию изображений.
Аудит SEO
Оценивает метаданные, заголовки, структуру ссылок для улучшения видимости в поиске.
Аудит лучших практик
Проверяет общие веб-стандарты разработки.
NextJS-аудит
Специфическая проверка SEO и практик для NextJS (app/page router).
Audit Mode
Последовательный запуск всех аудитов, включая NextJS при обнаружении.
Debugger Mode
Последовательный запуск всех инструментов отладки с улучшенным промптом.
Установка
- Установите Chrome-расширение: скачайте и распакуйте ZIP с https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip, добавьте в Chrome.
- В IDE (например, Cursor): выполните npx @agentdeskai/browser-tools-mcp@latest (проверьте конфиг IDE для MCP).
- В новом терминале: npx @agentdeskai/browser-tools-server@latest. Затем откройте DevTools в Chrome и панель BrowserToolsMCP. Если проблемы: закройте Chrome полностью, перезапустите серверы и убедитесь в одном экземпляре DevTools. Подробности в docs: https://browsertools.agentdesk.ai/.