banorte-gen-ui

Inspiration

Traditional banking applications force every customer to navigate the same menus, dashboards, and predefined workflows, even though every financial question is different.

We asked ourselves:

What if the banking interface adapted to the customer's current need instead of forcing the customer to adapt to the interface?

That idea inspired Banorte Gen UI: an experience where AI does more than answer financial questions. It understands the user's intent, securely retrieves the necessary financial data, and generates the most useful interface for that specific situation in real time.

Instead of navigating through multiple screens to find an answer, users simply describe what they want to understand.

What it does

Banorte Gen UI transforms natural-language financial questions into personalized, interactive interfaces.

For example, a user can ask:

“Why did I spend more this month?”

The system analyzes the relevant financial data and dynamically generates the most appropriate combination of:

Metrics
Tables
Charts
Filters
Category comparisons
Supporting transactions
Financial insights

The user can then modify the generated interface conversationally:

“Now show only Entertainment and Restaurants, including the individual transactions behind the change.”

Instead of rebuilding the experience from scratch, the interface updates while preserving its financial data, session state, conversational context, and previous UI revisions.

Users can also interact through voice using ElevenLabs real-time transcription, making financial exploration more natural and accessible.

How we built it

The frontend is built with:

Next.js
React
TypeScript
Zustand
Apache ECharts
Motion
Vercel AI SDK

We created a custom renderer capable of transforming validated UI specifications into components from our financial design system.

The backend uses:

Node.js
TypeScript
Google Gemini
Model Context Protocol (MCP)
Zod
Supabase

Gemini interprets each request, determines which financial information is required, selects the appropriate MCP tools, evaluates their results, and composes a declarative interface.

Our MCP server exposes financial tools and resources for:

Accounts
Balances
Transactions
Category spending
Cash flow
Period comparisons
Unusual transaction analysis
Other financial operations

In total, the system integrates 13 MCP financial tools and resources.

Supabase provides authentication, PostgreSQL storage, RPC functions, and row-level security. Every financial request is associated with an authenticated user, and all data used in the demonstration is completely synthetic.

Safe Generative UI

Instead of allowing the model to execute generated HTML or JavaScript, we designed a typed and validated A2UI-equivalent protocol.

The protocol defines approved:

Layouts
Components
Data bindings
Interactions
Semantic events
Incremental UI patches

This gives Gemini flexibility over what interface should be created without giving it unrestricted control over application code.

The complete generation cycle is:

Intent → MCP tools → Financial data → Generated UI → User interaction → Updated UI

Challenges we ran into

Making the interface genuinely generative

Our first challenge was avoiding the creation of a chatbot attached to a traditional dashboard.

Early versions generated nearly identical dashboards for different questions.

To solve this, we separated financial intent from visual composition. Gemini determines what information matters and how it should be presented using our component system instead of selecting from predefined screens.

Conversational UI editing

Another challenge was maintaining context across interface changes.

For example:

“Remove the chart.”

The system needs to understand which chart the user means and modify the existing interface rather than creating an unrelated new response.

We implemented:

Persistent sessions
UI revisions
Data revisions
Interface snapshots
Semantic events
Incremental patches

This allows the interface to evolve continuously throughout the conversation.

Financial accuracy

A generated interface may look correct while presenting an unsupported financial conclusion.

Because this is a financial application, we introduced deterministic safeguards for cases such as:

Unsupported conclusions
Insufficient anomaly samples
Unequal comparison periods
Hidden category substitutions
Forecasts without disclosed assumptions
Interfaces contradicting explicit user instructions

Gemini handles interpretation and presentation, while deterministic validation ensures that the financial evidence supports the generated result.

Avoiding overly restrictive validation

Some early safeguards were too strict.

For example, when a user requested transactions from Entertainment and Restaurants, two separate tables containing one category each could incorrectly fail validation because each table individually did not contain both categories.

We changed the validator to reason about the complete interface composition rather than isolated components.

This allowed flexible layouts while still rejecting interfaces containing missing, unsupported, or additional categories.

Reducing generation latency

Originally, users had to wait for the entire reasoning and UI generation process before seeing anything useful.

We redesigned the rendering pipeline to progressively stream a data-bound interface while Gemini continues refining the final result.

This reduced the median time to first useful interface from:

$$ 12.76\text{ seconds} \rightarrow 3.75\text{ seconds} $$

representing a:

$$ \frac{12.76 - 3.75}{12.76}\times100 \approx \mathbf{70.6\%} $$

improvement.

Accomplishments that we're proud of

Built a closed-loop generative UI system, rather than a chatbot beside a fixed dashboard.
Integrated Gemini with 13 MCP financial tools and resources.
Created a safe, typed A2UI-equivalent protocol.
Enabled conversational modification of generated interfaces.
Implemented incremental UI and data patches.
Preserved sessions and previous interface revisions.
Protected user data using Supabase Auth and Row Level Security.
Integrated real-time voice transcription with ElevenLabs.
Added recovery mechanisms for invalid UI, interrupted streams, partial data, and revision conflicts.
Reduced median time to first useful UI from 12.76 seconds to 3.75 seconds.
Achieved a 70.6% performance improvement.
Completed 15 out of 15 optimized performance runs without UI or data-patch errors.
Used exclusively synthetic financial data throughout the project.