Mode développeur dans ChatGPT : connecter une application locale

1. Qu’est-ce que le mode développeur « en pratique »

Vous connaissez déjà un peu le Dev Mode, mais il est important maintenant d’assembler une image complète en s’appuyant sur la pratique réelle.

Le Developer Mode dans ChatGPT est un mode spécial dans lequel la plateforme permet de connecter votre application directement, sans publication dans le Store. Vous dites à ChatGPT : « Voici l’URL de mon serveur MCP », et ChatGPT le considère comme un outil externe avec UI — il peut appeler ses outils, charger des widgets, et tout cela dans le cadre d’un chat normal.

Si l’on se souvient de l’architecture, en Dev Mode ChatGPT agit comme un client MCP, et votre template Next.js — comme un serveur MCP. ChatGPT établit une connexion avec /mcp, demande : « Qu’est-ce que tu sais faire ? » (liste des tools et resources), puis, au fil du dialogue, il peut appeler ces outils et afficher vos widgets dans un iframe.

Il est important de distinguer le Dev Mode du Store :

• Dev Mode — votre petit « garage » personnel : vous pouvez casser, expérimenter, changer le schéma des outils toutes les cinq minutes, sans vous soucier des utilisateurs.
• Store — la vitrine : on y déploie une version déjà stable, après revue et avec une politique, des descriptions, etc. C’est là que nous irons à la fin du cours ; pour l’instant, on joue au garage.

À la fin de 2025, le Dev Mode avec Apps SDK est disponible sur tous les plans ChatGPT, mais dans les comptes d’entreprise, il faut parfois qu’un administrateur l’active au niveau de l’espace de travail. Si le commutateur Developer Mode n’apparaît pas dans vos paramètres, c’est la première chose à vérifier.

2. Ce que nous avons déjà au début de la leçon

Avant de cliquer sur quoi que ce soit dans l’interface ChatGPT, assurons-nous que la partie locale est prête.

Premièrement, un serveur de développement Next.js. À la racine du projet, vous avez déjà lancé :

npm run dev

Par défaut, Next.js 16 écoute le port 3000, donc votre UI est disponible à l’adresse http://localhost:3000.

Deuxièmement, la route MCP. Dans le template CodeGym Labs, le serveur MCP est implémenté comme un route-handler app/mcp/route.ts. C’est précisément dans ce fichier que les outils et ressources sont enregistrés ; c’est aussi là que ChatGPT enverra ses premières requêtes lors de la connexion de l’application en Dev Mode.

D’un point de vue architectural, tout ressemble maintenant à ceci :

Votre navigateur ──> http://localhost:3000 (Next.js dev, UI)
                           │
                           └── /mcp (serveur MCP dans Next.js)

Pour l’instant, il n’y a aucun lien avec ChatGPT — il vit dans le cloud, et votre localhost n’est pas visible pour lui. La configuration détaillée du tunnel sera le sujet de la prochaine leçon. Ici, pour simplifier, nous supposerons que vous disposez déjà d’une URL HTTPS publique vers /mcp (par exemple via ngrok ou Cloudflare Tunnel, configuré selon le README du template).

Si vous n’avez pas encore monté le tunnel — pas de panique. Vous allez au moins parcourir toute la chaîne des étapes en Dev Mode et voir ce qu’il faudra faire une fois l’URL HTTPS disponible.

Si vous avez déjà une URL HTTPS vers /mcp, vous pouvez reproduire toutes les étapes à la main.
Si ce n’est pas encore le cas — suivez la leçon comme un « tour d’interface » : l’important est de comprendre la chaîne d’étapes, et nous ferons le lancement réel dans la prochaine leçon, quand nous configurerons le tunnel.

3. Activer le Developer Mode dans l’interface ChatGPT

La première étape consiste simplement à apprendre à ChatGPT à nous montrer les bons paramètres. Faites ceci :

Connectez-vous d’abord à la version web de ChatGPT avec le compte avec lequel vous allez développer. Cliquez sur l’icône de profil en bas à gauche (ou en haut à droite — l’UI évolue constamment) et choisissez Settings (Paramètres).

Dans les paramètres, trouvez la section liée aux applications : elle s’appelle généralement Apps & Connectors ou Connected apps. Ouvrez cette section. En bas de la page (ou dans l’onglet Advanced / Avancé) un interrupteur Developer Mode apparaît. C’est précisément celui qu’il faut activer.

Après l’activation du Dev Mode, ChatGPT affiche généralement une notification indiquant que le mode développeur est activé. Dans la même section, un bouton du type Create, Create connector, New app apparaît — les formulations peuvent varier, mais l’idée est la même : vous avez désormais un moyen de créer votre application connectée.

Si vous n’avez ni la section Apps & Connectors, ni l’interrupteur Developer Mode dans les paramètres, vérifiez :

• que vous êtes bien connecté au compte ChatGPT que vous souhaitez utiliser ;
• dans un compte d’entreprise, ce mode peut être activé par l’administrateur de l’espace de travail.

Parfois, il suffit simplement de se déconnecter et de se reconnecter (l’équivalent du « redémarrer le Wi‑Fi » pour le Dev Mode).

4. Créer votre application / connecteur et renseigner l’URL MCP

Maintenant que le Dev Mode est activé, enregistrons votre GiftGenius dans ChatGPT. Ci-dessous — un scénario « pour de vrai ». Si l’URL HTTPS n’est pas encore configurée, prenez ces étapes comme une répétition générale : regardez simplement ce que nous ferons quand le tunnel sera en place.

Tout se fait via la section des paramètres de ChatGPT où vous étiez à l’instant. La séquence sera à peu près la suivante.

Rouvrez Settings → Apps & Connectors. À l’intérieur, vous verrez la liste des applications déjà connectées (probablement vide pour l’instant) et un bouton Create / Add connector. Cliquez dessus — un formulaire de création d’application s’ouvre.

Le formulaire se compose généralement de trois champs clés :

1. Nom (Name). C’est un nom lisible par l’humain, visible à la fois par vous et par ChatGPT. Pour notre cours, il est pratique d’appeler l’application, par exemple, GiftGenius (dev) — on voit ainsi immédiatement que c’est une version de dev locale.
2. Description (Description). Une brève explication de ce que fait l’application et quand l’utiliser. Exemple : « Propose des idées de cadeaux selon les centres d’intérêt d’une personne. » Cette ligne influence ensuite la découverte — le modèle l’utilise pour décider quand proposer votre App dans le chat.
3. URL du serveur MCP (parfois libellé Connector URL, MCP endpoint, App URL, etc.). C’est le champ le plus important : vous y collez l’URL HTTPS publique pointant vers /mcp de votre application.

Par exemple :

https://my-giftgenius-dev.ngrok.app/mcp

ou

https://giftgenius-dev.trycloudflare.com/mcp

Points clés pour ce champ :

• obligatoirement https://, sinon ChatGPT refusera simplement de se connecter ;
• obligatoirement le chemin /mcp à la fin, car c’est précisément là que vit le serveur MCP dans le template ; c’est ce chemin qui est décrit dans la documentation officielle de l’Apps SDK.

La manière d’obtenir cette URL sera détaillée dans la prochaine leçon (tunnels, Cloudflare, ngrok). L’important à comprendre maintenant : votre http://localhost:3000/mcp local doit d’une manière ou d’une autre devenir un https://…/mcp public, et c’est cette adresse publique que vous collez dans le formulaire.

Après avoir rempli les champs, cliquez sur Create / Enregistrer. À ce moment, ChatGPT effectue un « handshake » avec votre serveur : il envoie des requêtes HTTP à l’URL indiquée, s’attend à recevoir un manifeste de capacités (liste des tools/resources, métadonnées) et vérifie que le serveur répond selon le protocole MCP. Si tout va bien, le connecteur apparaît dans la liste, et vous verrez quels outils ChatGPT a découverts. Dans la section suivante, nous verrons ce qui se passe exactement lors de ce handshake et comment l’observer dans les logs.

Si vous n’avez pas encore configuré le tunnel et que vous avez collé une URL fictive, ChatGPT indiquera honnêtement qu’il n’a pas pu atteindre le serveur. C’est une expérience utile : vous verrez immédiatement où et comment les erreurs s’affichent.

5. Ce qui se passe « sous le capot » : le handshake MCP expliqué simplement

De l’extérieur, tout ressemble à un formulaire banal « ajouter une application par URL ». À l’intérieur, c’est un peu plus intéressant, et le comprendre maintenant aide beaucoup pour le debug ensuite.

Vous avez déjà vu qu’au moment de créer le connecteur, ChatGPT interroge votre /mcp et attend un manifeste. Regardons ce dialogue un peu plus en détail — cela aide énormément au dépannage.

En cliquant sur le bouton Create, ChatGPT effectue plusieurs étapes.

Il interroge d’abord l’URL indiquée avec /mcp, en se comportant comme un client MCP. Selon le protocole MCP, il s’attend à ce qu’un serveur vive sur cet endpoint HTTP, implémentant les capacités de base : lister les outils (list tools), fournir des ressources (widgets), traiter les appels d’outils.

Le serveur, de son côté, répond par une structure JSON décrivant :

• le nom du serveur et sa version ;
• la liste des outils : name, title, description, inputSchema, etc. ;
• la liste des ressources : où récupérer l’HTML de vos widgets, quels types MIME, comment les rendre.

Dans le template Next.js de CodeGym, tout cela est déjà implémenté dans app/mcp/route.ts : le SDK y est utilisé pour appeler quelque chose comme server.registerTool(...) et server.registerResource(...).

Si vous voulez observer ce handshake de vos propres yeux, vous pouvez ajouter dans app/mcp/route.ts un simple log. C’est plutôt une astuce de debug pour développeurs, vous pouvez la sauter et y revenir plus tard, quand vous voudrez creuser davantage :

// app/mcp/route.ts
import { NextRequest, NextResponse } from "next/server";
// importez votre server / buildManifest déjà existant

export async function GET(req: NextRequest) {
  console.log("[MCP] Handshake from ChatGPT:", req.headers.get("user-agent"));
  const manifest = buildManifestSomehow(); // ceci existe déjà dans le template
  return NextResponse.json(manifest);
}

Cette fonction est un peu indicative (la structure du template peut différer), mais l’idée est simple : app/mcp/route.ts est un route-handler Next.js classique, et vous pouvez journaliser les requêtes entrantes. En cas de connexion réussie du Dev Mode, vous verrez ce log dans le terminal où tourne npm run dev.

Du point de vue du protocole, on peut tout dessiner comme un petit diagramme :

sequenceDiagram
    participant ChatGPT
    participant Tunnel as HTTPS URL (/mcp)
    participant NextDev as Next.js dev + MCP

    ChatGPT->>Tunnel: Requête HTTP(S) vers https://.../mcp
    Tunnel->>NextDev: Proxie vers http://localhost:3000/mcp
    NextDev-->>Tunnel: JSON avec tools et resources
    Tunnel-->>ChatGPT: Transmet la réponse
    ChatGPT->>ChatGPT: Met en cache la liste tools/resources

Le fait que vous ayez saisi « juste une URL » dans le formulaire Dev Mode lance en réalité toute une conversation protocolaire.

6. Comment ChatGPT « voit » votre application après la connexion

Supposons que le handshake ait réussi. Et maintenant ?

Premièrement, dans les paramètres, dans la section Apps & Connectors, votre GiftGenius (dev) apparaîtra dans la liste des applications connectées. Dans sa carte, vous verrez le nom, la description et la liste des outils détectés. On y trouve généralement des boutons comme Refresh, Delete, etc. Le bouton Refresh sera utile plus tard, quand vous modifierez le schéma des outils.

Deuxièmement, l’application devient disponible dans les chats eux-mêmes. Ouvrez un nouveau chat, cliquez sur le bouton « + » à côté du champ de saisie. Il y a un menu « More », « Apps », « Tools » — selon la version actuelle de l’UI. Votre GiftGenius (dev) devrait apparaître dans la liste, et vous pouvez le sélectionner explicitement pour cette conversation.

Après sélection, l’application devient « connectée » à ce chat. Concrètement, cela ressemble à ceci :

• vous écrivez une requête naturelle, par exemple : « Propose un cadeau pour un fan de l’espace à 50 $ » ;
• ChatGPT décide (en fonction de la description et de l’historique du dialogue) qu’il peut utiliser GiftGenius et appelle l’un de vos outils MCP ;
• le résultat de cet appel peut contenir un widget HTML ; celui-ci est rendu directement dans le chat sous forme de carte/panneau.

En Dev Mode, vous appellerez souvent l’application explicitement — via le menu ou en la mentionnant par son nom. Mais il est important de comprendre qu’en production ChatGPT peut « proposer » lui-même votre App, en s’appuyant sur sa description et les métadonnées des outils.

Pour la clarté, il est utile d’imaginer un petit tableau :

7. Cycle développeur : on modifie le code → on voit dans ChatGPT

Connecter une App — c’est la moitié du chemin. L’autre moitié — comprendre comment travailler avec le Dev Mode au quotidien.

Il y a deux grands types de changements : les changements côté UI (widget) et les changements dans la logique/les outils MCP.

Si vous ne modifiez que l’UI, par exemple en changeant le titre ou les styles dans app/page.tsx, c’est du frontend classique pour Next.js. Le serveur de dev redémarre le module, et dans le navigateur vous voyez le hot reload. Dans ChatGPT, votre UI est ouverte dans un iframe, mais le comportement est similaire : lors du prochain appel de l’outil qui rend ce widget, ChatGPT chargera déjà l’HTML mis à jour. Parfois, le HMR atteint directement l’iframe, parfois il suffit simplement de rappeler l’outil dans le chat. MISE EN CACHE

Pour vous exercer, modifiez légèrement le widget. Supposons que, dans app/page.tsx, vous ayez quelque chose comme :

export default function GiftGeniusWidget() {
  return (
    <main style={{ padding: 16 }}>
      <h1>GiftGenius</h1>
      <p>Ici s’affichera la sélection de cadeaux.</p>
    </main>
  );
}

Modifiez le titre et le texte :

export default function GiftGeniusWidget() {
  return (
    <main style={{ padding: 16 }}>
      <h1>GiftGenius (dev)</h1>
      <p>Cette version fonctionne en mode développeur. À ne pas utiliser en production.</p>
    </main>
  );
}

Enregistrez le fichier, revenez dans le chat avec GiftGenius connecté et rappelez l’application (par exemple, avec la même requête de cadeau). Vous devriez voir le titre mis à jour dans le widget — c’est un bon signe que la chaîne Next.js → tunnel → ChatGPT fonctionne.

Si, en revanche, vous modifiez la partie MCP — vous ajoutez un nouvel outil, changez le inputSchema, renommez des tools — alors le cache de ChatGPT entre en jeu. Lors de la première connexion en Dev Mode, ChatGPT mémorise la liste des outils et ne prend pas toujours les changements automatiquement. Il faut alors revenir dans la section Apps & Connectors, choisir votre GiftGenius (dev) et cliquer sur quelque chose comme Refresh schema / Refresh. Après cela, ChatGPT réinterrogera votre /mcp et mettra à jour la liste des tools.

Ça paraît anodin, mais sans cela, il est facile de « se faire avoir » : vous avez déjà corrigé le code de l’outil, mais ChatGPT ne voit obstinément pas les nouveaux paramètres.

8. Mini‑pratique : premier scénario complet GiftGenius en Dev Mode

Assemblons tout dans un scénario pratique. Ici, je pars du principe que vous avez une URL HTTPS fonctionnelle pour /mcp (via un tunnel ou un déploiement). Si ce n’est pas encore le cas — lisez simplement les étapes ; dans la prochaine leçon, vous les referez avec une URL réelle.

1. Assurez-vous que npm run dev est lancé et qu’il n’y a pas d’erreurs dans les logs. Il est particulièrement agréable de voir quelque chose comme « MCP server running at http://localhost:3000/mcp » dans le terminal, si le template le journalise.
2. Ouvrez ChatGPT, activez le Developer Mode via Settings → Apps & Connectors → Advanced settings.
3. Créez un nouveau connecteur GiftGenius (dev) avec une brève description (« Helper for choosing gifts ») et une URL du type https://<votre-domaine>/mcp.
4. Vérifiez que ChatGPT a pu se connecter : vous verrez le nouvel élément dans la liste des applications. Si la connexion ne se fait pas — regardez les logs du serveur de dev et du tunnel, c’est déjà instructif en soi.
5. Ouvrez un nouveau chat, cliquez sur « + », choisissez votre GiftGenius (dev), puis formulez une requête : « Propose un cadeau pour un développeur qui aime l’espace et le café, budget 40 $ ».
6. Regardez ce que fait votre template actuel : sous sa forme basique, il peut afficher une carte/un widget simple. Ce n’est pas encore une « sélection intelligente de cadeaux », mais le simple fait que quelque chose apparaisse dans le chat depuis votre code — c’est déjà un grand pas.

Comme exercice supplémentaire, vous pouvez créer un outil de test dédié dans le serveur MCP, uniquement pour vérifier le Dev Mode. Exemple (pas obligatoire tout de suite, regardez juste l’idée) :

// dans app/mcp/route.ts, à côté des autres tools
server.registerTool(
  "ping_dev",
  {
    title: "Ping GiftGenius dev",
    description: "Vérifie que le serveur de dev est vivant.",
    inputSchema: { type: "object", properties: {} },
  },
  async () => ({
    content: [{ type: "text", text: "GiftGenius dev is alive ✅" }],
    structuredContent: {},
  })
);

Nous détaillerons server.registerTool dans le module sur les outils ; pour l’instant, retenez simplement : via MCP, vous décrivez « ce que sait faire votre App », et le Dev Mode — c’est le moyen de fournir à ChatGPT l’URL où ces capacités sont déclarées.

9. Où regarder les erreurs et comment distinguer « ça casse chez moi » de « ça casse chez ChatGPT »

Personne n’aime passer une demi-heure à chercher des bugs « du mauvais côté du système », donc il est utile de prendre tout de suite l’habitude de regarder au bon endroit.

Si l’erreur apparaît lors de la création du connecteur. Si, lors de la création, ChatGPT indique qu’il ne peut pas connecter l’App, regardez d’abord les logs de votre serveur de dev et du tunnel. Si, dans le terminal où tourne npm run dev, il n’y a aucune requête entrante sur /mcp — le problème se situe sur le chemin ChatGPT → tunnel. Si les requêtes arrivent, mais que le serveur répond 500 ou plante avec une erreur en console — le problème est dans votre code MCP.

Si le connecteur est déjà créé, mais que ça casse dans le chat. Quand le connecteur est créé, mais qu’une bannière « App unavailable / App broken » apparaît périodiquement dans le chat, cela signifie presque toujours que :

• le serveur de dev est tombé (Next.js n’écoute plus le port 3000) ;
• le tunnel est éteint ou l’URL a changé ;
• l’endpoint MCP renvoie une erreur, un timeout, ou répond très lentement.

À part pour l’UI/le widget. En cas de problèmes d’UI (widget non rendu, écran vide, styles étranges), jetez aussi un œil aux DevTools du navigateur. Le widget se charge dans un iframe, et dans la console de cet iframe, vous verrez les erreurs JavaScript/React — exactement comme dans une application web classique.

Avec l’expérience, vous commencerez à distinguer « ça sent le tunnel » de « ça sent Next.js » rien qu’à l’apparence de l’erreur ; pour l’instant, retenez simplement : vous avez trois points de défaillance potentiels — votre code, le tunnel et ChatGPT, et la probabilité que le problème soit dans ChatGPT est généralement la plus faible.

Insight

Si vous lisez ce texte et que vous n’avez pas de tunnel payant, vous pouvez l’acheter dès maintenant. Vous le ferez de toute façon dans les prochains jours. Épargnez‑vous des nerfs.

10. Erreurs typiques lors de l’utilisation du Dev Mode

Erreur n° 1 : vous avez oublié d’activer le Developer Mode et cherchez le bouton Create pendant une demi‑heure.
Il arrive que des développeurs aillent directement dans ChatGPT, cliquent sur les paramètres Apps & Connectors et n’y voient rien d’intéressant. Sans Developer Mode activé, le bouton de création de connecteur peut tout simplement ne pas être là. Commencez toujours par vérifier que le Dev Mode est activé dans Advanced settings, surtout sur de nouveaux comptes ou dans un autre navigateur.

Erreur n° 2 : vous collez une URL sans /mcp ou qui n’est pas un endpoint MCP.
Classique : dans le champ URL, on colle https://myapp-dev.ngrok.app sans le chemin /mcp, ou bien une URL de landing/d’un autre service. ChatGPT frappe poliment là-bas via le protocole MCP, ne trouve pas l’interface attendue et renvoie une erreur de connexion. Le starter Next.js indique clairement : il faut se connecter à l’URL qui pointe vers /mcp — et c’est celle-ci qu’il faut indiquer dans le Dev Mode.

Erreur n° 3 : essayer d’utiliser http://localhost:3000/mcp directement.
Intuitivement, on a envie de coller dans le champ URL ce http://localhost:3000/mcp que vous voyez dans les logs du serveur de dev. Mais ChatGPT tourne dans le cloud, pas sur votre laptop, et il n’a pas accès à votre localhost. En outre, ChatGPT exige le HTTPS. Donc, sans tunnel ou déploiement distant, ça ne marchera pas. Ce n’est pas un bug de ChatGPT, mais une isolation réseau normale.

Erreur n° 4 : oublier le Refresh après un changement de schéma MCP.
Après un handshake réussi, ChatGPT met en cache la liste des outils et des métadonnées pour éviter de solliciter le serveur à chaque fois. Si vous avez ajouté un nouveau tool ou modifié son inputSchema, et que ChatGPT continue à se comporter comme avant, il faut presque sûrement rafraîchir le connecteur (Refresh) dans la section Apps & Connectors. Sans cela, le modèle ne sait tout simplement pas que les outils ont changé.

Erreur n° 5 : tenter de déboguer le Dev Mode alors que le serveur de dev n’est pas lancé.
Ça paraît évident, mais ça arrive souvent : un étudiant configure à distance le Dev Mode et le tunnel, alors que dans son terminal npm run dev ne tourne plus depuis un moment ou que le projet ne compile pas à cause d’une erreur de syntaxe. Tant que le serveur de dev local est à l’arrêt, inutile de courir après des erreurs du Dev Mode. Assurez-vous toujours d’abord que http://localhost:3000 fonctionne dans votre navigateur, et seulement ensuite connectez ChatGPT.

Erreur n° 6 : s’attendre à ce que le Dev Mode soit « un autre modèle qui comprend tout ».
On a parfois l’impression que, puisque nous avons activé le Dev Mode, alors le modèle « sait » tout de notre application. En réalité, le Dev Mode ne change pas le modèle lui‑même ; il lui donne simplement accès à votre serveur MCP et à vos outils. Si les outils sont décrits de manière floue, si la description de l’App est vague ou si la logique serveur est étrange, le modèle sera tout aussi perdu que n’importe quel développeur face à une API mal documentée. De bonnes métadonnées et de bons outils — ce sera le sujet des modules suivants, mais il faut déjà garder cela en tête.

Erreur n° 7 : utiliser le Dev Mode comme production.
La tentation existe : « Tout marche bien en Dev Mode, donnons le lien aux utilisateurs pour qu’ils connectent l’App via cette URL ». Le problème, c’est que le Dev Mode n’est pas prévu pour un usage massif : les tunnels sont instables, les configurations peuvent casser, et ChatGPT peut changer le comportement du Dev Mode sans rétrocompatibilité. Pour les utilisateurs réels, il y a le Store et le déploiement en production. Le Dev Mode — c’est exclusivement votre laboratoire.