WebMCP: надання доступу до інструментів веб-сайту, щоб агенти припинили скрапінг DOM

Веб-сайти були створені для кліків користувачів, форм та API. Все частіше „користувачем“ може бути штучний інтелект, який ніколи не торкається візуального інтерфейсу. Агенти, які сканують DOM-дерева чи керують браузерами, припиняють працювати, коли змінюється формат маркування. WebMCP (Web Model Context Protocol), запропонований у екосистемі Chrome, має на мету дозволити сайтам безпосередньо надавати агентам структуровані інструменти — назви, вхідні дані, результати та час їх виклику — щоб автоматизація була прямою, а не виведеною з припущень.

Що таке WebMCP?

Коротко кажучи, WebMCP дозволяє сторінці публікувати інструменти, призначені для агентів, замість того щоб сподіватися, що сканери правильно вгадають.

Без WebMCP агент змушений імпровізувати з незрозумілим інтерфейсом:

AI Agent → Reads HTML → Guesses → Clicks → Hopes it works

З WebMCP та сама мета стає оголошеним викликом інструменту:

AI Agent → Reads structured tools → Executes correctly

У документації Chrome переваги WebMCP описуються як швидкість, надійність та точність у взаємодіях з агентами.

Чому існує WebMCP

Розгляньте можливість бронювання готелю. Цей крихкий механізм відкриває сторінку, знаходить поля введення, інтерпретує дати, натискає кнопку пошуку та обробляє результати — він нестабільний під час змін DOM. За допомогою WebMCP агент викликає структуровану операцію:

searchHotels({
 location: "Tokyo",
 checkIn: "2026-08-10",
 checkOut: "2026-08-15",
 guests: 2
})

Жодної археології XPath, жодних варіацій CSS-селекторів, жодних обхідних шляхів для стандартних процесів — лише пряма виконувана операція.

Як працює WebMCP

Два взаємодоповнюючі API:

1. Імперативний API

JavaScript явно реєструє інструменти:

navigator.webMCP.registerTool({
  name: "create-event",
  description: "Creates a calendar event",
  inputSchema: {
    type: "object",
    properties: {
      title: { type: "string" },
      date: { type: "string" }
    }
  },
  execute: async ({ title, date }) => {
    return await createCalendarEvent(title, date);
  }
});

Агенти отримують назву інструменту, його призначення, необхідні дані введення та шлях виконання — логіка фронтенду експортується як можливості для виклику.

2. Декларативний API

Приоритет HTML, особливо для форм:

<form webmcp-tool="book-flight">
  <input name="from" />
  <input name="to" />
  <input name="date" />
</form>

Середовище виконання перетворює форму на структурований інструмент, тож існуючі додатки можуть стати сумісними з агентами за допомогою незначних змін у маркуванні.

WebMCP проти MCP

Плутанина є поширеною. Практичний розподіл: WebMCP орієнтований на фронтенд; MCP — на бекенд-системи та сервіси. Один із способів уявлення — це MCP як „мозок“ з боку сервера та WebMCP як інтерфейс користувача. Разом вони охоплюють інструментарій для роботи з усіма компонентами системи, не змушуючи виконувати кожну дію через нестабільну автоматизацію браузера.

Практичні приклади використання

1. Електронна комерція

Купувальник просить знайти кросівки в межах бюджету та здійснити оплату. Серед можливих інструментів можуть бути:

searchProducts()
filterProducts()
addToCart()
applyCoupon()
checkout()

Агент завершує процес без необхідності переходу через різні форми.

2. Бронювання подорожей

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

3. Панелі керування SaaS

Інструменти аналітики можуть відображати такі операції:

generateReport()
downloadCSV()
inviteMember()
changeBillingPlan()

Копілоти всередині продукту потім використовують ті самі функції, які люди бачать у вигляді кнопок.

4. Системи CRM

Замість десяти екранів із кліками:

createLead()
assignSalesRep()
scheduleFollowUp()

5. Підтримка клієнтів

Скасовуйте підписки, отримуйте повернення грошей, відстежуйте вантажі за допомогою перевірених інструментів, а не за допомогою специфічних технологій HTML.

Чому це важливо для розробників

Робота над фронтендом розширюється від простого формування зображень до створення інструментів для агентів. Відповідальність зміщується у бік чіткого найменування елементів, міцних схем та надійної реалізації. Результати дизайну функцій виглядають не так:

Build components for humans

а скоріше так:

Build components for humans + machines

Найкращі практики

Використовуйте інструменти з однією метою

Уникайте багатозадачних операцій:

manageEverything()

Віддавайте перевагу спеціалізованим інструментам:

createInvoice()
sendInvoice()
downloadInvoice()

Конкретність підвищує точність роботи агентів.

Використовуйте зрозумілі назви

Неясні позначення:

doTask()

Назви, які чітко вказують на функцію:

submitExpenseClaim()

Зменшуйте когнітивне навантаження

Не змушуйте модель попередньо обчислювати те, що додаток вже знає. Уникайте:

durationInMinutes

Краще приймати необроблені дані, які бекенд може нормалізувати:

startTime: "10:00"
endTime: "12:00"

Акуратно керуйте ситуаціями збоїв

Агенти повинні намагатися знову. Інструменти мають бути безпечними під час повторних спроб — ідемпотентність має велике значення.

Проблеми безпеки

Якщо агенти можуть виконувати інструменти, введення зловмисних скриптів у вигляді фальшивих інструментів є проблемою для досліджень. Серед заходів запобігання можна назвати перевірку походження, аудит реєстрацій, встановлення меж дозволів та підтвердження користувачем наявності побічних ефектів. Не довіряйте реєстраціям сліпо.

Більш широка картина

WebMCP є частиною ширшої концепції агентного вебу: сайти розкривають свої можливості, агенти їх розуміють, люди делегують завдання, що дозволяє прискорити роботу. Команди вже створюють API для розробників; наступним кроком є інструменти для агентів. Ті, хто рано починає використовувати ці технології та ставлять запитання на кшталт «які частини цього додатку мають стати інструментами ШІ?», впливатимуть на формування наступної хвилі архітектури вебу — подібно до того, як REST, GraphQL, WebSockets та серверні компоненти перейшли від нішевого використання до стандарту. Технологія ще на початковій стадії, але напрямок її розвитку важко ігнорувати.

Шлях впровадження для існуючих додатків

Почніть з позначення однієї важливої форми чи кроку оплати за допомогою декларативного API, виміряйте ефективність роботи агента порівняно зі старим скрейпером, а потім розширте інструменти імперативного типу для процесів, які потребують індивідуальної перевірки. Зберігайте людську підтверджувальну перевірку для оплат та змін у облікових записах, доки телеметрія не покаже безпеку ідемпотентності. Ставтеся до схем інструментів як до публічних API: переглядайте назви, версіонуйте їх та відхиляйте реєстрацію від ненадійних скриптів.