MCP Apps

MCP Apps : des cartes interactives dans le chat

Les MCP Apps permettent à un serveur MCP d'afficher une interface interactive dans la conversation plutôt que du texte brut. Un outil pointe vers une ressource HTML, et l'app d'IA l'affiche dans un cadre isolé (sandbox).

Dans votre app d'IAMCP App
Ravens vs crows

Ravens are generally larger and heavier-billed than crows. Ravens often have wedge-shaped tails and deeper calls, while crows commonly make a familiar caw. Size: Generally larger (Ravens), Generally smaller (Crows) Bill: Heavier, more curved (Ravens), Usually slimmer (Crows) Tail: Often wedge-shaped (Ravens), Usually fan-shaped (Crows) Call: Deep croak (Ravens), Often a caw (Crows)

Exemples

Ce qu'une MCP App peut afficher

Ce sont des réponses WebKnox enregistrées, affichées par le même élément <webknox-answer> que la MCP App WebKnox. Ouvrez-en une dans l'Answer Lab.

Comment fonctionnent les MCP Apps

Une MCP App combine deux briques de base de MCP, un outil et une ressource. Les MCP Apps sont une extension facultative du protocole : l'app d'IA doit donc les prendre en charge.

  1. L'outil désigne une vue

    Sa description contient _meta.ui.resourceUri, qui pointe vers une ressource ui://.

  2. L'app la récupère

    L'app d'IA lit cette ressource sur votre serveur : une page HTML, souvent avec son script et ses styles intégrés.

  3. Elle s'exécute dans un bac à sable

    La page s'affiche dans une iframe isolée (sandbox) dans la conversation et ne peut pas accéder à l'app qui l'entoure.

  4. Elles échangent par messages

    Via postMessage, l'app envoie le résultat de l'outil à la vue, et la vue peut appeler des outils ou envoyer un message.

Quelles apps d'IA les affichent

La prise en charge varie d'une app à l'autre et évolue vite. Voici où WebKnox affiche ses réponses aujourd'hui.

App d'IAWebKnox affiche
ClaudeCarte interactive
ChatGPTCarte interactive
VS CodeCarte interactive
GooseCarte interactive
Claude CodeTexte avec sources
CodexTexte avec sources

Le projet MCP tient une liste des apps qui prennent en charge les extensions. Sa documentation cite aussi Microsoft 365 Copilot, Postman et MCPJam.

À essayer en deux minutes

WebKnox est un serveur MCP distant avec des réponses gratuites chaque jour, sans connexion pour commencer. Ajoutez son adresse à votre app d'IA, puis demandez une comparaison, une prévision ou une recette.

URL du serveur
https://mcp.webknox.com/mcp

Utiliser les cartes WebKnox dans votre propre MCP App

Vous créez votre propre serveur MCP ? Laissez un outil interroger l'Answers API et renvoyer la réponse sous forme de structuredContent, puis affichez-la avec l'élément WebKnox dans votre vue. Vous obtenez des cartes sourcées sans écrire l'interface.

Votre serveur MCP
import {registerAppTool, registerAppResource, RESOURCE_MIME_TYPE} from '@modelcontextprotocol/ext-apps/server';

const uri = 'ui://my-app/card.html';

registerAppResource(server, uri, uri, {mimeType: RESOURCE_MIME_TYPE}, async () => ({
  contents: [{
    uri,
    mimeType: RESOURCE_MIME_TYPE,
    text: viewHtml, // the bundled view below
    _meta: {ui: {csp: {resourceDomains: ['https://webknox.com']}}},
  }],
}));

registerAppTool(server, 'ask', {
  description: 'Answers with a sourced card.',
  inputSchema: z.object({question: z.string()}),
  _meta: {ui: {resourceUri: uri}},
}, async ({question}) => {
  const answer = await askWebKnox(question); // POST /v2/answers
  return {
    content: [{type: 'text', text: answer.text ?? 'No card for this question.'}],
    structuredContent: answer,
  };
});
Votre vue
<webknox-answer external-media></webknox-answer>

<script type="module">
  import '@webknox/elements';
  import {App} from '@modelcontextprotocol/ext-apps';

  const card = document.querySelector('webknox-answer');
  const app = new App({name: 'My cards', version: '1.0.0'});

  app.ontoolresult = ({structuredContent}) => {
    card.answer = structuredContent;
  };
  app.connect();
</script>

Regroupez la vue dans un seul fichier HTML, comme le fait le guide officiel. Les images des réponses se chargent depuis https://webknox.com, ce que la politique de sécurité de la ressource autorise dans l'exemple.

Questions sur les MCP Apps

Qu'est-ce que les MCP Apps ?

Les MCP Apps sont une extension officielle du Model Context Protocol. Elles permettent à un serveur MCP de renvoyer une interface HTML interactive que l'app d'IA affiche dans la conversation, au lieu d'un simple texte.

Quelle différence entre un serveur MCP et une MCP App ?

Un serveur MCP donne à une app d'IA des outils et des données. Une MCP App est un serveur MCP dont l'outil apporte aussi une vue : le résultat apparaît comme une interface que l'on peut utiliser.

Les MCP Apps fonctionnent-elles dans Claude et ChatGPT ?

Oui. Les cartes de WebKnox s'affichent dans Claude, ChatGPT, VS Code et Goose. Les clients texte seul, comme Claude Code et Codex, reçoivent la réponse sous forme de texte avec ses sources.

Les MCP Apps sont-elles sûres ?

Elles s'exécutent dans un cadre isolé contrôlé par l'app d'IA : elles ne peuvent pas lire la page qui les entoure ni ses cookies. Elles ne joignent l'app que par messages, et c'est l'app qui décide de ce qu'elles peuvent faire.

Combien coûte la MCP App WebKnox ?

Sans compte, chaque personne dispose de 10 réponses avec carte par jour. Claude n'indique pas à WebKnox qui pose la question : dans Claude, tout le monde partage donc un même quota quotidien, qui peut s'épuiser plus tôt. Ensuite, connectez-vous avec un compte WebKnox gratuit pour en avoir 50 par jour, ou prenez une formule payante pour en avoir plus.

Affichez votre première carte dès cet après-midi