nomadic.steph
Me contacter →Contact →
Vibe codingTuto

Emergent AI : je crée une app web en 20 minutes

Une idée d'app, 5 prompts et un outil tout-en-un : je te montre comment j'ai créé LogoStudio, une vraie application web avec connexion, de la première version à la mise en ligne.

Steph
Stéphanie Canovas
Mis à jour le 3 oct. 2026·14 min de lecture
Vibe codingTuto
Une app en 20 minutes

Tu as une idée d'application, mais tu ne sais pas coder et tu ne veux pas jongler entre cinq outils techniques ? Emergent AI est fait pour ça : tu décris ton app en français, son agent IA la crée, la teste et la met en ligne, base de données et hébergement compris. Pour le tester, j'ai créé LogoStudio, une application web de création de logos, avec connexion et inscription, en seulement 5 prompts. Je te montre tout, de la première version à la publication, avec ce qui a marché du premier coup et ce que j'ai dû reprendre.

Le tuto en vidéo

Je crée LogoStudio en direct, des 5 prompts jusqu'à la mise en ligne.

▶ YouTube · 26 min Regarder la vidéo sur YouTube

Emergent AI, c'est quoi exactement ?

Emergent AI est une plateforme de vibe coding : tu expliques en langage naturel l'application que tu veux, et un agent IA génère le code et l'application pour toi. Pas besoin de savoir coder, ni de connecter des outils externes.

Sa grande différence avec les autres outils de vibe coding : tout est intégré. Design, création, tests et déploiement se font au même endroit, et la base de données, l'hébergement et les connexions aux services d'IA sont déjà compris.

Pourquoi EmergentUn outil tout-en-un ou plusieurs outils à relier ?
Avec Emergent
Tout est déjà intégré ✓ Design, création, tests et déploiement au même endroit ✓ Base de données et hébergement inclus ✓ Un seul paiement : les crédits Emergent
vs
Avec des outils séparés
À toi de tout connecter ✗ Un outil pour le back-end (Supabase…), à relier toi-même ✗ Un compte et un abonnement par service (OpenAI…) ✗ Plus de connaissances techniques nécessaires

Tu demandes à l'agent IA d'Emergent, il s'occupe des connexions. Idéal pour tester une idée d'app quand tu débutes.

C'est aussi l'un des outils de vibe coding qui grandit le plus vite : selon TechCrunch, Emergent a levé 100 millions de dollars en sept mois et revendiquait en janvier 2026 plus de 5 millions d'utilisateurs dans plus de 190 pays.

Avec Emergent, tu peux créer une application web (full stack), une application mobile ou une simple landing page : il suffit de choisir le type de projet sous le chat.

E
EmergentPartenaire

Crée des applications complètes en discutant avec l’IA.

🎁 Réduction avec ce code

NOMADICSTEPHEssayer ↗

Certains liens sont affiliés : ça ne te coûte rien de plus et ça soutient mes tutos gratuits.

Créer une application avec l'IA en 5 prompts

Voici l'enchaînement que j'utilise dans la vidéo. Chaque prompt correspond à une étape, et tu testes ton app après chacune avant de passer à la suivante.

La méthodeUne app web en 5 prompts
01L'interfaceTu décris ton app, Emergent te pose ses questions, puis crée la 1re version
→
02Ajustement 1Une seule modification à la fois : ici, toute la bibliothèque d'icônes
→
03Ajustement 2Deux petites retouches regroupées : taille de l'icône et logo rond
→
04La landing pageLa page qui présente ton app et donne envie de l'essayer
→
05L'authentificationInscription et connexion : seuls les membres accèdent à l'éditeur

Après chaque prompt : teste ton app dans un nouvel onglet. À la fin : health check de sécurité, puis déploiement.

Les 5 prompts de la vidéo, de l'interface à l'authentification.

Étape 1 : décrire ton app et répondre aux questions d'Emergent

Crée ton compte sur Emergent en quelques clics. Tu arrives sur ton tableau de bord : c'est là que tu parles à l'agent IA.

Ton premier prompt décrit rapidement la première version de ton app : à quoi elle sert, à quoi ressemble l'interface, ses fonctionnalités principales. Voici le mien :

Prompt 1 · L'interface
Crée une application web esthétique de création de logo rapide et intuitive appelée “LogoStudio”.

L'interface est élégante, minimaliste et épurée avec un thème clair.

L'interface est composée de :
- Une barre latérale gauche avec des contrôles de personnalisation, organisée en deux onglets : "Icône" et "Arrière-plan"
- Une zone centrale avec un aperçu en direct du logo
- Un bouton "Télécharger" en haut à droite

Le logo est composé de deux éléments :
1. Un arrière-plan (carré arrondi par défaut)
2. Une icône centrée sur cet arrière-plan

Pour les icônes, utilise la bibliothèque Lucide Icons.

Toutes les modifications doivent mettre à jour l'aperçu en temps réel.

Colle ton prompt dans le chat. Garde les options par défaut : application full stack pour une app web. Tu peux aussi choisir un modèle d'IA plus ou moins avancé dans les réglages, mais pour commencer, les options par défaut sont très bien.

Réponds aux questions de l'agent

Emergent commence toujours de la même façon : il analyse ton premier prompt, puis il te pose des questions pour mieux comprendre ce que tu veux. Pour chacune, il propose trois options. Moi, il m'en a posé cinq.

C'est très utile si tu n'as pas une idée précise de ton app : il est force de proposition. Et si tu as des idées en tête que tu n'as pas écrites dans ton prompt, c'est le moment de les préciser. Ta réponse peut rester très simple :

L'agent se met au travail. Selon ton app, ça prend 5 à 10 minutes. Dans la barre de gauche, tu le vois avancer : il récupère des directives de design, crée l'interface, ajoute les fonctionnalités une à une, puis teste que tout fonctionne. Quand il a fini (« Agent finished »), il liste les fonctionnalités créées et les tests validés.

Étape 2 : tester ta première version

À droite, tu as un aperçu de ton app, celle que tes utilisateurs verront. Ouvre-la dans un nouvel onglet et teste chaque fonctionnalité. L'agent te dit que tout fonctionne, mais en vrai, il y a parfois des choses qui ne marchent pas.

Sur ma première version, presque tout fonctionnait : le sélecteur d'icônes, la couleur, la rotation, l'épaisseur, l'arrière-plan uni ou en dégradé, le téléchargement en PNG et en SVG. Quelques points à reprendre :

  • le réglage de la taille de l'icône était lent et limité : l'icône restait petite ;
  • l'arrondi des coins n'allait pas jusqu'au logo complètement rond ;
  • le sélecteur ne proposait qu'une quinzaine d'icônes.

Note tout ce qui ne te convient pas : tu vas le demander à l'agent, étape par étape.

Étape 3 : ajuster ton interface, une modification à la fois

La règle d'or : une modification par prompt. Si tu demandes plein de changements en même temps, l'agent risque de s'y perdre, et certaines choses ne marcheront pas.

Ma première modification : donner accès à toute la bibliothèque Lucide (plus de 1 600 icônes au moment de la vidéo), pour que chacun puisse créer un logo vraiment adapté à son branding.

Prompt 2 · Ajuster l'interface (1/2)
Je veux ajouter la bibliothèque complète d’icônes lucide.
Modifie le sélecteur d’icônes :
- Affiche uniquement l’icône utilisée sur le logo.
- Quand l’utilisateur clique sur l’icône, il ouvre une fenêtre popup avec un encart texte de recherche pour rechercher l’icône de son choix et dessous la liste complète des icônes Lucide qu’il peut scroller.
- Lorsque l’utilisateur clique sur une nouvelle icône, la fenêtre popup se ferme et la nouvelle icône est sélectionnée. Cette nouvelle icône est maintenant celle utilisée sur le logo.

Résultat : la fenêtre avec la barre de recherche fonctionne (la recherche se fait en anglais : « star », « heart »…), et la nouvelle icône s'applique bien au logo. Seul bémol, l'icône affichée dans le sélecteur était un peu trop grosse.

Pour les petites retouches, tu peux en regrouper deux dans un même prompt. C'est ce que j'ai fait pour la taille de l'icône et le logo rond :

Prompt 3 · Ajuster l'interface (2/2)
Dans l’onglet “icône”:
- Modifie le slider “taille” pour qu’il aille de 20px à 400px
Dans l’onglet “arrière-plan”:
- Modifie le slider “Arrondir coins” pour qu’il puisse arrondir le logo jusqu’à un rond (jusqu’à 300px je pense)

Les deux réglages fonctionnent : l'icône peut maintenant occuper presque tout le logo, et le logo peut être carré, rond ou entre les deux.

Étape 4 : créer la landing page de ton app

Ton app fonctionne : il lui faut maintenant une page d'accueil qui la présente et donne envie de l'essayer. Un prompt simple suffit :

Prompt 4 · Landing page
Crée une landing page pour l’application LogoStudio.
Elle doit inclure :
- Un header avec LogoStudio en haut à gauche, un menu au centre qui redirige vers les sections ci-dessous, deux boutons en haut à droite 1) “Se connecter” (discret) et 2) “Créer un logo”
- Une section Hero
- Une section Comment ça marche
- Une section Exemples (avec quelques exemples de logos créés avec LogoStudio)
- Une section d’appel à l’action
- Un pied de page simple et professionnel avec les éléments essentiels (copyrights, etc.)

J'en suis vraiment contente : le menu renvoie vers les bonnes sections, les couleurs sont cohérentes avec les logos qu'on peut créer, et le bouton « Créer un logo » mène directement à l'éditeur.

Étape 5 : ajouter l'authentification

Dernière fonctionnalité : un système de connexion. Le visiteur arrive sur la landing page, crée un compte, se connecte et accède à l'éditeur. Sans compte, pas d'éditeur.

Prompt 5 · Authentification
Ajoute un système d’authentification :
- Crée les pages de connexion et d’inscription entre la landing page et l’éditeur
- Seuls les utilisateurs connectés peuvent accéder à l’éditeur

J'ai testé l'inscription, la connexion et la déconnexion : tout fonctionne. Emergent a même relié les autres boutons de la landing page, alors que je ne l'avais pas précisé. Un détail à reprendre : le bouton « Créer un logo » mène à la page de connexion, alors qu'un nouveau visiteur devrait arriver sur l'inscription. Ça se corrige en un prompt.

Étape 6 : publier ton app

Ta première version est prête : place à la mise en ligne. Clique sur Deploy.

  1. 1

    Lance le health check

    Avant de publier, lance le scan de sécurité et de santé de ton app. L'agent vérifie tout ce qui compte avant une mise en ligne et t'envoie le rapport dans le chat. Sur LogoStudio, il a corrigé une erreur, puis n'en a plus trouvé. Sur une app plus complexe, il peut en lister plusieurs : demande-lui de t'aider à les résoudre avant de continuer.

  2. 2

    Déploie ton app

    Clique sur Start deployment. Emergent te rappelle que la publication coûte 50 crédits par mois, annulables à tout moment, et te conseille de vérifier l'aperçu une dernière fois. Confirme avec Deploy now : compte 5 à 7 minutes.

  3. 3

    Partage ton lien

    Ton app est live : tu as un lien à partager, et tes utilisateurs peuvent créer un compte, se connecter et télécharger leur logo. La base de données (MongoDB) et l'hébergement sont gérés par Emergent.

  4. 4

    Connecte ton nom de domaine

    Pour une adresse à toi, clique sur Link custom domain et entre ton nom de domaine. Si tu n'en as pas encore, achète-le chez un hébergeur comme Hostinger (vérifie d'abord qu'il est disponible), puis connecte-le.

Après chaque modification de ton app, clique sur Redeploy : sinon, la version en ligne ne change pas. Et si tu arrêtes ton app, clique sur Shutdown : elle n'est plus publique et les 50 crédits ne sont plus prélevés.

Kit offert

Les ressources de la vidéo, dans le Kit vibe coding.

Recevoir le kit offert →
  • Les 5 prompts de LogoStudio, prêts à copier-coller
  • Le guide pas à pas, avec tous les liens
  • Le code promo Emergent

:::

Emergent AI : prix et crédits

Emergent fonctionne avec des crédits : l'agent en consomme selon la complexité de ce que tu lui demandes, de 1 à 10 crédits par tâche, parfois plus. Sur ma démo, le premier prompt a pris à lui seul plus de 7 crédits. Les 10 crédits du plan gratuit partent donc vite.

PlanPrixCréditsPour qui
Free0 $10 crédits par moisTester la plateforme
Standard20 $/mois, ou 17 $/mois en annuel100 crédits par moisCréer et publier une vraie app
Pro200 $/mois, ou 167 $/mois en annuel750 crédits par moisProjets avancés

Prix d'octobre 2026, hors taxes, sur la page des tarifs d'Emergent. Ajoute 50 crédits par mois pour chaque app en ligne, soit environ 10 $ par mois. Avec le code NOMADICSTEPH, tu as une réduction sur ton abonnement.

Mon conseil : commence avec le plan gratuit pour voir si l'outil te convient, puis passe au Standard dès que tu veux publier. Pour le travail fourni, et avec l'hébergement compris, ça ne coûte vraiment pas grand-chose.

Emergent AI : mon avis après ce test

Pour une première version, presque tout a fonctionné, en 5 prompts. Voici ce que je retiens.

Ce que j'ai aimé :

  • le tout-en-un : design, création, tests, base de données, hébergement et publication au même endroit. Tu demandes, l'agent s'occupe des connexions techniques ;
  • un seul système de paiement : si ton app utilise une IA comme celle d'OpenAI, tu paies avec tes crédits Emergent, sans ouvrir de compte ailleurs ;
  • l'agent force de proposition : ses questions de départ t'aident à préciser ton app, même si ton idée est encore floue ;
  • les tests et le health check : il vérifie son travail et la sécurité de ton app avant la publication ;
  • le français : tu écris tes prompts et tes réponses en français, et l'agent te répond en français (l'interface de l'outil, elle, est en anglais).

Ce que j'ai moins aimé :

  • les crédits partent vite, surtout avec le plan gratuit ;
  • l'agent ne reprend pas toujours seul après une interruption : il faut le relancer ;
  • « tout fonctionne » ne suffit pas : certains réglages étaient lents ou incomplets, il faut tout tester soi-même ;
  • la dépendance à la plateforme : ton app vit chez Emergent. Avec un outil comme Claude Code, moins clé en main, ton code t'appartient et tu peux l'héberger où tu veux.

Emergent AI est fait pour toi si tu es débutant, sans connaissances techniques, et que tu as une idée d'app à tester rapidement, sans chercher quels outils connecter entre eux. Si tu veux plutôt un site qu'une application, regarde comment créer un site avec Hostinger Horizons, qui inclut aussi l'hébergement et le nom de domaine. Tu veux comparer avec une autre approche, où tu choisis toi-même ta base de données et tes paiements ? Je te montre comment créer un SaaS avec Lovable, Supabase et Stripe. Et si tu veux garder la main sur ton code, je te montre comment créer et publier ton premier projet avec Claude Code et GitHub.

Les erreurs à éviter

  • Demander plusieurs grosses modifications d'un coup : l'agent s'y perd. Une modification par prompt, ou deux petites retouches au maximum.
  • Croire l'agent sur parole : il dit que tout fonctionne ; teste chaque bouton et chaque réglage dans un nouvel onglet.
  • Publier sans health check : lance toujours le scan de sécurité avant le déploiement.
  • Oublier de redéployer : tes modifications n'apparaissent pas en ligne tant que tu n'as pas cliqué sur Redeploy.
  • Laisser tourner une app que tu n'utilises plus : elle te coûte 50 crédits par mois. Pense à Shutdown.
  • Créer un vrai projet avec le plan gratuit : 10 crédits, c'est juste assez pour tester.

Et après ?

Ton app est en ligne : il faut maintenant que les bonnes personnes la trouvent. La landing page est ta vitrine, sur Google comme dans les réponses des IA. Commence par les bases avec mon plan pour optimiser le SEO d'un site neuf. Et si tu veux avancer plus vite sur ton projet d'app, je peux t'accompagner.

Coaching

Tu as une idée d'app et tu veux la créer avec l'IA sans rester bloqué ? On avance ensemble, en visio.

Questions fréquentes

Oui, il existe un plan gratuit avec 10 crédits par mois, idéal pour tester la plateforme. Mais ces crédits partent vite, et pour publier une vraie application, il faut au minimum le plan Standard, à 20 $ par mois (17 $ par mois en annuel), avec 100 crédits par mois.

Steph

Écrit par

Stéphanie Canovas

Je crée des tutos et formations pour aider les entrepreneurs à créer et optimiser leur site web. +8 000 entrepreneurs formés.

À lire ensuite

Tous les articles →
Vibe codingTuto
Ton site pro avec Claude Code
23 sept. 2026·15 min de lecture

Créer un site avec Claude Code : la méthode pro en 4 étapes

Une maquette premium dans Claude Design, ton site généré par Claude Code, mis en ligne en quelques clics, puis optimisé pour Google et ChatGPT. Sans savoir coder.

Lire l’article →
Vibe codingTuto
Ton plugin WordPress avec l'IA
17 août 2026·11 min de lecture

Créer un plugin WordPress avec l'IA : la méthode sans coder

Avec Cursor en version gratuite et un seul prompt, tu crées un plugin WordPress sur mesure et tu le déploies sur ton site en quelques minutes. Démo à l'appui.

Lire l’article →
Vibe codingTuto
Ton site WordPress avec Claude Code
15 juin 2026·13 min de lecture

Créer un site WordPress avec Claude Code : promesse vs réalité

J'ai connecté Claude Code à WordPress pour créer un site complet en un prompt. Je te montre la méthode pas à pas, et ce que ça donne vraiment, sans filtre.

Lire l’article →

Une question sur ce tuto ?

Écris-moi, je lis chaque message.

Poser ma question → Me faire accompagner