Temps de lecture : 4 min
Niveau : Débutant à Avancé
Tu as une idée d’app, mais pas envie d’ouvrir VS Code, installer Node, gérer une API, ni lire 15 pages de doc ?
Google vient de te faire un cadeau : Vibe Code dans Google AI Studio.
En gros :
➡️ Tu décris ton idée en français
➡️ Gemini génère une vraie web app
➡️ Tu vois le résultat en live dans ton navigateur
➡️ Tu déploies sur le web en un clic, grâce à Cloud Run
Et le meilleur dans tout ça : tu peux le faire gratuitement dans le cadre de l’offre AI Studio + Google Cloud Free Tier (300 $ de crédits pour les nouveaux comptes).
Dans ce guide, on va voir pas à pas comment :
- Accéder à Vibe Code avec Gemini
- Créer ta première web app avec un simple prompt
- L’améliorer sans toucher au code
- La déployer publiquement sur le web
- Comprendre ce que ça coûte vraiment (et comment rester dans le gratuit)
1. Vibe Coding, c’est quoi concrètement ?
Officiellement, Google définit le vibe coding comme une façon de coder où tu décris ce que tu veux en langage naturel, et l’IA se charge de générer le code, la logique, la structure, et même le déploiement.
✅ Toi : tu joues le rôle de réalisateur / product owner
✅ L’IA : fait le développeur + intégrateur + devops
Au lieu de “je crée un projet React + un backend + un déploiement”, tu dis :
“Crée une web app où l’utilisateur peut uploader une image, l’IA analyse la scène et génère un texte pour les réseaux sociaux.”
Et AI Studio te sort :
- une UI fonctionnelle
- du code front / back organisé
- une prévisualisation temps réel
Le tout, déjà connecté aux modèles Gemini.
2. Comment accéder à Vibe Code avec Gemini ?
Tu as deux portes d’entrée principales :
- app.new : tape
app.newdans ton navigateur → tu es redirigé vers Google AI Studio avec l’interface Vibe Coding prête à l’emploi. - Ou passe directement par Google AI Studio (interface Vibe Coding).
👉 Prérequis :
- Un compte Google
- (Optionnel mais recommandé) un compte Google Cloud activé pour plus tard, quand tu déploieras.
Une fois dans AI Studio, tu entres dans l’espace où tu vas :
- écrire ton prompt
- voir l’app se générer
- modifier l’interface
- déployer sur Cloud Run
3. Sous le capot : Gemini, Nano Banana, Veo & co.
Vibe Code n’est pas “juste” un chat avec Gemini. C’est un orchestrateur de modèles :
- Gemini (Pro / 2.5 / 3 selon le déploiement) :
C’est le cerveau qui comprend ton idée, génère le code, structure les fichiers et la logique de l’app. - Nano Banana :
Modèle dédié à l’image (génération, édition) directement dans tes apps : filtres, transformation, outils créatifs… - Veo :
Pour la vidéo générative, par exemple transformer un script en vidéo ou faire de la génération / édition depuis ton interface.
Résultat : avec un seul environnement, tu peux créer une app qui :
- génère du texte (chat, résumé, storytelling)
- manipule des images (génération de visuels, outils d’édition)
- gère de la vidéo (via Veo)
- parle API externes si tu le précises dans ton prompt
4. Créer une web app gratuitement avec Vibe Code (tuto étape par étape)
Étape 1 – Ouvrir l’interface Vibe Code
- Va sur
app.newou sur Google AI Studio. - Choisis le mode Build an app / vibe coding (si ce n’est pas déjà affiché).
- Tu arrives sur une interface avec :
- un prompt (zone de texte à gauche)
- une preview de l’app à droite
- un onglet fichiers / code généré
Étape 2 – Décrire ton app dans un prompt
C’est là que ta “vibe” entre en jeu.
Commence par un prompt clair et orienté résultat.
Exemple d’app simple :
“Crée une web app de générateur de noms de startup.
Il me faut :
- un champ texte pour saisir un secteur
- un bouton
- une liste de 10 noms créatifs en sortie
- un design moderne sombre, adapté desktop + mobile.”
AI Studio va :
- générer le code
- construire le layout
- afficher un aperçu live de ton app.
Étape 3 – Itérer sans toucher au code
Une fois la première version générée, tu vas affiner.
Tu peux :
- changer la langue :“Mets toute l’interface en français.”
- modifier le design :“Passe en mode clair, avec un fond blanc et des boutons bleu foncé.”
- ajouter des fonctionnalités :“Ajoute une option pour choisir le ton : sérieux, fun ou premium.”
“Ajoute un bouton pour copier les résultats en un clic.”
Tu peux aussi utiliser le mode Annotation : tu cliques directement sur une zone de l’interface, tu expliques ce que tu veux changer (“rétrécis cette carte”, “arrondis ces bords”, “centre ce bloc”), et Gemini adapte le code.
L’idée : tu restes dans un dialogue naturel, sans plonger dans les fichiers.
Étape 4 – Tester l’app
Avant de déployer, joue avec ton app :
- remplis les champs
- teste les boutons
- vérifie que les textes s’affichent comme prévu
- teste sur plusieurs tailles de fenêtre (responsive)
Si quelque chose cloche, tu le dis en clair :
“Quand je clique sur le bouton, il ne se passe rien. Corrige le bug.”
“Ajoute une validation pour empêcher les champs vides.”
Gemini ajuste la logique sans que tu aies à scroller dans 15 fichiers.
Étape 5 – Déployer sur le web (Cloud Run)
Quand tu es satisfait du résultat, tu peux la rendre accessible publiquement :
- Clique sur “Deploy to Cloud Run” dans l’interface AI Studio.
- Connecte ton projet Google Cloud (si ce n’est pas déjà fait).
- Laisse AI Studio builder et déployer le container.
- Tu obtiens une URL publique que tu peux partager partout.
Techniquement, l’app tourne sur Google Cloud Run, un service serverless qui scale automatiquement et peut même descendre à zéro quand personne ne l’utilise.
5. Est-ce vraiment gratuit ? (Gemini + Cloud Run + crédits)
Trois niveaux à comprendre :
1) AI Studio & Gemini
L’utilisation de Vibe Code dans AI Studio est gratuite dans la limite des quotas gratuits de Gemini (charge d’utilisation mensuelle).
Tu peux :
- prototyper
- générer plusieurs apps
- itérer dessus
Tant que tu restes dans les quotas offerts, tu ne payes rien.
2) Déploiement sur Google Cloud Run
Quand tu déploies :
- tu utilises Google Cloud Run (hébergement serverless)
- la facturation se fait sur le temps d’exécution + ressources utilisées
Mais :
👉 Tous les nouveaux comptes Google Cloud reçoivent 300 $ de crédits pour tester et déployer des apps.
Avec une petite web app générée par Vibe Code, ces crédits peuvent durer très longtemps (surtout si le trafic est modeste).
3) Free Tier & Always Free
Même après les 300 $ de crédits, tu peux profiter :
- de produits Google Cloud en Always Free (avec des limites)
Concrètement : pour des petits projets, MVP, démos clients, portfolio, c’est largement suffisant pour ne rien payer tant que tu surveilles ton usage.
6. Pour qui c’est intéressant ?
Créateurs de contenu / YouTube / TikTok
- Tu peux transformer tes idées de formats en outils IA (générateurs de scripts, d’accroches, d’idées de vidéos…)
- Tu publies l’app pour ton audience (lead magnet parfait).
Freelances & agences
- Prototyper un outil pour un client en 1 jour au lieu de 2 semaines
- Présenter une démo interactive plutôt qu’un PDF ou un Figma
Founders & indie hackers
- Lancer un mini-SAAS à l’arrache pour tester le marché
- Itérer ultra vite sur la base des retours utilisateurs
Étudiants & curieux
- Comprendre comment se structure une app moderne
- Apprendre en lisant le code généré par Gemini
7. Limites à garder en tête (très important)
Tout n’est pas magique non plus :
- Le code généré est parfois verbeux ou pas optimal
- Pour des apps critiques (sécurité, compliance, finance…), un dev expérimenté doit :
- auditer le code
- ajouter des tests
- verrouiller la sécurité
Google recommande d’ailleurs explicitement une phase de revue humaine pour les apps avant mise en production.
Pense à voir Vibe Code comme :
un booster de productivité et un générateur de prototypes
pas un remplaçant magique d’une équipe dev pour du lourd en prod.
8. Conclusion : du prompt au produit en quelques minutes
Avec Vibe Code + Gemini, on n’est plus sur un simple “copier-coller de code proposé par un chatbot”.
On est sur :
- un IDE dans le navigateur
- branché sur les derniers modèles Gemini
- capable de générer, afficher, corriger et déployer une web app complète
- avec une barrière d’entrée quasi nulle grâce au langage naturel et aux 300 $ de crédits Google Cloud pour démarrer.
Si tu sais écrire une phrase claire, tu peux créer une web app IA.
Laisser un commentaire