Caso de estudio
Fenado AI
Plataforma de IA agente que convierte instrucciones de texto en aplicaciones web funcionales.
50K
usuarios generando apps
Full-stack
output desde una sola instruccion
Tiempo real
generacion WebSocket
El desafio
Una IA que escribe codigo, no fragmentos
La mayoria de las herramientas de codigo con IA producen fragmentos. Una funcion aqui, un componente alla. El fundador de Fenado queria algo diferente: una plataforma donde un usuario escribe "construyeme un sistema de gestion de inventario" y recibe una aplicacion funcional con frontend React, backend FastAPI, base de datos MongoDB y autenticacion JWT. Sin conexion manual. Sin ensamblaje por copy-paste.
El problema tecnico tenia tres capas. Primero, el agente de IA necesitaba descomponer una instruccion vaga en pantallas especificas, modelos de datos y rutas de API. Segundo, cada pantalla necesitaba renderizarse en tiempo real por WebSockets para que los usuarios vieran su aplicacion tomar forma. Tercero, el output tenia que compilar y ejecutarse. Imports rotos o dependencias faltantes destruirian la confianza en la primera generacion.
El modelo de negocio requeria facturacion por suscripcion Stripe en tres niveles ($199/mes, $1,999/mes, $9,999/mes), colaboracion de equipo con controles de presupuesto por miembro y una app de escritorio macOS para desarrollo local. Todo esto necesitaba entregarse como un solo producto.
Lo que construimos
Instruccion adentro. Aplicacion afuera.
Pipeline de IA agente con LangChain
Un usuario envia una instruccion de texto. Los agentes LangChain descomponen esa instruccion en un plan estructurado: pantallas, modelos de datos, endpoints de API y jerarquia de componentes. Cada agente maneja una responsabilidad. El agente planificador traza la arquitectura de la aplicacion. El agente disenador genera layouts de pantalla. El agente de codigo escribe componentes React y rutas FastAPI. Los agentes se coordinan a traves de un grafo de estado compartido, pasando artefactos sin volver a consultar.
Generacion en tiempo real por WebSockets
Los usuarios ven su aplicacion ensamblarse en el navegador. A medida que cada agente LangChain completa un paso, el servidor envia el resultado a traves de una conexion WebSocket. Los disenos de pantalla aparecen uno a la vez. Los archivos de codigo fluyen al arbol del proyecto. Los indicadores de progreso muestran que agente esta activo y que produce. Este ciclo de retroalimentacion convirtio una espera de 60 segundos en una experiencia de construccion atractiva que mantuvo a los usuarios en la pagina.
Output de aplicacion full-stack
Cada aplicacion generada incluye un frontend React 19 con componentes shadcn/ui, un backend FastAPI con MongoDB y autenticacion JWT integrada. El sistema de plantillas refuerza una estructura de proyecto consistente: las rutas de API siguen convenciones RESTful, los modelos de base de datos incluyen validacion y el frontend se conecta al backend a traves de clientes API tipados. Los usuarios descargan o despliegan un proyecto que se ejecuta con un solo comando.
Facturacion Stripe y colaboracion de equipo
Tres niveles de suscripcion Stripe controlan el acceso: Business a $199/mes, Business Plus a $1,999/mes y Business Express a $9,999/mes. Cada nivel establece limites de generacion y puertas de funcionalidades. Los propietarios de equipo invitan miembros por correo electronico, asignan presupuestos por miembro y rastrean el uso de generacion en la organizacion. Los webhooks de Stripe manejan upgrades, downgrades y pagos fallidos sin intervencion manual.
Infraestructura de la plataforma
- Generacion de diseno con IA pantalla por pantalla. El agente planificador traza cada pantalla antes de que el agente de codigo la escriba, para que el output siga una jerarquia visual coherente.
- App de escritorio macOS para desarrollo local. Los usuarios generan aplicaciones en el navegador, luego las abren en la app de escritorio para editar, ejecutar y desplegar desde su maquina.
- Autenticacion Firebase con control de acceso basado en roles, separando usuarios individuales de propietarios de equipo y miembros de organizacion.
- Sistema de plantillas con valores predeterminados definidos: FastAPI + MongoDB en el backend, React 19 + shadcn/ui en el frontend y autenticacion JWT pre-conectada en ambas capas.
Arquitectura
Como funciona la pipeline
Paso 1
Recepcion de la instruccion
El usuario describe lo que quiere en texto plano. El agente planificador analiza la instruccion en una especificacion estructurada: cantidad de pantallas, entidades de datos, relaciones y requisitos de autenticacion.
Paso 2
Diseno de pantallas
El agente disenador genera layouts pantalla por pantalla. Cada pantalla se mapea a una ruta en la aplicacion final. La ubicacion de componentes, los enlaces de datos y el flujo de navegacion se definen antes de escribir codigo.
Paso 3
Generacion de codigo
El agente de codigo escribe componentes React, rutas FastAPI, modelos MongoDB y middleware JWT. Cada archivo se transmite al cliente por WebSockets a medida que se completa. El output sigue las convenciones del sistema de plantillas.
Paso 4
Salida
El proyecto ensamblado incluye un frontend funcional, backend, esquema de base de datos y capa de autenticacion. Los usuarios descargan el proyecto o lo abren en la app de escritorio macOS. La aplicacion se ejecuta con un solo comando.
Resultados
Numeros de produccion
50K
usuarios generando aplicaciones web funcionales
Full-stack
frontend + backend + API desde una sola instruccion
3 niveles
planes de suscripcion Stripe de $199 a $9,999/mes
Contacto
Inicia una conversacion
Cuentanos sobre tu proyecto. Responderemos en 24 horas con un plan claro, un cronograma estimado y un rango de precios.
Correo electronico
hello@savibm.comUbicacion
EAU e India
Mensaje recibido
Revisaremos tu proyecto y te responderemos en 24 horas.
También puedes escribirnos a hello@savibm.com