Build a RAG Personal Finance Application with Nuclia, KendoReact and Next.js

This is a submission for the KendoReact Free Components Challenge.

What I Built

I built SparrowStash, a personal finance dashboard that goes beyond simple expense tracking by integrating a Retrieval-Augmented Generation (RAG) system for financial advice. The app is a simple, modern solution for anyone who wants to manage their money better and get intelligent, contextual advice. The core problem it solves is turning raw financial data into actionable insights, helping users understand their spending habits while also providing expert guidance from a trusted knowledge base.

SparrowStash is built on a robust and modern stack, combining the power of Next.js for the application framework, KendoReact for a professional and feature-rich UI, Supabase for secure backend services, and Nuclia for its powerful RAG capabilities.

Demo

Here is a live demo of the project and some screenshots showing the key features:

• Live Project: Sparrow Stash
• Code Repository: https://github.com/anjaydo/sparrow-stash

A look at the main dashboard showing income, expenses, and a pie chart of spending categories.

The AI advisor in action, providing advice based on a user's question.

KendoReact Components Used

SparrowStash showcases the power and flexibility of KendoReact with the following components:

1. Grid: Used for displaying a list of all user transactions with columns for date, amount, category, and type.
2. Chart: Renders a visually appealing pie chart to represent the distribution of expenses by category.
3. Form: The foundation for all user input, including the login/signup and transaction forms.
4. Button: Used for various user interactions, such as submitting forms, navigating between pages, and triggering the AI advisor.
5. Input: A standard text input field used for email, password, and transaction descriptions.
6. NumericTextBox: A specialized input for entering numerical values like transaction amounts.
7. DropDownList: Provides a clean interface for selecting transaction categories and types.
8. Dialog: A modal component used to display important messages or confirm actions, providing a better user experience than native alerts.
9. TextArea: The primary input field for users to type their questions for the AI advisor.
10. Notification: Provides unobtrusive feedback to the user, such as "Transaction added successfully" or "Login failed."
11. ChartTitle: Used to give a descriptive title to the expense distribution chart.
12. ChartSeries & ChartSeriesItem: The core components for defining the data and type of the chart.
13. ChartLegend & ChartTooltip: Enhances the chart's readability and interactivity.

AI Coding Assistant Usage

I leveraged the KendoReact AI Coding Assistant to accelerate the development process. This allowed me to focus on the core business logic and API integrations, demonstrating how AI can help developers work more efficiently.

Nuclia Integration

I integrated Nuclia's Agentic RAG capabilities to power the AI financial advisor. The process involved:

• Knowledge Base: A knowledge box in Nuclia was created and populated with a curated collection of financial articles and advice.
• API Integration: The Next.js application communicates with the Nuclia API via the @nuclia/core SDK. When a user enters a question, the app sends it to Nuclia.
• Contextual Generation: Nuclia's RAG system retrieves the most relevant information from the knowledge base and uses it as context to generate a precise, factual, and helpful response for the user. This ensures the advice is accurate and grounded in real-world financial principles.

This integration not only makes SparrowStash a smarter application but also provides a clear example of how to build a powerful, context-aware AI feature using modern, dedicated RAG services.