Applications MCP : Ajouter une interface utilisateur interactive aux conversations IA

Les outils MCP ont toujours été performants pour récupérer des données et effectuer des actions. Ce qu’ils ne pouvaient pas faire, c’était vous montrer quelque chose d’utile. Vous demandiez à un assistant IA de récupérer vos chiffres de vente, et vous obteniez un mur de texte en retour. Vous vouliez filtrer par région ? Une autre requête. Trier par chiffre d’affaires ? Encore une autre requête. Ça fonctionne, mais c’est lent et frustrant.

Les applications MCP résolvent ce problème. Elles permettent aux serveurs MCP de renvoyer des composants d’interface utilisateur interactifs — tableaux de bord, formulaires, visualisations, panneaux de configuration — qui s’affichent directement dans la conversation. Pas d’application séparée, pas de changement de contexte.

Que sont les applications MCP ?

Les applications MCP constituent la première extension officielle du Model Context Protocol. Elles sont devenues officielles début 2026, standardisant des approches qui étaient déjà explorées par MCP-UI et le SDK OpenAI Apps.

Avant les applications MCP, chaque client devait résoudre le problème de l’interface utilisateur de manière indépendante. Cette fragmentation signifiait qu’un serveur conçu pour Claude ne fonctionnerait pas de la même manière dans VS Code ou ChatGPT. Les applications MCP établissent un standard partagé pour qu’une seule implémentation fonctionne sur tous les clients compatibles.

Il convient de noter que les applications MCP sont encore récentes et en évolution. Mais elles sont déjà prises en charge dans plusieurs clients MCP, notamment Claude et des outils de développement — une base de départ significative.

Comment fonctionnent les applications interactives MCP

L’architecture est simple. Un outil fait référence à une ressource d’interface utilisateur qui pointe vers une interface interactive :

{
  "name": "visualize_sales",
  "description": "Returns an interactive sales dashboard",
  "_meta": {
    "ui": {
      "resourceUri": "ui://dashboards/sales"
    }
  }
}

L’hôte récupère cette ressource — un bundle HTML servi sous le schéma ui:// — et l’affiche dans une iframe isolée. L’interface utilisateur communique avec l’hôte en utilisant JSON-RPC sur postMessage. Cela signifie que tous les messages sont structurés, auditables et cohérents avec le fonctionnement du reste de MCP.

Le SDK ext-apps gère cette couche de communication :

import { App } from "@modelcontextprotocol/ext-apps"

const app = new App()
await app.connect()

app.ontoolresult = (result) => renderDashboard(result.data)

await app.updateModelContext({
  content: [{ type: "text", text: "User filtered by Q3" }],
})

Le modèle reste dans la boucle. Lorsqu’un utilisateur interagit avec l’interface utilisateur — en cliquant sur un filtre, en sélectionnant une option de configuration, en approuvant une section de document — le modèle le voit et peut répondre.

Les composants d’interface utilisateur MCP sont simplement des applications web

C’est la partie que les développeurs frontend apprécieront le plus. Votre bundle d’interface utilisateur est une application web standard. Vous pouvez la construire avec React, Vue, Svelte ou JavaScript pur. Il n’y a pas de moteur de rendu propriétaire à apprendre.

La ressource ui:// est un fichier HTML autonome avec des ressources intégrées. L’hôte le charge dans une iframe isolée, il s’exécute donc dans un environnement de navigateur familier. Vous écrivez des composants de la même manière que d’habitude — la seule nouveauté est l’utilisation du SDK App pour communiquer avec l’hôte.

La prise en charge de l’interface utilisateur est également une amélioration progressive. Si un client ne prend pas en charge les applications MCP, l’outil fonctionne toujours — il renvoie simplement une réponse textuelle à la place. Les serveurs doivent toujours fournir un repli textuel, ce qui signifie que vous n’êtes pas exclu des clients sans interface utilisateur.

Où les applications interactives MCP font la plus grande différence

Certains flux de travail nécessitent véritablement une interface utilisateur. Les réponses textuelles ne peuvent pas remplacer :

• Les tableaux de bord de données où les utilisateurs doivent filtrer, trier et explorer en profondeur
• Les assistants de configuration avec des champs dépendants qui changent en fonction des sélections
• Les panneaux de révision de documents où les utilisateurs approuvent ou signalent du contenu en ligne
• Les moniteurs en temps réel qui se mettent à jour sans nécessiter un nouvel appel d’outil

Shopify l’a clairement démontré avec son cas d’usage e-commerce — les variantes de produits, les créateurs de bundles et les contraintes d’inventaire sont trop complexes à gérer par des échanges de requêtes successifs. Une interface utilisateur le gère proprement.

Pour commencer

Le dépôt ext-apps inclut des exemples de serveurs fonctionnels : threejs-server, map-server, pdf-server et system-monitor-server. Choisissez celui qui se rapproche le plus de ce que vous construisez et partez de là.

Conclusion

Les applications MCP sont à un stade précoce mais déjà utilisables. Elles apportent une manière standard d’intégrer une interface utilisateur interactive directement dans les conversations IA, comblant l’écart entre ce que les outils MCP peuvent récupérer et ce que les utilisateurs peuvent réellement faire avec ces données. Si vous construisez déjà des serveurs MCP, ajouter une couche d’interface utilisateur est une étape naturelle suivante — et les outils sont prêts pour cela.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.