Comienza a usar el agente de prototipado de apps

Firebase Studio incluye una interfaz basada en la Web que te permite crear prototipos y generar apps web orientadas a la IA con rapidez a partir de instrucciones multimodales, como lenguaje natural, imágenes y herramientas de dibujo. El agente admite apps de Next.js, y se planea admitir otras plataformas y frameworks en el futuro.

El agente de prototipado de apps es un flujo de desarrollo sin código optimizado que usa IA generativa para desarrollar, probar, iterar y publicar una app web de pila completa y con agentes. Describes la idea de tu app en lenguaje natural con una imagen opcional, y el agente genera un esquema de app, código y una vista previa web. Para ayudarte con el desarrollo y la publicación de tu app de pila completa, Firebase Studio puede aprovisionar automáticamente los siguientes servicios:

  • Si tu app usa IA: Firebase Studio agrega la API de desarrollador de Gemini a tu app, con la potencia de los flujos de Genkit para trabajar con Gemini. Puedes usar tu propia clave de Gemini API o permitir que Firebase Studio aprovisione un proyecto de Firebase y una clave de API de Gemini por ti.

  • Si quieres publicar tu app en la Web: Firebase Studio crea un proyecto y proporciona una forma rápida de publicar tu app con Firebase App Hosting.

Puedes definir mejor la app con lenguaje natural, imágenes y herramientas de dibujo, editar el código directamente, revertir los cambios, publicar la app y supervisar su rendimiento, todo desde Firebase Studio.

Comienza ahora

Para comenzar a usar App Prototyping agent, sigue estos pasos:

  1. Accede a tu Cuenta de Google y abre Firebase Studio.

  2. En el campo Crea prototipos de una app con IA, describe la idea de tu app en lenguaje natural.

    Por ejemplo, podrías ingresar una instrucción como la siguiente para crear una app de generación de recetas:

    Use secure coding practices to create an error-free web app that lets
    users upload a photo or take a picture with their browser
    camera. The app identifies the food in the picture and generates a
    recipe and accompanying image that includes that food.
    
    If no food product is identified, generate a random dessert recipe.
    
  3. De manera opcional, agrega una imagen para acompañar la instrucción. Por ejemplo, puedes subir una imagen que contenga el esquema de colores que deseas que use tu app y decirle a Firebase Studio que la use. Las imágenes deben tener un tamaño inferior a 3 MiB.

  4. Haz clic en Prototipar con IA.

    Gemini genera un esquema de app según tu instrucción y muestra un nombre propuesto para la app, las funciones requeridas y los lineamientos de estilo.

  5. Revisa el plan. Si es necesario, realiza algunos cambios. Por ejemplo, puedes cambiar el nombre o el esquema de colores de la app propuestos con una de estas opciones:

    • Haz clic en Personalizar y edita el esquema directamente. Realiza los cambios necesarios y haz clic en Guardar.

    • En el campo Describe… del panel de chat, agrega preguntas aclaratorias y contexto. También puedes subir imágenes adicionales.

  6. Haz clic en Crear prototipo de esta app.

  7. El agente de prototipado de apps comenzará a codificar tu app.

    • Si tu app usa IA, se te pedirá que agregues o generes una clave de Gemini API. Si haces clic en Generar automáticamente, el App Prototyping agent aprovisionará un proyecto de Firebase y una clave de Gemini API por ti.

Prueba, define mejor, depura e itera

Después de que se genera la app inicial, puedes probar, definir mejor, depurar e iterar.

  • Revisa y, luego, interactúa con tu app: Después de que se complete la generación de código, aparecerá una vista previa de tu app. Puedes interactuar con la vista previa directamente para probarla. Obtén más información en Obtén una vista previa de tu app.

  • Corrige los errores a medida que ocurren: En la mayoría de los casos, el App Prototyping agent te solicita que corrijas los errores que surgen. Haz clic en Corregir error para permitir que intente corregirlo.

    Si recibes errores que no se te solicita corregir automáticamente, copia el error y cualquier contexto relevante (por ejemplo, "¿Puedes corregir este error en mi código de inicialización de Firebase?") en la ventana de chat y envíalo a Gemini.

  • Prueba e itera con lenguaje natural: Prueba tu app en detalle y trabaja con App Prototyping agent para iterar en el código y el esquema hasta que estés conforme.

    Mientras estás en Prototyper mode, you can also use the following features:

    • Haz clic en Ícono de anotación Anotar para dibujar directamente en la ventana de vista previa. Usa las herramientas de forma, imagen y texto disponibles, junto con una instrucción de texto opcional, para describir visualmente lo que quieres que cambie el App Prototyping agent.

    • Haz clic en Ícono para seleccionar Seleccionar para elegir un elemento específico y, luego, ingresa instrucciones para el App Prototyping agent. Esto te permite elegir rápidamente un ícono, un botón, un texto o algún otro elemento específico. Cuando haces clic en una imagen, también tienes la opción de buscar y seleccionar una imagen de archivo de Unsplash.

    De manera opcional, puedes hacer clic en Ícono de vínculo Compartir vínculo de versión preliminar para compartir tu app de forma pública y temporal con las versiones preliminares públicas de Firebase Studio.

  • Depura e itera directamente en el código: Haz clic en Ícono de cambio de código Cambiar al código para abrir la vista Code, en la que puedes ver todos los archivos de tu app y modificar el código directamente. Puedes volver a cambiar a Prototyper mode at any time..

    En la vista Code, también puedes usar las siguientes funciones útiles:

    • Funciones de informes y depuración integradas de Firebase Studio para inspeccionar, depurar y auditar tu app.

    • Asistencia de IA con Gemini en Firebase, ya sea intercalada en tu código o mediante chat interactivo (ambos están disponibles de forma predeterminada). El chat interactivo puede diagnosticar problemas, proporcionar soluciones y ejecutar herramientas para ayudarte a corregir tu app más rápido. Para acceder al chat, haz clic en la estrellaGemini en la parte inferior del espacio de trabajo.

    • Accede a Firebase Local Emulator Suite para ver los datos de autenticación y de la base de datos. Para abrir el emulador en tu espacio de trabajo, sigue estos pasos:

      1. Haz clic en Ícono de cambio de código Switch to Code y abre la extensión Firebase Studio (Ctrl+',Ctrl+' o Cmd+',Cmd+' en macOS).

      2. Desplázate hasta Puertos de backend y expándelo.

      3. En la columna Acciones que corresponde al puerto 4000, haz clic en Abrir en una ventana nueva.

  • Prueba y mide el rendimiento de tus funciones potenciadas por IA generativa: Puedes usar la IU para desarrolladores de Genkit para ejecutar tus flujos de IA de Genkit, realizar pruebas, depurar, interactuar con diferentes modelos, definir mejor tus instrucciones y mucho más.

    Para cargar tus flujos de Genkit en la IU para desarrolladores de Genkit y comenzar a realizar pruebas, haz lo siguiente:

    1. Desde la terminal de tu espacio de trabajo de Firebase Studio, ejecuta el siguiente comando para obtener la clave de Gemini API y, luego, inicia el servidor de Genkit:

       npm run genkit:watch
      
    2. Haz clic en el vínculo de la IU para desarrolladores de Genkit. Esta IU se abre en una ventana nueva con tus flujos, instrucciones, incorporaciones y una selección de diferentes modelos disponibles.

    Obtén más información sobre la IU para desarrolladores de Genkit en Herramientas para desarrolladores de Genkit.

Publica tu app con Firebase App Hosting

Una vez que hayas probado tu app y estés conforme con ella en tu espacio de trabajo, puedes publicarla en la Web con Firebase App Hosting.

Cuando configuras App Hosting, Firebase Studio crea un proyecto de Firebase para ti (si aún no se creó uno con la generación automática de una clave de Gemini API) y te guía para vincular una cuenta de Cloud Billing.

Para publicar tu app, sigue estos pasos:

  1. Haz clic en Publicar para configurar tu proyecto de Firebase y publicar tu app. Aparecerá el panel Publica tu app.

  2. En el paso Proyecto de Firebase, el App Prototyping agent muestra el proyecto de Firebase asociado con el lugar de trabajo. Si no creó un proyecto durante la generación de la clave de Gemini API, creará uno nuevo por ti. Haz clic en Siguiente para continuar.

  3. En el paso Vincular cuenta de Cloud Billing, elige una de las siguientes opciones:

    • Selecciona la cuenta de Cloud Billing que quieres vincular a tu proyecto de Firebase.

    • Si no tienes una cuenta de Cloud Billing o quieres crear una nueva, haz clic en Crear una cuenta de Cloud Billing. Se abrirá la console de Google Cloud, en la que puedes crear una nueva cuenta de Cloud Billing autoservicio. Después de crear la cuenta, vuelve a Firebase Studio y selecciona la cuenta de la lista Vincular Cloud Billing.

  4. Haz clic en Siguiente. Firebase Studio vincula la cuenta de facturación al proyecto asociado con tu espacio de trabajo, que se creó cuando generaste automáticamente una clave Gemini API o cuando hiciste clic en Publicar.

  5. Haz clic en Configurar servicios. El agente de prototipado de apps comienza a aprovisionar los servicios de Firebase.

  6. Haz clic en Publicar ahora. Firebase Studio configura los servicios de Firebase. Este paso puede tardar varios minutos en completarse. Para obtener más información sobre lo que sucede en segundo plano, consulta El proceso de compilación de App Hosting.

  7. Cuando se complete el paso de publicación, aparecerá Descripción general de la app con una URL y estadísticas de la app potenciadas por la observabilidad de App Hosting. Para usar un dominio personalizado (como example.com o app.example.com) en lugar del dominio generado por Firebase, puedes agregar un dominio personalizado en la consola de Firebase.

Para obtener más información sobre App Hosting, consulta Información sobre App Hosting y cómo funciona.

Protege tu app con la Firebase App Check y reCAPTCHA Enterprise

Si integraste servicios de Firebase o Google Cloud en tu app, la Firebase App Check ayuda a proteger los backends de tu app contra todo tipo de abusos, ya que impide que los clientes no autorizados accedan a tus recursos de Firebase. Funciona con servicios de Google (incluidos los servicios de Firebase y Google Cloud) y tus propios backends personalizados para proteger tus recursos.

Te recomendamos que agregues la App Check a cualquier app que publiques de forma pública para proteger tus recursos de backend contra todo tipo de abusos.

En esta sección, se te guía para configurar la App Check en Firebase Studio con reCAPTCHA Enterprise para una app web creada por el App Prototyping agent, pero puedes configurar la App Check en cualquier app que implemente servicios de Firebase y pueda implementar proveedores personalizados. Más información en Firebase App Check

reCAPTCHA Enterprise proporciona hasta 10,000 evaluaciones sin costo.

Paso 1: Configura reCAPTCHA Enterprise para tu app

  1. Abre la sección reCAPTCHA Enterprise de la consola de Google Cloud.

  2. Selecciona el nombre de tu proyecto de Firebase en el selector de proyectos de la consola de Google Cloud.

  3. Habilita la API de reCAPTCHA Enterprise si se te solicita hacerlo.

  4. Haz clic en Comenzar y agrega un Nombre visible para la clave de sitio de reCAPTCHA.

  5. Acepta la clave predeterminada Tipo de aplicación Web.

  6. Haz clic en Agregar un dominio y agrega un dominio. Te recomendamos que agregues tu dominio de App Hosting (por ejemplo, studio--PROJECT_ID.REGION.hosted.app) y cualquier dominio personalizado que uses o que planees usar con tu app.

  7. Haz clic en Próximo paso.

  8. Deja sin seleccionar la opción ¿Usarás desafíos?.

  9. Haz clic en Crear clave.

  10. Copia y guarda tu ID de clave y continúa con Configura la App Check.

Paso 2: Configura la App Check

  1. Abre la consola de Firebase y haz clic en Compilación > Verificación de aplicaciones en el menú de navegación.

  2. Haz clic en Comenzar y, luego, en Registrar junto a tu app.

  3. Haz clic para expandir ReCAPTCHA y pega el ID de clave que generaste para reCAPTCHA Enterprise.

  4. Haz clic en Guardar.

Paso 3: Agrega la App Check a tu código

  1. Regresa a Firebase Studio y, en la vista Code, agrega la clave del sitio que generaste para tu archivo .env:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
    
  2. Si aún no tienes tu configuración de Firebase guardada en .env, obténla de la siguiente manera:

    • En la consola de Firebase, abre Configuración del proyecto y búscala en la sección que corresponde a tu app.

    • Desde la terminal en la vista Code, haz lo siguiente:

      1. Accede a Firebase: firebase auth login.
      2. Selecciona tu proyecto: firebase use FIREBASE_PROJECT_ID.
      3. Obtén la configuración de Firebase: firebase apps:sdkconfig.
  3. Agrega la configuración a tu archivo .env para que se vea de la siguiente manera:

    NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
    NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
    NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
    NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
    NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
    NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
    
  4. Agrega la App Check al código de tu app. Puedes pedirle a Gemini que agregue la App Check con reCAPTCHA Enterprise a tu app (asegúrate de especificar "reCAPTCHA Enterprise" y de verificarlo) o seguir los pasos que se indican en Inicializa la App Check.

  5. Vuelve a publicar tu sitio en App Hosting. Prueba tus funciones de Firebase para generar algunos datos.

  6. Para verificar que la App Check esté recibiendo solicitudes en la consola de Firebase, abre Compilación > Verificación de aplicaciones.

  7. Haz clic para inspeccionar los servicios de Firebase. Después de verificar que lleguen las solicitudes, haz clic en Aplicar para aplicar la App Check.

  8. Repite la verificación y aplicación de políticas para Firebase Authentication.

Si, después de registrar la app en App Check, quieres ejecutarla en un entorno que App Check no suele clasificar como válido, como de forma local durante el desarrollo, o desde un entorno de integración continua (CI), puedes crear una compilación de depuración de la app que use el proveedor de depuración de App Check, en lugar de un proveedor de certificación real. Obtén más información en Cómo usar la App Check con el proveedor de depuración en apps web.

Supervisa tu app

El panel Descripción general de la app de Firebase Studio proporciona información y métricas clave sobre tu app, lo que te permite supervisar el rendimiento de tu app web con las herramientas de observabilidad integradas de App Hosting. Después de que se lance tu sitio, podrás hacer clic en Publicar para acceder a la descripción general. En este panel, puedes realizar las siguientes acciones:

  • Haz clic en Publicar para lanzar una versión nueva de tu app.
  • Comparte el vínculo a tu app o ábrela directamente en Visita tu app.
  • Revisa un resumen del rendimiento de tu app en los últimos 7 días, incluida la cantidad total de solicitudes y el estado de tu lanzamiento más reciente. Haz clic en Ver detalles para acceder a aún más información en Firebase console.
  • Consulta un gráfico de la cantidad de solicitudes que recibió tu app en las últimas 24 horas, desglosadas por código de estado HTTP.

Si cierras el panel Descripción general de la app, puedes volver a abrirlo en cualquier momento haciendo clic en Publicar.

Obtén más información para administrar y supervisar los lanzamientos de App Hosting en Administra lanzamientos y versiones.

Revierte tu implementación

Si implementaste versiones sucesivas de tu app en App Hosting, puedes revertirla a una de las versiones anteriores. También puedes quitarla.

  • Para revertir un sitio publicado, haz lo siguiente:

    1. Abre App Hosting en Firebase console.

    2. Busca el backend de tu app, haz clic en Ver y, luego, en Lanzamientos.

    3. Junto a la implementación a la que deseas volver, haz clic en Más , luego, elige Revertir a esta compilación y confirma.

    Obtén más información en Cómo administrar lanzamientos y versiones.

  • Para quitar tu dominio App Hosting de la Web, sigue estos pasos:

    1. En Firebase console, abre App Hosting y haz clic en Ver en la sección de la app Firebase Studio.

    2. En la sección Información del backend, haz clic en Administrar. Se carga la página Dominios.

    3. Junto a tu dominio, haz clic en Más , luego, elige Inhabilitar dominio y confirma.

    De esta forma, se quitará tu dominio de la Web. Para quitar por completo tu backend de App Hosting, sigue las instrucciones que se indican en Cómo borrar un backend.

Usa la supervisión de Genkit para tus funciones implementadas

Para supervisar los pasos, las entradas y las salidas de tu función Genkit, habilita la telemetría en el código de flujo de IA. La función de telemetría de Genkit te permite supervisar el rendimiento y el uso de tus flujos de IA. Estos datos pueden ayudarte a identificar áreas de mejora, solucionar problemas, optimizar tus instrucciones y flujos para mejorar el rendimiento y la eficiencia de costos, y hacer un seguimiento del uso de tus flujos a lo largo del tiempo.

Para configurar la supervisión en Genkit, agregas telemetría a los flujos de IA de Genkit y, luego, ves los resultados en Firebase console.

Paso 1: Agrega telemetría a tu código de flujo de Genkit en Firebase Studio

Para configurar la supervisión en tu código, haz lo siguiente:

  1. Si aún no estás en la vista Code, haz clic en Ícono de cambio de código Cambiar al código para abrirla.

  2. Consulta package.json para verificar la versión de Genkit que está instalada.

  3. Abre la terminal (Ctrl-Shift-C o Cmd-Shift-C en macOS).

  4. Haz clic en la terminal e instala el complemento de Firebase con la versión que coincida con tu archivo package.json. Por ejemplo, si los paquetes Genkit de tu package.json están en la versión 1.0.4, debes ejecutar el siguiente comando para instalar el complemento:

    npm i --save @genkit-ai/firebase@1.0.4
  5. En Explorador, expande src > ai > flows. Uno o más archivos TypeScript que contienen tus flujos de Genkit aparecen en la carpeta flows.

  6. Haz clic en uno de los flujos para abrirlo.

  7. En la parte inferior de la sección de importaciones del archivo, agrega lo siguiente para importar y habilitar FirebaseTelemetry:

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';
    
    enableFirebaseTelemetry();
    

Paso 2: Configura los permisos

Firebase Studio habilitó las APIs requeridas por ti cuando configuró tu proyecto de Firebase, pero también debes proporcionar permisos a la cuenta de servicio App Hosting.

Para configurar los permisos, sigue estos pasos:

  1. Abre la consola de IAM de Google Cloud, selecciona tu proyecto y, luego, otorga los siguientes roles a la cuenta de servicio de App Hosting:

    • Escritor de métricas de Monitoring (roles/monitoring.metricWriter)
    • Agente de Cloud Trace (roles/cloudtrace.agent)
    • Escritor de registros (roles/logging.logWriter)
  2. Vuelve a publicar tu app en App Hosting.

  3. Cuando se complete la publicación, carga la app y comienza a usarla. Después de cinco minutos, tu app debería comenzar a registrar datos de telemetría.

Paso 3: Supervisa tus funciones potenciadas por IA generativa en Firebase console

Cuando se configura la telemetría, Genkit registra la cantidad de solicitudes, el éxito y la latencia de todos tus flujos y, para cada flujo específico, Genkit recopila métricas de estabilidad, muestra gráficos detallados y registra los seguimientos capturados.

Para supervisar las funciones de IA implementadas con Genkit, haz lo siguiente:

  1. Después de cinco minutos, abre Genkit en Firebase console y revisa las instrucciones y respuestas de Genkit.

    Genkit compila las siguientes métricas de estabilidad:

    • Total de solicitudes: Es la cantidad total de solicitudes que recibió tu flujo.
    • Tasa de éxito: Es el porcentaje de solicitudes que se procesaron correctamente.
    • Latencia del percentil 95: Es la latencia del percentil 95 de tu flujo, que es el tiempo que tarda en procesarse el 95% de las solicitudes.
    • Uso de tokens:

      • Tokens de entrada: Es la cantidad de tokens que se envían al modelo en la instrucción.
      • Tokens de salida: Es la cantidad de tokens que genera el modelo en la respuesta.
    • Uso de imágenes:

      • Imágenes de entrada: Es la cantidad de imágenes que se envían al modelo en la instrucción.
      • Imágenes de salida: Es la cantidad de imágenes que genera el modelo en la respuesta.

    Si expandes las métricas de estabilidad, estarán disponibles los siguientes gráficos detallados:

    • Volumen de solicitudes a lo largo del tiempo
    • Tasa de éxito a lo largo del tiempo
    • Tokens de entrada y salida a lo largo del tiempo.
    • Latencia (percentil 95 y 50) a lo largo del tiempo.

Obtén más información sobre Genkit en Genkit.

Próximos pasos