AI Extension Builder: el agente prueba tus secciones y puede crear la base de datos de tu app

Pongamos el caso de un club deportivo que quiere que sus socios elijan la fecha de su torneo. En su sección Crear con IA, escribe: “Añade una encuesta para elegir la fecha del torneo, con los resultados.”

El agente lee primero el contexto de la app: su paleta, sus fuentes, su logo, los archivos ya añadidos. Consulta el design system de GoodBarber, escrito por nuestros diseñadores. Después escribe los archivos de la sección.

Los votos tienen que compartirse entre todos los socios. El agente lo detecta y hace la pregunta, con tres respuestas:

• Create the app's database: una sola base de datos, gestionada por GoodBarber. Sus tablas empiezan vacías.
• Connect my Supabase: los datos van al proyecto Supabase del club.
• Cancel: el agente hace la sección sin base de datos, y cada teléfono solo ve sus propios votos.

El club elige la base de datos de GoodBarber. El agente abre entonces la sección en un navegador, al ancho de un teléfono, y prueba sus botones. Busca errores: un script que falla, una imagen rota, un texto que se sale de la pantalla. Corrige lo que encuentra y después guarda la sección.

Los socios votan y todos ven los resultados. Cada uno solo puede cambiar su propio voto.

Con el motor anterior, el código de una sección aparecía en tu vista previa sin haberse probado. Ahora, el agente lo prueba en un navegador antes de guardarlo.

No hace falta que apliques tú mismo el cuidado diseño de tu app: el agente tiene una herramienta para eso. Antes de elegir los estilos de una sección, lee el design system de GoodBarber.

Ahí encuentra los tamaños de texto, los espaciados, los redondeos, las sombras y el papel de cada color. También ve cómo se compone una pantalla de la app y cuándo usar cada uno de sus componentes. Lo aplica todo con la paleta y las fuentes de tu app.

Así, la encuesta del club adopta el estilo del resto de su app.

El agente decide por sí solo lo que puede decidir y luego te dice qué ha elegido. Cuando una decisión cambia la sección y no puede tomarla por ti, te hace una pregunta. Eliges una de las respuestas propuestas, cuatro como máximo, o escribes la tuya. Continúa con tu respuesta.

Si la sección tiene que llamar a un servicio externo, una API del tiempo por ejemplo, el agente declara su dominio y espera tu autorización. Si la rechazas, hace la sección sin él.

Si esa API pide una clave, el agente te la pide en un campo seguro, nunca en la conversación. Una respuesta que parezca una clave o una contraseña no se transmite al agente. El agente solo conoce el nombre de tus claves.

El estudio también te recuerda una regla: cualquier persona que abra la app puede lanzar esas llamadas con tu clave. Usa una clave limitada a ese uso.

Una encuesta o una clasificación: en cuanto una sección comparte datos entre tus usuarios, el agente propone crear la base de datos de tu app. Hay una por app, gestionada por GoodBarber. No abres ninguna cuenta con un proveedor de bases de datos.

Todos los usuarios de la app leen sus datos, y cada uno solo modifica lo que ha añadido. Así que no guardes en ella información privada. Tus usuarios no necesitan una cuenta para escribir en ella.

Cuando el agente prueba la sección, sus escrituras se rechazan: tus datos no se tocan.

¿Tu app ya usa Supabase? Sus secciones en Supabase se quedan ahí. Para la nueva sección, conservas tu proyecto o creas la base de datos de GoodBarber: las nuevas secciones de la app también la usarán.

Antes de un cambio que afecta a datos ya guardados, el agente te muestra lo que toca: las tablas, el número de entradas, las demás secciones que leen esos datos. Lo aceptas, o adapta la sección para que funcione sin ese cambio.

Cuenta con algo más que unos segundos: el agente escribe, prueba y corrige antes de devolverte el control. La tarjeta de carga te dice lo que está haciendo en ese momento: lee el contexto de la app, escribe un archivo, abre la sección en un navegador. Mientras trabaja, puedes abrir la vista de código y leer los archivos, en modo solo lectura. La edición vuelve al final.

Si el agente no consigue terminar, te lo dice y no se modifica nada: tu versión actual sigue en su sitio.

Cada versión se guarda. Pide volver atrás: el agente te propone la versión y tú confirmas. Para una sección que usa la base de datos de GoodBarber, eliges qué vuelve: el código y la estructura, con tus datos tal como están, o también los datos tal como estaban, si su copia tiene menos de 15 días.

El estudio adopta el aspecto de tu back office, en claro o en oscuro. En pantalla grande, la vista previa aparece dentro de un teléfono y la conversación flota encima, en una tarjeta que mueves por su cabecera. En una pantalla de 1024 píxeles de ancho o menos, la conversación se convierte en un panel en la parte inferior de la pantalla.

El clip de la barra de escritura añade archivos en cualquier momento, una foto o un logo por ejemplo. Arrástralos a la ventana o búscalos en tu ordenador, y luego cítalos con @ en tu petición.

Una sección comparte sus datos sin que tengas que conectar ningún servicio: un voto aparece en los resultados de todos los usuarios.

Abre una sección “Crear con IA” en tu back office y describe lo que quieres: una encuesta, una clasificación, una página con las promociones de tu tienda. El AI Extension Builder es gratuito para las apps Content y eCommerce. ¿Empiezas con el builder? Arranca con la guía para crear secciones con IA. Dinos qué echas en falta: es lo que guía las próximas versiones.

¿Todavía no tienes app? Crea la tuya: la prueba es gratuita.