Banky

Banky is your personal financial coach. Connect your Banorte account to discover a smarter way to manage your finances.

Comment

Inspiration

We were inspired by Banorte’s vision of being an accessible, ever-present ally that genuinely guides its users. Digital banking can often feel intimidating for newcomers, so we set out to bridge that gap by transforming customer support from a reactive tool into a dependable, proactive 24/7 companion that builds confidence from day one.

What it does

Banky is an empathetic financial onboarding assistant designed to make digital banking approachable. Unlike traditional chatbots or assistants like Maya, which can feel rigid and transactional, Banky guides new users through the Banorte ecosystem in a clear, engaging, and conversational way. It simplifies complex banking actions into intuitive, step-by-step conversations, eliminating friction and making every user feel right at home.

How we built it

Developed with the assistance of Claude Code, Banky runs on an event-driven architecture powered by a FastAPI (Python 3.11, uv) backend and a React 18 + TypeScript frontend bundled with Vite. Its core innovation is an Autonomous Agent UI (A2UI) pipeline: rather than returning static text, the system streams typed JSON envelopes over a persistent, auto-reconnecting WebSocket to dynamically mount interactive components and tree-shaken Apache ECharts directly onto a custom "liquid glass" interface styled with vanilla CSS tokens. Financial calculations are decoupled into Model Context Protocol (MCP) tools powered by swappable LLMs (Claude and Gemini), with the entire production environment containerized via Docker, automated with a Makefile, and deployed on Railway.

Challenges we ran into

Our biggest hurdle was coordinating a decentralized, multi-branch workflow across separate repositories under tight hackathon deadlines. Developing the reactive generative frontend and the MCP-driven backend in parallel created friction when synchronizing the real-time WebSocket event schemas. Resolving integration conflicts and ensuring seamless data hydration between streaming backend envelopes and client-side UI components required extensive debugging before achieving end-to-end stability.

Accomplishments that we're proud of

We engineered a unique integration harness directly with the Claude Code CLI alongside standard APIs, unlocking rapid agentic development without conventional API rate friction. We are especially proud of Banky’s polished branding and "liquid glass" visual identity, client-side session persistence, and our modular architecture. Decoupling the project into parallel workstreams—MCP financial tool implementation on the backend and dynamic A2UI component rendering on the frontend—allowed us to build a complex, fully functional agent interface in record time.

What we learned

Beyond full-stack refinement, this project deepened our understanding of Generative UI (A2UI) architectures and real-time state management via persistent WebSockets. We mastered advanced prompt orchestration using Claude Code, learned how to model deterministic financial calculations through the Model Context Protocol (MCP), and discovered how thoughtful UI/UX design can make intimidating banking concepts genuinely intuitive.

What's next for Banky

Next on our roadmap is embedding Banky directly into Banorte’s native mobile application as an interactive in-app copilot. We plan to upgrade our client-side storage to secure, server-side encrypted persistent memory, and expand Banky’s MCP toolkit to support live open-banking APIs, automated micro-savings, and proactive financial health alerts.

Built With

Share this project:

Updates