Google и Microsoft представили в ограниченном превью новую технологию — WebMCP. Это стандарт, который обещает кардинально изменить взаимодействие ИИ-агентов с веб-приложениями. Если вы уже знакомы с Model Context Protocol (MCP) от Anthropic, то WebMCP — это его идеологический наследник, перенесенный непосредственно на сторону клиента (в браузер).

В чем проблема текущих решений?

На сегодняшний день, чтобы ИИ-агент мог выполнить полезное действие на сайте (например, "закажи мне пиццу" или "найди билеты на самолет"), у него есть два основных пути, оба из которых несовершенны:

Визуальная эмуляция (Actuation): Агент пытается "смотреть" на страницу через DOM или скриншоты, искать кнопки и эмулировать клики. Это медленно, дорого и крайне ненадежно — малейшее изменение верстки или A/B тест могут сломать сценарий.
Бэкенд-интеграция (Classic MCP): Сервис поднимает отдельный MCP-сервер. Это надежно, но требует разработки отдельного бэкенда (обычно на Python/Node.js) и, что критично, теряет контекст текущей сессии пользователя. Агент общается с сервером "вслепую", не зная, что именно пользователь видит на экране прямо сейчас.

Что предлагает WebMCP?

WebMCP предлагает третий путь: позволить веб-разработчикам регистрировать JavaScript-функции как "инструменты" (tools) прямо в браузере. Эти инструменты становятся доступны ИИ-агентам (будь то встроенный ИИ браузера, расширение или внешний ассистент).

Ключевые преимущества:

Human-in-the-loop: Пользователь и агент работают в одном интерфейсе. Агент может выполнить рутинную часть работы (например, заполнить сложную форму), а пользователь — проверить и подтвердить результат.
Client-side Logic: Не нужно писать бэкенд-обертки. Вы можете переиспользовать существующие JS-функции вашего фронтенда.
Единый контекст: Агент, приложение и пользователь видят одно и то же состояние.

Как это выглядит в коде?

Основной интерфейс взаимодействия — window.navigator.modelContext. С его помощью сайт сообщает браузеру, какие функции доступны для вызова агентом.

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

Рассмотрим пример Todo-приложения. Мы хотим дать агенту возможность добавлять задачи. Вместо парсинга HTML, мы просто экспортируем функцию:

if ("modelContext" in window.navigator) {
  // provideContext заменяет текущий набор инструментов
  window.navigator.modelContext.provideContext({
    tools: [
      {
        name: "add-todo",
        description: "Добавляет новую задачу в список дел",
        inputSchema: {
          type: "object",
          properties: {
            text: { 
              type: "string", 
              description: "Текст задачи" 
            }
          },
          required: ["text"]
        },
        // Функция, которая будет вызвана агентом
        execute: ({ text }, agent) => {
          // Вызываем существующую логику нашего SPA
          appStore.dispatch({ type: 'ADD_TODO', payload: text });
          
          // Возвращаем результат агенту в структурированном виде
          return {
            content: [{ type: "text", text: `Задача "${text}" успешно добавлена` }]
          };
        }
      }
    ]
  });
}

Динамическое управление инструментами

Для Single Page Applications (SPA) критически важно, чтобы набор инструментов соответствовал текущему экрану. Например, инструмент "Оплатить заказ" должен быть доступен только на чекауте. WebMCP позволяет регистрировать и удалять инструменты на лету:

// При переходе на страницу товара
window.navigator.modelContext.registerTool({
  name: "add-to-cart",
  description: "Добавить текущий товар в корзину",
  // ... схема и реализация
});

// При уходе со страницы
window.navigator.modelContext.unregisterTool("add-to-cart");

Взаимодействие с пользователем (Human-in-the-loop)

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

async function buyProduct({ productId }, agent) {
  // Агент запрашивает подтверждение действия у пользователя
  // Это гарантирует, что агент не совершит покупку без ведома человека
  const confirmed = await agent.requestUserInteraction(async () => {
    return new Promise((resolve) => {
      // Можно использовать стандартный confirm или кастомный модальный диалог
      const isConfirmed = confirm(`Вы уверены, что хотите купить товар ${productId}?`);
      resolve(isConfirmed);
    });
  });

  if (!confirmed) {
    throw new Error("Покупка отменена пользователем");
  }

  await api.purchase(productId);
  return "Покупка успешно совершена!";
}

Безопасность и производительность

Поскольку мы даем ИИ доступ к выполнению кода на странице, возникают вопросы безопасности. WebMCP решает их через модель разрешений:

Явное согласие: Браузер выступает арбитром. Когда сайт регистрирует инструменты, агент не может их вызвать без ведома пользователя. Пользователь должен явно разрешить агенту взаимодействовать с конкретным сайтом.
Изоляция: Инструменты выполняются в контексте страницы, подчиняясь всем правилам CORS и CSP.
Web Workers: Для тяжелых вычислений (например, анализ большого массива данных перед фильтрацией) инструменты могут и должны выноситься в Web Workers, чтобы не блокировать основной поток интерфейса. Это позволяет агенту выполнять сложные задачи в фоне, пока пользователь продолжает скроллить ленту.

Реальные сценарии использования

E-commerce и сложный поиск: Пользователь может попросить: "Покажи мне платья для коктейльной вечеринки, похожие на это фото, но не дороже $200". Агент использует инструмент filterProducts и analyzeImage, чтобы настроить фильтры магазина за пользователя.
Креативные инструменты: В графическом редакторе (типа Canva) можно попросить: "Сделай три варианта этого баннера с разными призывами к действию". Агент вызовет duplicatePage и editText в цикле, предоставив пользователю готовые варианты на выбор.
DevTools и CI/CD: Агент может анализировать логи неудачных сборок прямо в интерфейсе CI-системы, используя инструменты вроде getBuildLogs и suggestFix, и даже автоматически предлагать патчи.

Почему это не просто "еще одно расширение для Chrome"?

Многие могут спросить: «Разве расширения браузера не делают то же самое?». Разница фундаментальна. Расширения требуют установки, имеют доступ ко всем данным (что плохо для приватности) и ломаются при обновлении верстки сайта. WebMCP — это контракт, который сайт сам предлагает агенту. Это делает интеграцию стабильной, безопасной и не требующей от пользователя установки лишнего софта.

Заключение

WebMCP — это попытка построить мост между «человеческим» вебом и вебом для агентов. Вместо того чтобы создавать отдельные, скрытые API для роботов, мы делаем наши обычные сайты понятными и управляемыми для ИИ. Технология находится в стадии активного обсуждения (Proposal), но поддержка таких гигантов как Google и Microsoft дает надежду на скорое появление стандарта в Chrome и Edge.

Ссылка на репозиторий проекта

WebMCP: Революция в интеграции ИИ прямо в браузере