Educco

Inspiration

Traditional banking applications are rigid, menu-heavy, and reactive. Finding features, making transfers, or understanding personal spending habits requires dozens of taps through complex menus. Worse, most users lack financial literacy because banking apps simply display cold numbers without helping them understand what those numbers mean or how to improve their financial health.

We created Educco to reimagine online banking for Banorte. We wanted to transform mobile banking from a static administrative utility into an interactive, generative, and educational financial companion that listens to what users need, autocompletes actions using their real financial context, and synthesizes dynamic educational interfaces on the fly.

What it does

Educco is an AI-driven Generative Banking & Financial Literacy platform built using Google’s Gemini.

Key features include:

Contextual Action Prefill: Instead of blank forms, natural language queries prefill exact user data (e.g., "Pagar mi tarjeta" prefills the statement cutoff balance of $1,420.00 MXN; "Transferir a Frida" prefills her registered Banorte CLABE; "Pagar CFE" prefills the 12-digit reference number and bill amount).
Dynamic Multi-Dimensional Charts: Generates customized visual analytics using Shadcn and Recharts (PieChart, BarChart, AreaChart, LineChart, StatCard) for any slice or dimension requested by the user—whether asking for "compras por día de la semana", "mis compras de los últimos 3 días", or "mis 3 mayores gastos".
Generative Financial Literacy Engine: When users ask for advice ("¿cómo puedo ahorrar más?", "explícame el interés de mi tarjeta"), Educco analyzes their real spending habits and synthesizes custom educational UI surfaces:
- InsightCard: Explains key financial concepts (e.g., the 50/30/20 budgeting rule) with actionable takeaways.
- ProgressMetric: Visual progress bars tracking category spending against recommended budget limits.
- ComparisonTable: Side-by-side scenarios (e.g., Paying Minimum vs. Full Statement Balance at 0% interest).
- ScenarioSim: Interactive yield simulators comparing static debit balances vs. automated high-yield savings vaults (11.5% APY).

How we built it

AI Engine & Protocol: Google Gemini 2.5 Flash via @google/genai SDK using structured JSON schema response MIME types, custom system instructions, and deterministic fallback engines.
UI Architecture (A2UI Protocol): Real-time Agent-to-UI (A2UI) declarative JSON streaming protocol delivering UI component trees to the browser via Server-Sent Events (SSE).
Frontend Stack: Built with React 19, Vite, TypeScript, TailwindCSS, Banorte dark mode design tokens, Lucide React icons, and Recharts styled with Shadcn aesthetic tokens.
Backend & Tooling: Node.js/TypeScript MCP Server providing mock user profiles, contacts, pending bills, multi-dimensional transaction history, and API routes (/api/a2ui/stream, /api/user/*).
Package Management & Monorepo: Built using bun across monorepo workspace packages (@hack26/shared, @hack26/mcp-server, @hack26/web).

Challenges we ran into

Streaming Valid Declarative UI Trees: Ensuring that partial JSON chunks streamed from Gemini 2.5 Flash reliably reconstruct valid React component trees without breaking client-side rendering.
Flexible Multi-Dimensional Aggregation: Prompting the AI model to dynamically slice and aggregate transaction history along arbitrary user dimensions (e.g., last 3 days, top N transactions, days of the week) rather than falling back to static templates.
Container Component Fallbacks: Designing the frontend renderer (A2UIRenderer.tsx) so that any wrapper component emitted by the model (Container, Form, Card, Box, div) gracefully renders all nested child component trees. 4 Sub-Second Streaming UI Latency: Delivering initial UI surface chunks to the browser in under 1 second using Gemini 2.5 Flash and SSE.

Accomplishments that we're proud of

Pioneering Generative UI in FinTech: Merging transactional banking (SPEI transfers, credit card payments, bill pay) with dynamic visual charts and interactive financial education into a single unified stream.
Personalized Financial Coaching: Successfully analyzing real user habits (e.g., detecting that restaurants & supermarkets represent 65% of monthly spend and peak on Thursdays) to auto-generate personalized advice.

What we learned

How transformative the Agent-to-UI (A2UI) protocol is when paired with fast LLMs like Gemini 2.5 Flash, moving far beyond plain-text chatbots into rich, actionable component trees.
The power of modular UI component primitives (InsightCard, ProgressMetric, ComparisonTable, ScenarioSim, StatCard, BarChart, PieChart) that can be dynamically assembled on demand.
How generative AI can bridge the financial literacy gap by turning abstract financial data into visual, easy-to-understand educational experiences.

What's next for Educco

Voice-First Financial Copilot: Integrating real-time voice streaming for hands-free generative banking interactions.
One-Click Automated Savings Triggers: Allowing users to trigger automated deposits into Banorte high-yield vaults directly from ScenarioSim recommendations.
Open Banking API Live Integration: Connecting with Banorte’s Open Banking sandbox APIs to execute live SPEI transfers and retrieve real-time credit bureau reports.