WebMCP дозволяє React-додаткам надавати структуровані API інструментів безпосередньо ШІ-агентам, замінюючи крихкий UI-скрейпінг на надійні виклики, незалежні від інтерфейсу. Ця функція доступна в межах origin-trial для Chrome 149 і вище, і її можна увімкнути через chrome://flags/#enable-webmcp-testing.

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

Більшість сучасних спроб дозволити ШІ-агентам взаємодіяти з вебсторінкою покладаються на візуальні підказки. Агент аналізує DOM, вгадує, який елемент є кнопкою, імітує кліки, прокручування та заповнює поля форм. Щойно кнопка зміщується, мітка змінюється або макет коригується, скрипт виходить з ладу. Цей підхід є повільним, оскільки він чекає, поки браузер відрендерить кожен крок, а звичайний редизайн може зламати весь конвеєр автоматизації.

WebMCP змінює модель

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

Результатом є миттєва взаємодія, яка працює незалежно від змін у CSS і залишається функціональною доти, доки визначення інструментів залишаються стабільними.

Переваги, важливі для розробників

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

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

Як розробникам React почати роботу

Код React може реєструвати інструменти за допомогою або imperative JavaScript API, або декларативного HTML-API на основі форм. Поширеним патерном є обгортання реєстрації у кастомний хук:

  1. Викличте функцію реєстрації з назвою інструмента та коротким описом.
  2. Надайте схему вхідних даних (наприклад, JSON-схему, що описує обов'язкові поля).
  3. Надайте callback-функцію execute, яка виконує існуючу бізнес-логіку — часто ту саму функцію, яку викликав би клік по кнопці.

Коли хук виконується, браузер додає інструмент до маніфесту WebMCP сторінки. ШІ-агент, який виявить маніфест, може потім викликати інструмент, навіть не торкаючись DOM.

Оскільки реєстрація відбувається під час монтування компонента, інструменти можна прив'язувати до конкретних маршрутів або feature flags, що дає командам можливість детально контролювати, що ШІ може робити в робочому середовищі порівняно з тестовим.

Застереження та на що звернути увагу

WebMCP все ще перебуває на стадії origin trial. Він працює лише в Chrome 149+ і має бути увімкнений вручну через прапорець (flag).

Що далі

Google відкрив випробування для розробників, які хочуть експериментувати з AI-native вебдосвідом. Наступні кроки для зацікавлених:

  • Увімкніть прапорець у Chrome та перезавантажте цільовий сайт.
  • Додайте просту реєстрацію інструмента в React-компонент і спостерігайте, як маніфест з'являється в devtools браузера.
  • Протестуйте ШІ-клієнт (наприклад, локальний скрипт, що дотримується протоколу WebMCP), щоб викликати інструмент і перевірити відповідь.
  • Стежте за сторінкою статусу випробування, щоб отримувати оновлення щодо стабільного релізу.

Підсумок: WebMCP дає розробникам React можливість зробити свої додатки доступними для прямого виклику ШІ-агентами, перетворюючи елементи UI на стабільні типізовані сервіси. Цей перехід усуває кошмар обслуговування скрейпінгу екрана та відкриває шлях до справді AI-native вебдодатків — за умови, що команди готові працювати в експериментальному середовищі Chrome.