Apps ChatGPT & Model Context Protocol
Intelligence Artificielle & Développement

Apps ChatGPT & Model Context Protocol : Développement avec Next.js

Guide développeur complet : créez des applications ChatGPT natives avec MCP, widgets interactifs et intégration Next.js.

Pendant des années, intégrer un service externe dans ChatGPT se limitait aux Custom GPTs : un chatbot personnalisé avec quelques appels d'API. Aujourd'hui, OpenAI lance une nouvelle génération : les Apps ChatGPT.

Ces apps offrent une intégration native, des widgets interactifs affichés directement dans le chat, et une connexion à vos systèmes via le Model Context Protocol (MCP). C'est un changement de paradigme pour les entreprises qui veulent offrir leurs services via l'IA.

🚀 Exemple concret

Des groupes hôteliers ont récemment lancé des apps ChatGPT permettant de rechercher et réserver des hôtels en langage naturel, avec affichage de cartes interactives, filtres et tarifs. Ces apps sont disponibles dans 20+ langues pour 300M+ utilisateurs ChatGPT.

Qu'est-ce qu'une App ChatGPT ?

Une App ChatGPT est bien plus qu'un Custom GPT. C'est une application intégrée nativement dans l'interface ChatGPT, capable d'afficher des composants UI riches (cartes, formulaires, graphiques) et de se connecter à vos systèmes backend.

🤖Custom GPT (Ancienne génération)

  • • Chatbot personnalisé avec instructions
  • • Appels API simples (actions)
  • • Réponses textuelles uniquement
  • • Pas de widget interactif
  • • Configuration GPT Store uniquement

✨App ChatGPT (Nouvelle génération)

  • • Intégration native via MCP
  • • Widgets interactifs (HTML/CSS/JS)
  • • UI riche : cartes, filtres, formulaires
  • • Navigation fluide : multi-pages
  • • Connexion systèmes : API, bases de données

Pourquoi c'est important : Les Apps ChatGPT transforment ChatGPT en plateforme de distribution pour vos services. Vous accédez à 300M+ utilisateurs sans développer d'app mobile.

Model Context Protocol (MCP) expliqué

Le Model Context Protocol est un standard ouvert développé par Anthropic (créateurs de Claude) qui permet aux LLMs de se connecter à des systèmes externes de manière structurée et sécurisée.

Architecture MCP

Tools

Fonctions appelables par ChatGPT

• search_hotels()
• get_property()
• check_availability()

Resources

Contenus servis (HTML, JSON)

• Widget HTML
• Templates
• Données structurées

Prompts

Contextes pré-définis

• Instructions système
• Examples
• Templates prompts

Avantage MCP : Standard ouvert compatible avec Claude, ChatGPT et futurs LLMs. Une seule implémentation, plusieurs plateformes.

Comment ça fonctionne ?

1️⃣

Utilisateur pose une question

Ex : "Je cherche un hôtel 4 étoiles à Paris pour 2 nuits"

2️⃣

ChatGPT invoque un tool MCP

Appel : search_hotels(city: "Paris", stars: 4, nights: 2)

3️⃣

Serveur MCP retourne les données

Résultats structurés + templateUri vers le widget

4️⃣

ChatGPT affiche le widget

Widget HTML/CSS/JS rendu dans un iframe sécurisé

Use Case : Réservation hôtelière dans ChatGPT

Début 2026, des groupes hôteliers ont lancé des apps ChatGPT permettant de rechercher et réserver des hôtels directement dans l'interface. Voici comment ça fonctionne techniquement :

Architecture technique

Backend MCP Server

  • • search_hotels() : Recherche par destination, dates, critères
  • • get_property_details() : Détails d'un hôtel spécifique
  • • get_rates() : Tarifs publics vs tarifs membres
  • • check_availability() : Disponibilité temps réel

Frontend Widget

  • • Carte interactive des hôtels disponibles
  • • Filtres : prix, étoiles, équipements, quartier
  • • Affichage photos, avis, services
  • • Redirection vers plateforme de réservation

Parcours Utilisateur

"Je cherche un hôtel 4 étoiles à Paris pour 2 nuits" → ChatGPT affiche une carte avec 10 hôtels → L'utilisateur clique sur un hôtel → Widget détaillé → Redirection booking

Impact business : Visibilité sur 300M+ utilisateurs, réduction des frictions dans le parcours de réservation, expérience conversationnelle naturelle.

Tutoriel : Créer une App ChatGPT avec Next.js

Voici un guide pas-à-pas pour créer votre première App ChatGPT avec Next.js et MCP, basé sur le starter officiel Vercel.

Prérequis : Node.js 18+, compte ChatGPT avec Developer Mode activé, compte Vercel (pour déploiement)

1Créer le projet Next.js

# Cloner le template Vercel
npx create-next-app@latest my-chatgpt-app \
  --example https://github.com/vercel/ai/tree/main/examples/next-chatgpt-app

cd my-chatgpt-app
npm install

Ce template inclut déjà le SDK ChatGPT, le bootstrap, et la configuration CORS nécessaire.

2Créer le serveur MCP

Le serveur MCP expose vos tools (fonctions appelables) et resources (widgets HTML).

// app/mcp/route.ts
import { StreamingTextResponse } from 'ai';
import { createMCPServer } from '@modelcontextprotocol/sdk';

export const runtime = 'nodejs';

const server = createMCPServer({
  name: 'my-app',
  version: '1.0.0',
});

// Enregistrer un tool
server.tool({
  name: 'search_hotels',
  description: 'Recherche d\'hôtels par ville et dates',
  parameters: {
    type: 'object',
    properties: {
      city: { type: 'string', description: 'Ville de destination' },
      checkin: { type: 'string', description: 'Date d\'arrivée (YYYY-MM-DD)' },
      nights: { type: 'number', description: 'Nombre de nuits' }
    },
    required: ['city', 'checkin', 'nights']
  },
  handler: async ({ city, checkin, nights }) => {
    // Appeler votre API backend
    const hotels = await fetchHotels(city, checkin, nights);
    
    return {
      content: [
        {
          type: 'text',
          text: `Trouvé ${hotels.length} hôtels à ${city}`
        },
        {
          type: 'resource',
          resource: {
            uri: 'widget://hotels',
            mimeType: 'text/html',
            text: renderHotelsWidget(hotels)
          }
        }
      ]
    };
  }
});

export async function POST(req: Request) {
  const body = await req.json();
  return server.handleRequest(body);
}

Important : Les tools MCP acceptent des paramètres structurés (JSON Schema) et retournent des résultats typés. ChatGPT parse automatiquement les réponses utilisateur pour extraire les paramètres.

3Configurer le widget (Resource)

Un widget est une resource MCP qui retourne du HTML. ChatGPT le rend dans un iframe.

// app/widgets/hotels/page.tsx
export default function HotelsWidget({ searchParams }: { searchParams: any }) {
  const hotels = JSON.parse(searchParams.data || '[]');
  
  return (
    <div className="p-4 space-y-4">
      <h2 className="text-xl font-bold">Résultats de recherche</h2>
      
      <div className="grid gap-4">
        {hotels.map((hotel: any) => (
          <div key={hotel.id} className="border rounded-lg p-4 hover:shadow-lg transition-shadow">
            <img src={hotel.image} alt={hotel.name} className="w-full h-48 object-cover rounded-lg mb-3" />
            <h3 className="font-bold text-lg">{hotel.name}</h3>
            <p className="text-gray-600 text-sm">{hotel.address}</p>
            <div className="flex justify-between items-center mt-3">
              <div className="flex gap-1">
                {Array(hotel.stars).fill('⭐').map((star, i) => <span key={i}>{star}</span>)}
              </div>
              <p className="text-xl font-bold text-blue-600">{hotel.price}€</p>
            </div>
            <button className="w-full mt-3 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">
              Voir les détails
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

4Bootstrap SDK ChatGPT

Le NextChatSDKBootstrap patche les APIs navigateur pour fonctionner dans l'iframe ChatGPT.

// app/layout.tsx
import { NextChatSDKBootstrap } from '@openai/chat-sdk';

const baseURL = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr" suppressHydrationWarning>
      <head>
        <NextChatSDKBootstrap baseUrl={baseURL} />
      </head>
      <body>{children}</body>
    </html>
  );
}

Note : suppressHydrationWarning est nécessaire car ChatGPT modifie le HTML initial avant l'hydration Next.js.

5Configuration CORS & Assets

Middleware CORS (obligatoire)

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  // Gérer OPTIONS preflight pour RSC
  if (request.method === 'OPTIONS') {
    return new NextResponse(null, {
      status: 204,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type, RSC',
      },
    });
  }

  // Ajouter headers CORS à toutes les réponses
  const response = NextResponse.next();
  response.headers.set('Access-Control-Allow-Origin', '*');
  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  
  return response;
}

export const config = {
  matcher: '/:path*',
};

Configuration Next.js (critique)

// next.config.ts
import type { NextConfig } from 'next';

const baseURL = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';

const nextConfig: NextConfig = {
  assetPrefix: baseURL,  // ⚠️ CRITIQUE : évite les 404 sur /_next/
};

export default nextConfig;

⚠️ Sans assetPrefix : Next.js tentera de charger les assets depuis l'URL de l'iframe, causant des erreurs 404 sur tous les fichiers /_next/.

6Test local & Connexion ChatGPT

Tester le serveur MCP localement

npm run dev
# Serveur MCP disponible sur http://localhost:3000/mcp

Activer Developer Mode dans ChatGPT

  • • Ouvrir ChatGPT → Settings
  • • Apps → Advanced settings
  • • Activer Developer mode
  • • Cliquer sur Create app

Connecter votre serveur MCP

  • • URL du serveur : http://localhost:3000/mcp
  • • ChatGPT découvre automatiquement les tools disponibles
  • • Tester : "Cherche-moi des hôtels à Paris"

7Déploiement sur Vercel

# Déployer sur Vercel
vercel

# Ou via GitHub integration
git push origin main
# Vercel déploie automatiquement

Une fois déployé, mettez à jour l'URL du serveur MCP dans ChatGPT avec votre URL Vercel :

https://votre-app.vercel.app/mcp

Défis techniques & Solutions

❌ Problème : Hydration Mismatch

ChatGPT modifie le HTML de l'iframe avant que Next.js ne l'hydrate, causant des erreurs de console.

Solution : Ajouter suppressHydrationWarning sur la balise <html>

❌ Problème : 404 sur /_next/ assets

Sans configuration, Next.js charge les assets depuis l'URL de l'iframe (ChatGPT), pas votre serveur.

Solution : Configurer assetPrefix dans next.config.ts avec votre URL de production

❌ Problème : CORS sur RSC (React Server Components)

La navigation client-side Next.js fait des requêtes RSC qui échouent sans headers CORS.

Solution : Middleware gérant les requêtes OPTIONS et ajoutant les headers CORS à toutes les réponses

✅ Problème : History API dans iframe

Les appels natifs à history.pushState ne fonctionnent pas correctement dans l'iframe ChatGPT.

Solution : Le NextChatSDKBootstrap patche automatiquement l'API History

Opportunités Business pour les Entreprises

Les Apps ChatGPT ouvrent de nouvelles opportunités de distribution pour les entreprises qui veulent toucher les 300M+ utilisateurs de ChatGPT.

🏨 Hôtellerie & Tourisme

  • • Recherche et réservation d'hôtels
  • • Recommandations personnalisées
  • • Comparaison de tarifs
  • • Gestion de programmes de fidélité

🛍️ E-commerce & Retail

  • • Recherche de produits conversationnelle
  • • Recommandations basées sur le profil
  • • Suivi de commandes
  • • Service client automatisé

🏦 Banque & Finance

  • • Consultation de solde et opérations
  • • Simulation de crédit
  • • Alertes et notifications
  • • Support client intelligent

🏥 Santé & Bien-être

  • • Prise de rendez-vous médical
  • • Consultation de dossier patient
  • • Téléconsultation
  • • Rappels médicaments

📈 Avantages compétitifs

  • ✨
    Visibilité massive : 300M+ utilisateurs ChatGPT dans le monde
  • 🚀
    Pas de store : Distribution instantanée, pas d'App Store/Play Store
  • 💬
    UX conversationnelle : Interaction en langage naturel (barrière à l'entrée très faible)
  • 🔄
    Conversion optimisée : Réduction des frictions dans le parcours utilisateur

Besoin d'accompagnement pour créer votre App ChatGPT ?

VOID développe des Apps ChatGPT personnalisées avec MCP et Next.js : stratégie produit, architecture backend, widgets interactifs, intégration OpenAI SDK, déploiement production.

Discuter de votre projetNos services IA

📚 Articles connexes

La Fin du SEO ? Nouveau Paradigme IA

Comment ChatGPT et les assistants IA transforment la recherche et le marketing digital

AEO : Answer Engine Optimization

Optimiser votre contenu pour être cité par les assistants IA (ChatGPT, Claude, Perplexity)

Intelligence Artificielle chez VOID

Développement d'agents IA, RAG, automatisation et intégrations LLM pour entreprises

🌱Site éco-conçu