Building Floww: The AI-Native Financial Engine (A Vibe Coding Journey)

Sreedev Rajendran — Mon, 06 Jul 2026 15:24:03 +0000

I was getting really frustrated with typing in my coffee expenses manually back in 2026. That was the exact moment when Floww was born.

Floww is not just another budgeting app — it is a financial engine that turns your messy, real-world financial data (crumpled receipts, complex bank statements, Gmail transactions) into structured, actionable intelligence. You can see the full project breakdown on my projects page.

This blog dives into how I built Floww, the unique experience of vibe coding alongside AI, and what makes it fundamentally different from every other finance app on the market.

The Vision: Moving Beyond Simple Expense Trackers
Most expense trackers are glorified spreadsheets. They let you do basic CRUD operations, but you end up spending more time entering data than understanding your financial health. With Floww, I wanted to flip the script — the AI handles the data entry, you make the decisions.

What makes Floww fundamentally different?

Universal Document Intelligence: Floww doesn't just read simple receipts. Using Google Gemini 2.5 Flash's multi-modal capabilities, it understands itemized grocery bills, detailed salary slips, and multi-page bank statements.

Agent Floww: An RAG-powered in-app chatbot — ask "How much did I spend on Swiggy compared to last month?" and get a precise answer without digging through charts.
Context-Aware Styling: Floww automatically suggests icons and colors based on merchant name and note context — zero manual categorization.

Privacy-First Premium Feel: "Privacy Mode" instantly masks all currency values with one tap — built for public spaces.

The Tech Stack (The "Vibe Coding" Way)

Floww is engineered on a fully modern, type-safe stack built for speed and scale:

Framework: Next.js 15 — App Router with React Server Components

API Layer: tRPC — end-to-end type-safe APIs without REST boilerplate

Database: PostgreSQL + Prisma ORM

AI Engine: Google Gemini 2.5 Flash API — multi-modal OCR + RAG agent

Auth: Firebase Auth + Gmail API (OAuth 2.0 for transaction sync)

Styling: Tailwind CSS + Framer Motion

Deployment: Netlify — CI/CD from GitHub

The "Vibe Coding" Experience
Building Floww wasn't a traditional development process. I leaned heavily on AI-assisted coding — describing intent and "vibe" rather than writing boilerplate. This is what the vibe coding movement is about: AI handles the scaffolding, humans handle the thinking.

"Give me a dashboard that feels like a premium iOS app, but with a web-first soul."

"Build a document processor that can distinguish between a grocery bill and a bank statement without me writing a single regex."
The AI handled the boilerplate while I focused on the hard parts: Agent Floww's prompt engineering and the multi-modal OCR pipeline. This let me go from an empty folder to a production-ready financial engine in a fraction of the traditional time.

Deep Dive: How the Core Features Were Built

The Multi-Modal OCR Pipeline The core of Floww is its multi-modal document understanding pipeline built on Gemini 2.5 Flash. The model acts as both a Classifier (what kind of document is this?) and an Extractor (pull structured data from it).

aiRouter.ts — Gemini Classifier Prompt
// Document classifier + extractor using Gemini 2.5 Flash inlineData
const prompt = `Analyze this document carefully. Determine if it is:

ITEMIZED BILL (Line items with quantities)
EXPENSE (Single receipt)
INCOME (Salary slip)
BANK STATEMENT (Multiple transactions)

Return JSON with specific schemas for each type...`;

// Base64 image piped directly into Gemini inlineData
const result = await model.generateContent([
{ inlineData: { mimeType: "image/jpeg", data: base64Image } },
{ text: prompt }
]);
By using Gemini's inlineData capability, I pipe Base64 images directly into the model. Gemini doesn't just read raw text — it understands spatial layout, letting it extract line items from complex documents with high accuracy.

Agent Floww — The RAG-Powered Finance Assistant Agent Floww is an In-App RAG (Retrieval-Augmented Generation) chatbot, not a simple LLM wrapper. When you ask a question, the server dynamically fetches your monthly expenses, incomes, and budgets from Prisma/PostgreSQL and injects this live data as "Financial Context" into the system prompt — guaranteeing hyper-personalized, accurate answers.

This is how Agent Floww knows your exact Swiggy spend from last month without you having to filter a single chart. The financial data becomes the retrieval corpus; Gemini does the reasoning.

Gmail Sync — Auto-Logging Transactions
One of the most powerful (and underrated) features: Floww connects to your Gmail via OAuth 2.0 and scans for transactional emails (payment confirmations, order receipts, bank alerts). It automatically extracts and logs those as expenses — zero manual entry.
The Finance Health Score
Floww calculates a real-time Finance Health Score based on your income-to-spending ratio, budget adherence, and savings patterns. It's not a static number — it updates every time you add a transaction. Think of it as a credit score, but for daily financial habits.

The Result & What I Learned
Floww represents a massive shift in how software can be built today. By combining vibe coding with a well-chosen modern stack (Next.js 15, tRPC, Gemini API), I shipped a product that a full team would normally take months to build.

Whether you're scanning a coffee receipt or uploading a multi-page bank statement, Floww handles it all with quiet elegance. And this is just the beginning — the RAG agent and OCR pipeline are foundation-level tech that can power far more complex financial tools.

DEV Community: Sreedev Rajendran

Building Floww: The AI-Native Financial Engine (A Vibe Coding Journey)