WebMCP и Браузерные Инструменты

1. Обзор концепции и системная проблема

Оригинальный Model Context Protocol (MCP), предложенный Anthropic в конце 2024 года, революционизировал локальную разработку, предоставив языковым моделям стандартизированный доступ к файлам и терминалу. Однако в мире чистого веба (SaaS-приложения, облачные редакторы, такие как Figma или Canva, веб-CRM) стандартный подход имел критические ограничения:

1. Необходимость установки локального ПО: Пользователь веб-сервиса не должен устанавливать Python или Node.js на свой ноутбук, чтобы предоставить агенту доступ к контексту вкладки.
2. Невозможность взаимодействия с живым интерфейсом: Традиционные бэкенд-инструменты не видят внутреннее состояние клиентского JavaScript, реактивные хранилища данных или выделенный пользователем фрагмент текста.

WebMCP — это расширение протокола MCP, разработанное специально для изолированной браузерной среды. Оно превращает каждую открытую вкладку браузера в полноценный MCP-сервер или клиент.

2. Архитектурная таксономия и ментальная модель

┌─────────────────────────────────────────────────────────────┐
│                 WEBMCP RUNTIME ARCHITECTURE                 │
├─────────────────────────────────────────────────────────────┤
│ 1. Host Application Environment (React / Vue / Svelte)     │
│    • DOM State, Active Selections, Canvas / WebGL           │
│    • In-Memory Stores (Zustand, Redux, Signals)             │
├─────────────────────────────────────────────────────────────┤
│ 2. WebMCP Transport Layer                                   │
│    • Window.postMessage (Iframe ➔ Parent Communication)     │
│    • WebWorker Channel (Фоновая обработка без зависаний UI) │
│    • WebSockets / Server-Sent Events (Облачный LLM роутер)  │
├─────────────────────────────────────────────────────────────┤
│ 3. Client-Side Sandboxed Tools                              │
│    • WASM SQLite / DuckDB (Локальные аналитические запросы) │
│    • IndexedDB / LocalStorage Context Providers             │
├─────────────────────────────────────────────────────────────┤
│ 4. User Consent & Security Boundary                         │
│    • Origin Sandboxing, CSP Policies, Action Confirmations  │
└─────────────────────────────────────────────────────────────┘

3. Технический пайплайн и внутренняя механика

Реализация инструмента WebMCP внутри современного веб-приложения выглядит следующим образом:

1. Регистрация инструмента в браузере:

   import { registerWebMCPTool } from "@modelcontextprotocol/web-sdk";
   
   registerWebMCPTool({
     name: "export_canvas_selection",
     description: "Экспортирует выделенные объекты на векторном полотне в SVG формат",
     parameters: {
       type: "object",
       properties: {
         format: { type: "string", enum: ["svg", "png"] }
       }
     },
     execute: async ({ format }) => {
       const selectedNodes = editorStore.getSelectedNodes();
       return renderToFormat(selectedNodes, format);
     }
   });
   

2. Подключение агента: Веб-агент (например, плагин браузера или встроенный AI-ассистент) обнаруживает доступные WebMCP инструменты через стандартизированный navigator.ai.mcp интерфейс.
3. Вызов и выполнение: Агент вызывает инструмент, передает аргументы, а веб-приложение мгновенно подчеркивает изменения на экране без перезагрузки страницы.

4. Практические инженерные сценарии в продакшене

01. Интерактивный AI-дизайнер в SaaS

Пользователь говорит ассистенту: "Сделай все кнопки на этой странице закругленными и измени основной цвет на изумрудный". Агент через WebMCP читает глобальные CSS-токены из хранилища приложения и изменяет их прямо в памяти браузера, демонстрируя мгновенный результат.

02. Локальный анализ финансовых отчетов без отправки данных на сервер

Благодаря WebMCP агент запускает локальный экземпляр WebAssembly DuckDB. Данные пользователя считываются из локального файла, агрегируются в браузере, а в облачную модель отправляются только финальные математические итоги, что гарантирует 100% конфиденциальность.

5. Подводные камни, типовые ошибки и безопасность

• Риски Cross-Site Scripting (XSS): Если инструмент WebMCP позволяет выполнять произвольный JavaScript в DOM, злонамеренный промпт может украсть токены авторизации. Необходима строгая санитаризация и запрет неконтролируемого eval.
• Блокировка UI потока: Выполнение ресурсоемких инструментов WebMCP в главном потоке браузера приводит к зависаниям интерфейса ("лагам"). Все ресурсоемкие операции должны быть вынесены в Web Workers.