mAIa | Devpost

Inspiration

Traditional mobile banking apps are rigid. Users often have to navigate through multiple nested menus just to find a balance, calculate loan options, or understand where their money went. On the other hand, traditional banking chatbots usually fail because they dump long paragraphs of numbers that are hard to read and impossible to act on.

We wanted to rethink this dynamic. Instead of building another basic text bot, we set out to build an interactive copilot that combines conversational AI with Generative UI (A2UI). The goal was simple: let users ask questions in natural language and receive interactive, visual financial tools built on the fly using their own banking data.

What it does Maya (mAIa) is a conversational banking copilot built for Banorte's. Instead of returning plain text replies, it analyzes the user's intent and dynamically emits interactive React components (A2UI) directly in the conversation stream.

Key capabilities include:

Visual financial analytics: Generates dynamic Sankey diagrams for cash flow tracking, daily spending heatmaps, category donut charts, and a 360-degree financial health score. Debt restructuring and relief: Analyzes credit card debt under Banorte's 64.8% CAT, calculates three fixed-rate relief plans (12, 24, and 36 months with interest reductions up to 55%), and generates official agreement folios with cryptographic digital seals. Interactive investment simulation: Provides real-time sliders to calculate guaranteed returns for Pagaré Banorte at an 11.25% annual fixed rate across flexible terms. Cross-device cloud projection: Power users that would like more control over their experience can create fully customizable dashboards by chatting with Maya on their smartphone can say "Send this chart to my dashboard" or tap a button to project widgets directly onto their desktop monitor in real time via cloud Server-Sent Events.

How we built it

We designed the project around a four-layer architecture that separates client presentation, orchestration, model reasoning, and core banking data:

Core Banking Layer (FastMCP): We built a relational SQL database modeling customer profiles, accounts, revolving credit limits, and audited transactions. To connect this to our AI safely, we implemented the FastMCP (Model Context Protocol) standard. The language model never has raw SQL access; it can only execute strictly typed, schema-validated banking tools. Orchestration Layer: Built with FastAPI in Python, powered by Google Gemini 3.7 Flash via the official Google GenAI SDK. The orchestrator injects customer cognitive memory and verified identity into the prompt, manages the multi-turn function calling loop, and routes requests between mobile and desktop surfaces. Presentation and A2UI Layer: Built with React 18, Vite, TypeScript, and Tailwind CSS. We implemented an A2UI dynamic component registry that takes JSON payloads streamed from the backend and hydrates them into interactive React cards. It supports two interfaces: a touch-first Banorte Móvil PWA with Service Worker offline capabilities, and a multi-widget desktop Command Center for power users. Security and Regulatory Guardrails: Built to adhere to Mexican banking regulations (Banco de México Circular 14/2017). The orchestrator rejects plain-text authorizations like "yes, transfer the money" and enforces explicit confirmation through interactive 2FA Token Móvil buttons. Additionally, all chat logs pass through PCI-DSS regex sanitizers that mask 16-digit card numbers and 18-digit CLABEs before writing to SQLite.

Challenges we ran into

Closing the Human-in-the-Loop interaction loop: Working with the A2UI specification required handling not just one-way component rendering, but capturing user clicks and form submissions inside those widgets (such as selecting a 24-month restructuring plan) and feeding that context back into the orchestrator without desynchronizing the conversation state. Balancing conversational flexibility with banking security: Preventing prompt injections and ensuring the AI never executed unauthorized money transfers was critical. We had to build deterministic guardrails that separate read-only financial queries from transactional write operations. Real-time cross-device synchronization: Getting widgets to jump from a mobile phone to a desktop dashboard with minimal latency required setting up an asynchronous SSE event broadcaster in FastAPI that manages client queues per user.

Accomplishments we're proud of

A real transactional core: Unlike concepts that rely on static mockups, our backend executes atomic database transactions (BEGIN TRANSACTION), updates ledger balances, creates audited transaction records, and outputs real Banxico CEP tracking codes. Dual-surface architecture: Bridging mobile banking and desktop monitoring through live cloud projection, letting users analyze complex graphs on large screens while chatting on their phone. Fail-safe reliability: We engineered a smart deterministic simulator fallback. If upstream AI quotas hit rate limits or event venue Wi-Fi becomes unstable, the system seamlessly continues running all financial tools, math calculations, and A2UI renders locally. FastMCP telemetry inspector: Built an in-app drawer that lets technical evaluators inspect live tool names, arguments, execution status, and millisecond latency.

What we learned

AI in banking demands strict protocol boundaries: Giving an LLM direct database access is dangerous. Decoupling data access through FastMCP tool contracts proved essential for maintaining predictable, safe banking logic. Generative UI outperforms text for financial decisions: When presenting complex debt amortization tables or investment yields, interactive sliders and visual graphs reduce cognitive load far better than paragraphs of text. State management across surfaces: Implementing multi-device synchronization taught us how to design clean event streams without overcomplicating backend infrastructure.

What's next for Maya

Production sandbox integration: Connecting our FastMCP layer to Banorte's real sandbox APIs for live account authentication and SPEI clearing. Proactive fee-prevention alerts: Running background monitors that track average daily balances and monthly debit card purchase counts, alerting users before monthly account maintenance fees get charged. Bidirectional voice streaming: Upgrading the mobile PWA with low-latency audio streaming using the Gemini Live API for hands-free financial consultations.