Créer des applications dans Google AI Studio

Cette page explique comment utiliser 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. Google AI Studio est désormais compatible avec les environnements d'exécution full stack, ce qui vous permet de créer des applications robustes avec une logique côté serveur, une gestion sécurisée des secrets et la prise en charge des packages npm, le tout grâce à des requêtes en langage naturel.

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éer, 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 complète. Par défaut, il crée un environnement full stack pouvant inclure les éléments suivants :

  • Côté client : interface Web (React par défaut).
  • Côté serveur : un environnement d'exécution Node.js qui permet des appels d'API sécurisés, des connexions à des bases de données et l'utilisation de packages npm.

Pour afficher le code généré, sélectionnez l'onglet Code dans le volet d'aperçu de droite. L'agent Antigravity gère intelligemment plusieurs fichiers dans votre pile, en veillant à ce que les modifications soient propagées correctement.

L'Agent Antigravity

L'agent Antigravity est la principale fonctionnalité d'IA de Google Antigravity. Les composants principaux de l'harnais d'agent alimentent désormais l'expérience du mode Créer dans Google AI Studio. Il va au-delà de la simple génération de code en conservant le contexte de l'ensemble de votre projet, en gérant plusieurs fichiers et en comprenant des instructions complexes pour créer des applications full stack robustes.

Voici les principales fonctionnalités de cette solution :

  • Conscience du contexte : conserve le contexte des requêtes précédentes et des états des fichiers.
  • Gestion de plusieurs fichiers : gère les dépendances entre plusieurs fichiers.
  • Exécution validée : valide les mises à jour du code pour réduire les hallucinations.

Fonctionnalités complètes

Google AI Studio exploite la puissance de l'écosystème Web moderne, ce qui vous permet de créer plus que de simples prototypes côté client.

  • Runtime côté serveur et npm : utilisez la vaste bibliothèque de packages npm. L'agent identifiera et installera automatiquement les packages nécessaires à votre application (par exemple, des bibliothèques spécifiques pour la visualisation de données ou les clients d'API). Vous pouvez également demander des packages spécifiques si vous le souhaitez.
  • Gestion des secrets : stockez de manière sécurisée les clés API et les secrets dans le menu Paramètres. Ils sont accessibles dans votre code côté serveur, ce qui les protège contre l'exposition côté client.
  • Multijoueur : créez des expériences collaboratives en temps réel directement dans AI Studio. L'environnement d'exécution côté serveur gère l'état et les connexions nécessaires pour que les utilisateurs puissent interagir ensemble.

En savoir plus sur le développement d'applications full stack

Continuez à créer des applications

Une fois que Google AI Studio a généré le code initial de votre application, vous pouvez continuer à l'affiner :

Développer dans Google AI Studio

  • Itérer avec Gemini : utilisez le panneau de chat en mode Création pour demander à Gemini d'apporter des modifications, d'ajouter de nouvelles fonctionnalités ou de modifier le style.
  • Modifier le code directement : ouvrez l'onglet "Code" dans le panneau d'aperçu pour effectuer des modifications en direct.

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.
  • 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 :

  • Créez et itérez des applications full stack : créez des applications full stack à l'aide d'une simple requête et itérez-les en mode chat ou annotation. 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.
  • Partager et déployer votre application : vous pouvez partager vos créations avec d'autres utilisateurs pour collaborer ou présenter votre travail. Ensuite, lorsque votre application est prête, déployez-la sur Cloud Run.
  • 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.

Créez et itérez des applications full stack : bref aperçu de la prise en charge de l'exécution, itérez avec le mode d'annotation. Partagez et déployez : partagez votre application dans AI Studio ou déployez-la sur Cloud Run. Explorez la galerie d'applications.

Déployer ou archiver votre application

Une fois votre application prête, vous pouvez la déployer :

  • Google Cloud Run : déployez votre application en tant que service évolutif. Des frais Google Cloud Run peuvent s'appliquer en fonction de l'utilisation.
  • GitHub : exportez votre projet vers un dépôt GitHub.

Limites

Cette section liste les limites actuelles du mode Créer dans Google AI Studio.

Sécurité des clés API

  • Côté client : n'utilisez jamais de vraies clés API directement dans le code côté client.
  • Côté serveur : utilisez la fonctionnalité de gestion des secrets pour gérer les clés sensibles de manière sécurisée dans l'environnement d'exécution côté serveur.

Déploiement en dehors de Google 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.

Erreur lors du partage d'applications

Si vous partagez votre application et que votre utilisateur final rencontre une erreur 403 Accès restreint lorsqu'il utilise l'URL partagée, cela peut être dû à l'une des raisons suivantes :

  • Extensions de navigateur : les extensions de confidentialité telles que Privacy Badger peuvent bloquer l'application. Désactivez l'extension pour éviter l'erreur.
  • Problèmes de compilation : il peut y avoir des problèmes avec le code actuel. Demandez à l'agent de "corriger les problèmes de compilation avec le code actuel", puis partagez à nouveau l'URL.

Étape suivante