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.

Comenzar

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 Prototipar una app con IA, describe la idea de tu app en lenguaje natural.

    De manera opcional, agrega una imagen para acompañar la instrucción. Puede ser un diagrama del flujo de usuarios ideal de tu app o un esquema de colores al que deseas que se adhiera Firebase Studio. Las imágenes pueden tener un máximo de 3 MiB.

  3. Haz clic en Prototipar con IA.

    El agente de prototipado de apps muestra un esquema de la app, que proporciona un nombre propuesto para la app, las funciones principales y los lineamientos de estilo.

  4. Revisa el plan. Puedes solicitar a Gemini mejoras y cambios, y editar el modelo directamente:

    • Haz clic en Personalizar y edita el esquema directamente. Realiza los cambios que desees 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.

  5. Cuando apruebes el esquema, haz clic en Prototipar esta app.

    Gemini genera código a partir del esquema y muestra una vista previa web para que la revises.

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

Después de crear tu app inicial, puedes hacer lo siguiente:

  • Prueba e itera: 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. También puedes hacer clic en </> para ingresar a la vista de código y editar el código en el espacio de trabajo Firebase Studio.

  • 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.

  • Cómo depurar la app: Haz clic en Ícono de cambio de código Switch to Code para abrir la vista Code, en la que puedes usar las funciones de informes y depuración integradas de Firebase Studio para inspeccionar, depurar y auditar tu app. Regresa a Prototyper mode at any time..

  • Publica tu app con Firebase App Hosting: Haz clic en Publicar para publicar tu app en App Hosting.

  • Supervisa y optimiza tu app y las funciones de IA: Supervisa el rendimiento y el uso de tu app web con la observabilidad en App Hosting y tus flujos de IA generativa con la telemetría de Firebase en Genkit. Obtén más información en Cómo supervisar apps web.

Próximos pasos