WebMCP & Browser-Native Tools(Протокол 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 Thread Blocking: Виконання важких інструментів WebMCP у головному потоці браузера призводить до зависання інтерфейсу ("лагів"). Усі ресурсомісткі операції повинні бути винесені у Web Workers.

6. Стратегічний висновок для інженера 2026 року

WebMCP ліквідує прірву між настільними агентськими системами та веб-інтерфейсами. Для фронтенд-інженерів 2026 року впровадження WebMCP маніфестів стає такою ж обов'язковою практикою доступності та інтеграції, якою колись була підтримка REST API та семантичного HTML.