Набор инструментов для разработчика: готовим сайт к эпохе AI-агентов

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

Вступление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание: Убедитесь, что на странице 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 и заметили странное поведение ^[12] интерфейса, просто перезапустите инструмент.

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

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

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

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

Что дальше?

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

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

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

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