Inspiration
El track Banorte challenge plantea algo muy concreto: que el modelo no solo conteste con un muro de texto, sino que construya la pantalla que resuelve el problema. Nos quedamos pensando en algo que todos hemos vivido: abrir la app del banco, ver una lista larga de movimientos, y no tener ni idea de en qué se nos fue el dinero, y mucho menos poder hacer algo al respecto ahí mismo. Quisimos resolver exactamente eso: una sola caja de texto donde preguntas lo que te preocupa de tus finanzas, y la interfaz que aparece no es genérica, es la que responde a esa pregunta específica, y si hay algo que se puede accionar (como ponerte un límite), lo puedes hacer ahí mismo, sin salir a otra pantalla.
What it does
Banca Fácil es un asistente financiero de una sola caja de texto. Escribes tu pregunta y un agente (Gemini) decide qué necesitas y arma la pantalla correspondiente:
- "¿En qué gasté más este mes?" → desglose por categoría, con pastel, barras o tabla según qué tan repartido esté el gasto, y drill-down a las transacciones exactas.
- "¿Cómo voy este mes?" → diagnóstico con nivel de riesgo, comparación contra el periodo anterior, y una interpretación personalizada de tu pregunta.
- "¿Qué pagos tengo próximos?" → cargos recurrentes detectados (suscripciones, servicios) con fecha y monto proyectado.
- Cualquier otra cosa → un mensaje de que está fuera de su alcance, con sugerencias de qué sí puede responder.
Y la pieza que cierra el ciclo: si el agente detecta que una categoría domina tu gasto, ofrece un botón para crear un límite ahí mismo. Lo pulsas, el agente ejecuta la acción de verdad (queda guardado, no es un mensaje bonito) y te regresa una pantalla nueva confirmándolo y la próxima vez que preguntes cómo vas, ese límite ya es parte del diagnóstico. También puedes quitarlo cuando quieras, desde la misma pantalla de diagnóstico.
How we built it
- Backend: Python + FastAPI. Gemini decide la intención y la interfaz con salidas JSON estructuradas (nunca texto libre que el modelo podría alucinar en un formato roto).
- MCP: un servidor propio (SDK oficial,
FastMCP) que expone las herramientas de datos y acciones; el agente nunca toca una transacción directamente, todo pasa por ahí. - Protocolo de UI: un envelope propio tipo A2UI (
{intent, components, suggested_prompts}) con un catálogo cerrado de componentes; pastel, barras, tabla, lista de transacciones, indicador de riesgo, progreso, badge, botón de acción. - Frontend: React + Vite + TypeScript, gráficas hechas a mano con SVG (sin librería de charts), validación estricta de cada componente antes de pintarlo.
- Clasificación de gasto por capas: diccionario de comercios conocidos → palabras genéricas → caché → batch a Gemini solo para lo que de verdad lo necesita → "Otros" como red de seguridad. Esto mantiene el costo y la latencia bajos sin sacrificar cobertura.
- Datos sintéticos, generados por el equipo y aislados en un solo módulo, listos para conectarse a una fuente real sin tocar el resto del sistema.
Challenges we ran into
- La cuota gratuita de Gemini (20 solicitudes/día por proyecto) nos obligó a diseñar todo pensando en el costo: router + decisión de UI en el menor número de llamadas posible, y rotación de API keys ante un 429.
- El pastel siempre ganaba. Notamos que casi cualquier periodo mostraba la misma gráfica. Resultó que no era un bug del modelo — nuestros datos sintéticos tenían una categoría (Compras) con montos mucho más altos que las demás, así que "una categoría domina" casi siempre era cierto. Lo arreglamos con un criterio numérico explícito en vez de dejarlo a criterio libre del LLM.
- Un detalle de MCP que nos costó una tarde: un
dictde vuelta se serializa en un solo bloque de contenido, pero unalistaen el nivel superior se parte en un bloque por elemento — y ninguno si está vacía. Nos tumbó una consulta completa hasta que lo diagnosticamos. - Fusionar trabajo en paralelo. Dos integrantes del equipo modificamos las mismas funciones del agente la misma noche, uno agregando retroalimentación de la pregunta del usuario al LLM, otro afinando la lógica de gráficas y límites. Tocó combinar ambos cambios a mano en el mismo prompt, no simplemente escoger uno.
- El modelo no siempre interpreta fechas igual. La misma pregunta, mandada varias veces, a veces resolvía bien un mes específico y a veces no, nos enseñó a no confiarle al LLM nada que se pueda validar con código determinista.
Accomplishments that we're proud of
- Cerramos de verdad la regla más fácil de fingir en este tipo de retos: la acción no es un botón decorativo, modifica estado real, persiste en disco, y cambia lo que el agente responde después.
- 66 pruebas automatizadas de backend y 9 de frontend, todas verdes, y verificamos la app completa corriendo en un navegador real contra Gemini en vivo, no solo "pasan los tests".
- Blindamos el sistema contra fallas reales de una demo en vivo: reintentos ante 503, timeouts duros, degradación elegante si el modelo responde algo que no se puede interpretar, y escritura atómica para que un proceso interrumpido nunca corrompa el estado guardado.
- Encontramos y resolvimos un conflicto de fusión real entre el trabajo de dos personas sobre el mismo archivo, sin perder ninguna de las dos features.
What we learned
Que restringir la libertad de un LLM no lo hace menos "inteligente", lo hace confiable. La parte más frágil de nuestro sistema nunca fue donde el modelo tenía menos opciones (qué intención, qué gráfica), fue donde asumimos que interpretaría algo perfectamente sin verificarlo (fechas, formato de respuesta). Aprendimos a dejarle al LLM las decisiones que requieren juicio (¿qué me está preguntando esta persona?) y a Python las que requieren precisión (aritmética de fechas, umbrales de negocio, validación de acciones).
What's next for Banca Fácil
- Conectar una fuente de datos real (Open Finance vía Belvo o Finerio) — la capa de datos ya quedó aislada pensando en este cambio.
- Notificaciones proactivas de verdad (push/email), no solo un aviso que aparece cuando preguntas.
- Memoria conversacional, para que una pregunta de seguimiento no se rutee desde cero.
- Más acciones además de límites de gasto, reestructurar pagos, simular escenarios y extender el mismo esqueleto (router + MCP + A2UI) a los otros territorios del reto: inversiones, crédito y seguros.
Built With
- a2ui
- fastapi
- gemini
- mcp
- python
- react
- typescript
- vite
Log in or sign up for Devpost to join the conversation.