MCP Apps permet à un outil de renvoyer une interface fonctionnelle plutôt qu’un simple texte. Cet article passe en revue les applications d’exemple officielles, des cartes 3D aux curseurs de budget, présente le code serveur et vue derrière elles, et explique comment créer la vôtre dans Claude et ChatGPT.
Demandez à un assistant IA une carte, et vous obteniez autrefois la description d’une carte. Ajoutez une MCP App derrière l’outil, et la même question renvoie une vraie carte dans le chat : avec ses repères, zoomable, prête pour votre question suivante. Ce passage de la description à l’affichage est tout l’intérêt de MCP Apps, et le plus rapide pour le comprendre est d’observer des exemples fonctionnels plutôt que de lire la spécification. Cet article passe en revue les démos officielles, les produits déjà livrés avec l’extension, le modèle de code derrière chacune d’elles, et ce qu’il faut pour créer votre propre interface interactive dans Claude et ChatGPT.
MCP Apps est la première extension officielle du Model Context Protocol. Elle a été annoncée le 26 janvier 2026 et permet à un outil de renvoyer une interface interactive qui s’affiche directement dans la fenêtre de chat, et non plus seulement du texte ou du JSON. Graphiques, formulaires, tableaux de bord et scènes 3D vivent tous dans la conversation, juste à côté de la réponse du modèle.
Un outil MCP classique est une fonction. Le modèle l’appelle, récupère des données et décrit le résultat en prose. Cela fonctionne tant que les données sont un tableau de 40 lignes ou un itinéraire à travers une ville ; à ce moment-là, la prose devient une mauvaise interface.
Avec MCP Apps, un outil peut pointer vers une ressource d’interface. L’hôte (l’application de chat) récupère cette ressource et l’affiche dans un iframe en sandbox. L’hôte transmet les données de l’outil à l’interface, et celle-ci peut rappeler d’autres outils via l’hôte. La conversation et l’interface restent synchronisées : un clic sur un graphique peut devenir la question suivante posée au modèle.
L’idée ne tombe pas du ciel. Elle s’appuie sur deux initiatives communautaires : le projet MCP-UI, mené par Ido Salomon et Liad Yosef, et l’Apps SDK d’OpenAI. Anthropic et OpenAI ont travaillé sur une spécification commune plutôt que de livrer deux standards concurrents, ce qui explique qu’une seule application puisse cibler les deux assistants.
Claude et ChatGPT sont les deux grands hôtes, mais ils ne sont pas seuls. Le dépôt ext-apps recense aussi VS Code, Goose, Postman, MCPJam, l’inspecteur mcp-use et l’Alpic Playground comme clients capables d’afficher ces applications.
💡 Le support varie selon l’hôte. MCP Apps est une spécification, et chaque client décide de la part qu’il implémente. Testez votre application dans chaque hôte qui vous intéresse avant de promettre quoi que ce soit aux utilisateurs.
Le dépôt modelcontextprotocol/ext-apps contient environ 18 applications d’exemple, et les serveurs d’exemple sont publiés sous forme de paquets @modelcontextprotocol/server-<name>, ce qui vous permet d’en tester une sans écrire une seule ligne de code. Voici la liste en un coup d’œil.
| Exemple | Ce qu’il montre | À reprendre pour |
|---|---|---|
| Map | Globe 3D construit sur CesiumJS | Vues spatiales que l’utilisateur peut faire glisser et incliner |
| Three.js | Scènes 3D interactives | Rendu lourd dans un sandbox |
| ShaderToy | Shaders GLSL en direct | Graphismes GPU dans un iframe |
| Sheet Music | Notation ABC rendue sous forme de partition | Moteurs de rendu spécifiques à un domaine |
| Wiki link graph | Graphe de liens entre pages wiki | Navigation nœud par nœud |
| Cohort Heatmap | Rétention par groupes d’utilisateurs | Analyses denses en un coup d’œil |
| Customer Segmentation | Nuages de points et graphiques à bulles | Clusters que l’utilisateur peut examiner |
| Scenario Modeler | Projections SaaS | Des entrées qui redessinent les sorties |
| Budget Allocator | Curseurs et graphiques | Contrôles liés aux totaux en direct |
| System Monitor | Métriques du système d’exploitation | Données qui changent sans cesse |
| PDF Server | Visionneuse de documents découpés | Gros fichiers en plusieurs morceaux |
| Video Resource | Vidéo binaire via MCP | Charges utiles non textuelles |
| Transcript | Parole vers texte | Entrée audio |
| Say Demo | Texte vers parole | Sortie audio |
| QR Code | Générateur de codes | La plus petite application utile |
L’exemple Map affiche un globe 3D avec CesiumJS. Demandez à l’assistant de montrer une ville, et le globe s’y rend en vol. Vous pouvez le faire glisser, zoomer et l’incliner comme dans n’importe quelle application de cartographie, car il s’agit d’une interface vivante et non d’une capture d’écran. La vue communique avec l’hôte par le même canal que tout le reste : ce que l’utilisateur fait sur la carte peut donc influencer ce que le modèle dit ensuite.
Three.js et ShaderToy poussent la même idée vers les graphismes. L’un rend des scènes 3D interactives, l’autre exécute des shaders GLSL en direct. Ni l’un ni l’autre n’a besoin d’un aller-retour serveur pour chaque image, ce qui montre que le rendu gourmand en GPU fonctionne parfaitement dans le sandbox. Si votre outil renvoie de la géométrie, du terrain ou quoi que ce soit de spatial, ce sont ces deux exemples à copier.
L’analyse est le domaine où l’interface interactive rapporte le plus vite. Cohort Heatmap montre la rétention par groupes d’utilisateurs. Customer Segmentation trace des nuages de points et des graphiques à bulles, avec des clusters que vous pouvez examiner. System Monitor diffuse les métriques du système d’exploitation au fur et à mesure de leur évolution, et la démo wiki link graph dessine un graphe que l’on peut suivre nœud par nœud.
Chacun remplace une réponse longue et difficile à lire par quelque chose que l’on parcourt en deux secondes. Le moniteur système est l’exemple à étudier si vos données changent pendant que l’utilisateur les regarde, car il montre comment une vue peut continuer à se mettre à jour après l’arrivée du premier résultat.
Budget Allocator associe des curseurs à des graphiques pour que vous puissiez déplacer de l’argent entre des catégories et voir les totaux réagir. Scenario Modeler fait de même pour les projections SaaS : modifiez vos hypothèses de croissance et de coûts, et la courbe de revenus se redessine. Ces deux exemples sont les meilleurs supports pédagogiques du dépôt, car le schéma est simple : l’utilisateur déplace une commande, l’application recalcule, et le graphique se met à jour.
💡 Astuce : si un calcul est peu coûteux, exécutez-le dans la vue. Réservez les appels d’outils aux données qui se trouvent sur votre serveur.
PDF Server diffuse un document par morceaux, si bien qu’un gros fichier n’a pas à arriver d’un bloc. Sheet Music transforme la notation ABC en partition lisible. Video Resource diffuse une vidéo binaire via MCP, Transcript gère la transcription de la parole en texte, Say Demo lit le texte à voix haute, et l’application QR Code génère un code scannable en un seul appel. Chacune est petite, et chacune illustre un type de charge utile différent qu’une application peut traiter.
L’annonce citait dix partenaires de lancement : Amplitude, Asana, Box, Canva, Clay, Figma, Hex, monday.com, Slack et Salesforce. Les cas d’usage décrits autour du lancement étaient la conception collaborative, les tableaux de bord d’exploration de données, la coordination de projet et la gestion des incidents. En d’autres termes, les mêmes schémas que vous venez de voir dans les démos, appliqués aux outils que les gens paient déjà.
Cela compte pour quiconque construit sur le standard. Une spécification qui compte dix noms reconnaissables dès le premier jour est une spécification que les clients continueront d’implémenter, et cela signifie que l’interface que vous construisez aujourd’hui ne repose pas sur un seul éditeur.
Dans le chat, une application MCP App prend la forme d’un panneau intégré à la conversation. L’utilisateur peut interagir directement avec elle, et le modèle continue de participer à l’échange. En coulisses, l’hôte demande le consentement de l’utilisateur avant l’exécution des outils, et chaque message entre la vue et l’hôte est un message JSON-RPC qui peut être consigné et audité.
Ce sont souvent les équipes qui adoptent cela le plus vite pour les revues de travail. Une personne pose une question dans le chat, le panneau apparaît, et chacun autour de la table peut désigner le même graphique au lieu de lire le même paragraphe.
Chaque MCP App est construite à partir de trois éléments : un outil, une ressource et une vue.
L’outil déclare l’interface qu’il utilise via _meta.ui.resourceUri, une adresse ui://. La ressource renvoie le bundle HTML associé à cette adresse. La vue est le code qui s’exécute dans l’iframe. Le serveur de démarrage officiel ressemble à ceci :
import {
registerAppResource,
registerAppTool,
RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";
registerAppTool(
server,
"get-time",
{
title: "Get Time",
description: "Returns the current server time.",
inputSchema: {},
_meta: { ui: { resourceUri } },
},
async () => {
const time = new Date().toISOString();
return { content: [{ type: "text", text: time }] };
},
);
registerAppResource(
server,
resourceUri,
resourceUri,
{ mimeType: RESOURCE_MIME_TYPE },
async () => {
const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8");
return { contents: [{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }] };
},
);
Remarquez que l’outil renvoie toujours du contenu en texte brut. Un hôte sans prise en charge de MCP Apps obtient une réponse utilisable, et un hôte compatible obtient l’interface par-dessus.
Dans l’iframe, la classe App de @modelcontextprotocol/ext-apps gère la conversation avec l’hôte. Elle reçoit le résultat de l’outil et peut appeler ses propres outils serveur :
import { App } from "@modelcontextprotocol/ext-apps";
const app = new App({ name: "Get Time App", version: "1.0.0" });
app.ontoolresult = (result) => {
const time = result.content?.find((c) => c.type === "text")?.text;
serverTimeEl.textContent = time ?? "[ERROR]";
};
getTimeBtn.addEventListener("click", async () => {
const result = await app.callServerTool({ name: "get-time", arguments: {} });
});
app.connect();
Si vous construisez avec React, le paquet fournit des hooks dans @modelcontextprotocol/ext-apps/react, dont useApp et useHostStyles. Sous le capot, les deux côtés communiquent via un PostMessageTransport, qui est le canal de messages de l’iframe adapté à MCP.
Une application de chat qui affiche du code d’interface provenant d’un serveur tiers exécute le code de quelqu’un d’autre à côté de votre conversation. Toute la conception part du principe que ce code est non fiable, et c’est une bonne chose.
💡 Vous construisez pour une entreprise ? Demandez à votre équipe de sécurité de lire ces quatre points. Elle reconnaîtra le modèle : c’est celui utilisé pour les widgets tiers intégrés, renforcé pour un chat IA.
Le dépôt inclut des applications de départ de base en React, Vue, Svelte, Preact, Solid et JavaScript natif. Choisissez celle qui correspond aux outils front-end que votre équipe utilise déjà, copiez-la, et remplacez l’outil d’exemple par le vôtre. La partie serveur reste la même quel que soit le gabarit choisi.
Le dépôt fournit aussi quatre agent skills qui automatisent les tâches fastidieuses :
useHostStyles ou un équivalent pour que votre panneau s’accorde au mode clair et sombre de l’hôte.
Écrire le serveur, le bundle HTML et le code de liaison demande surtout de la saisie, et Claude Sonnet 5 sur PicassoIA est conçu précisément pour cela. Il gère les tâches de codage en plusieurs étapes et l’usage d’outils, et il lit les images, si bien qu’une esquisse filaire peut être envoyée directement dans la requête.
effort va de faible à maximal. Faible est la valeur par défaut, désactive la réflexion et répond le plus vite. Passez à élevé ou maximal lorsque l’application touche plusieurs fichiers.image pour une esquisse du panneau. Le paramètre max_image_resolution réduit la taille de l’image avant l’envoi, ce qui fait gagner du temps et réduit le coût.Si vous voulez un second avis sur le même prompt, GPT 5.6 Sol est aussi disponible sur la plateforme et conçu pour les tâches de codage complexes.
💡 Vérifiez la sortie par rapport au démarrage rapide. Les modèles devinent parfois d’anciens noms d’API. Comparez les imports et l’appel
registerAppToolavec les extraits ci-dessus avant de lancer quoi que ce soit.
Chaque bonne interface commence par une image mentale. Avant d’écrire la moindre ligne de code, générez sur PicassoIA les maquettes, visuels d’accroche et scènes de démo de votre application. Seedream 4.5 crée des images fixes 4K nettes à partir d’une courte description, Flux 2 Pro est un choix solide pour les scènes de style photo, GPT Image 2 suit de près les prompts longs, et P Image renvoie des images en une seconde environ lorsque vous voulez itérer rapidement.
Commencez par un prompt simple : un ordinateur portable sur un bureau en bois affichant un tableau de bord épuré avec une carte et deux curseurs, lumière douce du matin, faible profondeur de champ. Lancez-le, modifiez un détail, puis relancez-le. Lorsqu’une image fixe ne suffit pas, les modèles texte vers vidéo de la plateforme peuvent transformer la même idée en un court clip.
Choisissez un modèle, saisissez votre premier prompt et voyez ce que vous pouvez créer. Le catalogue complet est disponible sur picassoia.com/en/all-models.
Choisissez votre langue
