About the project
Inspiración
Nos inspiramos en la necesidad de transformar la experiencia bancaria digital. Observamos que los asistentes virtuales tradicionales solo responden con texto, obligando a los usuarios a interpretar información compleja y navegar entre múltiples pantallas para realizar acciones.
Quisimos demostrar que la IA generativa puede ir más allá de las respuestas textuales: puede construir interfaces completas y funcionales que se adapten en tiempo real a la intención del usuario.
Qué aprendimos
Durante el desarrollo aprendimos a integrar modelos de lenguaje (LLM) como núcleo central de la experiencia, no como un chat secundario.
Descubrimos técnicas avanzadas de prompt engineering para controlar la generación de interfaces, implementamos el Model Context Protocol (MCP) para conectar el LLM con datos y acciones reales, y trabajamos con A2UI (Agent-to-UI) para transmitir interfaces dinámicas.
También aprendimos sobre la importancia de las salvaguardas en IA financiera para evitar la mención de competidores y garantizar contenido exclusivo de Banorte.
Cómo lo construimos
Desarrollamos una arquitectura de tres capas:
LLM Central: utilizamos el modelo DeepSeek-V4-Pro-0813 de NVIDIA AI API como cerebro que interpreta la intención del usuario y decide qué componentes generar.
MCP (Model Context Protocol): construimos un servidor que expone al modelo los datos bancarios —cuentas, movimientos, presupuestos, inversiones, créditos y seguros—, además de herramientas de análisis y acciones ejecutables mediante operaciones CRUD.
A2UI: implementamos un protocolo para describir y transmitir la interfaz que el agente genera, soportando componentes como cards, tablas, formularios, gráficos, timelines y acordeones.
El backend fue construido con Node.js y Express, utilizando Sequelize para la gestión de MySQL.
El frontend utiliza JavaScript vanilla y CSS3 para ofrecer un diseño responsive.
Cada interacción con la UI generada regresa al agente como contexto, creando un ciclo continuo de adaptación.
Retos que enfrentamos
El principal desafío fue lograr que el LLM generara interfaces funcionales, no solo visuales. Tuvimos que iterar muchas veces en el prompt del sistema para asegurar que:
- Nunca mencionara bancos competidores como BBVA, Santander, Citibanamex, entre otros.
- Generara código HTML/CSS válido y renderizable.
- Incluyera
action IDscorrectos para permitir la interactividad. - Adaptara los componentes según la intención financiera detectada.
Otro reto fue sincronizar el estado entre el chat, la vista previa y las acciones del usuario, asegurando que cada interacción actualizara coherentemente toda la interfaz.
También enfrentamos dificultades al optimizar los tiempos de respuesta de la IA mientras manteníamos la calidad de las interfaces generadas.
Finalmente, implementar las salvaguardas para mantener contenido exclusivo de Banorte requirió un diseño cuidadoso del prompt y validaciones adicionales en el backend.
Built With
- deepseek-v4-pro
- express.js
- html5
- mysql
- node.js
- nvidia-ai-api
- sequelize
- vanilla-javascript