Vibe coding avec ChatGPT : Canvas, Codex et création d'applications depuis ChatGPT

Vous pouvez faire du vibe coding avec ChatGPT de trois façons. Demandez une petite application dans le chat et prévisualisez-la dans canvas ; confiez des tâches sur une vraie base de code à Codex, l'agent de codage d'OpenAI ; ou connectez un créateur d'applications IA comme Mythex pour que ChatGPT construise, héberge et publie une application complète avec base de données. La première voie est la plus rapide pour un outil d'une seule page, la deuxième convient aux développeurs, et la troisième vous donne une application en ligne avec connexion et données sans quitter ChatGPT.

Voici comment fonctionne chacune, un prompt pour chacune et là où elle s'arrête. Si vous voulez d'abord le contexte sur le terme, lisez ce qu'est le vibe coding.

Option 1 : le chat ChatGPT et canvas

Pour un outil rapide, demandez simplement. ChatGPT écrit le code, et dans canvas il peut afficher des pages HTML et React simples pour que vous puissiez les tester et demander des modifications.

Écris une calculatrice de pourboire en une seule page avec des champs pour le montant de l'addition, le pourcentage pour le pourboire (boutons 10, 15, 20 et un champ libre) et le nombre de personnes. Affiche le pourboire et le montant par personne, mis à jour à mesure que je tape. Rends-la propre sur téléphone.

Idéal pour : les calculatrices, les petits jeux, les ébauches de pages de présentation et l'apprentissage. Demandez « explique ce fichier comme si je débutais en code » et vous apprendrez vite.

Là où ça s'arrête : il n'y a pas de back-end. Rien de ce que vous saisissez n'est enregistré pour d'autres utilisateurs, il n'y a pas de connexion, et pour la partager il faudrait copier le code quelque part et l'héberger vous-même. Dès que vous dites « et enregistre-la pour que mon équipe la voie », vous avez dépassé le chat.

Le vibe coding par copier-coller

Beaucoup de gens commencent en demandant du code à ChatGPT, puis le collent dans des fichiers sur leur ordinateur ou sur un service d'hébergement. Cela fonctionne pour de petits sites statiques, mais se dégrade vite. Chaque modification exige de trouver le bon fichier, de coller le bon morceau et d'espérer que rien d'autre ne dépendait de ce que vous avez remplacé. Si vous vous surprenez à le faire plus de quelques fois, passez à l'une des deux options suivantes.

Option 2 : Codex pour une vraie base de code

Codex est l'agent d'OpenAI pour le travail logiciel. Vous lui confiez une tâche en langage courant, et il travaille sur un dépôt : il lit le code, fait des modifications sur plusieurs fichiers, exécute des commandes et des tests, puis vous présente le résultat à relire. OpenAI le propose dans ChatGPT, sous forme d'outil en ligne de commande et d'extension d'éditeur ; consultez le site d'OpenAI pour savoir quelles offres l'incluent et quelles sont les limites actuelles.

Une tâche formulée comme un ordre convient le mieux :

Dans ce dépôt, ajoute un bouton d'export CSV à la page des commandes. Il doit exporter les commandes actuellement filtrées avec les colonnes date, client, total et statut. Ajoute un test pour la fonction d'export et lance la suite de tests.

Idéal pour : les développeurs et les fondateurs techniques qui ont déjà un projet et veulent qu'un agent prenne en charge des tâches entières. Il fonctionne avec votre pile et vos conventions.

Ce que vous gérez encore : l'endroit où l'application tourne, la base de données, les secrets, le déploiement et les domaines. Codex modifie le code ; ce n'est pas un hébergeur.

Codex et Mythex ensemble

Codex peut aussi se connecter à des serveurs MCP, y compris celui de Mythex. Ajoutez https://mcp.mythex.ai/mcp comme serveur MCP personnalisé dans Codex, autorisez l'accès sur Mythex, et Codex peut travailler sur un projet Mythex dans son bac à sable cloud, l'aperçu, la base de données et la publication étant gérés par Mythex. Notre article sur créer des applications Mythex depuis Claude, Cursor ou Codex détaille la marche à suivre.

Option 3 : créer une application complète depuis ChatGPT avec Mythex

Si vous voulez rester dans une conversation ChatGPT et obtenir au bout du compte une vraie application hébergée, connectez Mythex. Mythex fonctionne dans ChatGPT comme une application : ChatGPT communique avec les outils de Mythex via MCP, le protocole ouvert qui permet aux assistants d'utiliser des outils hébergés ailleurs (ce qu'est MCP).

Une fois connecté, ChatGPT peut créer un projet Mythex, écrire le code dans un bac à sable cloud privé, lancer un aperçu en direct, ajouter une base de données et un stockage de fichiers, et publier l'application sur une URL publique. Les résultats reviennent avec un lien pour ouvrir le projet dans Mythex et suivre l'aperçu.

Comment connecter

1. Dans Mythex, ouvrez les Paramètres du compte et copiez l'adresse MCP.
2. Dans ChatGPT, ajoutez Mythex depuis les paramètres des applications ou connecteurs en utilisant cette adresse. Les menus de ChatGPT changent de temps en temps ; suivez l'aide d'OpenAI pour ajouter une application si les noms diffèrent.
3. Une page Mythex s'ouvre : connectez-vous et choisissez Autoriser l'accès. Il n'y a aucune clé à coller.
4. Lancez une conversation et mentionnez Mythex dans votre demande.

La connexion fonctionne sur toutes les offres Mythex. Les outils du bac à sable — construction, aperçu, publication — nécessitent Mythex Pro ($25 par mois), et le temps de bac à sable et l'hébergement proviennent de vos crédits Mythex. Votre usage de ChatGPT reste sur votre offre OpenAI.

Un premier prompt à essayer

Utilise Mythex pour me créer un suivi de candidatures d'emploi. J'ajoute des candidatures avec l'entreprise, le poste, le lien, la date d'envoi, le statut (envoyée, entretien, offre, refusée) et des notes. Affiche un tableau par statut où je peux déplacer les cartes, et un petit graphique du nombre de candidatures par semaine. Enregistre tout dans une base de données et protège-la par une connexion. Lance l'aperçu et donne-moi le lien.

Puis, une modification à la fois :

Dans le projet Mythex, ajoute une date de rappel à chaque candidature et mets en évidence les cartes dont le rappel est aujourd'hui ou dépassé.

Publie-le et envoie-moi l'URL en ligne.

Idéal pour : les personnes qui réfléchissent et planifient déjà dans ChatGPT et veulent un résultat en ligne, avec des données persistantes, sans apprendre l'hébergement. Comme il s'agit d'un projet Mythex ordinaire, vous pouvez poursuivre dans le chat Mythex à tout moment.

Quelle option convient à votre projet

Des habitudes de prompt qui fonctionnent avec ChatGPT

• Nommez l'outil quand vous voulez qu'il serve. « Utilise Mythex pour… » indique clairement que la demande concerne votre projet, pas une réponse générale.
• Un changement par message. De longues listes de modifications produisent de longues listes d'effets secondaires.
• Demandez un plan avant les grandes étapes. « Avant de modifier quoi que ce soit, liste ce que tu vas changer et attends mon accord. »
• Collez les erreurs exactes. Le texte complet de l'erreur vaut plus que n'importe quelle description.
• Demandez ce qui a changé. « Résume tes trois dernières modifications en mots simples » vous garde au courant quand vous ne lisez pas le code.

D'autres sont dans notre aide-mémoire de prompts de vibe coding.

Restez en sécurité

• Ne collez jamais de vrais mots de passe ni de clés d'API dans une conversation ChatGPT. Si votre application a besoin d'une clé, stockez-la dans les secrets du projet. Les outils de Mythex ne font apparaître que les noms des secrets, jamais leurs valeurs.
• Avant de publier, vérifiez que les utilisateurs ne peuvent pas voir les données des autres et qu'aucune clé ne se retrouve dans du code exécuté dans le navigateur. Notre guide le vibe coding est-il sûr ? présente les contrôles, avec des prompts prêts à coller.

Vous utilisez aussi Claude ? Le guide complémentaire couvre le vibe coding avec Claude et Claude Code. Pour une vue modèle par modèle, consultez ChatGPT vs Claude vs Gemini pour créer des applications.

Questions