WebMCP et outils natifs du navigateur

1. Vue d'ensemble du concept et problème systémique

Le Model Context Protocol (MCP) original, proposé par Anthropic fin 2024, a révolutionné le développement local en offrant aux modèles de langage un accès standardisé aux fichiers et au terminal. Cependant, dans l'univers du web pur (applications SaaS, éditeurs cloud comme Figma ou Canva, CRM web), l'approche standard présentait des limitations critiques :

1. Nécessité d'installer un logiciel local : L'utilisateur d'un service web ne doit pas installer Python ou Node.js sur son ordinateur portable pour donner à l'agent accès au contexte de l'onglet.
2. Impossibilité d'interagir avec une interface vivante : Les outils backend traditionnels ne voient pas l'état interne du JavaScript client, les stores réactifs de données ni les fragments de texte sélectionnés par l'utilisateur.

WebMCP est une extension du protocole MCP, conçue spécifiquement pour l'environnement isolé du navigateur. Elle transforme chaque onglet de navigateur ouvert en un serveur ou un client MCP complet.

2. Taxonomie architecturale et modèle mental

┌─────────────────────────────────────────────────────────────┐
│                 ARCHITECTURE D'EXÉCUTION WEBMCP             │
├─────────────────────────────────────────────────────────────┤
│ 1. Environnement de l'Application Hôte (React / Vue / Svelte)│
│    • État du DOM, Sélections Actives, Canvas / WebGL        │
│    • Stores en Mémoire (Zustand, Redux, Signals)            │
├─────────────────────────────────────────────────────────────┤
│ 2. Couche de Transport WebMCP                               │
│    • Window.postMessage (Communication Iframe ➔ Parent)     │
│    • Canal WebWorker (Calculs en arrière-plan sans gel de   │
│      l'interface utilisateur)                               │
│    • WebSockets / Server-Sent Events (Routeur LLM Cloud)    │
├─────────────────────────────────────────────────────────────┤
│ 3. Outils Sandboxés côté Client                             │
│    • WASM SQLite / DuckDB (Requêtes analytiques locales)    │
│    • Fournisseurs de Contexte IndexedDB / LocalStorage      │
├─────────────────────────────────────────────────────────────┤
│ 4. Consentement Utilisateur & Périmètre de Sécurité         │
│    • Isolation par Origine, Politiques CSP, Confirmations   │
│      d'Actions                                              │
└─────────────────────────────────────────────────────────────┘

3. Pipeline technique et mécanique interne

L'implémentation d'un outil WebMCP au sein d'une application web moderne se présente comme suit :

1. Enregistrement de l'outil dans le navigateur :

   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. Connexion de l'agent : Un agent web (par exemple, une extension de navigateur ou un assistant IA intégré) découvre les outils WebMCP disponibles via l'interface standardisée navigator.ai.mcp.
3. Appel et exécution : L'agent appelle l'outil, transmet les arguments, et l'application web met immédiatement en évidence les changements à l'écran sans aucun rechargement de la page.

4. Scénarios d'ingénierie pratiques en production

01. Designer IA interactif dans un SaaS

L'utilisateur dit à l'assistant : « Rends tous les boutons de cette page arrondis et change la couleur principale en émeraude ». L'agent, via WebMCP, lit les tokens CSS globaux depuis le store de l'application et les modifie directement dans la mémoire du navigateur, affichant un résultat instantané.

02. Analyse locale de rapports financiers sans envoi de données au serveur

Grâce à WebMCP, l'agent lance une instance locale de DuckDB via WebAssembly. Les données de l'utilisateur sont lues depuis un fichier local, agrégées dans le navigateur, et seuls les résumés mathématiques finaux sont envoyés au modèle cloud, garantissant une confidentialité à 100 %.

5. Pièges courants, erreurs typiques et sécurité

• Risques de Cross-Site Scripting (XSS) : Si un outil WebMCP permet l'exécution de JavaScript arbitraire dans le DOM, un prompt malveillant pourrait voler des tokens d'authentification. Une sanitisation stricte et l'interdiction de eval non contrôlé sont impératives.
• Blocage du Thread UI : L'exécution d'outils WebMCP lourds sur le thread principal du navigateur entraîne des gelées de l'interface (« lags »). Toutes les opérations gourmandes en ressources doivent être déportées vers des Web Workers.

6. Conclusion stratégique pour l'ingénieur de 2026

WebMCP comble le fossé entre les systèmes agentic desktop et les interfaces web. Pour les ingénieurs frontend de 2026, l'adoption de WebMCP devient aussi essentielle que celle des frameworks modernes.