Comment ajouter WebMCP à votre application Next.js

Les agents IA ont souvent du mal à comprendre les applications web. Ils extraient le DOM et tentent de deviner la fonction des boutons. Cela entraîne des erreurs et des hallucinations.

WebMCP résout ce problème. Il s'agit d'un standard W3C qui ajoute une API modelContext aux navigateurs. Au lieu de deviner, votre application Next.js indique précisément à l'agent les fonctions qu'il peut exécuter.

WebMCP vs Anthropic MCP

Anthropic MCP s'exécute sur le serveur. Il utilise JSON-RPC pour se connecter à des bases de données ou des API. Il réside en dehors du navigateur.

WebMCP s'exécute dans l'onglet du navigateur. Il enregistre les outils localement. Il utilise la session existante de l'utilisateur. Aucune authentification ou backend supplémentaire n'est nécessaire.

Ils fonctionnent ensemble. Vous pouvez utiliser MCP pour les tâches backend et WebMCP pour les interactions frontend.

Deux façons d'exposer les outils :

  • HTML Forms : Ajoutez les attributs toolname et tooldescription à vos formulaires. L'agent voit l'outil et les paramètres sans aucun JavaScript. Utilisez cette méthode pour la recherche et les filtres.

  • JavaScript : Utilisez l'API navigator.modelContext pour la logique dynamique. C'est la solution idéale pour les flux multi-étapes.

Implémentation dans Next.js

  1. Installez le polyfill pour le support des navigateurs : npm install @mcp-b/global @mcp-b/react-webmcp

  2. Créez un WebMCPProvider pour initialiser le polyfill dans votre layout.

  3. Utilisez le hook useWebMCP dans vos composants client. Ce hook gère automatiquement l'enregistrement et le nettoyage des outils.

Exemple de configuration d'un outil :

useWebMCP({
  name: 'searchProducts',
  description: 'Search the product catalog.',
  inputSchema: z.object({
    query: z.string(),
    category: z.string().optional(),
  }),
  execute: async ({ query, category }) => {
    const res = await fetch(`/api/products?q=${query}`);
    return res.json();
  },
});

Bonnes pratiques

  • Utilisez HTTPS. WebMCP nécessite une connexion sécurisée en production.
  • Limitez le nombre d'outils. Trop d'outils alourdissent le contexte de l'IA et ralentissent le raisonnement. Restez en dessous de 50 outils par page.
  • Fournissez des descriptions riches. Les agents s'appuient sur ces chaînes de caractères pour comprendre quand utiliser un outil.
  • Utilisez une couche de service. Ne vous appuyez pas sur l'état React à l'intérieur des gestionnaires d'outils. Utilisez des fonctions simples pour éviter les données obsolètes.

Tests

Ouvrez Chrome 146 ou une version plus récente. Activez le flag WebMCP dans chrome://flags. Utilisez l'extension Model Context Tool Inspector pour tester vos outils sans agent IA.

WebMCP est l'avenir de la navigation web agentique. Commencez à l'implémenter dès maintenant pour être prêt lorsque les navigateurs l'activeront par défaut.

Source: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp