Cómo crear una APP de IA sin saber programar con Cursor

He creado un app para combinar imágenes de una persona/modelo con un producto. Ideal para e-commerce. Deja de perder tiempo haciendo fotos.

Te cuento como hice la primera versión de la app sin saber programación.

Echale un ojo 👀

Antes de empezar aclarar que esto se puede hacer de muchas formas posibles, todas correctas, y para llegar al mismo resultado se pueden utilizar múltiples herramientas. Aquí te cuento una de las opciones para hacerlo.

1. Introducción al proyecto

Primero:

• Qué hace la app: Genera imágenes personalizadas para eCommerce usando IA.

• Herramientas utilizadas:

  • Cursor: Editor asistido por IA para aprender y escribir código.

    Puedes usar alternativas como Bolt.new, Loveable.dev, Replit, FlutterFlow, Bubble… (Hay muchas opciones)

  

  • Fal.ai: API para modelos de generación de imágenes.

    Es el lugar de donde obtendremos el modelo de IA que estará detrás de nuestra app, es decir, la funcionalidad. (Alternativas Replicate, Fooocus…)

  

  • Flask: Framework de Python para construir aplicaciones web. (no te hace falta saber que es, Cursor te lo instala) Pero si eres curioso 👇

    Flask es un microframework de Python para el desarrollo de aplicaciones web. Es ligero y flexible, lo que permite a los desarrolladores crear aplicaciones web de manera sencilla y rápida.

2. Configuración del entorno de trabajo

Paso 1: Instala las herramientas necesarias.

1. Descarga Cursor en: cursor.com

2. Instala lo en tu ordenador. (como cualquier otra app)

3. Registrate (en su versión gratuita)

Paso 2. Create una cuenta en Fal.ai

1. Signup

2. Te creas cuenta en Github (si no tienes) para un acceso rápido o email + clave.

3. Llegarás a este Dashboard 👇 (Aquí encontraras los diferentes modelos de IA que se ejecutan en las apps)

3. Empezamos a construir la App con Cursor : Estructura

1. Abrimos Cursor

2. Creamos una carpeta para almacenar el proyecto

3. Habilitamos las vistas de Cursor de “Toggle Panel” (inferior) y de “Ai Panel” (derecha)

4. Diseño del Frontend (interfaz de la app)

Una vez tenemos esto, podemos pedirle un diseño concreto para la aplicación, explicándole como lo queremos o adjuntado una imagen de un diseño ya realizado y pidiendo que lo pase a código.

Ejemplo 👇

¿Cómo vemos el diseño para ir iterando e ir modificando los resultados?

Para ir viendo los resultados debemos ejecutar la aplicación en local.

La primera vez es posible que nos de algún fallo, pero puedes ir marcando el error y pidiendo le al Composer que lo solucione, poco a poco solucionarás todo y podrás ejecutar.

Ejemplo 👇

1. Le pedimos que ejecute en local la app

2. Nos saldrán fallos casi seguro

3. Los solucionamos pidiéndole al asistente que solucione cada error

4. Volvemos a ir ejecutando en local (Abrimos en el navegador el enlace que nos genere)

5. Conectamos la App a la API del modelo alojado en Fal.Ai

(Con la función que hayamos definido que ofrecerá nuestra app)

Para conectar la API nos vamos a Fal.ai y elegimos el modelo que queremos ejecutar en nuestra app.

6. Añadimos nuestra API Key de Fal.ai

Cada llamada que se hace a un modelo tiene un coste.. suele ser muy bajo y lo pone en cada modelo.

Dentro del Playground del modelo elegido lo encontrarás debajo de la demo. En este caso 0,04. Aunque podrás probar la mayoría con 1$ gratuito.

Cuando lo agotes deberás introducir crédito en tu perfil y de ahí irás consumiendo por cada llamada que hagas.

Para usar un modelo necesitamos crear una API Key:

1. Nos vamos al Dashboard Inicial

2. Nos vamos a API Keys y generamos una nueva.

   (Importante que copies y la guardes bien para luego poder acceder)

3. Con la clave copiada vamos a Cursor y le decimos que aquí tiene la API Key y que la introduzca para poder hacer llamadas a la API.

7. Prueba/Error

Ahora con un Frontend de la app, un backend creado por el composer y una funcionalidad que es llamar a la API ya tenemos nuestra primera versión de la APP que podemos empezar a probar e iterar hasta conseguir el resultado esperado.

Ya tienes la primera base de tu app. ✌️

La mia es esta:

Ahora, queda más trabajo, pero si explicara todo en único post esto sería eterno. Dime si quieres más en comentarios y haré una continuación. 🤓

Cómo publicar la app, crear una landing, integrarla con tu propio dominio…

Nos vemos pronto! ✌️

Lorena