Confira tudo o que anunciamos no I/O, desde novos recursos do Firebase Studio até mais maneiras de integrar a IA. Leia o blog.

Personalizar seu espaço de trabalho do Firebase Studio

O Firebase Studio permite adaptar o espaço de trabalho às necessidades específicas do projeto definindo um único arquivo de configuração .idx/dev.nix que descreve:

As ferramentas do sistema que você precisa executar (por exemplo, pelo Terminal), como compiladores ou outros binários.
As extensões que você precisa instalar (por exemplo, suporte a linguagens de programação).
Como as prévias do aplicativo serão exibidas (por exemplo, os comandos para executar o servidor da Web).
Variáveis de ambiente globais disponíveis para servidores locais em execução no seu espaço de trabalho.

Consulte a referência do dev.nix para uma descrição completa do que está disponível.

Ao adicionar um arquivo .idx/mcp.json ao projeto, você também pode se conectar aos servidores do Protocolo de Contexto de Modelo (MCP), incluindo o servidor MCP do Firebase.

Nix e Firebase Studio

O Firebase Studio usa o Nix para definir a configuração do ambiente para cada espaço de trabalho. Especificamente, o Firebase Studio usa:

A linguagem de programação Nix para descrever ambientes de espaço de trabalho. O Nix é uma linguagem de programação funcional. Os atributos e as bibliotecas de pacotes que podem ser definidos no arquivo dev.nix seguem a sintaxe do conjunto de atributos do Nix.
O gerenciador de pacotes Nix para gerenciar as ferramentas do sistema disponíveis no seu espaço de trabalho. Isso é semelhante a gerenciadores de pacotes específicos do SO, como o APT (apt e apt-get), Homebrew (brew) e dpkg.

Os ambientes Nix são reproduzíveis e declarativos. Por isso, no contexto do Firebase Studio, é possível compartilhar seu arquivo de configuração do Nix como parte do repositório Git para garantir que todos que trabalham no projeto tenham a mesma configuração de ambiente.

Um exemplo simples

O exemplo a seguir mostra uma configuração básica do ambiente com ativação das prévias:

{ 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";
      };
    };
  };
}

Adicionar ferramentas do sistema

Para adicionar ferramentas do sistema ao seu espaço de trabalho, como compiladores ou programas de CLI para serviços de nuvem, encontre o ID exclusivo do pacote no registro de pacotes Nix e adicione-o ao objeto packages do arquivo dev.nix, com o prefixo "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
  ];
  ...
}

Isso é diferente de como você normalmente instala pacotes do sistema usando gerenciadores de pacotes específicos do SO, como o APT (apt e apt-get), Homebrew (brew) e dpkg. A descrição declarativa de quais pacotes de sistema são necessários torna os espaços de trabalho do Firebase Studio mais fáceis de compartilhar e reproduzir.

Usar binários de nó locais

Assim como na máquina local, os binários relacionados a pacotes de nó instalados localmente (por exemplo, pacotes definidos no package.json) podem ser executados em um painel do Terminal, invocando-os com o comando npx.

Para maior praticidade, se você estiver em um diretório com uma pasta node_modules, como o diretório raiz de um projeto da Web, os binários instalados localmente poderão ser invocados diretamente, sem o prefixo npx.

Adicionar componentes da `gcloud`

Uma configuração padrão da gcloud CLI para o Google Cloud está disponível a todos os espaços de trabalho do Firebase Studio.

Se você precisar de outros componentes, adicione-os ao arquivo dev.nix:

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

Adicionar extensões do ambiente de desenvolvimento integrado

É possível instalar extensões no Firebase Studio usando o registro de extensões OpenVSX de duas maneiras:

Use o painel Extensões no Firebase Studio para descobrir e instalar extensões. Essa abordagem é melhor para extensões específicas do usuário, como:
- Temas de cores personalizadas
- Emulação de editor, como o VSCodeVim
Adicione extensões ao arquivo dev.nix. Essas extensões serão instaladas automaticamente quando você compartilhar a configuração do espaço de trabalho. Essa abordagem é melhor para extensões específicas do projeto, como:
- Extensões de linguagem de programação, incluindo depuradores específicos da linguagem
- Extensões oficiais para serviços de nuvem usados no seu projeto
- Formatadores de código

Como última abordagem, é possível incluir extensões do ambiente de desenvolvimento integrado no arquivo dev.nix localizando o ID da extensão totalmente qualificada (do formulário <publisher>.<id>) e adicionando-o ao objeto idx.extensions da seguinte maneira:

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

Adicionar serviços comuns

O Firebase Studio também oferece configurações simplificadas para serviços comuns que podem ser necessários durante o desenvolvimento, incluindo:

Contêineres
- Docker (services.docker.*)
Mensagens
- Emulador do Pub/Sub (services.pubsub.*)
Bancos de dados
- MySQL (services.mysql.*)
- Postgres (services.postgres.*)
- Redis (services.redis.*)
- Spanner (services.spanner.*)

Para saber como ativar esses serviços no seu espaço de trabalho, consulte as partes services.* da referência do dev.nix.

Personalizar prévias

Para saber como personalizar as prévias do aplicativo, consulte Visualizar seu app.

Definir o ícone do seu espaço de trabalho

Para escolher um ícone personalizado para o espaço de trabalho, coloque um arquivo PNG chamado icon.png dentro do diretório .idx no mesmo nível do arquivo dev.nix. O Firebase Studio usará esse ícone para representar seu espaço de trabalho no painel.

Como esse arquivo pode ser verificado no controle de origem (como o Git), essa é uma boa maneira de ajudar todos que trabalham no projeto a ver o mesmo ícone ao usar o Firebase Studio. Como o arquivo pode variar dependendo das ramificações do Git, use esse ícone para distinguir visualmente os espaços de trabalho de aplicativos Beta e em produção, entre outras finalidades.

Transformar suas personalizações em um modelo

Para transformar a configuração do ambiente em um "ambiente inicial" que qualquer pessoa pode usar para criar novos projetos, consulte a documentação sobre Criar modelos personalizados.

Conhecer todas as opções de personalização

Confira a referência do dev.nix para ver uma descrição detalhada do esquema de configuração do ambiente.

Baixar seus arquivos

Para baixar seus arquivos como ZIP:

Clique com o botão direito do mouse em qualquer diretório no painel do Explorador e selecione Compactar e baixar.

Para baixar tudo no diretório do seu projeto:

Selecione Arquivo > Abrir pasta.
Aceite o diretório padrão /home/user.
Depois que os arquivos carregarem, clique com o botão direito do mouse no diretório de trabalho e selecione Compactar e baixar. Se você usar o App Prototyping agent, o diretório de trabalho será studio. Se você usar um modelo ou projeto enviado, esse será o nome do seu projeto.
Quando for solicitado que recrie o ambiente, clique em Cancelar.
Depois de concluir a transferência, abra novamente o diretório de trabalho pelo menu Arquivo para voltar ao seu espaço de trabalho.

Usar servidores MCP

Os servidores do MCP oferecem mais ferramentas e fontes de dados para o Gemini usar. Por exemplo, você pode adicionar o servidor MCP do Firebase para analisar seus dados em Cloud Firestore usando linguagem natural enquanto cria ou depura seu aplicativo.

Pré-requisitos

Se o servidor MCP exigir, verifique se você tem uma instalação funcional do Node.js e do npm.

Escolha um servidor MCP compatível

O Firebase Studio tem suporte básico para servidores MCP, o que significa que nem todos são compatíveis. Ao escolher um servidor MCP para adicionar ao seu espaço de trabalho do Firebase Studio, tenha em mente o seguinte:

Com suporte:
- Servidores de transporte HTTP de entrada/saída padrão (stdio) ou eventos enviados pelo servidor (SSE)/transmissíveis que não exigem formas especiais de autenticação
- Ferramentas fornecidas pelos servidores MCP
Atualmente incompatível:
- Servidores que exigem uma interface gráfica do usuário ou uma sessão de computador
- Comandos, amostragem ou outros recursos fornecidos pelos servidores MCP

Adicionar um servidor MCP

No Explorer (Ctrl+Shift+E), clique com o botão direito do mouse na pasta .idx e selecione Novo arquivo. Nomeie o arquivo como mcp.json e pressione Enter.
Adicione a configuração do servidor ao conteúdo do arquivo .idx/mcp.json. Por exemplo, para adicionar o servidor MCP do Firebase, insira:
```
{
  "mcpServers": {
   "firebase": {
     "command": "npx",
     "args": [
       "-y",
       "firebase-tools@latest",
       "experimental:mcp"
      ]
    }
  }
}
```
Esse arquivo de configuração instrui o Gemini sobre qual servidor MCP ele deve usar. Neste exemplo, adicionamos um servidor chamado firebase que vai usar o comando npx para instalar e executar firebase-tools@latest. Outros servidores MCP exigem configurações diferentes, mas seguem o mesmo formato geral.
No terminal (Shift+Ctrl+C), execute os comandos necessários para concluir a instalação. Por exemplo, para usar o servidor MCP do Firebase, digite o comando a seguir para fazer login na sua conta:
```
firebase login --no-localhost
```
Siga as instruções no terminal para autorizar a sessão. Algumas ferramentas exigem um projeto do Firebase conectado. Você pode usar o servidor MCP do Firebase para criar um projeto ou executar o comando a seguir para inicializar um projeto do Firebase:
```
firebase init
```
Isso cria um arquivo firebase.json no diretório raiz.
Recrie seu espaço de trabalho para concluir a configuração:
1. Abra a paleta de comandos (Shift+Ctrl+P).
2. Insira Firebase Studio: recriar ambiente.

Usar ferramentas do MCP

Depois de instalar o servidor MCP que você quer usar, as ferramentas ou os dados fornecidos por ele estarão disponíveis em:

CLI do Gemini
Gemini no chat do Firebase ao usar os modos Agente e Agente (execução automática)
App Prototyping agent

Por exemplo, se você adicionar o servidor MCP do Firebase, poderá pedir ao Gemini para buscar a configuração do SDK do projeto atual, recuperar dados armazenados em Cloud Firestore e Realtime Database, ajudar a configurar serviços do Firebase e muito mais.

Resolver problemas de servidores MCP

Se um servidor MCP não funcionar como esperado, abra os registros Gemini para verificar se há erros:

Em Saída (Shift+Ctrl+U), clique no menu suspenso e selecione Gemini.
Verifique se há mensagens que começam com uma tag [MCPManager]. Esses registros contêm informações sobre quais servidores MCP foram configurados, além de mensagens de erro. Use essas informações para resolver problemas na sua configuração. Quando um servidor MCP se conecta, uma lista das ferramentas adicionadas aparece.

Tente recriar seu espaço de trabalho se um servidor MCP não for instalado ou não se conectar:

Abra a paleta de comandos (Shift+Ctrl+P).
Insira Firebase Studio: recriar ambiente.
Aguarde a reconstrução do espaço de trabalho e tente usar o servidor MCP escolhido novamente.

Se o servidor MCP se conectar, mas o Gemini não usar as ferramentas fornecidas:

Inicie uma nova sessão de conversa com o Gemini.
Se Gemini puder concluir a tarefa sem usar uma ferramenta de MCP, ele poderá tentar um método diferente. Se quiser usar uma ferramenta específica, tente mencionar o nome dela no comando. Por exemplo, você pode dizer: "Use firebase_get_sdk_config para receber a configuração do SDK do projeto atual".
Participe do Google Developer Program.