Personnaliser votre espace de travail Firebase Studio

Firebase Studio vous permet d'adapter votre espace de travail aux besoins spécifiques de votre projet en définissant un seul fichier de configuration .idx/dev.nix qui décrit :

  • Les outils système dont vous avez besoin pour pouvoir exécuter (par exemple, à partir du terminal), tels que les compilateurs ou d'autres binaires.
  • Les extensions dont vous avez besoin (par exemple, la prise en charge des langages de programmation).
  • La façon dont vos aperçus d'application doivent s'afficher (par exemple, les commandes permettant d'exécuter votre serveur Web).
  • Variables d'environnement globales disponibles pour les serveurs locaux exécutés dans votre espace de travail.

Pour obtenir une description complète des éléments disponibles, consultez la documentation de référence sur dev.nix.

En ajoutant un fichier .idx/mcp.json (pour Gemini dans Firebase) ou .gemini/settings.json (pour Gemini CLI) à votre projet, vous pouvez également vous connecter aux serveurs MCP (Model Context Protocol), y compris au serveur Firebase MCP.

Nix et Firebase Studio

Firebase Studio utilise Nix pour définir la configuration de l'environnement de chaque espace de travail. Plus précisément, Firebase Studio utilise :

  • Le langage de programmation Nix pour décrire les environnements de l'espace de travail. Nix est un langage de programmation fonctionnel. Les attributs et les bibliothèques de packages que vous pouvez définir dans le fichier dev.nix suivent la syntaxe de l'ensemble d'attributs Nix.

  • Le gestionnaire de packages Nix pour gérer les outils système disponibles dans votre espace de travail. Cela s'apparente aux gestionnaires de packages spécifiques à l'OS, tels qu'APT (apt et apt-get), Homebrew (brew) et dpkg.

Étant donné que les environnements Nix sont reproductibles et déclaratifs, dans le contexte de Firebase Studio, cela signifie que vous pouvez partager votre fichier de configuration Nix dans votre dépôt Git pour vous assurer que tous les collaborateurs de votre projet disposent de la même configuration d'environnement.

Exemple de base

L'exemple suivant montre une configuration d'environnement de base permettant les aperçus :

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

Ajouter des outils système

Pour ajouter des outils système à votre espace de travail, tels que des compilateurs ou des programmes CLI pour les services cloud, recherchez l'ID de package unique dans le registre des packages Nix et ajoutez-le à l'objet packages du fichier dev.nix, en le préfixant avec "pkgs." :

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

Cette méthode est différente de celle que vous utilisez habituellement pour installer des packages système à l'aide de gestionnaires de packages spécifiques à l'OS, tels qu'APT (apt et apt-get), Homebrew (brew) et dpkg. Décrire de manière déclarative les packages système nécessaires signifie que les espaces de travail Firebase Studio sont plus faciles à partager et à reproduire.

Utiliser des binaires de nœud locaux

Comme sur votre ordinateur local, les binaires associés aux packages de nœuds installés localement (par exemple, les packages définis dans votre package.json) peuvent être exécutés dans un panneau de terminal en les appelant avec la commande npx.

Pour plus de commodité, si vous vous trouvez dans un répertoire avec un dossier node_modules (tel que le répertoire racine d'un projet Web), les binaires installés localement peuvent être appelés directement, sans le préfixe npx.

Ajouter des composants gcloud

Une configuration par défaut de la CLI gcloud pour Google Cloud est disponible pour tous les espaces de travail Firebase Studio.

Si vous avez besoin de composants supplémentaires, vous pouvez les ajouter à votre fichier dev.nix :

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

Ajouter des extensions IDE

Vous pouvez installer des extensions dans Firebase Studio à l'aide du registre d'extensions OpenVSX de deux manières :

  • Utilisez le panneau Extensions dans Firebase Studio pour découvrir et installer des extensions. Cette approche est idéale pour les extensions spécifiques aux utilisateurs, par exemple :

    • Thèmes de couleurs personnalisés
    • Émulation d'éditeur, comme VSCodeVim

  • Ajoutez des extensions à votre fichier dev.nix. Ces extensions seront installées automatiquement lorsque vous partagerez la configuration de votre espace de travail. Cette approche est idéale pour les extensions spécifiques à un projet, par exemple :

    • Extensions de langage de programmation, y compris les débogueurs spécifiques à un langage
    • Extensions officielles pour les services cloud utilisés dans votre projet
    • Outils de mise en forme du code

Pour cette dernière approche, vous pouvez inclure des extensions d'IDE dans votre fichier dev.nix en recherchant l'ID d'extension complet (au format <publisher>.<id>) et en l'ajoutant à l'objet idx.extensions comme suit :

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

Ajouter des services communs

Firebase Studio propose également une configuration simplifiée pour les services courants dont vous pouvez avoir besoin pendant le développement, y compris :

  • Conteneurs
    • Docker (services.docker.*)
  • Messagerie
    • Émulateur Pub/Sub (services.pubsub.*)
  • Bases de données
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Pour savoir comment activer ces services dans votre espace de travail, consultez les sections services.* de la documentation de référence sur dev.nix.

Personnaliser les aperçus

Pour savoir comment personnaliser les aperçus de votre application, consultez Prévisualiser votre application.

Définir l'icône de votre espace de travail

Vous pouvez choisir une icône personnalisée pour votre espace de travail en plaçant un fichier PNG nommé icon.png dans le répertoire .idx au même niveau que votre fichier dev.nix. Firebase Studio utilisera ensuite cette icône pour représenter votre espace de travail dans votre tableau de bord.

Étant donné que ce fichier peut être vérifié dans le contrôle de code source (tel que Git), il s'agit d'un bon moyen d'aider tous ceux qui travaillent sur votre projet à voir la même icône pour votre projet lorsqu'ils utilisent Firebase Studio. Comme le fichier peut varier d'une branche Git à l'autre, vous pouvez utiliser cette icône pour distinguer visuellement les espaces de travail des applications bêta et de production, et à d'autres fins.

Transformer vos personnalisations en modèle

Pour transformer la configuration de votre environnement en "environnement de démarrage" que tout le monde peut utiliser pour créer des projets, consultez la documentation Créer des modèles personnalisés.

Découvrir toutes les options de personnalisation

Consultez la documentation de référence sur dev.nix pour obtenir une description détaillée du schéma de configuration de l'environnement.

Télécharger vos fichiers

Pour télécharger vos fichiers au format ZIP :

  • Effectuez un clic droit sur un répertoire dans le volet "Explorateur", puis sélectionnez Compresser et télécharger.

Pour télécharger tout le contenu de votre répertoire de projet :

  1. Sélectionnez Fichier > Ouvrir le dossier.

  2. Acceptez le répertoire /home/user par défaut.

  3. Une fois les fichiers chargés, effectuez un clic droit sur votre répertoire de travail et sélectionnez Compresser et télécharger. Si vous utilisez App Prototyping agent, votre répertoire de travail sera studio. Si vous utilisez un modèle ou un projet importé, il s'agit du nom de votre projet.

  4. Lorsque vous êtes invité à recréer l'environnement, cliquez sur Annuler.

  5. Une fois le téléchargement terminé, rouvrez votre répertoire de travail à partir du menu Fichier pour revenir à votre espace de travail.

Utiliser des serveurs MCP

Les serveurs MCP fournissent des outils et des sources de données supplémentaires à utiliser pour Gemini. Par exemple, vous pouvez ajouter le serveur Firebase MCP pour explorer vos données dans Cloud Firestore à l'aide du langage naturel lorsque vous créez ou déboguez votre application.

Prérequis

  • Si le serveur MCP l'exige, assurez-vous d'avoir installé Node.js et npm.

Choisir un serveur MCP compatible

Firebase Studio est compatible avec les serveurs MCP, mais cela ne signifie pas que tous les serveurs MCP sont compatibles. Lorsque vous choisissez un serveur MCP à ajouter à votre espace de travail Firebase Studio, tenez compte des points suivants :

  • Compatible :
    • Serveurs de transport HTTP standard d'entrée/sortie (stdio) ou d'événements envoyés par le serveur (SSE)/flux qui ne nécessitent pas de formes d'authentification spéciales
    • Outils fournis par les serveurs MCP
  • Actuellement non disponible :
    • Serveurs nécessitant une interface utilisateur graphique ou une session de bureau
    • Requêtes, échantillonnage ou autres ressources fournies par les serveurs MCP

Ajouter un serveur MCP

  1. Dans l'explorateur (Ctrl+Shift+E), modifiez ou créez le fichier de configuration MCP.

    • Gemini dans Firebase utilise .idx/mcp.json.

    • Gemini CLI utilise .gemini/settings.json.

    Si le fichier n'existe pas encore, créez-le en effectuant un clic droit sur le répertoire parent, puis en sélectionnant Nouveau fichier. Créez ou modifiez les deux fichiers pour utiliser le serveur MCP dans Gemini dans Firebase et Gemini CLI.

  2. Ajoutez la configuration du serveur au contenu du fichier. Par exemple, pour ajouter le serveur MCP Firebase, saisissez :

    {
  "mcpServers": {
   "firebase": {
     "command": "npx",
     "args": [
       "-y",
       "firebase-tools@latest",
       "experimental:mcp"
      ]
    }
  }
}

    Ce fichier de configuration indique à Gemini le serveur MCP à utiliser. Dans cet exemple, nous avons ajouté un serveur appelé firebase qui utilisera la commande npx pour installer et exécuter firebase-tools@latest. D'autres serveurs MCP nécessitent des configurations différentes, mais suivent le même format général.

  3. Dans le terminal (Shift+Ctrl+C), exécutez les commandes nécessaires pour terminer l'installation. Par exemple, pour utiliser le serveur MCP Firebase, saisissez la commande suivante pour vous connecter à votre compte :

    firebase login --no-localhost

    Suivez les instructions du terminal pour autoriser la session. Certains outils nécessitent un projet Firebase associé. Vous pouvez utiliser le serveur MCP Firebase pour créer un projet ou exécuter la commande suivante pour initialiser un projet Firebase :

    firebase init

    Cette opération crée un fichier firebase.json dans votre répertoire racine.

  4. Recompilez votre espace de travail pour terminer la configuration :

    1. Ouvrez la palette de commandes (Shift+Ctrl+P).

    2. Saisissez Firebase Studio : Rebuild Environment (Firebase Studio : Reconstruire l'environnement).

Utiliser les outils MCP

Une fois le serveur MCP que vous souhaitez utiliser installé, les outils ou les données qu'il fournit sont disponibles dans :

  • Gemini CLI
  • Gemini dans le chat Firebase lorsque vous utilisez les modes Agent et Agent (exécution automatique)
  • le App Prototyping agent

Par exemple, si vous ajoutez le serveur MCP Firebase, vous pouvez demander à Gemini de récupérer la configuration du SDK pour le projet en cours, de récupérer les données stockées dans Cloud Firestore et Realtime Database, de vous aider à configurer les services Firebase, et plus encore.

Résoudre les problèmes liés aux serveurs MCP

Si un serveur MCP ne fonctionne pas comme prévu, ouvrez vos journaux Gemini pour rechercher les erreurs :

  1. Dans la section "Sortie" (Shift+Ctrl+U), cliquez sur le menu déroulant et sélectionnez Gemini.

  2. Recherchez les messages qui commencent par un tag [MCPManager]. Ces journaux contiennent des informations sur les serveurs MCP configurés, ainsi que les éventuels messages d'erreur. Utilisez ces informations pour résoudre les problèmes de configuration. Lorsqu'un serveur MCP se connecte, une liste des outils qu'il a ajoutés s'affiche.

Si un serveur MCP ne parvient pas à s'installer ou à se connecter, essayez de reconstruire votre espace de travail :

  1. Ouvrez la palette de commandes (Shift+Ctrl+P).

  2. Saisissez Firebase Studio : Rebuild Environment (Firebase Studio : Reconstruire l'environnement).

  3. Attendez que votre espace de travail soit reconstruit, puis réessayez d'utiliser le serveur MCP de votre choix.

Si le serveur MCP se connecte, mais que Gemini n'utilise pas les outils qu'il fournit :

Étapes suivantes