# Comment créer une application dans ChatGPT avec l’Apps SDK?

Date: 2025-10-19 · Author: Robert Scales · https://guidetoartificialintelligence.com/fr/apprendre/creer-application-chatgpt-apps-sdk/

**Answer:** Vous créez un serveur MCP qui offre un ou plusieurs outils, vous enregistrez un petit composant HTML que ChatGPT affichera et vous reliez chaque outil à ce composant. Vous exposez ensuite le serveur en HTTPS et l’ajoutez comme connecteur dans le mode développeur de ChatGPT pour le tester dans une vraie conversation.

Les applications dans ChatGPT, présentées le 6 octobre, permettent à une conversation d’afficher autre chose que du texte : une liste de lecture qu’on peut écouter, une carte, un tableau de tâches. L’utilisateur appelle une application par son nom ou ChatGPT en suggère une, et l’interface de l’application apparaît dans la conversation. L’Apps SDK, la trousse d’outils à code source ouvert qui sert à créer ces applications, est en aperçu, et les développeurs peuvent déjà tester leurs propres applications dans le mode développeur de ChatGPT.

Une application a deux moitiés. Le **serveur** contient votre logique et vos données, et offre des **outils**, des actions nommées que le modèle peut appeler, comme « afficher les choix du club de lecture ». Le **composant** (OpenAI l’appelle aussi un widget) est une petite page Web que ChatGPT affiche dans un cadre isolé (*sandbox*) à l’intérieur de la conversation. Le résultat de l’outil remplit le composant de données.

## Un exemple concret : une application de club de lecture

Cette application minimale a un outil qui renvoie trois choix de livres et un composant qui les affiche en liste. Elle utilise le SDK TypeScript officiel de MCP et `zod`, une bibliothèque qui sert à décrire la forme des entrées. La structure suit le guide de configuration du serveur d’OpenAI.

```typescript
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { z } from "zod";

const server = new McpServer({ name: "book-club", version: "1.0.0" });

// 1. Le composant : du HTML simple qui lit les données injectées par ChatGPT.
const WIDGET_HTML = `
<ul id="list"></ul>
<script type="module">
  const output = (window.openai && window.openai.toolOutput) || {};
  const list = document.getElementById("list");
  for (const book of output.books || []) {
    const item = document.createElement("li");
    item.textContent = book.title + " de " + book.author;
    list.appendChild(item);
  }
</script>`.trim();

server.registerResource("book-list", "ui://widget/book-list.html", {}, async () => ({
  contents: [{
    uri: "ui://widget/book-list.html",
    mimeType: "text/html+skybridge",
    text: WIDGET_HTML,
  }],
}));

// 2. L’outil : relié au composant par _meta.
server.registerTool(
  "list-books",
  {
    title: "Afficher les choix du club de lecture",
    description: "Énumère les trois prochains livres choisis par le club de lecture.",
    inputSchema: { month: z.string().optional() },
    annotations: { readOnlyHint: true },
    _meta: {
      "openai/outputTemplate": "ui://widget/book-list.html",
      "openai/toolInvocation/invoking": "Recherche des choix en cours",
      "openai/toolInvocation/invoked": "Voici les choix",
    },
  },
  async () => {
    const books = [
      { title: "Frankenstein", author: "Mary Shelley" },
      { title: "Orgueil et préjugés", author: "Jane Austen" },
      { title: "La Machine à explorer le temps", author: "H. G. Wells" },
    ];
    return {
      structuredContent: { books },
      content: [{ type: "text", text: "Trois choix figurent sur la liste." }],
    };
  }
);
```

Trois détails portent toute la conception :

- Le **`mimeType` `text/html+skybridge`** de la ressource indique à ChatGPT qu’il s’agit d’un composant à afficher, et son adresse `ui://` sert d’identifiant au composant.
- **`openai/outputTemplate`** relie l’outil à ce composant.
- Le **`structuredContent`** du résultat est ce que le composant reçoit sous la forme `window.openai.toolOutput`. Le modèle peut aussi le lire, et `content` est du texte supplémentaire destiné au modèle. Un troisième champ, `_meta`, va seulement au composant, ce qui est utile pour les données dont le modèle n’a pas besoin.

L’annotation `readOnlyHint` indique à ChatGPT que l’outil ne fait que lire des données et ne modifie rien.

## L’exécuter et le tester

Le serveur a encore besoin d’un transport, la partie qui achemine les messages sur le réseau. Le protocole permet les Server-Sent Events ou le HTTP en continu (*streaming*), et le dépôt d’exemples d’OpenAI comprend un serveur Node complet dont vous pouvez copier ce branchement. Ensuite :

1. Démarrez le serveur et ouvrez **MCP Inspector**, un outil de test, à l’adresse `http://localhost:<port>/mcp`. Affichez la liste des outils et appelez `list-books`; l’Inspector vérifie la réponse et affiche le composant.
2. ChatGPT ne se connecte qu’en HTTPS : pendant le développement, lancez donc un tunnel comme `ngrok http <port>` pour obtenir une adresse publique.
3. Dans ChatGPT, activez le mode développeur et ajoutez l’URL du tunnel, terminée par `/mcp`, sous Paramètres > Connecteurs.
4. Dans une conversation, ajoutez l’application à partir des options « Plus » et posez une question comme « Qu’est-ce que mon club de lecture va lire ensuite? »

> **À essayer :** modifiez l’outil pour qu’il accepte une entrée `genre` et renvoie des choix différents pour « mystery » et « science fiction ». Demandez chacun à ChatGPT et vérifiez quelle valeur il transmet.

## Avant que d’autres s’en servent

Les règles d’OpenAI pour les applications exigent une politique de confidentialité claire, un contenu convenant à tous les publics et la collecte des seules données dont l’application a besoin. Avant une large diffusion, les composants ont aussi besoin d’une politique de sécurité du contenu stricte, une liste des domaines extérieurs à partir desquels la page peut charger des éléments ou auxquels elle peut se connecter. Si l’application doit savoir qui est l’utilisateur, les guides expliquent comment ajouter une connexion OAuth 2.1. OpenAI affirme que les soumissions et un répertoire d’applications ouvriront plus tard cette année.

## Quel est le lien avec MCP?

Le Model Context Protocol, ou MCP, est une norme ouverte qui sert à relier des applications d’IA à des outils et à des données. L’Apps SDK repose sur lui : le serveur de votre application est un serveur MCP. Il énumère ses outils avec des descriptions en JSON Schema, répond aux appels d’outils et renvoie des résultats, exactement comme il le ferait pour n’importe quel client MCP.

Ce que l’Apps SDK ajoute, ce sont des extensions pour les interfaces : les ressources de composant `text/html+skybridge` et les clés `openai/...` dans `_meta`, qui indiquent à ChatGPT quoi afficher et quels messages d’état montrer. La documentation d’OpenAI souligne que ce ne sont pas tous les clients MCP qui affichent les composants : un outil bien conçu devrait donc quand même renvoyer, à lui seul, un `content` et un `structuredContent` utiles. Ainsi, le même serveur peut offrir à ChatGPT une interface riche et aux autres clients MCP des résultats simples.

## Sources

- Set up your server (Apps SDK documentation): https://developers.openai.com/apps-sdk/build/mcp-server
- Apps SDK Examples Gallery, README: https://github.com/openai/openai-apps-sdk-examples/blob/cf88017f6375ad86ed409831b43dbc924642526a/README.md
- Introducing apps in ChatGPT and the new Apps SDK: https://openai.com/index/introducing-apps-in-chatgpt/