Primeros pasos con Google Antigravity

1. Introducción

En este codelab, aprenderás sobre Google Antigravity (en el resto del documento, se hará referencia a Antigravity), una plataforma de desarrollo basada en agentes que evoluciona el IDE hacia la era de los agentes primero.

A diferencia de los asistentes de programación estándar que solo autocompletan líneas, Antigravity proporciona un "Centro de control" para administrar agentes autónomos que pueden planificar, programar e incluso navegar por la Web para ayudarte a crear.

Antigravity se diseñó como una plataforma "centrada en el agente". Se presupone que la IA no es solo una herramienta para escribir código, sino un actor autónomo capaz de planificar, ejecutar, validar y realizar iteraciones en tareas de ingeniería complejas con una mínima intervención humana.

Qué aprenderás

  1. Cómo instalar y configurar Antigravity
  2. Explorar los conceptos clave de Antigravity, como Agent Manager, Editor, Browser y mucho más
  3. Explora algunos casos de uso con Antigravity

Requisitos

Actualmente, Antigravity está disponible como vista previa para las cuentas personales de Gmail. Incluye una cuota gratuita para usar modelos premium.

Antigravity debe estar instalado de forma local en tu sistema. El producto está disponible en Mac, Windows y distribuciones específicas de Linux. Además de tu propia máquina, necesitarás lo siguiente:

  • Navegador web Chrome
  • Una cuenta de Gmail (cuenta de Gmail personal)

Este codelab está diseñado para usuarios y desarrolladores de todos los niveles (incluidos los principiantes).

2. Instalación

Comenzaremos con la instalación de Antigravity. Actualmente, el producto está disponible para la versión preliminar, y puedes usar tu cuenta personal de Gmail para comenzar a usarlo.

Ve a la página de descargas y haz clic en la versión del sistema operativo que corresponda a tu caso. Inicia el instalador de la aplicación y, luego, instálala en tu máquina. Una vez que completes la instalación, inicia la aplicación Antigravity. Deberías ver una pantalla similar a la siguiente:

29fada39721093c.png

Haz clic en Siguiente cada vez para continuar. A continuación, se detallan los pasos clave:

  • Choose setup flow: Se abrirá la opción para importar desde tu configuración existente de VS Code o Cursor. Comenzaremos de nuevo.
  • Choose an Editor theme type. Usaremos el Tema oscuro, pero depende totalmente de ti, según tus preferencias.
  • How do you want to use Antigravity agent

cf89c9d16394914c.png

Analicemos esto con un poco más de detalle y recordemos que no está escrito en piedra y se puede cambiar en cualquier momento, incluso mientras interactúas con el agente.

Antes de profundizar en las opciones, veamos dos propiedades específicas aquí (que se ven a la derecha del diálogo):

Política de ejecución de terminal

Se trata de darle al agente la capacidad de ejecutar comandos (aplicaciones o herramientas) en tu terminal. Aquí hay tres opciones.

  • Off: Nunca ejecutar automáticamente comandos de terminal (excepto los que se encuentran en una lista de elementos permitidos configurable)
  • Auto: El agente decide si se debe ejecutar automáticamente cualquier comando de terminal determinado. En caso de que necesite tu permiso, lo decidirá y te lo pedirá.
  • Turbo: Siempre ejecuta automáticamente los comandos de la terminal (excepto los que se encuentran en una lista de bloqueo configurable).

Política de revisión

A medida que el agente realiza su tarea, crea varios artefactos (plan de tareas, plan de implementación, etc.). La política de revisión se establece de manera que puedas determinar quién decide si se debe revisar. Si siempre quieres revisarlo o dejar que el agente decida sobre esto Por lo tanto, aquí también hay tres opciones.

  • Always Proceed: El agente nunca solicita una revisión
  • Agent Decides: El agente decidirá cuándo solicitar la revisión.
  • Request Review: El agente siempre solicita una revisión

Ahora que entendemos esto, las 4 opciones no son más que parámetros de configuración predeterminados específicos para las políticas de ejecución y revisión de Terminales para 3 de ellas, y una 4ª opción disponible en la que podemos controlarlo de forma completamente personalizada. Estas 4 opciones están disponibles para que podamos elegir cuánta autonomía quieres darle al agente para ejecutar comandos en la terminal y revisar los artefactos antes de continuar con la tarea.

Estas 4 opciones son las siguientes:

  • Desarrollo impulsado por agentes
  • Desarrollo asistido por agentes
  • Desarrollo basado en revisiones
  • Configuración personalizada

La opción de desarrollo asistido por el agente ofrece un buen equilibrio y es la que se recomienda, ya que permite que el agente tome una decisión y vuelva a consultar al usuario para obtener su aprobación.

Así que elige la opción que prefieras y, por ahora, sigamos el enfoque recomendado.

  • Configure your Editor: Elige tus preferencias.
  • Sign in to Google: Como se mencionó anteriormente, Antigravity está disponible en modo de vista previa y es gratis si tienes una cuenta personal de Gmail. Accede ahora con tu cuenta. Asegúrate de permitir que se cree un nuevo perfil de Chrome para esto. Se abrirá el navegador para que puedas acceder. Si la autenticación se realiza correctamente, verás un mensaje similar al siguiente y se te redireccionará a la aplicación de Antigravity. Déjate llevar.
  • Terms of Use: Puedes tomar una decisión sobre si deseas habilitar la opción o no y, luego, hacer clic en Siguiente.

Esto te llevará al momento de la verdad, en el que Antigravity estará esperando para colaborar contigo. Estamos listos para comenzar.

3. El administrador de agentes

Antigravity bifurca la base de código abierto de Visual Studio Code (VS Code), pero altera radicalmente la experiencia del usuario para priorizar la administración de agentes por sobre la edición de texto. La interfaz se bifurca en dos ventanas principales distintas: el Editor y el Administrador de agentes. Esta separación de responsabilidades refleja la distinción entre la contribución individual y la administración de ingeniería.

El Administrador de agentes: Centro de control

Cuando se inicia Antigravity, el usuario suele ver el Administrador de agentes, en lugar de un árbol de archivos, como se muestra a continuación:

d5ae91fc746e1bba.png

Esta interfaz actúa como un panel de Mission Control. Está diseñado para la orquestación de alto nivel, lo que permite a los desarrolladores generar, supervisar e interactuar con varios agentes que operan de forma asíncrona en diferentes espacios de trabajo o tareas.

En esta vista, el desarrollador actúa como arquitecto. Definen objetivos de alto nivel, como los siguientes:

  • Refactoriza el módulo de autenticación
  • Actualiza el árbol de dependencias
  • Genera un conjunto de pruebas para la API de facturación

Como se indica en el diagrama anterior, cada una de estas solicitudes genera una instancia de agente dedicada. La IU proporciona una visualización de estos flujos de trabajo paralelos, en la que se muestra el estado de cada agente, los artefactos que produjo (planes, resultados, diferencias) y las solicitudes pendientes de aprobación humana.

Esta arquitectura aborda una limitación clave de los IDE anteriores, que ofrecían una experiencia más parecida a la de un chatbot, que eran lineales y síncronos. En una interfaz de chat tradicional, el desarrollador debe esperar a que la IA termine de generar código antes de hacer la siguiente pregunta. En la vista de administrador de Antigravity, un desarrollador puede enviar cinco agentes diferentes para que trabajen en cinco errores diferentes de forma simultánea, lo que multiplica su capacidad de procesamiento.

Si haces clic en Siguiente, tendrás la opción de abrir un espacio de Workspace.

ec72712ea24bf6d5.png

Piensa en Workspace como lo conocías de VS Code y listo. Para abrir una carpeta local, haz clic en el botón y, luego, selecciona una carpeta para comenzar. En mi caso, tenía una carpeta en mi carpeta principal llamada my-agy-projects, y la seleccioné. Puedes usar una carpeta completamente diferente.

Ten en cuenta que puedes omitir este paso por completo si lo deseas y abrir un espacio de trabajo en cualquier momento más adelante.

Una vez que completes este paso, estarás en la ventana Agent Manager, que se muestra a continuación:

156224e223eeda36.png

Notarás que la aplicación está configurada de inmediato para iniciar una conversación nueva en la carpeta del espacio de trabajo (my-agy-projects) que se seleccionó. Ten en cuenta que puedes usar tu conocimiento existente sobre el trabajo con otras aplicaciones de IA (Cursor, CLI de Gemini) y usar @ y otras formas de incluir contexto adicional mientras das instrucciones.

Consulta los menús desplegables Planning y Model Selection. El menú desplegable Selección de modelo te permite elegir uno de los modelos disponibles en el momento para que lo use tu agente. La lista se muestra a continuación:

fb0744dc43911365.png

Del mismo modo, vemos que el agente estará en un modo Planning predeterminado. Pero también podemos elegir el modo Fast.

f403e40ad480efc9.png

Veamos qué dice la documentación sobre este tema:

  • Planning: Un agente puede planificar antes de ejecutar tareas. Úsalo para investigaciones profundas, tareas complejas o trabajo colaborativo. En este modo, el agente organiza su trabajo en grupos de tareas, produce artefactos y toma otras medidas para investigar, analizar y planificar su trabajo de manera exhaustiva y así lograr una calidad óptima. Aquí verás muchos más resultados.
  • Fast: Un agente ejecutará tareas directamente. Úsalo para tareas simples que se pueden completar más rápido, como cambiar el nombre de variables, iniciar algunos comandos de Bash o realizar otras tareas más pequeñas y localizadas. Esto es útil cuando la velocidad es un factor importante y la tarea es lo suficientemente simple como para no preocuparse por una calidad inferior.

Si conoces el concepto de presupuesto de pensamiento y términos similares en los agentes, considera que esta es la capacidad de controlar el pensamiento del agente, lo que tiene un impacto directo en el presupuesto de pensamiento. Por el momento, usaremos los valores predeterminados, pero recuerda que, en el momento del lanzamiento, la disponibilidad del modelo Gemini 3 Pro se basa en cuotas limitadas para todos, por lo que debes esperar mensajes adecuados que indiquen si agotaste esas cuotas gratuitas para el uso de Gemini 3.

Ahora, dediquemos un poco de tiempo al Administrador de agentes (ventana) y comprendamos algunas cosas para que queden claros los componentes básicos, cómo navegar en Antigravity y mucho más. A continuación, se muestra la ventana del Administrador de agentes:

22f6dcf7b3edc583.png

Consulta el diagrama anterior con los números:

  1. Inbox: Piensa en esto como una forma de hacer un seguimiento de todas tus conversaciones en un solo lugar. A medida que envíes a los agentes a realizar sus tareas, estas aparecerán en la bandeja de entrada, y podrás hacer clic en ella para obtener una lista de todas las conversaciones actuales. Si presionas cualquiera de las conversaciones, se mostrarán todos los mensajes que se intercambiaron, el estado de las tareas, lo que produjo el agente o incluso si está esperando tu aprobación para las tareas. Esta es una excelente manera de volver más tarde a una tarea anterior en la que estabas trabajando. Es una función muy útil.
  2. Start Conversation: Haz clic aquí para iniciar una conversación nueva. Esto te llevará directamente a la entrada en la que se indica Ask anything.
  3. Workspaces: Mencionamos los espacios de trabajo y que puedes trabajar en cualquier espacio de trabajo que desees. Puedes agregar más espacios de trabajo en cualquier momento y seleccionar cualquiera de ellos cuando inicies la conversación.
  4. Playground: Esta es una excelente manera de iniciar una conversación con el agente y, luego, si deseas convertirla en un espacio de trabajo, en el que tienes un control más estricto sobre los archivos, etc., puedes hacerlo. Piensa en esto como un área de borrador.
  5. Editor View: Hasta ahora, estamos en la vista del Administrador de agentes. Si lo deseas, puedes cambiar a la vista de Editor en cualquier momento. Se mostrará la carpeta del espacio de trabajo y los archivos generados. Puedes editar los archivos directamente allí o incluso proporcionar orientación intercalada, comandos en el editor, para que el agente pueda hacer algo o cambiar según tus recomendaciones o instrucciones modificadas. Veremos la vista del editor en detalle en una sección posterior.
  6. Browser: Por último, llegamos a uno de los diferenciadores claros que hacen que Antigravity sea muy potente: su estrecha integración con el navegador Chrome. En la siguiente sección, comenzaremos a configurar el navegador.

4. Cómo configurar el navegador Antigravity

Según la documentación, cuando el agente quiere interactuar con el navegador, invoca un subagente del navegador para que controle la tarea en cuestión. El subagente del navegador ejecuta un modelo especializado para operar en las páginas que están abiertas en el navegador administrado por Antigravity, que es diferente del modelo que seleccionaste para el agente principal.

Este subagente tiene acceso a una variedad de herramientas necesarias para controlar tu navegador, como hacer clic, desplazarse, escribir, leer registros de la consola y mucho más. También puede leer tus páginas abiertas a través de la captura del DOM, capturas de pantalla o análisis de Markdown, así como grabar videos.

Esto significa que debemos iniciar e instalar la extensión para el navegador Antigravity. Para ello, iniciaremos una conversación en Playground y seguiremos los pasos.

Selecciona Playground y asígnale la tarea de seguimiento go to antigravity.google al agente, como se muestra a continuación:

51a373d3da23db56.png

Envía la tarea. Verás al agente analizando la tarea y podrás inspeccionar el proceso de pensamiento. En algún momento, procederá correctamente y mencionará que debe configurar el agente del navegador, como se muestra a continuación. Haz clic en Configuración.

e7119f40e093afd2.png

Se abrirá el navegador y se mostrará un mensaje para instalar la extensión, como se muestra a continuación:

9a5a43c17980e46c.png

Continúa y se te dirigirá a la extensión de Chrome que podrás instalar.

f3468f0e5f3bb075.png

Una vez que instales la extensión correctamente, Antigravity Agent comenzará a funcionar y te indicará que espera que le permitas realizar su tarea. Deberías ver algo de actividad en la ventana del navegador que se abrió:

7f0367e00ac36d5a.png

Vuelve a cambiar la vista del Administrador de agentes y deberías ver lo siguiente:

b9d89e1ebefcfd76.png

Esto es exactamente lo que esperábamos que sucediera, ya que le pedimos al agente que visitara el sitio web antigravity.google. Otorga el permiso y verás que se navegó al sitio web de forma segura, como se muestra a continuación:

77fcc38b5fb4ca7c.png

Cómo inspeccionar los artefactos

Ahora viene la parte interesante. Una vez que el agente termine su trabajo, deberías poder ver todo lo que hizo. Esto incluye los artefactos, que son la base sobre la que se construye la confianza en términos del trabajo que planeas hacer, lo que has hecho hasta ahora y cómo lo has verificado.

Los artefactos resuelven la "brecha de confianza". Cuando un agente afirma que "corrigió el error", el desarrollador debía leer el código para verificarlo. En Antigravity, el agente produce un artefacto para demostrarlo.

Antigravity se enfoca en producir artefactos clave según la tarea. Esto puede abarcar desde el plan de tareas hasta el plan de implementación y, finalmente, el plan de explicación (con verificación). Dentro de estos planes, debes considerar incluir los siguientes elementos:

  • Task Lists & Plans: Antes de escribir código, el agente genera un plan estructurado. El usuario puede revisar, editar y aprobar este plan.
  • Code Diffs: Vistas de diferencias estandarizadas que muestran exactamente qué líneas cambiarán.
  • Screenshots: El agente captura el estado de la IU antes y después de un cambio.
  • Browser Recordings: Para interacciones dinámicas (p.ej., "Haz clic en el botón de acceso, espera el spinner y verifica que se cargue el panel"), el agente graba un video de su sesión. El desarrollador puede mirar este video para verificar que se cumpla el requisito funcional sin ejecutar la app por su cuenta.
  • Test Results: Registros estructurados de pruebas aprobadas o fallidas que genera y ejecuta el agente.

En la parte superior derecha, junto a Review changes in Agent Manager view, deberías ver un botón para activar o desactivar los artefactos. Si está activado, puedes ver la lista de artefactos generados:

5320f447471c43eb.png

Deberías ver la vista Artifacts como se muestra a continuación. En este caso, le indicamos al agente que visite la página antigravity.google, por lo que capturó la captura de pantalla, creó un video de la misma, etcétera.

19d9738bb3c7c0c9.png

Los desarrolladores pueden interactuar con estos artefactos usando "comentarios al estilo de Documentos de Google". Puedes seleccionar una acción o tarea específica, proporcionar un comando de la forma en que te gustaría que se ejecutara y, luego, enviarlo al agente. Luego, el agente incorporará estos comentarios y realizará las iteraciones correspondientes. Considera usar Documentos de Google interactivos, en los que le brindes comentarios al autor y este los tenga en cuenta.

5. Vuelve a visitar Recibidos

Si ya iniciaste algunas conversaciones con los agentes, ahora deberías echar un vistazo a tu carpeta Recibidos en la ventana de Agent Manager. Se mostrarán todas las conversaciones. Haz clic en cualquiera de las conversaciones para ver su historial, los artefactos producidos y mucho más. En nuestro caso, después de ejecutar la primera conversación, la bandeja de entrada muestra la conversación en la lista, como se muestra a continuación:

1a2a1bbdd4464ecf.png

Si haces clic en esa conversación, verás los detalles:

b7e493765cfb1b1a.png

También puedes continuar la conversación desde aquí.

6. El editor

El Editor conserva la familiaridad de VS Code, lo que garantiza que se respete la memoria muscular de los desarrolladores experimentados. Incluye el explorador de archivos estándar, el resaltado de sintaxis y el ecosistema de extensiones.

Puedes hacer clic en el botón Abrir editor en la parte superior derecha del Administrador de agentes para ir al editor.

91f3c96b81d993b9.png

El Editor se complementa con la "Conciencia del agente".

  • Inline Command: El editor admite la programación de vibe y las instrucciones intercaladas, en las que los usuarios pueden destacar código y darle instrucciones al agente para que "Make this more efficient" o "Add comments explaining this logic".
  • Agent Side Panel : Usa el panel que se encuentra en el lado derecho del editor para trabajar directamente con el agente. Desde aquí, puedes iniciar conversaciones nuevas o dar instrucciones para cambiar tu código.

A medida que analizamos algunos casos de uso relacionados con el desarrollo web, en los que el agente crea varios archivos de código, podemos echar un vistazo al editor para ver los archivos, realizar cambios y, desde aquí, interactuar directamente con el agente.

7. Cómo alternar entre el Editor y el Administrador de agentes

Ten en cuenta que Antigravity tiene una opinión definida sobre el hecho de que tanto el Editor como el Administrador de agentes son ventanas separadas y que ambos son claramente necesarios. Puedes cambiar de uno a otro con el botón Open Agent Manager en la parte superior derecha cuando estés en el Editor o haciendo clic en el botón Open Editor en la parte superior derecha cuando estés en el Administrador de agentes.

Como alternativa, también puedes usar la siguiente combinación de teclas para alternar entre los dos modos: Cmd + E

8. Casos de uso

Ahora que tenemos una comprensión básica del producto, veamos algunos casos de uso para ver cómo funciona. Ten en cuenta que Antigravity es una plataforma que prioriza a los agentes. Esto significa que, en la mayoría de los casos, simplemente se le da una instrucción al agente, y este se encarga de realizar la tarea, solicitar permisos si es necesario, producir los artefactos y, luego, notificarnos si la tarea se completó. Como resultado, no podemos producir cada resultado de la conversación del agente en cada uno de los siguientes casos de uso. Compartiremos las instrucciones y algunas capturas de pantalla necesarias de los resultados esperados, pero es posible que tus resultados difieran un poco.

Los casos de uso que abordaremos abarcan desde la automatización de algunas tareas con sitios externos hasta la generación y verificación de casos de prueba de unidades para un proyecto, y el desarrollo de un sitio web completo. Aquí vamos.

Noticias destacadas

Este es un caso de uso simple, pero puede ser la base para usar el navegador web para visitar sitios web, extraer información, realizar algunas acciones y, luego, devolver datos al usuario.

En este caso, visitaremos el sitio de Google Noticias y extraeremos información de allí. Sin embargo, puedes experimentar fácilmente con el sitio que elijas y ver cómo funciona.

Asegúrate de estar en Agent Manager y de haber seleccionado Playground, como se muestra a continuación:

cffa12c98a68cb6c.png

Luego, da la siguiente instrucción:

8513d489eea0b014.png

Esto iniciará el proceso del agente y determinará que debe iniciar el navegador, etcétera. Debes prestar mucha atención al proceso de pensamiento y ver cómo el agente realiza su trabajo. Si todo sale bien, se debería iniciar el navegador Antigravity y visitar el sitio, como se muestra a continuación. El borde azul alrededor del sitio muestra que el agente ahora controla el navegador y navega por el sitio para obtener la información.

9d594588f2ffe6bc.png

Una vez que termine su trabajo, también deberías ver cómo se generan los artefactos, como se muestra a continuación:

dc6cf4e7d8425df8.png

A continuación, se muestra un ejemplo de ejecución del agente:

fb7397cd2cce0682.png

Ten en cuenta que, a la izquierda, tenemos el Proceso de pensamiento. También puedes desplazarte por los puntos y ver la reproducción y otros datos.

Pruebas para hacer

  • Una vez que comprendas esto, elige un sitio web que esté disponible y del que quieras que el agente obtenga o resuma algunos datos. Piensa en un sitio web que sepas que tiene paneles y gráficos, y pídele que elija algunos valores.
  • Prueba la siguiente instrucción: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

Genera un sitio web dinámico con Python y Flask

Ahora, generemos una aplicación web completa. La aplicación web que crearemos es un sitio que proporciona información sobre un evento técnico de 1 día, que incluye charlas a lo largo del día a cargo de varios oradores.

Una vez más, asegúrate de estar en Agent Manager y de haber seleccionado Playground.

Escribe la siguiente instrucción:

I would like to generate a website that is a 1-day technical conference informational site.

The website should have the following functionality:
        1. A home page that shows the current date, location, schedule and time table.
        2. The 1-day event is a list of 8 talks in total.
        3. Each talk has 1 or 2 max. speakers. 
        4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
        5. Each speaker has a First Name, Last Name and LinkedIn url.
        6. Allow for users to search by category, speaker, title.
        7. Give a lunch break of 60 minutes.
        8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
        9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript. 
        10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes. 
11. Launch the web application for me to review. 

Puedes comenzar la conversación con la instrucción anterior:

A medida que el agente realiza su tarea, creará los artefactos:

  • Artefacto de la tarea
  • Artefacto de implementación
  • Artefacto de explicación

El artefacto de tarea que se muestra a continuación fue la secuencia inicial de tareas que el agente descifró que debía realizar en función de la tarea que se le asignó. A continuación, se muestra una captura de pantalla de muestra de la ejecución:

c95d82e1c040698f.png

Luego, puedes hacer clic en el artefacto Plan de implementación. A continuación, se muestra una captura de pantalla de ejemplo:

632169a236bc62cc.png

Por último, tienes el artefacto Walkthrough. Contiene todo lo que hizo el agente, como se muestra a continuación:

e3f6152d6f54d4f9.png

Observa que inició el servidor y me proporcionó la URL, en la que hago clic y tengo la aplicación. A continuación, se muestra una captura de pantalla de muestra:

abf879f2ce53d055.png

Si cambias al Editor, observa en la pantalla que contiene la carpeta en la que se genera la aplicación de Flask de Python. También notarás que el Agent mode está etiquetado a la derecha y que puedes continuar la conversación allí también.

b0fea8aa65c3a1c5.png

Ahora, supongamos que queremos agregar más charlas al evento. Podemos permanecer en el Editor y en el panel del Agente, y dar una instrucción como Add two more talks to the schedule.

Esto hará que el agente analice el requisito, actualice la tarea y el plan de implementación, y, luego, valide la funcionalidad actualizada. A continuación, se muestra una conversación de ejemplo:

ba8455e6f68973e9.png

Puedes volver al Administrador de agentes si lo deseas. Este proceso debería ayudarte a comprender el proceso de cambio de Administrador de agentes a Editor, realizar los cambios correspondientes, etcétera.

Nota: Mientras ejecutaba esta tarea, el agente intentó iniciar el servidor de Flask en el puerto 5000, que estaba en uso en la máquina actual. Siguió intentando usar el siguiente puerto libre hasta que decidió usar el 8080 y pudo iniciar el servidor.

Pruebas para hacer

  • Agrega la funcionalidad adicional que desees a la aplicación. Proporciona los detalles al agente y observa cómo realiza su tarea modificando primero la lista de tareas, luego el plan de implementación, etcétera.
  • Pídele al agente que genere un archivo README o más documentación para la aplicación.

Genera una app de productividad simple

Ahora generaremos una aplicación web simple de temporizador Pomodoro.

Asegúrate de estar en Agent Manager y de haber seleccionado Playground. Escribe la siguiente instrucción:

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

Observa cómo crea la lista de tareas, el plan de implementación y, luego, cómo lo lleva a cabo. Sigue prestando atención al flujo, ya que puede haber situaciones en las que se te solicite que lo revises. A continuación, se muestra un ejemplo de ejecución.

5be0a668e5a67d85.png

En este caso, también debería iniciar el navegador Antigravity, realizar sus propias pruebas y, luego, confirmar que las pruebas se realizaron correctamente. Una de las cosas que generó fue un artefacto de medios que contiene el video de su verificación. Esta es una excelente manera de ver qué se probó. También sugerí algunos cambios de estilo, ya que no se aplicaron, y se pudieron realizar.

La app final se veía como la siguiente y se ve bastante bien.

c9ab6bca97a51a8c.png

¿Qué tal si agregamos una imagen de temporizador agradable a la aplicación? Todo lo que tenemos que hacer es emitir una instrucción de seguimiento como la que se indica a continuación:

Add an image to the application that displays a timer.

Esto hizo que el agente agregara una nueva tarea al artefacto de tareas:

498dd946d4e9ae55.png

Luego, generó una imagen a medida que realizaba su tarea:

c291da9bdb37ff96.png

Por último, la app tenía la imagen que solicitamos:

de8f418ba8e4600d.png

Pruebas para hacer

  • Observa que el fondo del ícono de reloj de arena en la aplicación no es transparente. Intenta pedirle al agente que lo haga transparente.
  • Prueba algunas variaciones de cualquier aplicación que desees generar. Experimenta con los estilos y las imágenes, pide cambios, etcétera.

Genera pruebas de unidades, stubs simulados y valida pruebas

El caso de uso final que probaremos aquí es el de generar pruebas de unidades para un archivo de código específico que tenemos y para que el agente también ejecute las pruebas y las valide.

Para ello, tendremos un espacio de trabajo con un solo archivo de Python, como se muestra a continuación:

from typing import Dict

# --- Custom Exceptions ---
class InventoryShortageError(Exception):
    """Raised when there is not enough item stock."""
    pass

class PaymentFailedError(Exception):
    """Raised when the payment gateway rejects the transaction."""
    pass

class InvalidOrderError(Exception):
    """Raised when the order violates business rules."""
    pass

# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
    def get_stock(self, product_id: str) -> int:
        """Connects to DB to check stock."""
        raise NotImplementedError("Real connection required")

    def decrement_stock(self, product_id: str, quantity: int):
        """Connects to DB to reduce stock."""
        raise NotImplementedError("Real connection required")

class PaymentGateway:
    def charge(self, amount: float, currency: str) -> bool:
        """Connects to Stripe/PayPal."""
        raise NotImplementedError("Real connection required")

# --- Main Business Logic ---
class Order:
    def __init__(self, 
                 inventory_service: InventoryService, 
                 payment_gateway: PaymentGateway,
                 customer_email: str,
                 is_vip: bool = False):
        
        self.inventory = inventory_service
        self.payment = payment_gateway
        self.customer_email = customer_email
        self.is_vip = is_vip
        self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
        self.is_paid = False
        self.status = "DRAFT"

    def add_item(self, product_id: str, price: float, quantity: int = 1):
        """Adds items to the cart. Rejects invalid prices or quantities."""
        if price < 0:
            raise ValueError("Price cannot be negative")
        if quantity <= 0:
            raise ValueError("Quantity must be greater than zero")

        if product_id in self.items:
            self.items[product_id]['qty'] += quantity
        else:
            self.items[product_id] = {'price': price, 'qty': quantity}

    def remove_item(self, product_id: str):
        """Removes an item entirely from the cart."""
        if product_id in self.items:
            del self.items[product_id]

    @property
    def total_price(self) -> float:
        """Calculates raw total before discounts."""
        return sum(item['price'] * item['qty'] for item in self.items.values())

    def apply_discount(self) -> float:
        """
        Applies business logic:
        1. VIPs get flat 20% off.
        2. Regulars get 10% off if total > 100.
        3. No discount otherwise.
        """
        total = self.total_price
        
        if self.is_vip:
            return round(total * 0.8, 2)
        elif total > 100:
            return round(total * 0.9, 2)
        
        return round(total, 2)

    def checkout(self):
        """
        Orchestrates the checkout process:
        1. Validates cart is not empty.
        2. Checks stock for all items.
        3. Calculates final price.
        4. Charges payment.
        5. Updates inventory.
        """
        if not self.items:
            raise InvalidOrderError("Cannot checkout an empty cart")

        # 1. Check Inventory Logic
        for product_id, data in self.items.items():
            available_stock = self.inventory.get_stock(product_id)
            if available_stock < data['qty']:
                raise InventoryShortageError(f"Not enough stock for {product_id}")

        # 2. Calculate Final Price
        final_amount = self.apply_discount()

        # 3. Process Payment
        try:
            success = self.payment.charge(final_amount, "USD")
            if not success:
                raise PaymentFailedError("Transaction declined by gateway")
        except Exception as e:
            # Catching generic network errors from the gateway
            raise PaymentFailedError(f"Payment gateway error: {str(e)}")

        # 4. Decrement Stock (Only occurs if payment succeeded)
        for product_id, data in self.items.items():
            self.inventory.decrement_stock(product_id, data['qty'])

        self.is_paid = True
        self.status = "COMPLETED"
        
        return {"status": "success", "charged_amount": final_amount}

Asegúrate de tener el archivo de Python anterior localmente en una carpeta y cárgalo como un Workspace en Antigravity.

Este es un servicio de pedidos simple que tiene la siguiente funcionalidad clave en la función checkout:

  1. Valida que el carrito no esté vacío.
  2. Verifica el stock de todos los artículos.
  3. Calcula el precio final.
  4. Cargos de pago.
  5. Actualiza el inventario.

Le asignaremos al agente la tarea de generar casos de prueba de unidades, proporcionar implementaciones de simulación y ejecutar las pruebas para asegurarnos de que se realicen correctamente.

Abriremos nuestra carpeta de espacio de trabajo específica y notarás que ahora también podemos usar el símbolo @ para hacer referencia al archivo. Por ejemplo, podríamos hacer lo siguiente:

8368856e51a7561a.png

Aparecerá una explicación sobre qué es este archivo:

b69c217d3372d802.png

Podemos pedirle que genere una mejor visualización a través de la instrucción:

Can you visually show this class for better understanding

da5bd701323818d4.png

Mi siguiente paso es generar las pruebas de unidades y pedirle al agente que las pruebe. Escribo la siguiente instrucción:

generate unit tests for this module and test it out with mock implementations.

Generó el siguiente artefacto de tarea y se puso a trabajar en ella.

21425379db336dc6.png

También puedes ver los detalles de las pruebas que se ejecutaron:

48f3320cd76b5cd8.png

Uno de los archivos que generó también fue el archivo de prueba. A continuación, se muestra una captura de pantalla de la misma:

8ee68905942825d.png

Pruebas para hacer

Toma tu propio código y observa qué puedes pedirle al agente que haga, desde agregar más funcionalidad hasta refactorizar partes de tu código.

9. Felicitaciones

¡Felicitaciones! Instalaste correctamente Antigravity, la plataforma de desarrollo centrada en el agente, y comprendiste cómo usarla. Los diferentes casos de uso que probamos deberían ayudarte a tomar tus propios requisitos y explorar cómo Antigravity puede colaborar contigo para completarlos.

Documentos de referencia