Vibe coding avec ChatGPT : canevas, Codex et créer des applications depuis ChatGPT

Vous pouvez faire du vibe coding avec ChatGPT de trois façons. Demandez une petite application dans le clavardage et prévisualisez-la dans le canevas; 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 puisse créer, héberger et publier une application complète avec base de données. La première 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 connexions et données sans quitter ChatGPT.

Voici comment chacune fonctionne, une invite pour chacune et où chacune s'arrête. Si vous voulez le contexte du terme, lisez ce qu'est le vibe coding.

Option 1 : clavardage et canevas de ChatGPT

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

Écris une calculatrice de pourboire d'une seule page avec des champs pour le montant de l'addition, le pourcentage de pourboire (boutons pour 10, 15, 20 et un champ personnalisé) et le nombre de personnes. Affiche le pourboire et le montant par personne, mis à jour pendant que je tape. Fais en sorte que ce soit net sur un téléphone.

Idéal pour : les calculatrices, les jeux simples, les ébauches de pages d'accueil et l'apprentissage. Demandez « explique ce fichier comme si je ne connaissais pas le codage » et vous apprendrez vite.

Où cela s'arrête : il n'y a pas de partie serveur. Ce que vous saisissez n'est pas enregistré pour d'autres utilisateurs, il n'y a pas de connexion, et pour le partager, il faudrait copier le code quelque part et l'héberger vous-même. Dès que vous dites « et enregistre-le pour que mon équipe puisse le voir », vous avez dépassé le clavardage.

Vibe coding par copier-coller

Beaucoup de gens commencent par demander du code à ChatGPT et le coller dans des fichiers sur leur ordinateur ou dans un service d'hébergement. Cela fonctionne pour de petits sites statiques, mais cela se défait vite. Chaque changement exige de trouver le bon fichier, de coller la bonne partie 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 donnez une tâche en langage courant et il travaille sur un dépôt : il lit le code, fait des changements dans plusieurs fichiers, exécute des commandes et des tests, puis vous remet le résultat à réviser. OpenAI l'offre dans ChatGPT, comme outil en ligne de commande et comme extension d'éditeur; consultez le site d'OpenAI pour savoir quels forfaits l'incluent et connaître les limites actuelles.

Une invite de type tâche lui convient le mieux :

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

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

Ce que vous gérez encore : l'endroit où l'application fonctionne, la base de données, les secrets, le déploiement et les domaines. Codex modifie le code; il 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, approuvez l'accès sur Mythex, et Codex peut travailler sur un projet Mythex dans son bac à sable infonuagique, l'aperçu, la base de données et la publication étant pris en charge par Mythex. Notre billet sur construire des applications Mythex depuis Claude, Cursor ou Codex explique 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 véritable application hébergée, connectez Mythex. Mythex fonctionne dans ChatGPT comme application : ChatGPT communique avec les outils de Mythex par 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 infonuagique privé, démarrer un aperçu en direct, ajouter une base de données et du stockage de fichiers, puis publier l'application à une adresse publique. Les résultats reviennent avec un lien pour ouvrir le projet dans Mythex et suivre l'aperçu.

Comment se 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 des connecteurs à l'aide de cette adresse. Les menus de ChatGPT changent de temps à autre; suivez la page d'aide d'OpenAI sur l'ajout d'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. Commencez une conversation et mentionnez Mythex dans votre demande.

La connexion fonctionne avec tous les forfaits Mythex. Les outils du bac à sable (création, aperçu, publication) exigent Mythex Pro (25 $ par mois), et le temps de bac à sable et l'hébergement proviennent de vos crédits Mythex. Votre utilisation de ChatGPT reste sur votre forfait OpenAI.

Une première invite à essayer

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

Puis, un changement par message :

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

Publie-la et envoie-moi l'adresse en direct.

Idéal pour : les personnes qui planifient et réfléchissent 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 clavardage Mythex à tout moment.

Quelle option convient à ce que vous construisez

Habitudes d'invite qui fonctionnent dans ChatGPT

• Nommez l'outil lorsque vous voulez qu'il serve. « Utilise Mythex pour… » indique clairement que la demande vise votre projet, et non 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 changer quoi que ce soit, liste ce que tu modifieras et attends mon accord. »
• Collez les erreurs exactes. Le texte complet d'une erreur vaut plus que n'importe quelle description.
• Demandez ce qui a changé. « Résume en termes simples mes trois derniers changements » vous aide à vous orienter lorsque vous ne lisez pas le code.

D'autres se trouvent dans notre aide-mémoire d'invites de vibe coding.

Assurez la 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é, rangez-la dans les secrets du projet. Les outils de Mythex ne rapportent 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 s'est retrouvée dans du code qui s'exécute dans le navigateur. Notre guide le vibe coding est-il sécuritaire? énumère les vérifications avec des invites à copier.

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, voir ChatGPT vs Claude vs Gemini pour créer des applications.

Questions