Самые полезные AI инструменты для фронтенд разработки можешь найти в этом посте.

Вступление

Искусственный интеллект стремительно эволюционирует: от простого генерирования текста нейросети переходят к полноценному веб-серфингу, активному взаимодействию с интерфейсами и выполнению сложных задач на ваших сайтах. В этих реалиях разработчикам необходимы специализированные инструменты, способные обеспечить высокий уровень UX для таких «нечеловеческих» пользователей.

Новая категория Agentic browsing в Lighthouse вместе с улучшениями в Chrome DevTools предоставляют детерминированные аудиты и среду тестирования, которые помогут вам создавать сайты, полностью готовые к работе с AI-агентами.

Смена парадигмы в сторону «агентского веба» (agentic web) включает два основных этапа: когда агенты ищут информацию в сети и когда агенты используют веб-ресурсы.

Когда агенты просто ищут сайты, всё ещё применяются базовые принципы поисковой оптимизации (SEO). В этой статье мы сосредоточимся на том, что разработчики могут сделать для улучшения UX, когда AI-агент взаимодействует с сайтом напрямую.

Аудит, улучшение и отладка вашего «агентского» сайта

Чтобы AI-агент мог надежно завершить любой сценарий на вашем сайте (например, забронировать столик или оформить заказ), ему требуются предсказуемые, машиночитаемые сигналы. Ниже представлены инструменты, которые помогут оценить и повысить эту готовность.

1. Проверка сайта на готовность к AI-агентам (Agentic-readiness)

Новая категория Agentic browsing доступна в Lighthouse начиная с версии M150. Она предлагает разработчикам набор детерминированных аудитов для оценки того, насколько сайт дружелюбен к AI-агентам, стимулируя внедрение новых индустриальных стандартов.

• Что именно проверяют аудиты: Внимание фокусируется на трех ключевых областях, критически важных для машинного взаимодействия:

  • Доступность (Accessibility): Доступность важна в первую очередь для людей. Однако агенты полагаются на дерево доступности (accessibility tree), формируемое из DOM для ассистивных технологий (AT), как на свою основную модель данных. Аудит Agentic Browsing проверяет подмножество критериев из стандартного аудита доступности Lighthouse. Например, проверяется, чтобы каждый интерактивный элемент имел программное имя. Грамотно построенное дерево доступности — это главный способ для AI понять вашу страницу.

  • Стабильность (Stability): Оценивает визуальную стабильность интерфейса с помощью метрики Cumulative Layout Shift (CLS). Это гарантирует, что элементы не будут неожиданно сдвигаться, предотвращая «мисклики» со стороны агента.

  • Интеграция с WebMCP: Проверяет наличие зарегистрированных инструментов WebMCP, форм без декларативного WebMCP, а также валидность схем. Внедрение WebMCP помогает агентам четко видеть логику и формы вашего сайта, делая взаимодействие безошибочным.

• Итоговая оценка: На момент публикации статьи, в отличие от других категорий Lighthouse, оценка Agentic Browsing является информационной и неэталонной (unbenchmarked). Цель состоит в том, чтобы дать разработчику понятные сигналы (статус «пройдено/провалено» и предупреждения), а не выстраивать жесткий рейтинг.

Чтобы подробнее узнать о конкретных проверках, читайте документацию по аудитам агентского серфинга в Lighthouse.

2. Ускорение и повышение надежности взаимодействия

WebMCP — это предлагаемый стандарт, цель которого — предоставить AI-агентам структурированные инструменты (tools) поверх существующих веб-сайтов, что значительно ускоряет и упрощает их работу. Подробнее о реализации стандарта можно прочитать в статье о WebMCP.

3. Внедрение новых фич с помощью вашего любимого AI-кодера

Проект Modern Web Guidance содержит коллекцию лучших практик и готовых навыков (skills) для создания сайтов, готовых к AI. В нее входит навык webmcp, позволяющий делегировать интеграцию инструментов WebMCP вашему AI-ассистенту в IDE. Интегрируя Modern Web Guidance в свой воркфлоу, вы гарантируете, что приложение изначально строится по современным, дружелюбным к агентам стандартам. Подробнее см. в документации Modern Web Guidance.

4. Тестирование и отладка с Chrome DevTools для агентов

Для глубокой отладки и итеративной разработки Chrome DevTools для агентов предлагает уникальный режим тестирования. Он позволяет превратить вашу AI-ассистируемую среду разработки (IDE) или кодинг-агента в полноценного браузерного агента, предоставляя вам полный контроль над процессом.

С помощью DevTools для агентов вы можете:

• Симулировать действия агента: Вы можете в точности воспроизвести шаги, которые предпринял бы ИИ, фактически «став пользователем» (или агентом), чтобы локализовать баги и убедиться, что сценарии на сайте отрабатывают детерминированно.

• Прямой вызов Lighthouse: Ваша среда тестирования может напрямую вызвать инструмент lighthouse_audit для активной вкладки. Это дает мгновенный срез здоровья страницы по нескольким категориям на основе её текущего состояния, позволяя вам итеративно проверять фиксы на соответствие стандартам Agentic Browsing.

• Трансляция экрана (Screencast) и отладка: Инструмент предоставляет детальное логирование и возможность трансляции экрана, чтобы вы видели страницу именно так, как её воспринимает AI. Это помогает обнаружить скрытые от глаз машиночитаемые сигналы (например, в дереве доступности), которые могут запутать агента.

Это позволяет гарантировать высокое качество работы сайта с «нечеловеческими» пользователями еще до продакшена.

Узнать больше о возможностях и настройке Chrome DevTools для агентов можно в нашем GitHub-репозитории.

Примечание: Убедитесь, что на странице chrome://inspect включена функция Remote Debugging (Удаленная отладка). Если вы хотите вызывать инструменты WebMCP из Chrome DevTools для агентов, ваш браузер (например, Chrome Canary) должен быть запущен со специальным флагом: chrome://flags/#enable-webmcp-testing.

Ниже представлен пример конфигурации Chrome DevTools для агентов (~/.gemini/config/mcp_config.json для AntigravityCLI или аналогично для Antigravity) для подключения к Chrome Canary:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--categoryExperimentalWebmcp",
        "--channel=canary"
      ]
    }
  }
}

Совет: Экспериментальные функции в Chrome DevTools для агентов, такие как --categoryExperimentalWebmcp или --experimentalScreencast, могут вести себя нестабильно. Если вы используете AntigravityCLI и заметили странное поведение интерфейса, просто перезапустите инструмент.

Пример поискового запроса для проверки:

«Используя Chrome DevTools MCP, перейди на страницу https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/ и собери мне пиццу с 10 грибами и 2 болгарскими перцами; в конце покажи отчет о том, что ты сделал и какие инструменты вызвал».

Также вы можете использовать DevTools для агентов для запуска аудита готовности к AI-серфингу:

«Я хочу провести агентский аудит lighthouse для страницы https://googlechromelabs.github.io/webmcp-tools/demos/french-bistro/?notoolname с помощью Chrome DevTools MCP; предоставь мне полный отчет».

Что дальше?

Если вы хотите внести свой вклад в развитие инструмента или присоединиться к обсуждению, загляните в официальный репозиторий Lighthouse на GitHub.

• Дополнительная информация о WebMCP: Документация WebMCP.

• Подробнее о Modern Web Guidance: Документация Modern Web Guidance.

• Оптимизация сайта под генеративный ИИ в поиске: Руководство по оптимизации для Google Search AI.