WebMCP : transformer les sites web en interfaces prêtes pour l’IA

Les agents IA traditionnels rencontrent des difficultés avec les sites web. Ils cliquent partout comme des bots, analysent du HTML qui change constamment ou s’appuient sur une automatisation lente basée sur des captures d’écran. Cela crée des intégrations fragiles, qui se cassent à chaque mise à jour de l’interface utilisateur et fonctionnent mal à grande échelle.

WebMCP adopte une approche fondamentalement différente : au lieu de lutter contre l’interface web, il permet aux sites web d’exposer directement des capacités structurées aux agents IA via le Model Context Protocol (MCP).

Qu’est-ce que WebMCP ?

WebMCP est une bibliothèque JavaScript open source qui permet à n’importe quel site web d’exposer des outils, des prompts et des ressources structurés aux grands modèles de langage et aux agents IA. Elle ajoute un petit widget discret, généralement dans le coin inférieur droit, auquel les utilisateurs peuvent se connecter via leur client MCP — qu’il s’agisse d’une extension de navigateur, de Claude Desktop ou d’une autre interface d’agent.

Une fois connecté, un agent IA peut :

• Appeler des outils : exécuter les fonctions JavaScript que vous définissez pour effectuer des actions sur votre site
• Utiliser des prompts : accéder à des modèles de prompts prédéfinis pour des interactions cohérentes
• Lire des ressources : récupérer le contenu de la page ou des éléments DOM spécifiques comme contexte

Cela transforme votre site web en une sorte de serveur MCP côté client, où le code frontend fournit directement des capacités aux agents — tout en conservant l’authentification, l’état et le contrôle utilisateur dans la même interface.

Pourquoi est-ce important ?

Les problèmes liés à l’automatisation web traditionnelle sont bien documentés :

WebMCP résout ces problèmes en inversant la relation. Au lieu que les agents essaient de comprendre votre interface utilisateur, vous leur indiquez précisément ce qu’ils peuvent faire :

• Fiabilité : les agents appellent des fonctions structurées au lieu de deviner les éléments de l’interface
• Performance : l’exécution directe de JavaScript est plus rapide et moins coûteuse que les allers-retours backend
• Contrôle développeur : vous décidez exactement ce que l’agent peut faire — sans actions imprévues
• Pérennité : à mesure que l’adoption de MCP progresse et que les navigateurs ajoutent une prise en charge native, par exemple navigator.modelContext, les sites utilisant WebMCP seront instantanément « prêts pour les agents »

Premiers pas

L’intégration ne nécessite qu’une seule balise script :

<script src="https://webmcp.dev/webmcp.min.js"></script>

Le widget apparaît automatiquement. Vous pouvez ensuite enregistrer des capacités.

Enregistrer des outils

Les outils sont des fonctions JavaScript que les agents peuvent appeler. Chaque outil possède un nom, une description, un schéma de paramètres et un gestionnaire :

mcp.registerTool(
  'searchProducts',
  'Search the product catalog by query',
  {
    query: { type: "string", description: "Search term" },
    category: { type: "string", description: "Product category (optional)" }
  },
  async (args) => {
    const results = await searchAPI(args.query, args.category);
    return {
      content: [{
        type: "text",
        text: JSON.stringify(results, null, 2)
      }]
    };
  }
);

Le schéma des paramètres suit les conventions JSON Schema, ce qui permet aux agents de comprendre facilement quelles entrées sont valides.

Enregistrer des prompts

Les prompts fournissent des interactions guidées pour les tâches courantes :

mcp.registerPrompt(
  'summarize-page',
  'Generate a summary of the current page content',
  [],
  () => ({
    messages: [{
      role: "user",
      content: {
        type: "text",
        text: `Please summarize the following page content:\n\n${document.body.innerText.slice(0, 5000)}`
      }
    }]
  })
);

Exposer des ressources

Les ressources permettent aux agents d’accéder au contenu de la page ou à des éléments spécifiques :

// Expose current page content
mcp.registerResource(
  'page://current',
  'Current page content',
  'text/plain',
  () => document.body.innerText
);

// Expose a specific element
mcp.registerResource(
  'element://shopping-cart',
  'Current shopping cart contents',
  'application/json',
  () => JSON.stringify(getCartContents())
);

Personnaliser le widget

L’apparence du widget est configurable :

mcp.configure({
  position: 'bottom-right',  // or 'bottom-left', 'top-right', 'top-left'
  color: '#0066cc',          // match your brand
  size: 'medium'             // 'small', 'medium', 'large'
});

Cas d’utilisation

WebMCP est particulièrement utile pour :

Applications SaaS : permettre aux agents d’aider les utilisateurs à naviguer dans des workflows complexes, à remplir des formulaires ou à extraire des rapports sans créer d’intégrations personnalisées pour chaque outil d’IA.

E-commerce : permettre aux agents de rechercher des produits, comparer des options, ajouter des articles au panier ou suivre des commandes — le tout via des API structurées plutôt qu’un scraping fragile.

Sites de documentation : exposer des outils de recherche et de navigation afin que les agents puissent trouver les documents pertinents et fournir des réponses précises à partir de votre contenu réel.

Tableaux de bord et analytics : permettre aux agents d’interroger des données, de générer des rapports ou d’expliquer des métriques en utilisant votre logique frontend existante.

Outils internes : donner aux assistants IA un accès structuré aux outils de l’entreprise, en maintenant la sécurité via votre authentification existante tout en permettant l’automatisation.

Une conception avec humain dans la boucle

L’un des points forts de WebMCP est que les utilisateurs et les agents partagent la même interface. L’utilisateur voit ce que fait l’agent, peut intervenir à tout moment et garde le contrôle sur les actions sensibles.

C’est fondamentalement différent de l’automatisation headless, où les agents opèrent invisiblement en arrière-plan. Avec WebMCP :

• Les utilisateurs peuvent approuver ou refuser l’exécution des outils
• Les actions se déroulent visiblement dans le navigateur
• L’authentification passe par la session existante de l’utilisateur
• Les opérations sensibles peuvent nécessiter une confirmation explicite

Prise en charge native par les navigateurs

WebMCP s’aligne sur les standards émergents des navigateurs. Chrome dispose déjà d’une prise en charge préliminaire, et la spécification est en cours de développement au sein du W3C Web Machine Learning Community Group.

L’API proposée navigator.modelContext fournirait une prise en charge native de MCP par les navigateurs, ce qui signifie que les sites utilisant WebMCP aujourd’hui seront compatibles avec les futures implémentations natives des navigateurs :

// Future browser-native API (in development)
if (navigator.modelContext) {
  // Use native implementation
} else {
  // Fall back to WebMCP library
}

Considérations de sécurité

Lorsque vous exposez des outils à des agents IA, la sécurité exige une réflexion attentive :

• Principe du moindre privilège : n’exposez que ce dont les agents ont réellement besoin
• Validation des entrées : validez tous les paramètres des outils avant leur exécution
• Limitation du débit : empêchez les abus dus à un nombre excessif d’appels
• Journalisation d’audit : suivez ce que font les agents à des fins de débogage et de conformité
• Opérations sensibles : exigez une confirmation explicite de l’utilisateur pour les actions destructrices

WebMCP fournit des hooks pour mettre en œuvre ces modèles, mais la conception de la sécurité reste de votre responsabilité.

Comparaison avec d’autres approches

Commencer dès aujourd’hui

1. Rendez-vous sur webmcp.dev pour accéder à la bibliothèque officielle, aux exemples et à la documentation
2. Ajoutez le script à votre HTML
3. Enregistrez votre premier outil, prompt ou ressource
4. Testez avec un client MCP : générez un jeton, collez-le dans le widget et observez votre IA interagir nativement

Le projet est open source sur GitHub, et la spécification en évolution est disponible dans les dépôts d’incubation W3C associés.

Conclusion

WebMCP représente une avancée importante vers un web agentique — où l’IA ne lutte pas contre l’interface utilisateur, mais collabore à travers elle. En exposant des capacités structurées au lieu de forcer les agents à rétroconcevoir les interfaces, les sites web deviennent des citoyens de premier rang dans l’écosystème de l’IA.

Pour les équipes qui construisent des produits intégrés à l’IA ou qui cherchent à rendre leurs sites existants plus accessibles aux agents, WebMCP offre une voie simple et alignée sur les standards émergents.

Ressources

• Site officiel de WebMCP
• Dépôt GitHub de WebMCP
• Spécification du Model Context Protocol
• W3C Web Machine Learning Community Group
• Documentation Claude Desktop MCP

Besoin d’aide ?

Vous souhaitez rendre vos applications web prêtes pour l’IA avec WebMCP ou intégrer MCP dans votre infrastructure existante ? Nous serons ravis de vous aider. Contactez-nous et discutons de la manière dont nous pouvons apporter des capacités d’agents intelligents à vos produits.