Banorte-Vanguard

Inspiración

Para millones de familias de ingresos medios y bajos que viven al día, un imprevisto como un recibo de luz anormalmente alto puede desatar una crisis financiera inmediata. Las aplicaciones bancarias tradicionales son completamente pasivas: notifican al usuario cuando su saldo ya quedó en ceros o rechazan cobros por fondos insuficientes, empujándolos a recurrir a préstamos informales con tasas abusivas. Quisimos transformar la app de Banorte: pasar de una interfaz informativa estática a un copiloto financiero empático y proactivo que detecte problemas de liquidez a tiempo y arme soluciones instantáneas para proteger tanto el flujo de efectivo del usuario como la relación con el banco.

Qué hace

Nuestro sistema monitorea continuamente eventos transaccionales para detectar anomalías, como aumentos desmedidos en servicios y cobros que comprometen la mayor parte del saldo disponible. En lugar de enviar una simple notificación de texto, la plataforma genera y ensambla en tiempo real una interfaz contextual usando UI Agéntica (A2UI). Cuando llega un recibo de luz elevado:

• Muestra de inmediato tarjetas de alerta visuales que comparan el cobro actual frente al promedio histórico.
• Propone soluciones financieras personalizadas mediante componentes interactivos, permitiendo al usuario diferir pagos, solicitar un adelanto de nómina o canjear puntos de recompensa.
• El usuario ajusta los términos mediante controles deslizables dinámicos, autoriza con un filtro de confirmación seguro y liquida el pago en dos pasos, protegiendo su liquidez diaria y generando colocación crediticia de bajo riesgo para Banorte.

Cómo lo construimos

Diseñamos una arquitectura orientada a eventos con generación dinámica de interfaces:

• Frontend: Desarrollado en React con un catálogo de componentes modulares (alertas contextuales, comparadores históricos, selectores de soluciones, controles de simulación y recibos de confirmación) capaces de renderizarse al vuelo a partir de estructuras JSON declarativas.
• Backend y Orquestador: Construido con TypeScript, gestionando rutas de API, estados de sesión y el recálculo financiero determinista (garantizando que montos, cuotas e intereses se calculen con precisión matemática y sin alucinaciones).
• IA y Harness del Agente: Un bucle con LLM que evalúa las anomalías detectadas, selecciona los bloques visuales adecuados y emite la estructura declarativa para la interfaz.
• Simulación y Análisis: Desarrollamos un panel de pruebas interactivo y scripts en Python para inyectar eventos sintéticos y validar el flujo completo de usuario en escenarios reales.

Retos que enfrentamos

• Lógica determinista vs. Flexibilidad generativa: Separar la creatividad del modelo para estructurar la interfaz de la precisión requerida en cálculos bancarios. Lo resolvimos delegando al LLM únicamente la selección y jerarquía visual, mientras que las operaciones monetarias y los valores interactivos se recalculan de forma estricta en el backend de TypeScript.
• Sincronización de estado: Lograr que la interfaz responda al instante cuando el usuario mueve controles deslizables o activa opciones sin necesidad de consultar a la IA en cada microinteracción.
• Estandarización de componentes: Definir un esquema estructurado estricto para los componentes visuales que el modelo respete con consistencia, evitando errores de renderizado en React.

Logros de los que estamos orgullosos

• Implementar un pipeline funcional de UI agéntica donde el modelo de lenguaje genera interfaces interactivas vivas en lugar de limitarse a respuestas de texto plano o chatbots tradicionales.
• Construir un panel de control interactivo que demuestra la reacción inmediata de la app ante eventos simulados de cobro excesivo.
• Consolidar un modelo ganar-ganar tangible: prevención de endeudamiento usurero para usuarios vulnerables combinada con colocación ágil y de bajo riesgo para Banorte.

Qué aprendimos

• En momentos de estrés financiero, una interfaz visual interactiva es infinitamente más útil que un chatbot conversacional: el usuario necesita comparar opciones, mover controles y ver números claros, no leer párrafos largos.
• Diseñar interfaces generativas para la banca exige límites claros: la IA debe encargarse de la empatía y la composición contextual, mientras que el backend debe mantener el control absoluto sobre la ejecución transaccional.

Qué sigue para Banorte-Vanguard

• Motor de detección de alta precisión: Evolucionar las reglas del motor para que la identificación de anomalías sea mucho más acertada y rigurosa, analizando patrones de gasto estacionales, dispersión de ingresos y umbrales dinámicos para evitar falsos positivos antes de activar el agente.
• Conexión al Core Bancario: Pasar de eventos simulados a flujos en vivo mediante webhooks y banca abierta.
• Catálogo de soluciones a la medida: Pasar de un par de soluciones a el conjunto completo del banco, brindando al cliente la suya a la medida.
• Gestión multievento: Ampliar el catálogo de componentes para atender escenarios combinados en una sola pantalla (anualidades de tarjetas, cobros domiciliados simultáneos y retrasos de nómina).
• Prevención predictiva: Incorporar modelos de proyección de flujo de caja para anticipar problemas de liquidez y ofrecer soluciones de rebalanceo antes de que los recibos o cobros automáticos impacten la cuenta.

Built With

• a2ui
• agent
• fastify
• gemini
• javascript
• llm
• mcp
• panda
• python
• react
• render
• tailwind
• typescript
• vite