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 de 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 prompt, 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 est l'interface 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.

Vous pouvez afficher le code généré en sélectionnant l'onglet Code dans le volet d'aperçu à 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. Désormais, les composants principaux de l'harnais d'agent alimentent 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 :

  • Contexte : conserve le contexte des requêtes précédentes et l'état des fichiers.
  • Gestion multifichiers : 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 tout le potentiel de l'écosystème Web moderne, ce qui vous permet de créer bien plus que des prototypes côté client.

  • Environnement d'exécution 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.
  • Intégration de Firebase : provisionnez et configurez automatiquement Firebase, y compris la base de données Firestore (stockage de données persistant) et Firebase Authentication (flux de connexion, en particulier "Se connecter avec Google"). L'agent gère l'ensemble du processus de configuration et écrit même le code dans votre application pour ces services.

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 :

Créer 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.

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.

Questions fréquentes

Qu'est-ce que "Créer dans AI Studio" ?

AI Studio Build est une plate-forme conçue pour vous permettre de passer d'un simple prompt à une application optimisée par l'IA et prête pour la production à l'aide de Gemini. Décrivez ce que vous souhaitez créer à l'aide d'un prompt, et Gemini générera une application pour vous. Vous pouvez également explorer notre galerie pour découvrir ce qu'il est possible de faire avec l'API Gemini et remixer des applications pour les personnaliser.

Pourquoi Build appelle-t-il l'API Gemini à partir du code côté client ?

En règle générale, il est recommandé d'appeler l'API Gemini côté serveur afin de ne pas exposer votre clé API. Toutefois, AI Studio dispose d'un proxy d'API Gemini pour les appels côté client, qui associe la clé API sans l'exposer dans le code. Pour l'instant, nous générons des appels côté client pour utiliser ce proxy, car cela simplifie le code et vous permet de partager votre application avec d'autres utilisateurs sans avoir à fournir de clé API.

Ma clé API est-elle exposée lorsque je partage des applications ?

N'utilisez pas de clé API réelle dans votre application. Utilisez plutôt une valeur d'espace réservé. process.env.GEMINI_API_KEY est défini sur une valeur d'espace réservé que vous pouvez utiliser. Lorsqu'un autre utilisateur utilise votre application, AI Studio sert de proxy pour les appels à l'API Gemini, en remplaçant la valeur de l'espace réservé par la clé API de l'utilisateur (et non la vôtre). N'utilisez pas de véritable clé API dans votre application, car le code est visible par toute personne pouvant consulter votre application.

Qui peut voir mes applications ?

Par défaut, votre application est privée. Vous pouvez partager votre application avec d'autres utilisateurs pour leur permettre de l'utiliser. Les utilisateurs avec lesquels vous partagez votre application peuvent voir son code et le dupliquer pour leurs propres besoins. Si vous partagez votre application avec l'autorisation de modification, les autres utilisateurs peuvent modifier le code de votre application.

Puis-je exécuter des applications en dehors d'AI Studio ?

Vous pouvez déployer votre application sur Cloud Run depuis AI Studio, ce qui lui attribuera une URL publique. Elle est déployée avec un serveur proxy qui gardera votre clé API privée. Toutefois, l'application déployée utilisera votre clé API pour tous les appels d'API Gemini des utilisateurs. Vous pouvez également télécharger votre application sous forme de fichier ZIP. Si vous remplacez la valeur de l'espace réservé par une clé API réelle, cela devrait toujours fonctionner. Toutefois, vous ne devez pas déployer votre application de cette manière, car n'importe quel utilisateur pourra voir la clé API. Pour qu'une application s'exécute de manière sécurisée en dehors d'AI Studio, vous devez déplacer une partie de la logique côté serveur afin que la clé API ne soit plus exposée.

Puis-je développer des applications localement avec mes propres outils, puis les partager ici ?

Cette fonctionnalité n'est pas encore disponible. Nous sommes ravis de pouvoir prendre en charge davantage de cas d'utilisation pour les applications à l'avenir. N'hésitez pas à nous faire part de vos commentaires si vous avez quelque chose de précis en tête.

Comment utiliser une base de données ou un autre espace de stockage avec mes applications ?

Les applications AI Studio sont des applications standards qui s'exécutent dans un conteneur Cloud Run. Vous pouvez utiliser n'importe quelle solution de stockage à laquelle vous pouvez vous connecter via un réseau, à condition qu'aucun pare-feu n'empêche l'accès à partir d'une plage d'adresses IP dynamiques.

Nous prévoyons d'ajouter une prise en charge directe du stockage à l'avenir, que vous pourrez configurer directement dans AI Studio.

Pour s'assurer que les spectateurs sont informés de l'utilisation de leur webcam ou d'autres appareils par une application, nous exigeons une confirmation supplémentaire avant que l'application puisse accéder à ces API Navigator. Les créateurs d'applications peuvent ajouter ces demandes d'autorisation au fichier metadata.json de leur application. Exemple :

{
  "name": "My app",
  "requestFramePermissions": [
    "microphone",
    "camera",
    "display-capture",
    "geolocation",
    "bluetooth",
    "clipboard-read",
    "serial",
    "usb"
  ]
}

Les valeurs acceptées pour requestFramePermissions sont un sous-ensemble des fonctionnalités standards contrôlées par les règles.

Comment utiliser GitHub avec mes applications ?

L'intégration GitHub d'AI Studio vous permet de créer un dépôt pour votre travail et de valider vos dernières modifications. Nous ne prenons pas en charge l'extraction des modifications à distance pour le moment.

Puis-je autoriser d'autres utilisateurs à modifier mon application ?

Cette fonctionnalité n'est pas encore disponible, mais le sera bientôt.

Pourquoi mon application a-t-elle été signalée pour non-respect des règles ?

Nous disposons de systèmes qui examinent automatiquement les applications pour s'assurer qu'elles respectent nos règles. Si nous constatons qu'une application ne respecte pas nos règles, elle sera supprimée d'AI Studio. Voici quelques exemples de cas de non-respect des règles (liste non exhaustive) :

  • Applications contenant des logiciels malveillants, des tentatives d'hameçonnage ou des usurpations d'identité
  • Applications qui affichent ou distribuent du contenu qui ne respecte pas le règlement sur les images d'abus sexuels sur mineurs
  • Applications qui affichent ou distribuent du contenu ne respectant pas le règlement sur le harcèlement
  • Applications qui affichent ou distribuent du contenu qui ne respecte pas le règlement concernant l'incitation à la haine
  • Applications qui affichent ou distribuent du contenu qui enfreint le règlement sur la traite des êtres humains
  • Applications qui affichent ou distribuent du contenu qui ne respecte pas le règlement sur le contenu à caractère sexuel explicite
  • Applications qui affichent ou distribuent du contenu violent et sanglant
  • Applications qui affichent ou distribuent du contenu qui ne respecte pas le règlement relatif aux contenus nuisibles ou dangereux

Si votre application a été signalée pour non-respect des règles et que vous pensez qu'il s'agit d'une erreur, vous pouvez faire appel. Le non-respect répété de nos règles peut entraîner la résiliation de votre accès à AI Studio.

Quelles sont mes responsabilités en tant que développeur d'applications ?

Pour rappel, en tant que propriétaire de votre application, vous êtes responsable de son comportement et de toutes les données qu'elle traite. Par exemple :

  • Conformité légale et droits de tiers : assurez-vous que votre application respecte toutes les lois et réglementations applicables, et qu'elle n'enfreint pas les droits d'autrui, y compris les droits de propriété intellectuelle et les droits au respect de la confidentialité.
  • Surveillance du contenu : le respect de conditions supplémentaires peut s'appliquer à d'autres services utilisés par votre application. Par exemple, les Conditions d'utilisation de Google Cloud, applicables à Firestore, exigent des clients qui hébergent du contenu tiers qu'ils publient des règles définissant le contenu interdit (par exemple, le contenu illégal) et qu'ils surveillent la présence de ce contenu illégal.
  • Implémentation sécurisée : implémentez les mesures de protection et les outils de modération nécessaires pour éviter toute utilisation abusive de votre application.

Tenez compte des restrictions d'utilisation dans les conditions d'utilisation.

Les Conditions d'utilisation supplémentaires de l'API Gemini s'appliquent à l'utilisation des applications présentées dans la galerie d'applications d'AI Studio, sauf indication contraire.

Étape suivante