Créer des applications dans Google AI Studio

Cette page explique comment utiliser Google AI Studio pour créer rapidement (ou "vibe coder") et déployer 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 complets, ce qui vous permet de créer des applications robustes avec une logique côté serveur, une gestion sécurisée des secrets et une compatibilité avec les packages npm, le tout grâce à des invites en langage naturel.

Premiers pas

Commencez à vibe coder dans le mode Créer de Google AI Studio. Vous pouvez commencer à créer de plusieurs façons :

  • Commencer par une invite : en mode "Créer", utilisez la zone de saisie pour entrer une description de ce que vous souhaitez créer. Sélectionnez "Puces d'IA" pour ajouter des fonctionnalités spécifiques à votre invite, comme la génération d'images ou les données Google Maps. Vous pouvez même dicter ce que vous voulez à l'aide du bouton de conversion de la parole en texte.
  • Bouton"J'ai de la chance" : si vous avez besoin d'une idée créative, utilisez le bouton "J'ai de la chance". Gemini générera une invite avec une idée de projet pour vous aider à démarrer.
  • Remixer un projet de la galerie : ouvrez un projet dans la galerie d'applications et sélectionnez Copier l'application.

Une fois que vous avez exécuté l'invite, 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 invite, AI Studio crée une application complète. Par défaut, il crée un environnement complet qui peut inclure les éléments suivants :

  • Côté client : une interface Web (React est la valeur 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 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 de l'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 complètes et robustes.

Voici les principales fonctionnalités de cette solution :

  • Contexte : conserve le contexte des invites précédentes et 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 libère la puissance de l'écosystème Web moderne, ce qui vous permet de créer 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 identifie et installe automatiquement les packages nécessaires à votre application (par exemple, des bibliothèques spécifiques pour la visualisation des données ou les clients d'API). Vous pouvez également demander des packages spécifiques si vous le souhaitez.
  • Gestion des secrets : stockez en toute sécurité 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 de 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 Firebase : provisionnez et configurez automatiquement Firebase, y compris la base de données Firestore (stockage persistant des données) 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 complètes

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éer" 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é sous forme de 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éer et itérer des applications complètes : créez des applications complètes avec juste une invite et itérez via le chat ou le mode "Annotation". Le mode "Annotation" vous permet de mettre en surbrillance n'importe quelle partie de l'interface utilisateur 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 découvrir ce qu'il est possible de faire avec Gemini, prévisualiser instantanément des 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 tarifs peuvent s'appliquer à Google Cloud Run en fonction de l'utilisation.
  • GitHub : exportez votre projet vers un dépôt GitHub.

Limites

Cette section répertorie les limites actuelles du mode "Créer" dans Google AI Studio.

Sécurité des clés API

  • Côté client : n'utilisez jamais de clés API réelles 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 en toute sécurité 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. Cela 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 simplement remplacer l'espace réservé par une clé API réelle 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 limité 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'une simple invite à 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 avec une invite, 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 "Créer" appelle-t-il l'API Gemini à partir du code côté client ?

En règle générale, il est préférable 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 proxy les appels vers l'API Gemini, en remplaçant la valeur d'espace réservé par la clé API de l'utilisateur (et non la vôtre). N'utilisez pas de clé API réelle dans votre application, car le code est visible pour toute personne pouvant afficher 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 à leurs propres fins. 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 à partir d'AI Studio, ce qui lui donnera 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 d'espace réservé par une clé API réelle, elle 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 en toute sécurité 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 en local avec mes propres outils, puis les partager ici ?

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

Comment utiliser une base de données ou un autre 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 travaillons à l'ajout d'une prise en charge directe du stockage à l'avenir, que vous pourrez configurer directement dans AI Studio.

Pour nous assurer que les spectateurs sont conscients de l'utilisation de leur webcam ou d'autres appareils par une application, nous demandons 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 accorder à d'autres utilisateurs un accès en modification à mon application ?

Cette fonctionnalité n'est pas encore disponible, mais elle 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. Les cas de non-respect des règles peuvent inclure, sans s'y limiter, les éléments suivants :

  • 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 qui ne respecte pas le règlement sur le harcèlement
  • Applications qui affichent ou distribuent du contenu qui ne respecte pas le règlement sur les discours haineux
  • Applications qui affichent ou distribuent du contenu qui ne respecte pas 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 qui ne respecte pas le règlement sur la violence et le contenu sanglant
  • Applications qui affichent ou distribuent du contenu qui ne respecte pas le règlement sur le contenu dangereux ou nuisible

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 suppression 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 gère. Par exemple :

  • Conformité juridique 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 de confidentialité.
  • Surveillance du contenu : des conditions supplémentaires peuvent s'appliquer aux autres services utilisés par votre application. Par exemple, les Conditions d'utilisation de Google Cloud, applicables à Firestore, exigent que les clients hébergeant du contenu tiers publient des règles définissant le contenu interdit (par exemple, le contenu illégal) et 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