WebMCP: как подготовить сайт
к AI-агентам в 2026 году

Введение

Представьте, что AI-агент пытается забронировать авиабилет на вашем сайте. Сегодня он рендерит страницу, делает скриншот, спрашивает у vision-модели, где находится кнопка "Найти", и надеется на лучшее. Поменяйте CSS-класс кнопки, сдвиньте её на 5 пикселей или переименуйте "Отправить" в "Найти билеты" — агент сломается.

Этот хрупкий подход, основанный на «угадывании по пикселям», призван устранить WebMCP (Web Model Context Protocol). Представленный на Google I/O 2026 (19-20 мая) как одно из «15 обновлений для agentic web», WebMCP — это предлагаемый открытый веб-стандарт Google, который позволяет сайту декларировать свои возможности в виде типизированных, вызываемых JavaScript-инструментов для AI-агентов через браузерное API navigator.modelContext.

Вместо того чтобы агент угадывал, куда нажать, ваш сайт говорит: «Я поддерживаю searchFlights(откуда, куда, дата, пассажиры), getHotelAvailability(локация, даты) и completeBooking(bookingId). Вот точные параметры.»

Это фундаментальный сдвиг. Сайты перестают быть просто человекочитаемыми документами — они становятся исполняемыми наборами инструментов для AI-агентов. В этом руководстве я расскажу, что такое WebMCP, как его внедрить, приведу примеры кода для обоих API (императивного и декларативного) и объясню, что это значит для вашей стратегии веб-разработки.

Что такое WebMCP?

WebMCP — это предлагаемый веб-стандарт, разработанный командой Chrome в Google. Опубликованный как Developer Trial 18 мая 2026 года, он представляет новое браузерное API — navigator.modelContext — которое позволяет сайтам публиковать структурированный, машиночитаемый манифест вызываемых инструментов.

Ключевая идея проста: агентам не нужно видеть ваш UI, чтобы использовать ваш сайт. Им нужно знать, какие операции вы поддерживаете и как их вызывать. WebMCP предоставляет именно это — «контракт инструментов» между сайтом и AI-агентом.

Ключевые понятия

• Инструмент (Tool): Именованная операция, которую поддерживает сайт (например, searchFlights, bookHotel) с типизированными параметрами и возвращаемыми значениями
• Модельный контекст (Model Context): Структурированные данные о текущем состоянии страницы, которые сайт предоставляет агентам для понимания контекста
• Актуация (Actuation): Имитация агентом ручных кликов мыши и ввода текста — WebMCP заменяет это прямыми API-вызовами
• Progressive Enhancement: WebMCP полностью опционален — ваш сайт продолжает работать как обычно для живых посетителей

WebMCP vs MCP от Anthropic

Важно различать WebMCP и Model Context Protocol (MCP) от Anthropic. Это разные стандарты для разных контекстов:

Они дополняют друг друга. Сайт, использующий WebMCP, предоставляет инструменты агенту в браузере. Этот агент, в свою очередь, может использовать MCP от Anthropic для доступа к внешним базам данных или API. Вместе они формируют полную экосистему взаимодействия агента с вебом.

Какую проблему решает WebMCP

До WebMCP AI-агенты взаимодействовали с сайтами через актуацию — имитацию человеческого поведения: рендер страницы, скриншот, передача изображения мультимодальной модели и угадывание, куда нажать.

У этого подхода фундаментальные проблемы:

• Хрупкость: Измените CSS-класс кнопки или сдвиньте её на пару пикселей — агент ломается
• Скорость: Каждое действие требует полного рендера страницы, скриншота и вызова vision-модели — секунды на действие
• Точность: Vision-модели могут ошибочно идентифицировать элементы, особенно на сложных макетах
• Стоимость: Вызовы vision API дороги и медленны, что делает многошаговые сценарии непрактичными
• Конфиденциальность: Скриншоты пользовательских данных передаются сторонним vision API

WebMCP устраняет все эти проблемы, заменяя пиксельное взаимодействие структурированными API-вызовами. Агент вызывает searchFlights("MSK", "LAX", "2026-06-15", 2) вместо прохождения через 5-шаговую форму. Это быстрее, дешевле, надёжнее и приватнее.

Начало работы с WebMCP

WebMCP в настоящее время доступен в режиме Developer Trial в Chrome. Его нужно включить либо через chrome://flags, либо через регистрацию origin trial токена.

Включение WebMCP

В Chrome откройте chrome://flags/#enable-web-mcp и активируйте флаг. Или зарегистрируйтесь для получения WebMCP origin trial токена и добавьте его в <head> вашей страницы:

<meta http-equiv="origin-trial" content="ВАШ_ORIGIN_TRIAL_ТОКЕН">

Проверка доступности

Перед использованием WebMCP всегда проверяйте, доступен ли он в браузере пользователя:

if (navigator.modelContext) {
  console.log('WebMCP доступен!');
  // Регистрируем инструменты
} else {
  console.log('WebMCP недоступен — используем обычный UX');
  // Сайт работает и без него
}

WebMCP спроектирован как progressive enhancement — ваш сайт обязан работать без него.

Императивное API WebMCP: определение инструментов в JavaScript

Императивное API — самый гибкий способ использования WebMCP. Вы определяете инструменты программно через JavaScript, что даёт полный контроль над именами, параметрами и логикой выполнения.

Регистрация инструментов

Используйте navigator.modelContext.registerTool() для определения каждого инструмента:

navigator.modelContext.registerTool({
  name: 'searchFlights',
  description: 'Поиск доступных рейсов между двумя аэропортами на указанную дату',
  parameters: {
    type: 'object',
    properties: {
      origin: {
        type: 'string',
        description: 'IATA код аэропорта вылета (например, MSK, LED, SVO)'
      },
      destination: {
        type: 'string',
        description: 'IATA код аэропорта прибытия'
      },
      date: {
        type: 'string',
        format: 'date',
        description: 'Дата вылета (ГГГГ-ММ-ДД)'
      },
      passengers: {
        type: 'integer',
        minimum: 1,
        default: 1,
        description: 'Количество пассажиров'
      }
    },
    required: ['origin', 'destination', 'date']
  },
  handler: async (params) => {
    const results = await fetch('/api/flights', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params)
    });
    return await results.json();
  }
});

Предоставление модельного контекста

Помимо инструментов, вы можете предоставлять структурированные данные о текущем состоянии страницы:

// Предоставляем агенту данные о текущей странице
navigator.modelContext.setContext({
  pageType: 'flight-search-results',
  currentPage: 1,
  totalResults: 47,
  filters: {
    maxPrice: 500,
    airlines: ['Аэрофлот', 'S7'],
    stops: 'direct'
  },
  tripType: 'round-trip',
  currency: 'RUB'
});

Обнаружение инструментов агентом

Агенты обнаруживают ваши инструменты, запрашивая браузер. Браузер возвращает полный манифест:

// Агент делает это внутри себя:
const tools = await navigator.modelContext.getTools();
// Возвращает: [{ name: 'searchFlights', description: '...', parameters: {...} }, ...]

const context = await navigator.modelContext.getContext();
// Возвращает: { pageType: 'flight-search-results', currentPage: 1, ... }

События вызова инструментов

WebMCP генерирует события при вызове инструментов, позволяя отслеживать использование агентами:

navigator.modelContext.addEventListener('toolinvoke', (event) => {
  console.log(`Агент вызвал инструмент: ${event.detail.toolName}`);
  console.log(`Параметры:`, event.detail.parameters);
  console.log(`ID выполнения: ${event.detail.executionId}`);
});

Декларативное API WebMCP: HTML-аннотации

Декларативное API позволяет аннотировать существующие HTML-элементы метаданными WebMCP. Это идеально, когда нужно предоставить функциональность форм без написания собственных JavaScript-обработчиков.

<form data-mcp-tool="bookHotel" data-mcp-description="Забронировать номер в отеле">
  <label>Название отеля</label>
  <input type="text" name="hotelId"
         data-mcp-param="hotelId"
         data-mcp-type="string"
         data-mcp-description="ID отеля из результатов поиска">

  <label>Дата заезда</label>
  <input type="date" name="checkin"
         data-mcp-param="checkin"
         data-mcp-type="date"
         data-mcp-description="Дата заезда">

  <label>Дата выезда</label>
  <input type="date" name="checkout"
         data-mcp-param="checkout"
         data-mcp-type="date"
         data-mcp-description="Дата выезда">

  <label>Гости</label>
  <input type="number" name="guests"
         data-mcp-param="guests"
         data-mcp-type="integer"
         data-mcp-description="Количество гостей"
         data-mcp-default="1">

  <button type="submit">Забронировать</button>
</form>

С декларативным API браузер автоматически генерирует определения инструментов из ваших HTML-аннотаций. Агент видит тот же инструмент (bookHotel) с теми же параметрами, но вы не написали ни строчки JavaScript сверх обычного обработчика формы.

Практические сценарии использования

1. E-commerce: покупка в один клик через агента

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

2. Путешествия: многошаговые сценарии

«Забронируй поездку в Токио» запускает цепочку: поиск билетов → поиск отелей → сравнение вариантов → бронирование. Каждый шаг вызывает отдельный инструмент на том же сайте, а агент выбирает оптимальную комбинацию.

3. Поддержка клиентов: автоматизированное решение проблем

Клиент спрашивает AI-ассистента «Какой статус моего заказа?» Ассистент переходит на сайт магазина, вызывает getOrderStatus(orderId) через WebMCP и возвращает результат. Если заказ задерживается, можно вызвать initiateReturn(orderId).

4. Аналитические дашборды: запросы на естественном языке

«Покажи конверсию за прошлый месяц по источникам трафика» — агент запрашивает инструменты аналитического дашборда, агрегирует данные и представляет результат в читаемом формате.

Безопасность и разрешения

Политика разрешений

WebMCP поддерживает HTTP-заголовок Permissions Policy, дающий контроль над тем, какие источники могут получать доступ к вашим инструментам:

Permissions-Policy: web-mcp=(self "https://trusted-agent.com")

Принципы безопасности

• Вы контролируете инструменты: Только те, что вы явно зарегистрировали. Ничего более.
• Безопасность того же источника: Агенты работают в том же контексте безопасности, что и JavaScript на странице
• Подтверждение пользователя: Деструктивные операции (удаление, оплата) должны требовать подтверждения
• Отзыв инструментов: Можно отозвать инструмент в любой момент через navigator.modelContext.unregisterTool(toolName)
• Нет неявной утечки данных: WebMCP не раскрывает ваш DOM или содержимое — только то, что вы явно объявили

Лучшие практики внедрения WebMCP

1. Проектируйте инструменты, а не эндпоинты

Каждый инструмент должен представлять намерение пользователя, а не API-эндпоинт. Вместо getProductData + getPricingData + getAvailabilityData создайте один инструмент searchProducts(query, filters), возвращающий всё необходимое агенту.

2. Progressive Enhancement в первую очередь

Ваш сайт обязан отлично работать без WebMCP. Слой для агентов — это улучшение, а не требование. Тестируйте сайт с отключённым WebMCP.

3. Пишите понятные описания инструментов

Названия и описания инструментов — это то, по чему агенты выбирают нужный. Будьте точны.

4. Обрабатывайте ошибки корректно

Возвращайте структурированные ошибки, чтобы агент мог восстановиться.

Поддержка браузеров и ограничения

Текущий статус

• Chrome: Developer trial (май 2026) — включение через флаг или origin trial
• Другие браузеры: Пока недоступен. WebMCP на ранней стадии предложения
• Стандартизация: Предложено через WICG как открытый веб-стандарт

Известные ограничения

• Инструменты работают в контексте страницы — нет выполнения в service worker
• Кросс-доменные iframe требуют явной политики разрешений
• API может измениться до стандартизации
• Нет встроенной очереди — конкурентные вызовы могут создавать race conditions

WebMCP и будущее веба

WebMCP — это больше, чем очередное API. Это фундаментальное переосмысление того, как сайты взаимодействуют с нечеловеческими посетителями. По мере того как AI-агенты становятся основным интерфейсом для всё большего числа пользователей (бронирование поездок, покупки, управление задачами), сайты, предоставляющие структурированные, дружественные к агентам интерфейсы, получат значительное конкурентное преимущество.

Для SEO и обнаруживаемости: Так же как семантический HTML помог поисковым системам понимать веб-контент в 2000-х, WebMCP помогает AI-агентам понимать веб-функциональность в 2020-х. Сайт с хорошо определёнными инструментами WebMCP с большей вероятностью будет использован агентами от имени пользователей.

Для веб-разработчиков: Это новый навык, но основы знакомы. Если вы писали REST API — вы сможете писать инструменты WebMCP. Если использовали структурированные данные (JSON-LD) для SEO — вы понимаете концепцию машиночитаемых метаданных. WebMCP применяет тот же принцип к функциональности.

Сочетание Built-in AI от Chrome (Prompt API с on-device Gemini Nano) и WebMCP особенно мощно. Браузер пользователя может запускать локального AI-агента, который нативно понимает инструменты вашего сайта, выполняет их на устройстве и возвращает результаты — без серверных вызовов к сторонним AI-провайдерам. Подробнее о браузерном AI читайте в руководстве по Chrome Prompt API. А чтобы разобраться в платформенных возможностях JavaScript, на которых построены эти API, смотрите полный обзор ES2026.

Часто задаваемые вопросы

Готовы подготовить сайт к AI-агентам?

WebMCP — это серьёзный сдвиг в том, как сайты будут взаимодействовать с AI-агентами. Ранние последователи — сайты, которые инвестируют в структурированные, дружественные к агентам интерфейсы сейчас — получат значительное преимущество по мере того, как AI-ориентированный просмотр веба станет мейнстримом.

Я — full-stack разработчик с глубоким опытом в современных веб-API, браузерных технологиях и AI-интеграции. Если вы планируете подготовить свой сайт к AI-агентам с помощью WebMCP или изучаете, как AI повлияет на вашу веб-стратегию, свяжитесь со мной — я предоставляю бесплатные первичные консультации.