BrowserTools MCP

ПРОЕКТ БОЛЬШЕ НЕ ПОДДЕРЖИВАЕТСЯ. ПОЖАЛУЙСТА, ИСПОЛЬЗУЙТЕ ДРУГОЕ РЕШЕНИЕ.

Сделайте ваши AI-инструменты в 10 раз более осведомлёнными и способными взаимодействовать с браузером

Это приложение — мощный инструмент мониторинга и взаимодействия с браузером, который позволяет AI-приложениям через Model Context Protocol (MCP) от Anthropic захватывать и анализировать данные браузера с помощью Chrome-расширения.

Полное руководство по установке, быстрый старт и руководство по участию в разработке — в нашей документации.

Дорожная карта

Дорожная карта проекта: Github Roadmap / Project Board

Обновления

Вышла версия v1.2.0! Краткий обзор изменений:

• В панели DevTools теперь можно включить «Allow Auto-Paste into Cursor». Скриншоты будут автоматически вставляться в Cursor (убедитесь, что поле ввода агента в Cursor активно, иначе вставка не сработает).
• Интегрирован набор инструментов анализа SEO, производительности, доступности и лучших практик через Lighthouse.
• Реализован специальный промпт для NextJS, улучшающий SEO NextJS-приложений.
• Добавлен режим Debugger Mode — инструмент, последовательно выполняющий все инструменты отладки, с промптом для улучшения рассуждений.
• Добавлен режим Audit Mode — инструмент для последовательного запуска всех инструментов аудита.
• Исправлены проблемы с подключением на Windows.
• Улучшено сетевое взаимодействие между сервером BrowserTools, расширением и MCP-сервером: автообнаружение хоста/порта, автоматическое переподключение и корректное завершение работы.
• Добавлена возможность более удобного завершения работы сервера Browser Tools через Ctrl+C.

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

Для работы этого MCP-инструмента необходимо три компонента:

1. Установите Chrome-расширение: v1.2.0 BrowserToolsMCP Chrome Extension
2. Установите MCP-сервер командой в вашей IDE: npx @agentdeskai/browser-tools-mcp@latest
3. Откройте новый терминал и выполните: npx @agentdeskai/browser-tools-server@latest

В разных IDE конфигурация может отличаться — эта команда является общей отправной точкой. Обратитесь к документации вашей IDE для корректной настройки.

ВАЖНО — необходимо установить два сервера:

• browser-tools-server — локальный Node.js-сервер, промежуточный слой для сбора логов;
• browser-tools-mcp — MCP-сервер, устанавливаемый в IDE, который взаимодействует с расширением и browser-tools-server.

npx @agentdeskai/browser-tools-mcp@latest — добавляется в конфигурацию IDE. npx @agentdeskai/browser-tools-server@latest — запускается в отдельном окне терминала.

После выполнения этих трёх шагов откройте Chrome DevTools и перейдите на панель BrowserToolsMCP.

Если возникают проблемы, попробуйте следующее:

• Полностью закройте браузер — не только окно, а весь Chrome.
• Перезапустите локальный Node-сервер (browser-tools-server).
• Убедитесь, что открыта только ОДНА панель Chrome DevTools.

Если проблема сохраняется — создайте issue-тикет. Идеи по улучшению также приветствуются: открывайте тикет с тегом enhancement или пишите мне в @tedx_ai on x.

Полные заметки к обновлению

Кодовые агенты, такие как Cursor, могут запускать аудиты текущей страницы без лишних усилий. Используя Puppeteer и npm-библиотеку Lighthouse, BrowserTools MCP теперь умеет:

• Проверять страницы на соответствие WCAG
• Выявлять узкие места производительности
• Обнаруживать SEO-проблемы на странице
• Проверять соблюдение лучших практик веб-разработки
• Анализировать SEO-специфичные проблемы NextJS

...и всё это — не выходя из IDE 🎉

---

🔑 Ключевые возможности

Тип аудита	Описание
Доступность (Accessibility)	Проверки на соответствие WCAG: контрастность цветов, отсутствие alt-текста, ловушки клавиатурной навигации, ARIA-атрибуты и др.
Производительность (Performance)	Анализ через Lighthouse: блокирующие рендер ресурсы, избыточный размер DOM, неоптимизированные изображения и другие факторы, влияющие на скорость страницы.
SEO	Оценка on-page SEO-факторов (метаданные, заголовки, структура ссылок) и рекомендации по улучшению видимости в поиске.
Лучшие практики (Best Practices)	Проверка общих лучших практик веб-разработки.
NextJS Audit	Внедряет промпт для проведения аудита NextJS-приложения.
Audit Mode	Последовательно запускает все инструменты аудита.
Debugger Mode	Последовательно запускает все инструменты отладки.

---

🛠️ Использование инструментов аудита

✅ Перед началом работы

Убедитесь, что:

• В браузере открыта активная вкладка.
• Расширение BrowserTools включено.

▶️ Запуск аудитов

Автоматизация через headless-браузер: Puppeteer автоматизирует headless-экземпляр Chrome для загрузки страницы и сбора данных аудита, обеспечивая точные результаты даже для SPA или контента, загружаемого через JavaScript.

Headless-экземпляр браузера остаётся активным в течение 60 секунд после последнего вызова аудита для эффективной обработки последовательных запросов.

Структурированные результаты: Каждый аудит возвращает результаты в структурированном JSON-формате, включая общие оценки и подробные списки проблем. Это упрощает дальнейшую обработку данных MCP-агентами.