WebMCP позволяет React-приложениям предоставлять структурированные API инструментов напрямую ИИ-агентам, заменяя хрупкий UI-scraping надежными вызовами, не зависящими от пользовательского интерфейса. Эта функция доступна в рамках origin-trial для Chrome 149 и выше; её можно включить через chrome://flags/#enable-webmcp-testing.

Проблема обучения агентов кликам

Большинство современных попыток дать ИИ-агентам возможность взаимодействовать с веб-страницей полагаются на визуальные подсказки. Агент анализирует DOM, угадывает, какой элемент является кнопкой, имитирует клики, прокрутку и заполнение полей форм. Как только кнопка смещается, меняется метка или корректируется макет, скрипт ломается. Этот подход медленный, так как приходится ждать отрисовки каждого шага браузером, а обычный редизайн может разрушить весь конвейер автоматизации.

WebMCP меняет модель

WebMCP — это новый веб-стандарт, представленный Google Chrome. Вместо того чтобы предоставлять агенту визуальную поверхность для исследования, страница анонсирует набор инструментов (tools) — именованных операций с определенными типами, которые страница может выполнять. ИИ-агент сначала спрашивает: «какие инструменты доступны?»; страница отвечает списком, например, «searchProducts» или «checkout». Затем агент вызывает инструмент, отправляя JSON-нагрузку, соответствующую объявленной схеме входных данных, например searchProducts(query: "jacket"). Браузер направляет запрос напрямую в JavaScript страницы, который выполняет базовую логику без какого-либо участия UI.

В результате взаимодействие происходит мгновенно, работает независимо от изменений в CSS и остается функциональным до тех пор, пока определения инструментов стабильны.

Преимущества, важные для разработчиков

  • Скорость — взаимодействие происходит внутри системы обмена сообщениями браузера, что исключает задержки на отрисовку кликов и ожидание обновлений страницы.
  • Надежность — инструменты вызывают те же функции, которые сайт уже использует для своего UI, поэтому редизайн не ломает API.
  • Контроль — разработчики сами решают, какие операции открывать, какие параметры они принимают и что агент может увидеть в ответе.
  • Независимость от UI — стилизация, макет или рефакторинг компонентов больше не влияют на способность агента вызывать функции.

WebMCP не заменяет существующий MCP (Message-Channel-Protocol), используемый на стороне сервера. MCP продолжает отвечать за тяжелую выборку данных и оркестрацию бэкенда, в то время как WebMCP управляет живым взаимодействием внутри вкладки.

С чего начать React-разработчикам

Код на React может регистрировать инструменты либо через императивный JavaScript API, либо через декларативный HTML-API на основе форм. Распространенный паттерн — обернуть регистрацию в кастомный хук:

  1. Вызовите функцию регистрации, передав имя инструмента и краткое описание.
  2. Предоставьте схему входных данных (например, JSON-схему, описывающую обязательные поля).
  3. Предоставьте callback-функцию execute, которая запускает существующую бизнес-логику — зачастую ту же самую функцию, которую вызвал бы клик по кнопке.

Когда хук срабатывает, браузер добавляет инструмент в манифест WebMCP страницы. ИИ-агент, обнаруживший манифест, может затем вызывать инструмент, даже не касаясь DOM.

Поскольку регистрация происходит в момент монтирования компонента, инструменты можно привязать к конкретным маршрутам или feature flags, что дает командам возможность тонко настраивать то, что ИИ может делать в продакшене по сравнению с тестовой средой.

Предостережения и на что обратить внимание

WebMCP всё еще находится в стадии origin trial. Он работает только в Chrome 149+ и должен быть включен вручную через флаг.

Что дальше

Google открыл доступ к тестированию для разработчиков, которые хотят экспериментировать с AI-native веб-интерфейсами. Следующие шаги для всех заинтересованных:

  • Включите флаг в Chrome и перезагрузите целевой сайт.
  • Добавьте простую регистрацию инструмента в React-компонент и посмотрите, как манифест появится в devtools браузера.
  • Протестируйте ИИ-клиент (например, локальный скрипт, следующий протоколу WebMCP), чтобы вызвать инструмент и проверить ответ.
  • Следите за страницей статуса тестирования, чтобы получать обновления о выходе стабильной версии.

Итог: WebMCP дает React-разработчикам способ сделать свои приложения доступными для прямого вызова ИИ-агентами, превращая элементы UI в стабильные типизированные сервисы. Этот переход избавляет от кошмара поддержки screen-scraping и открывает путь к по-настоящему AI-native веб-приложениям — при условии, что команды готовы работать в экспериментальной среде Chrome.