Aquí tienes todo lo que anunciamos en I/O, desde nuevas funciones de Firebase Studio hasta más formas de integrar la IA. Lee el blog.

Personaliza tu espacio de trabajo de Firebase Studio

Firebase Studio te permite adaptar tu espacio de trabajo a las necesidades únicas de tu proyecto mediante la definición de un solo archivo de configuración .idx/dev.nix que describe lo siguiente:

Las herramientas del sistema que necesitas para poder ejecutar (por ejemplo, desde la Terminal), como compiladores o otros objetos binarios.
Las extensiones que debes tener instaladas (por ejemplo, compatibilidad con lenguajes de programación)
Cómo deben aparecer las vistas previas de la app (por ejemplo, los comandos para ejecutar el servidor web).
Variables de entorno globales disponibles para los servidores locales que se ejecutan en tu espacio de trabajo.

Consulta la referencia de dev.nix para obtener una descripción completa de lo que está disponible.

Si agregas un archivo .idx/mcp.json a tu proyecto, también puedes conectarte a servidores del Protocolo de contexto del modelo (MCP), incluido el servidor de MCP de Firebase.

Nix y Firebase Studio

Firebase Studio usa Nix para definir la configuración del entorno de cada espacio de trabajo. Específicamente, Firebase Studio usa lo siguiente:

El lenguaje de programación Nix para describir entornos de espacios de trabajo. Nix es un lenguaje de programación funcional. Los atributos y las bibliotecas de paquetes que puedes definir en el archivo dev.nix siguen la sintaxis del conjunto de atributos de Nix.
El administrador de paquetes Nix para administrar las herramientas del sistema disponibles para tu espacio de trabajo. Esto es similar a los administradores de paquetes específicos del SO, como APT (apt y apt-get), Homebrew (brew) y dpkg.

Debido a que los entornos de Nix son reproducibles y declarativos, en el contexto de Firebase Studio, esto significa que puedes compartir tu archivo de configuración de Nix como parte de tu repositorio de Git para asegurarte de que todas las personas que trabajan en tu proyecto tengan la misma configuración de entorno.

Un ejemplo básico

En el siguiente ejemplo, se muestra una configuración de entorno básica que habilita las vistas previas:

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

Agrega herramientas del sistema

Para agregar herramientas del sistema a tu espacio de trabajo, como compiladores o programas de CLI para servicios en la nube, busca el ID de paquete único en el registro de paquetes de Nix y agrégalo al objeto packages de tu archivo dev.nix, con el prefijo "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
  ];
  ...
}

Esto es diferente de la forma en que sueles instalar paquetes del sistema con administradores de paquetes específicos del SO, como APT (apt y apt-get), Homebrew (brew) y dpkg. Describir de forma declarativa exactamente qué paquetes del sistema son necesarios significa que los espacios de trabajo de Firebase Studio son más fáciles de compartir y reproducir.

Usa objetos binarios de nodos locales

Al igual que en tu máquina local, los objetos binarios relacionados con los paquetes de nodos instalados de forma local (por ejemplo, los paquetes definidos en tu package.json) se pueden ejecutar en un panel de la terminal invocándolos con el comando npx.

Como comodidad adicional, si estás en un directorio con una carpeta node_modules (como el directorio raíz de un proyecto web), se pueden invocar directamente los objetos binarios instalados de forma local, sin el prefijo npx.

Agrega componentes de `gcloud`

Hay disponible una configuración predeterminada de la CLI de gcloud para Google Cloud para todos los lugares de trabajo de Firebase Studio.

Si necesitas componentes adicionales, puedes agregarlos a tu archivo dev.nix:

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

Agrega extensiones de IDE

Puedes instalar extensiones en Firebase Studio con el registro de extensiones OpenVSX de dos maneras:

Usa el panel Extensiones en Firebase Studio para descubrir y, luego, instalar extensiones. Este enfoque es mejor para las extensiones específicas del usuario, como las siguientes:
- Temas de color personalizados
- Emulación de editor, como VSCodeVim
Agrega extensiones a tu archivo dev.nix. Estas extensiones se instalarán automáticamente cuando compartas la configuración de tu espacio de trabajo. Este enfoque es mejor para las extensiones específicas del proyecto, como las siguientes:
- Extensiones de lenguaje de programación, incluidos depuradores específicos de lenguaje
- Extensiones oficiales para los servicios en la nube que se usan en tu proyecto
- Formateadores de código

Para el último enfoque, puedes incluir extensiones de IDE en tu archivo dev.nix. Para ello, busca el ID de extensión completamente calificado (del formulario <publisher>.<id>) y agrégalo al objeto idx.extensions de la siguiente manera:

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

Agrega servicios comunes

Firebase Studio también ofrece una configuración simplificada para los servicios comunes que podrías necesitar durante el desarrollo, incluidos los siguientes:

Contenedores
- Docker (services.docker.*)
Mensajes
- Emulador de Pub/Sub (services.pubsub.*)
Bases de datos
- MySQL (services.mysql.*)
- Postgres (services.postgres.*)
- Redis (services.redis.*)
- Spanner (services.spanner.*)

Para obtener detalles sobre cómo habilitar estos servicios en tu espacio de trabajo, consulta las secciones de services.* de la referencia de dev.nix.

Personaliza las vistas previas

Para obtener detalles sobre cómo personalizar las vistas previas de tu app, consulta Obtén una vista previa de tu app.

Establece el ícono de tu espacio de trabajo

Para elegir un ícono personalizado para tu espacio de trabajo, coloca un archivo PNG llamado icon.png dentro del directorio .idx en el mismo nivel que tu archivo dev.nix. Luego, Firebase Studio usará este ícono para representar tu espacio de trabajo en tu panel.

Debido a que este archivo se puede verificar en el control de código fuente (como Git), es una buena manera de ayudar a que todas las personas que trabajan en tu proyecto vean el mismo ícono para tu proyecto cuando usan Firebase Studio. Además, como el archivo puede variar entre las ramas de Git, puedes usar este ícono para distinguir visualmente entre los espacios de trabajo de apps beta y de producción, y para otros fines.

Convierte tus personalizaciones en una plantilla

Para convertir la configuración de tu entorno en un "entorno inicial" que cualquier persona pueda usar para compilar proyectos nuevos, consulta la documentación sobre Cómo crear plantillas personalizadas.

Explora todas las opciones de personalización

Consulta la referencia de dev.nix para obtener una descripción detallada del esquema de configuración del entorno.

Descarga tus archivos

Para descargar tus archivos como un archivo ZIP, haz lo siguiente:

Haz clic con el botón derecho en cualquier directorio del panel del explorador y selecciona Zip and Download.

Para descargar todo el directorio de tu proyecto, sigue estos pasos:

Selecciona File > Open Folder.
Acepta el directorio /home/user predeterminado.
Después de que se carguen los archivos, haz clic con el botón derecho en tu directorio de trabajo y selecciona Zip and Download. Si usas App Prototyping agent, tu directorio de trabajo será studio. Si usas una plantilla o un proyecto subido, este será el nombre de tu proyecto.
Cuando se te solicite volver a compilar el entorno, haz clic en Cancel.
Una vez que se complete la descarga, vuelve a abrir el directorio de trabajo desde el menú Archivo para volver a tu espacio de trabajo.

Usa servidores de MCP

Los servidores de MCP proporcionan herramientas y fuentes de datos adicionales para que Gemini los use. Por ejemplo, puedes agregar el servidor de MCP de Firebase para explorar tus datos en Cloud Firestore con lenguaje natural mientras compilas o depuras tu aplicación.

Requisitos previos

Si el servidor de MCP lo requiere, asegúrate de tener una instalación funcional de Node.js y npm.

Elige un servidor de MCP compatible

Firebase Studio tiene compatibilidad básica con los servidores de MCP, lo que significa que no todos los servidores de MCP son compatibles. Cuando elijas un servidor de MCP para agregar a tu espacio de trabajo de Firebase Studio, ten en cuenta lo siguiente:

Compatible:
- Servidores de transporte de entrada y salida estándar (stdio) o de eventos enviados por el servidor (SSE) o HTTP transmitible que no requieren formas especiales de autenticación
- Herramientas que proporcionan los servidores de MCP
No compatible actualmente:
- Servidores que requieren una interfaz gráfica de usuario o una sesión de escritorio
- Instrucciones, muestreo o cualquier otro recurso proporcionado por los servidores de MCP

Agrega un servidor de MCP

En el Explorador (Ctrl+Shift+E), haz clic con el botón derecho en la carpeta .idx y selecciona Archivo nuevo. Asigna el nombre mcp.json al archivo y presiona Intro.
Agrega la configuración del servidor al contenido del archivo .idx/mcp.json. Por ejemplo, para agregar el servidor de MCP de Firebase, ingresa lo siguiente:
```
{
  "mcpServers": {
   "firebase": {
     "command": "npx",
     "args": [
       "-y",
       "firebase-tools@latest",
       "experimental:mcp"
      ]
    }
  }
}
```
Este archivo de configuración le indica a Gemini qué servidor de MCP quieres que use. En este ejemplo, agregamos un servidor llamado firebase que usará el comando npx para instalar y ejecutar firebase-tools@latest. Otros servidores de MCP requieren diferentes configuraciones, pero siguen el mismo formato general.
En la terminal (Shift+Ctrl+C), ejecuta los comandos necesarios para completar la instalación. Por ejemplo, para usar el servidor de MCP de Firebase, ingresa el siguiente comando para acceder a tu cuenta:
```
firebase login --no-localhost
```
Sigue las instrucciones de la terminal para autorizar la sesión. Algunas herramientas requieren un proyecto de Firebase conectado. Puedes usar el servidor de MCP de Firebase para crear un proyecto o ejecutar el siguiente comando para inicializar un proyecto de Firebase:
```
firebase init
```
Esto crea un archivo firebase.json en tu directorio raíz.
Vuelve a crear tu espacio de trabajo para completar la configuración:
1. Abre la paleta de comandos (Shift+Ctrl+P).
2. Ingresa Firebase Studio: Rebuild Environment.

Usa herramientas de MCP

Después de instalar el servidor de MCP que deseas usar, las herramientas o los datos que proporciona están disponibles en los siguientes lugares:

CLI de Gemini
El chat de Gemini en Firebase cuando se usan los modos Agente y Agente (ejecución automática)
el App Prototyping agent

Por ejemplo, si agregas el servidor de MCP de Firebase, podrías pedirle a Gemini que recupere la configuración del SDK para el proyecto actual, que recupere los datos almacenados en Cloud Firestore y Realtime Database, que te ayude a configurar los servicios de Firebase y mucho más.

Soluciona problemas de los servidores de MCP

Si un servidor de MCP no funciona como se espera, abre los registros de Gemini para verificar si hay errores:

En Salida (Shift+Ctrl+U), haz clic en el menú desplegable y selecciona Gemini.
Busca mensajes que comiencen con una etiqueta [MCPManager]. Estos registros contienen información sobre los servidores de MCP que se configuraron, junto con los mensajes de error. Usa esta información para solucionar problemas relacionados con tu configuración. Cuando un servidor de MCP se conecte correctamente, verás una lista de las herramientas que agregó.

Intenta volver a crear tu espacio de trabajo si no se instala o conecta un servidor de MCP:

Abre la paleta de comandos (Shift+Ctrl+P).
Ingresa Firebase Studio: Rebuild Environment.
Espera a que se vuelva a crear tu espacio de trabajo y, luego, vuelve a intentar usar el servidor de MCP que elegiste.

Si el servidor de MCP se conecta, pero Gemini no usa las herramientas que proporciona, haz lo siguiente:

Inicia una nueva sesión de chat de Gemini.
Si Gemini puede completar la tarea sin usar una herramienta de MCP, es posible que intente con otro método. Si quieres usar una herramienta específica, intenta nombrarla en tu instrucción. Por ejemplo, podrías decir "Usa firebase_get_sdk_config para obtener la configuración del SDK del proyecto actual".
Únete al Programa Google Developers.