Cette page explique comment utiliser le mode "Créer" dans Google AI Studio pour créer (ou coder) et déployer rapidement des applications qui testent les dernières fonctionnalités de Gemini, comme nano banana et l'API Live.
Premiers pas
Commencez à faire du vibe coding dans le mode Créer de Google AI Studio. Vous pouvez commencer à créer des applications de plusieurs façons :
- Commencez par un prompt : en mode Création, utilisez la zone de saisie pour décrire ce que vous souhaitez créer. Sélectionnez "Puces d'IA" pour ajouter des fonctionnalités spécifiques à votre requête, comme la génération d'images ou les données Google Maps. Vous pouvez même dire ce que vous voulez à l'aide du bouton de synthèse vocale.
- Bouton "J'ai de la chance" : si vous avez besoin d'inspiration, utilisez le bouton "J'ai de la chance". Gemini générera une requête avec une idée de projet pour vous aider à vous lancer.
- Remixer un projet depuis la galerie : ouvrez un projet depuis la galerie d'applications, puis sélectionnez Copier l'application.
Une fois que vous avez exécuté le prompt, le code et les fichiers nécessaires sont générés, et un aperçu en direct de votre application s'affiche sur la droite.
Qu'est-ce qui est créé ?
Lorsque vous exécutez votre requête, AI Studio crée une application Web. Par défaut, il crée une application Web React, mais vous pouvez choisir de créer une application Angular dans le menu "Paramètres". Pour afficher le code généré, sélectionnez l'onglet Code dans le volet d'aperçu de droite.
Voici les fichiers à noter :
- geminiService.ts : ce fichier contient la logique principale de votre application, de la création des requêtes à l'appel de l'API Gemini et à l'analyse de ses réponses. Vous pouvez modifier le prompt de base dans ce fichier ou modifier la fonctionnalité de n'importe quel composant directement ou en discutant de manière interactive avec Gemini en mode Création. Notez que le code de ce fichier utilise le SDK GenAI TS pour interagir avec l'API Gemini.
Continuez à créer des applications
Une fois que Google AI Studio a généré le code initial de votre application Web, vous avez deux options principales pour poursuivre votre projet : créer dans AI Studio ou développer en externe.
Compiler dans Google AI Studio
Vous pouvez continuer à affiner et à développer votre application directement dans l'environnement Google AI Studio :
- Itérer avec Gemini : utilisez le panneau de chat en mode Créer pour demander à Gemini d'apporter des modifications, d'ajouter de nouvelles fonctionnalités ou de modifier le style. Par exemple, vous pouvez demander "Ajoute un bouton qui alerte l'utilisateur" ou "Change la palette de couleurs en bleu et blanc".
- Modifier le code directement : ouvrez l'onglet "Code" dans le panneau d'aperçu pour apporter des modifications en direct. Vous pouvez enregistrer votre projet sur GitHub pour utiliser le contrôle des versions pendant le développement.
Développer en externe
Pour les workflows plus avancés, vous pouvez exporter le code et travailler dans l'environnement de votre choix :
- Télécharger et développer en local : exportez le code généré en tant que fichier ZIP et importez-le dans votre éditeur de code. Cela vous permet d'utiliser vos outils, systèmes de compilation et pratiques de contrôle de version locaux habituels pour continuer à développer votre projet au-delà du prototype initial.
- Transférer vers GitHub : intégrez le code à vos processus de développement et de déploiement existants en le transférant vers un dépôt GitHub.
Principales fonctionnalités
Google AI Studio inclut plusieurs fonctionnalités pour rendre le processus de création intuitif et visuel :
- Mode Annotation : au lieu d'écrire du code pour modifier l'apparence de votre application, le mode Annotation vous permet de mettre en évidence n'importe quelle partie de l'UI de votre application et de décrire la modification souhaitée. Par exemple, vous pouvez sélectionner un composant et saisir "Rends ce bouton bleu" ou "Anime cette image pour qu'elle glisse depuis la gauche". Lorsque vous sélectionnez Ajouter au chat, une requête est générée avec une capture d'écran de l'application annotée.
- Partager votre application : vous pouvez partager vos créations avec d'autres utilisateurs pour collaborer ou présenter votre travail.
- Galerie d'applications : la galerie d'applications fournit une bibliothèque visuelle d'idées de projets. Vous pouvez parcourir les possibilités offertes par Gemini, prévisualiser instantanément les applications et les remixer pour les personnaliser.
Déployer ou archiver votre application
Une fois votre application prête, vous pouvez la déployer directement depuis AI Studio. Voici quelques options de déploiement :
- Google Cloud Run : déployez votre application en tant que service évolutif. Notez que la tarification de Google Cloud Run peut s'appliquer en fonction de l'utilisation.
- GitHub : exportez votre projet vers un dépôt GitHub pour l'intégrer à vos workflows de développement et de déploiement existants.
Limites
Cette section décrit les limites importantes lorsque vous utilisez le mode Créer dans Google AI Studio.
Sécurité et exposition des clés API
- Le code des applications partagées est visible par toute personne qui les consulte. N'utilisez jamais de clé API réelle directement dans le code de votre application.
- Par défaut, les applications utilisent un espace réservé (par exemple, process.env.GEMINI_API_KEY) pour la clé API. Lorsqu'un utilisateur exécute votre application partagée dans AI Studio, AI Studio sert de proxy et remplace l'espace réservé par la clé API de l'utilisateur final, ce qui garantit la confidentialité de votre clé.
Visibilité et partage des applications
- Les applications sont stockées dans Google Drive et héritent de son modèle d'autorisations, ce qui signifie qu'elles sont privées par défaut.
- Autorisations de partage : lorsque vous partagez une application avec d'autres utilisateurs :
- Les utilisateurs partagés peuvent voir le code et forker l'application pour leur propre usage.
- Si l'autorisation de modification leur est accordée, les utilisateurs partagés peuvent modifier le code de l'application.
Déploiement en dehors d'AI Studio
- Bien que vous puissiez déployer votre application sur Cloud Run pour obtenir une URL publique, cette configuration utilisera votre clé API pour tous les appels d'API Gemini des utilisateurs.
- Les applications JavaScript s'exécutent côté client. Assurez-vous donc que les clés API ne disposent que d'un accès minimal pour éviter les fuites de données ou les utilisations abusives. Par exemple, d'autres magasins de recherche de fichiers du même projet peuvent être accessibles aux utilisateurs via ce mécanisme.
- Déploiement externe sécurisé : pour exécuter une application de manière sécurisée en dehors d'AI Studio (par exemple, après avoir téléchargé le fichier ZIP), vous devez déplacer la logique qui utilise la clé API vers un composant côté serveur afin d'empêcher l'exposition de la clé aux utilisateurs finaux. Cette étape n'est pas nécessaire si vous effectuez le déploiement à l'aide de Cloud Run.
- Avertissement concernant l'exposition des clés : il est fortement déconseillé de remplacer simplement l'espace réservé par une véritable clé API dans un environnement côté client, car la clé deviendra visible pour tous les utilisateurs.
Compatibilité avec les outils et les fonctionnalités
- Importation pour le développement local : pour le moment, vous ne pouvez pas développer d'applications localement avec des outils externes et les importer dans AI Studio.
Et maintenant ?
- Découvrez ce que d'autres ont créé et trouvez l'inspiration en remixant un projet existant dans la galerie d'applications.
- Consultez la playlist YouTube pour découvrir une collection de tutoriels de programmation de vibes AI Studio qui vous aideront à vous lancer.