Поясненне WebMCP: надача інструментаў для агентаў ШІ браузерам у замен на спробы здогадацца.

Запытайце агента AI аб броніраванні рэліга на веб-сайце і пазірце, што будзе. Ён ачынае стороніцу і начынае шукаць. Калькольнік даты — гэта які элемент? У якім выпадаючым спіску знаходзіцца пункт прызначэння? Кальканец, які трэба нажаць два разы, таму што яго закрывае модальное вікно? Інодзе агенту вдаецца дасягнуць мэты. Інодзе ён нажымае неправі элемент, запоўняе полье некалькімі данымі або застаецца на этапы оплаты, таму што лейаут змяніўся пасля навучэння модэлю.

Так сёння працуюць большасць агентаў, якія базуюцца на прыгледчыку. Яны скрабуюць DOM, выявляюць месца і мету кожнага элемента за яго пазначэннем і расположэннем, а потым імітуюць нажаткі кальканцаў і натысканні клавіш, якія бы выканал чалавек. Гэтыя методы называюцца актуэйцыяй, і ў дэманстрацыях яны выглядаюць чудова, але на практыцы не функцыонуюць. Дастатнь лішь змяніць адну клас CSS аб перасунуць кальканец, і агент, які ўчора працаваў, перастае працаваць.

WebMCP — гэта адпаведна рашынка. Калі вы знаеце Model Context Protocol (MCP) у бэкэндзе, ідэя проста: паўтарыць концэпцію інструментаў і перанесці яе ў браузер, так што яны будуць на сторунках, якія вы ствараеце.

Чаму недастатнька толькі аналіз DOM

Агенты наразе прагледваюць да сервісу па аднам з двух шляхоў:

• Інтэграцыя з бэкэндам. Сервіс рэгіструе інструменты ў платформе AI праз сервер MCP, OpenAPI або які-небудзь прыналежны API, і AI співае безпаспэчна з серверам, не чапаючы браузера.
• Актывацыя з браузера. Агент ачынае сторунку як чалавек і здагадваецца, якія элементы трэба нажыць або запаўніць.

Актывацыя ёсць даскладной і лёгкая да памылкі. Кожны крок можа быць неправыльна адгукнуты, асобліва ў складных, мнагашаровых інтэрфейсах, такіх як сучасныя односторунковыя прыкладнікі.

WebMCP дадзе трэці спосаб выканання задач, які не ўскладнюецца інтэграцыяй з бэкэндам і не выклікаеяцца слепым нажатыем. Сам веб-сайт адзначае, калі ён можа выконваць певныя дзеянні. Уместо таго, каб агент сам выдумваў, што робіць кнопка «Выплата», распрацоўшчык чытка апісвае, што робіць процэс выплаты, якія даныя ёй патрэбны і што ёна вяртае.

Што такое WebMCP

WebMCP — гэта запраектаваны веб-стандарт ад Групы спільнатэка Web Machine Learning Community Group у W3C. У спецыфікацыі вакладзеныя API на JavaScript плюс анотаціі для элементаў формы HTML, каб агент мог усвядомлена вікорыстоўваць функцыі стораніцы, не выдумваючы.

Пораўняйце яго з MCP для бэкэнду. Стораніца, якая рэалізуе WebMCP, паводзіцца як сервер MCP, чыяінструменты працуюць як скрыпты на стороне кліента. Там, дзе зазвычай патрэбны околачны сервер для выканання функцыі, можна зарэўістраць гэтую функцыю пры вжыцці JavaScript, які ужо працуе на стораніцы.

Дызайн складаецца з трох частак:

• Адккрыцце: стандартны спосаб для сторанакаў рэгістрацыі інструментаў, такіх як checkout або search_products, у агента.
• JSON Schema: чыткія апісанні прыемлівых і выходных дадзеных, што зменшае галюцынаціі і непрацоўнае разумеўце.
• Стан: спяльны абраз чыннага кантэкста сторанакі, тады агент ведае, над чым ён можа дзеяць зараз.

Ішчо адна дэталі: інструменты яшчэ працуюць візуабельна на сторанцы. Калі агент вызывае інструмент add_to_cart, рэзультат паказваецца ў інтэрфейсе, а не выконваецца таямніча. Гэта важна для доверлівасці, таму што корыстувачы можаць бачыць, што было зданае для іх, і ваш дызайн досвіду не ўхіляецца.

Рэгістрацыя WebMCP на сайце

Дадзенне яго ў існуючы сайт не значыць перабудовы. Гэта дадатковы шар канектавання, які працуе на адміністрацыйнай частыні, якая ужо функцыонуе. Крокі:

1. Актывацыя асяроддзя. Паколькі стандарт яшчэ толькі запрошваецца, для эксперыментаў актывацыяй яго трэба здзейсніць вручную. У Chrome ачыніце chrome://flags/#enable-webmcp-testing, выберыце пункт «Enabled» і перазапусціце браузер. Для сцэнарыю, бліжэйшага да прымення ў рэальных умовах, зарэўнавацеся на прыем для тэставання WebMCP origin, які будзе доступны ў Chrome 149, так каб справжнія візітары моглі выкарыстоўваць гэтую функцыю без змены налашоўкаў браузера.

2. Выберыце інструменты, якія варта адкрыць. Што стосуецца гэтага крока, яго легка недаць належнага значэння. Не адкрывайце кожную функцыю толькі таму, што можаце. Падумайце, з якімі задачамі люды насправды хацелі б, каб агент ім дапамогаў, зазвычай тымі, якія маюць адзін чысты цэль: пошук, фільтрацыю, адправку формы, адбіранне. Утрымайцеся ад дзесяткаў інструментоў на адной сторонцы, адтолькі кожны зарэгістраваны інструмент займае прастор у вікні кантэксту, а дужы меню ускладнюе выбір агента.

3. Выберыце імператыўны або дэкларатыўны API. Імператыўны API рэгіструе інструменты за дапамогою звычайнага JavaScript праз registerTool і падходзіць для болей сложнай логікі, такой як кераванне станам, навігацыя або аўтоматызаванне дзеянняў. Дэкларатыўны API размешчае анотаціі безпасуль на стандартным HTML <form>, і інструмент будуецца для вас, што падходзіць для простых сцэнарыяў, базаваных на формах. Праекты React і Angular маюць варыянты, прызначаныя спецыяльна для ўсіх іх фрэймворкаў. React праставляе пакет usewebmcp, чыя хукі useWebMCP связуюць жыццёвы цыкл інструмента з моментам запуску і зупінкі компонента. Angular мае эксперыментальную падтрымку, якая можа ператварыць Signal Forms у інструменты.

4. Зробіце inputSchema болей дэталізаваным. Гэта вялічынь вялічынь, насколькі агент розумее інструмент. Запішыце description на простай, нейтральной мове, а не на внутрэшніх скраценнях, і задаце кожную власць разам з яе тыпам. Для замкнутага набора значэнняў выкорыстаце enum, ўбліжчы, каб агент рэдкасцю адправляў некарэктныя даны.

5. Установіце annotations так, каб яны адпавядалі рэальнам рызыку. Кожны інструмент патрэбуе чыстасці абазаванага пазначэння:

• readOnlyHint: true для інструмента, які толькі чытае і не зміняе нічога.
• consequentialHint: true для дзеяння з рэальнымі наследкамі, якое павінна спачатку прабавіць падтверджэння у корыстніка.
• untrustedContentHint: true калі выход включае контэнт ад іншых корыстнікаў, такі як адзінкі аб каменты, якія могу маскаваць інструкцыі.

6. Падайце execute да існуючага канцэнтраба. Функцыя execute можа проста вызваць вялікі маршрут, які ўжо ў вас ёсць, выкарыстоўваючы fetch(). Маршрут Laravel таксама падходзіць. Не існуе окольнаго бэкенду WebMCP. Вы ствараеце фронтэнд-мост да бізнес-логікі, якая ужо апробавана ў працэўным сераўеры.

7. Апробавайце яго. Дадаць пашырэнне Chrome пад назвай Model Context Tool Inspector (Chrome Web Store), завантажыць вашу стораніцу і паказаць, якія інструменты рэгіструюцца. Вы таксама можэце саціслацца з агентам, каб парадзіцца, чы роўна вызываецца ваш інструмент і чы яго схема чытаема.

8. Ставіцеся да гэтага як да прагрэсіўнага паўнэчвання. Падтрымка браузераў ёсць обмежанай, таму звычайныя клікі па кнопкі должны продавацься для візітараў, у якіх браузеры не маюць WebMCP. Гэта дадае новы маршрут, але не заменіць стары.

Прыклад: інструмент статусу замовлення

Узьмімо інтэрнэт-магазін, створаны на Laravel, з сторанцэю статусу замовленняў. Звычны прабег выглядае так: корыстнік заходзіць у сістэму, апускаецца у роздзіл «Мае замовленні», выбірае перыод часу і пераглядае спіс замовленняў з інформацыяй пра статус доставкі. Агент, які выкарыстоўвае актуэйшнія інструменты, павінен знайсці правы выпадаючы спіс і кнопку надсылкі, а пасля аналізаваць табліцу з рэзультатамі з необработанага HTML, якая перастае працаваць як толькі маркап змініцца.

За дапамогою WebMCP адна зменшаная версія інструмента абгружае вялікі ендпаінт, які ужо існуе:

await document.modelContext.registerTool({
  name: 'get_order_status',
  description: 'Look up orders within a given timeframe. Returns order number, shipping status, and current location.',
  inputSchema: {
    type: 'object',
    properties: {
      timeframe: {
        type: 'string',
        enum: ['today', 'yesterday', 'last_7_days', 'last_30_days', 'last_6_months'],
        description: 'Timeframe for the order lookup.'
      }
    },
    required: ['timeframe']
  },
  annotations: {
    readOnlyHint: true,
    consequentialHint: false,
    untrustedContentHint: false
  },
  execute: async ({ timeframe }) => {
    const response = await fetch(`/api/orders/status?range=${timeframe}`, {
      headers: { 'Accept': 'application/json' }
    });
    const data = await response.json();
    return JSON.stringify(data);
  }
});

Тры якіясці выдзеляюцца. inputSchema захоўвае агента ад неабязковасці здагадвацца пра фармат, таму што ён знае, якія значэнні прыймае timeframe. Анотацыя readOnlyHint: true пазначае інструмент як такі, які не мае побачных наследкав, таму не патрабуеяцца падтверджэння. А execute проста вызывае існуючы маршрут Laravel, таму нічога не трэба перабудаваць.

Працэс адплатаў ўскладненый, таму што грошы пераводзяцца і ставіцца замовленне. Для гэтага патрабуецца іншы сігнал:

await document.modelContext.registerTool({
  name: 'checkout_cart',
  description: 'Completes checkout for the currently logged-in user\'s cart.',
  inputSchema: {
    type: 'object',
    properties: {
      paymentMethod: { type: 'string', description: 'Payment method selected by the user' }
    },
    required: ['paymentMethod']
  },
  annotations: {
    readOnlyHint: false,
    consequentialHint: true,
    untrustedContentHint: false
  },
  execute: async ({ paymentMethod }) => {
    const response = await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ payment_method: paymentMethod })
    });
    return await response.text();
  }
});

За дапамою consequentialHint: true браузер або прыемнік ведае, што трэба паказаць дыялогавое вікно парадыжэння пры запуску. Нават калі прыемнік нажме кнопку, фінальны вызов застаецца у адміністратара.

Ёсць кілька спосабоў, якімі можна вывесіць спіс інструментаў, зарэгістраваных на сторанцы:

const tools = await document.modelContext.getTools();
console.log(tools);

І каб спрацавіць аднойчы вручную для тэставання:

const [tool] = await document.modelContext.getTools();
const result = await document.modelContext.executeTool(tool, '{"timeframe": "last_7_days"}');

Полныя поўнага ціклу дзеянні

Гэта ўпорадак дзеянняў, калі вы спілкуецеся з агентам, які выкарыстоўвае інструмент get_order_status.

1. Вы пішаце агенту, у якога ачынутая сторанка магазіна, ў простай мове ўдзеінстве на кшталт "знайці мае замовленні з мінулага тыдня".
2. Агент запускае процэс пошуку, вызваючы getTools() на данай сторанцы.
3. Сторанка вяртае спіс своіх інструментаў з ўсіма характэрыстыкамі, укладаючы ў яго get_order_status з яго апісаннем і фарматам вводу.
4. Агент паўтарае вашу просьбу за апісаннямі інструментаў. Чыткае апісанне дапамагае яму адразу выбраць правільны інструмент.
5. Агент вызвае executeTool() з аргументамі, створанымі на адной з розмов, напрыклад {timeframe: 'last_7_days'}.
6. Функцыя execute сторанкі вызывае той самы лярэварскі канцэнтры праз fetch(), так сама, як як бы вы нажалі на кнопку.
7. Бэкэнд адпавядае JSON, а апарат перадае яго агенту.
8. Агент сформулюе рэзультат на прыроднай мове і паказае яго, пры чым усё застаецца відным у інтэрфейсе сторанкі.

Чаму гэта лепшая за актуэйцыю?

• Гэта менш вымагае кантэксту. Агент чытае кампактную схему, а не тыясячы ліній маркапу, таму адпаведзі з’яўляюцца быстрэй і коштуюць меней.
• Рэзультаты застаюцца адносова стабільнымі. Апарат вызывае вашу рэальную функцыю, таму змена колеру кнопкі чы адкладэнне элемента не парадузець яе.
• Людзі застаюцца пад контролем. Дзеянні з высокім рызыкам, пазначаныя consequentialHint: true, все рава трэбуюць парадзу, таму агент не можа ўзяць іх на сябе без запытку.

Лёгкая аўдытаванне. Кожна взаімадзея праходзіць праз спецыяльны інструмент, таму вы можэце фіксаваць адносова ўсё, што агент зрабіў для карыстальніка, што ў дзесяткі разоў складней, калі все адбываецца проста праз клікі.

Безпека

Пакалі інструменты знаходзяцца на вашых сторунках, безпека знаходзіцца бліжэй да поверхні, чым у случае з backend MCP, які зазвычай працуе ізольавана на сваём серверэ. Спецыфікацыя мае калькі захоўнікаў:

• Ізоляцыя пахавання. WebMCP працуе толькі ў дакументах з ізоляцыяй пахавання. Калі сторунка актываўае document.domain, напрыклад праз заголовак Origin-Agent-Cluster: ?0, WebMCP выключаецца.
• Палітыка дазволаў. Рэгістрацыя інструментаў контролюецца палітыкай tools, якая за замовчаннем ўстановленая на self, таму іфрамы з іншага пахавання не можу рэгістрацаваць інструменты, калі толькі вы не разрэшыце гэта за дапамогою allow="tools".
• Адаптаванне даўедзеннях. Ёнколі трэба, каб інструмент быў доступны з іншага даўедзення, неабходна запісаць гэта даўедзення ў опцыі exposedTo. Нічога не адкрываецца автаматычна.
• Тры падказкі для анотацый. Параметры readOnlyHint, consequentialHint і untrustedContentHint — гэта не проста пазначкі. Яны паведамляюць, чы можа агент запускаць інструмент без падтверджэння, чыі ў выпадку, калі трэба астаточна ставіцца да выходных даных, таму што ў іх можа быць ненадзеяны кантэнт, напрыклад, адзінкі корыстувачаў, якія могу містыць атакі на ін’екцыю коду.

Ёсць адна важлівая прыметка: ізоляцыя межы табоў яшчэ розвіваецца. Якшчо агент працуе ў двух табох, няма нічога, што б запобегла прасачэнню чутлівага кантэксту з аднаго таба ў іншы. Для процэсаў з высокым рывам довер’я, такіх як банкавае справа, трэба старанна ставіцца да гэтага аспекта пры вікорыстоўванні гэтай функцыі.

Стан падтрымкі браузераў

Станом на серэдзіну 2026 года ўсё шчэ на раннім этапе:

• Група спільнатыя W3C Web Machine Learning Community Group афіцыйна прыняла спецыфікацыю у верасне 2025 года.
• У Chrome з версіі 149 ёсць тэставанне для певных джэралек, а абыходна падтрымка ў Chrome і Edge плануецца да другай паловы 2026 года.
• Для локальных эксперыментаў флаг chrome://flags/#enable-webmcp-testing працюе без участку ў тэставанні.
• Пашырэнне Model Context Tool Inspector паказвае, якія інструменты рэгіструець стораніца, і можа сімуляваць размову з агентам.

Праект все ўсё можа змяніцца, таму не ставіце на яго функцыю для практычнага выкарыстоўвання. Ожывайце прынцып поступовага паўнэчвання. Там, дзе браузер падтрымлівае WebMCP, агенты отрымаюць болей тачны досвід, а там, дзе — мануальны працэс працюе як раней.

Чынныя ліміты

• Няма працы без відображэння экрана. API прызначаны для локальных робочых практык браузера, калі ў процэсе ёсць чалавек, а не для безнагляднай аўтаматызацыі.
• Додатковы навантажэння на складныя інтэрфейсы. Аплікацыя з сложным кераваннем станам, верагодна, будзе патрабаваць рэфакторавання, каб інструменты відображалі рэальны стан аплікацыі.
• Для адкрыцьі інструментаў патрэбна адвізыта. Кліенты можаюць дазнацца пра наявнасць інструментаў на сайце толькі праз адвізыту на відпаведную стороніцу. Яшчэ не існуе глобальнага індэкса, падобнага да сіткаплану, для інструментаў.
• Яшчэ няма рэсурсаў чы паведамленняў. Два іншыя прымітывы з полныя MCP яшчэ не падтрымваны ў WebMCP. Калі агенту патрэбна чытаць дакументы чы запрашваць структураваныя даны з іншых джэрэл, яшчэ патрэбен окольны сервер MCP.

З чаго пачаць

WebMCP дапамагае backend MCP, але не заменяе яго. Backend MCP заступаецься за даныя і логіку, якія павінны знаходзіцца на серверэ, тады калі WebMCP падходзіць для слоя взаімадзеі на фронтэндзе: складныя формы, багатоэтапная навігацыя і дзеянні, якія залежаць ад стану UI на экране.

Безпечны спосаб прыўходу:

• Увімкніце локальны флаг і зарэгіструйце адну простую інструмент, жадаўна толькі для чытання, напрыклад, для пошуку продуктав.
• З самага пачатку правільна выкарыстоўвайце annotations. Не адкладайце readOnlyHint і consequentialHint, таму што яны ўтвараюць фундамент безпекі, які вяліць, насколькі можна даверыць агенту вашы інструмент.
• Следзіце за рэпазітарыем групы Web Machine Learning Community Group на GitHub, таму што дыскусіі ў спялочэнні продовжваюць формаваць спецыфікацыю.

WebMCP далёк ад канцэптуальнай готовасці, але напрамак ясны. У інтэрнэтэ з’яўляецца чыстае язык для вяснаў з агентамі, чысты дакументацыйны кантракт межа распрацоўшчыкам і агентам у замену на спробы з’ясаваць правілы працы DOM. Для тых, хто прыzwычаны да інструментаў і схемаў з backend MCP, гэтыя змяны будуць знакомыя. Кантракт цяпер знаходзіцца проста ў браузеры.