WebMCP i narzędzia natywne dla przeglądarki

1. Przegląd koncepcji i problem systemowy

Oryginalny Model Context Protocol (MCP), zaproponowany przez Anthropic pod koniec 2024 roku, zrewolucjonizował lokalne środowiska programistyczne, zapewniając modelom językowym ustandaryzowany dostęp do plików oraz terminala. Jednak w świecie czystego webu (aplikacje SaaS, edytory chmurowe takie jak Figma czy Canva, webowe CRM-y) standardowe podejście napotykało na krytyczne ograniczenia:

1. Konieczność instalacji oprogramowania lokalnego: Użytkownik serwisu webowego nie powinien być zmuszany do instalowania Pythona lub Node.js na swoim laptopie, aby udostępnić agentowi kontekst aktywnej karty przeglądarki.
2. Brak możliwości interakcji z żywym interfejsem: Tradycyjne narzędzia backendowe nie mają wglądu w wewnętrzny stan JavaScriptu po stronie klienta, reaktywne magazyny danych ani fragmenty tekstu zaznaczone przez użytkownika.

WebMCP to rozszerzenie protokołu MCP, opracowane specjalnie dla izolowanego środowiska przeglądarki. Przekształca każdą otwartą kartę przeglądarki w pełnoprawny serwer lub klienta MCP.

2. Taksonomia architektoniczna i model mentalny

┌─────────────────────────────────────────────────────────────┐
│                 ARCHITEKTURA RUNTIME WEBMCP                 │
├─────────────────────────────────────────────────────────────┤
│ 1. Środowisko aplikacji hostującej (React / Vue / Svelte)   │
│    • Stan DOM, aktywne zaznaczenia, Canvas / WebGL          │
│    • Przechowywanie danych w pamięci (Zustand, Redux,       │
│      Signals)                                               │
├─────────────────────────────────────────────────────────────┤
│ 2. Warstwa transportowa WebMCP                              │
│    • Window.postMessage (Komunikacja Iframe ➔ Parent)       │
│    • Kanał WebWorker (Obliczenia w tle bez blokowania UI)   │
│    • WebSockets / Server-Sent Events (Chmurowy router LLM)  │
├─────────────────────────────────────────────────────────────┤
│ 3. Narzędzia po stronie klienta w środowisku piaskownicy    │
│    • WASM SQLite / DuckDB (Lokalne zapytania analityczne)   │
│    • Dostawcy kontekstu IndexedDB / LocalStorage            │
├─────────────────────────────────────────────────────────────┤
│ 4. Zgoda użytkownika i granice bezpieczeństwa               │
│    • Piaskownica pochodzenia, polityki CSP, potwierdzenia   │
│      akcji                                                  │
└─────────────────────────────────────────────────────────────┘

3. Pipeline techniczny i mechanika wewnętrzna

Implementacja narzędzia WebMCP w ramach współczesnej aplikacji webowej wygląda następująco:

1. Rejestracja narzędzia w przeglądarce:

   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. Podłączenie agenta: Agent webowy (np. wtyczka przeglądarki lub wbudowany asystent AI) wykrywa dostępne narzędzia WebMCP za pośrednictwem ustandaryzowanego interfejsu navigator.ai.mcp.
3. Wywołanie i wykonanie: Agent wywołuje narzędzie, przekazuje argumenty, a aplikacja webowa natychmiast wizualizuje zmiany na ekranie bez konieczności przeładowania strony.

4. Praktyczne scenariusze inżynierskie w środowisku produkcyjnym

01. Interaktywny projektant AI w SaaS

Użytkownik mówi do asystenta: „Zaokrąglij wszystkie przyciski na tej stronie i zmień kolor główny na szmaragdowy”. Agent, korzystając z WebMCP, odczytuje globalne tokeny CSS ze store’u aplikacji i modyfikuje je bezpośrednio w pamięci przeglądarki, prezentując natychmiastowy efekt.

02. Lokalna analiza raportów finansowych bez wysyłania danych na serwer

Dzięki WebMCP agent uruchamia lokalną instancję DuckDB opartą na WebAssembly. Dane użytkownika są odczytywane z lokalnego pliku, agregowane w przeglądarce, a do modelu chmurowego trafiają wyłącznie końcowe wyniki obliczeń matematycznych, co gwarantuje 100% prywatności.

5. Pułapki, typowe błędy i bezpieczeństwo

• Ryzyko Cross-Site Scripting (XSS): Jeśli narzędzie WebMCP pozwala na wykonanie dowolnego kodu JavaScript w DOM, złośliwy prompt może posłużyć do przechwycenia tokenów autoryzacyjnych. Konieczne jest rygorystyczne saneityzowanie danych oraz zakazanie niekontrolowanego użycia eval.
• Blokowanie wątku UI: Wykonywanie ciężkich operacji narzędzi WebMCP w głównym wątku przeglądarki prowadzi do zawieszania się interfejsu („lagów”). Wszystkie operacje zasobożerne muszą zostać przeniesione do Web Workers.

6. Strategiczny wniosek dla inżyniera w 2026 roku

WebMCP eliminuje przepaść między desktopowymi systemami agentic a interfejsami webowymi. Dla inżynierów frontendu w 2026 roku implementacja manifestów WebMCP staje się tak samo obowiązkową praktyką w zakresie dostępności i integracji, jaką kiedyś było wsparcie dla REST API oraz semantycznego HTML.