Ban-AI

Inspiration

Nosotros siendo estudiantes de tecnologías computacionales es muy común que nos topemos con interfaces o aplicaciones completas que simplemente desearíamos que funcionaran mejor, y con el avance de tecnologías generativas creemos que existe una oportunidad grande de crear una interfaz que acompañe a los usuarios de una manera sencilla e intuitiva.

What it does

BanAI es una plataforma bancaria generativa que utiliza A2UI (Agent to UI). Remplaza la forma estática y tradicional de navegar a través de una aplicación bancaria, los usuario tienen la capacidad de escribir o dictar sus necesidades financieras ("Quiero pagar menos interés en mi tarjeta" o "Transferir 500 pesos a un contacto"). En lugar de responder con texto, BanAI utiliza Gemini como motor para generar y adaptar la interfaz de usuario en tiempo real. Interpreta la intención, consulta la lógica de negocio real a través de un servidor del Protocolo de Contexto de Modelo (MCP) y envía componentes declarativos de la interfaz de usuario (como tarjetas de saldo, tablas de amortización o formularios de confirmación de transferencias) al usuario. De este modo, se crea una interacción fluida y de bucle cerrado en la que la IA genera la interfaz de usuario y gestiona la lógica de fondo de forma simultánea.

How we built it

La arquitectura se parte en tres áreas:

El frontend construido en React Native utilizando expo: Se hizo una app móvil simulando la app de Banorte con un menú de inicio de sesión, una sección de "Inicio", donde se encuentra el balance, crédito y movimientos, otra sección de "Chat" donde se encuentra el canvas del A2UI donde los componentes de React generados por la IA son mostrados, y una sección de estádisticas. Cada función es actualizada en tiempo real.
Server de backend con Node.js y Express: Maneja las conexiones de WebSocket, eventos enrutados, y conecta la API de Gemini.
Server de MCP: Actúa como la única fuente de información fiable para la lógica de negocio y se conecta directamente a nuestra base de datos MongoDB Atlas para realizar operaciones CRUD en cuentas de usuario, contactos y transacciones.

Challenges we ran into

Uno de nuestros principales retos fue hacer que el LLM pasara de ser un asistente conversacional a un arquitecto de interfaz de usuario. Tuvimos que indicar a Gemini que dejara de ofrecer explicaciones en texto sin formato y que generara exclusivamente cargas útiles JSON A2UI analizables.

Otro reto importante fue mantener la integridad transaccional ya que teníamos que asegurarnos de que la IA no pudiera alucinar ni ejecutar transferencias directamente, por esto, creamos un estricto paso de validación en bucle cerrado en el que la IA debe generar un componente de interfaz de usuario «transfer_form» para que el usuario pueda confirmar explícitamente la acción. Por último, acoplar el servidor MCP a través de stdio, al tiempo que se mantenía la comunicación WebSocket en tiempo real para el frontend, requirió una gestión cuidadosa del estado y un manejo asíncrono de los eventos.

La creación del panel de administrador, y principalmente para visualizar los ratings y los UI's generados con cierto promt de los usuarios.

Logros de los que nos sentimos orgullosos

Hemos sustituido con éxito la navegación estática de la aplicación por una interfaz de usuario generativa. También nos enorgullece haber logrado una arquitectura totalmente desacoplada en la que el LLM solo interactúa con la lógica de negocio a través de un servidor estándar del Protocolo de Contexto de Modelo (MCP). Ver cómo la aplicación renderiza al instante un componente nativo de la interfaz de usuario de React para reestructurar la información según las necesidades del usuario a partir de una simple indicación de voz fue un momento mágico para el equipo. Ver funcionar correctamente nuestra implementación de MongoDB Atlas y ElevenLabs

Lo que hemos aprendido

Hemos aprendido cómo funcionan los MCP, por qué son esenciales y cómo crear herramientas MCP. También hemos aprendido a aprovechar la función «Function Calling» de Gemini para garantizar salidas JSON estructuradas, convirtiendo de hecho un LLM en un motor de renderizado front-end. Tecnologías como MongoDB y ElevenLabs