FinInclusion Intel AI

FinInclusion Intel AI is a strategic market intelligence console for Mind Matters, a voice-first financial inclusion concept for rural and underbanked India. The app helps product managers, founders, and strategy teams pressure-test product direction through AI-generated research frameworks, grounded market analysis, persona simulation, competitive mapping, and board-ready report generation.

The product thesis is simple: rural users do not only need another payments app. They need a trusted, low-friction path from account access to wealth creation. FinInclusion Intel AI explores that thesis through the "Dak Khana" trust anchor, a single "Hero Button" voice interface, Smart Spend nudges, Future Planner savings flows, and an AI-assisted strategic research workflow.

Table of Contents

• Why This Project Matters
• Product Capabilities
• Project Layout
• Tech Stack
• Auth and Login Flow
• Roles and RBAC
• Application State
• Pages
• Components
• Canvas System
• NLP and AI Routing
• Hooks and Utilities
• Run Locally
• Known Limitations
• Interview Talking Points

Why This Project Matters

This project is designed as a product strategy and AI prototyping artifact. It demonstrates how a builder can translate an inclusion-focused fintech idea into a working intelligence interface that supports product discovery, market sizing, competitive analysis, risk mapping, and executive storytelling.

For product manager and builder interviews, the project highlights:

• Problem framing: financial inclusion is treated as a trust, interface, literacy, and behavior-change problem, not only a banking-access problem.
• User empathy: the prompts center farmers, rural shopkeepers, gig workers, daily wage earners, and people who trust government-backed institutions but may fear private financial apps.
• Product strategy: the app repeatedly connects research outputs to product mechanisms such as the Hero Button, Future Planner, Smart Spend, Trust Tokens, and Knowledge Hub.
• AI product thinking: Gemini is not used as a generic chatbot. It is routed through structured strategy frameworks with system instructions, low-temperature generation, grounding, visualization extraction, and report formalization.
• Execution ability: the repo includes a working React/Vite interface, persistent local history, cancelable AI requests, source display, AI-generated visualization support, and PDF export.

Product Capabilities

• Strategic agent network: runs specialized AI workflows for research, proposition design, persona simulation, competitive mapping, A/B testing, refinement, and end-to-end launch strategy.
• Analysis frameworks: includes PESTLE, Porter's Five Forces, competitive landscape, SWOT, predictive modeling, trends, opportunity mapping, value proposition canvas, gap analysis, user personas, TAM/SAM/SOM, risk grid, and master audit reports.
• Custom research prompt: lets a PM ask a specific strategic question about Mind Matters or the Future Planner adoption journey.
• Grounded responses: uses Gemini with Google Search grounding where available and renders verified source links in the UI.
• Visualization generation: extracts a VISUALIZATION_PROMPT: marker from the AI response and sends it to Gemini image generation for board-style strategic visuals.
• Executive formalization: rewrites raw analysis into a more formal report structure suitable for leadership review.
• PDF export: captures analysis cards using html2canvas and exports them through jsPDF.
• Session history: stores the 10 most recent intelligence requests in localStorage for quick reuse.

Project Layout

FinInclusion-Intel-AI/
├── App.tsx                         # Main React application, layout, state, routing-by-action, and chat flow
├── components/
│   ├── AnalysisCard.tsx             # Renders AI/user messages, markdown-like content, tables, sources, images, and PDF actions
│   └── LoadingIndicator.tsx         # Rotating progress messages and cancel control
├── services/
│   └── geminiService.ts             # Gemini text generation, search grounding, report formalization, image generation
├── constants.ts                     # System instruction and structured analysis prompt library
├── types.ts                         # AnalysisType enum and shared TypeScript interfaces
├── index.tsx                        # React root mount
├── index.html                       # CDN scripts, app shell, Tailwind, jsPDF, html2canvas
├── vite.config.ts                   # Vite config, env loading, dev server, path alias
├── metadata.json                    # AI Studio metadata
├── package.json                     # Scripts and dependencies
└── tsconfig.json                    # TypeScript configuration

Tech Stack

Layer	Technology	Purpose
Frontend	React 19 + TypeScript	Component-driven single-page app
Build tool	Vite	Local development and production build
Styling	Tailwind CSS via CDN	Dark dashboard UI, responsive sidebar, utility-first styling
AI SDK	@google/genai	Gemini text, grounded research, and image generation
AI models	Gemini Pro/Flash preview models	Strategic reasoning, fallback generation, formal reports, image prompts
Persistence	Browser localStorage	Recent search/intelligence history
Export	html2canvas + jsPDF	Research card to PDF export
Deployment shape	Static Vite app	Client-side app expecting a Gemini API key at build/runtime env injection

Auth and Login Flow

Authentication is not currently implemented.

The app runs as a single-user strategy console. There are no login screens, identity providers, sessions, cookies, protected routes, or server-side auth checks. This is acceptable for the current prototype because the primary goal is product-strategy exploration, not multi-user production deployment.

Recommended next version:

• Add email/OAuth login through a hosted auth provider.
• Store user-specific research history server-side instead of only in localStorage.
• Protect Gemini usage behind a backend API so the API key is never exposed to the browser bundle.
• Add workspace/project ownership for teams reviewing multiple fintech concepts.

Roles and RBAC

RBAC is not currently implemented.

The UI uses message labels such as PM Query and Strategy Intelligence, but these are presentation labels, not permission roles. Every user can run every analysis, formalize reports, export PDFs, and clear local history.

Recommended RBAC model:

Role	Access
Product Manager	Run analyses, create reports, export PDFs, manage project prompts
Founder/Admin	Manage product context, API settings, team members, and saved reports
Researcher	Run research agents and add source notes
Viewer	Read generated reports and sources without triggering new AI spend

Application State

There is no separate AppContext file yet. Application state is currently managed inside App.tsx using React hooks.

Key state:

State	Type	Purpose
messages	Message[]	Chat-style feed of PM queries, AI analysis, images, errors, and reports
history	HistoryItem[]	Last 10 analysis requests, persisted to localStorage
isLoading	boolean	Tracks active Gemini analysis calls
isFormalizingId	`string	null`
currentAnalysis	`AnalysisType	null`
inputText	string	Custom research prompt input
isMobileMenuOpen	boolean	Controls mobile sidebar visibility
abortControllerRef	`AbortController	null`

Recommended next version:

• Extract shared state into AppContext or a lightweight store once the app adds pages, auth, saved reports, or multi-project workflows.
• Split AI request state from UI navigation state to make retries, errors, and streaming easier to manage.

Pages

The current app is a single-page application with conditional sections rather than route-based pages.

Primary views:

• Welcome/empty state: introduces Mind Matters Strategic AI and offers quick-start analysis cards.
• Sidebar intelligence menu: contains the strategic agent network, analysis frameworks, new session action, pipeline action, and recent history.
• Chat/analysis feed: displays user prompts, generated research, source links, visualizations, and report actions.
• Input bar: accepts custom PM-style strategic questions.
• Mobile header: opens the responsive sidebar on smaller screens.

Recommended next pages:

• /reports for saved executive reports.
• /sources for source library and evidence review.
• /settings for model, API, and product-context configuration.
• /projects/:id for analyzing more than one product concept.

Components

App.tsx

Owns the product shell and user journey:

• Loads/saves local history.
• Starts new sessions.
• Runs predefined and custom analyses.
• Cancels in-flight AI calls.
• Extracts visualization prompts from AI responses.
• Appends assistant responses, image responses, and errors.
• Controls responsive sidebar behavior.

AnalysisCard.tsx

Renders each chat/report card:

• Parses a limited markdown-like format for headings, lists, horizontal rules, and tables.
• Removes the raw VISUALIZATION_PROMPT: block from visible report text.
• Displays grounded source links.
• Displays generated visualizations.
• Triggers executive formalization.
• Exports the card to PDF using html2canvas and jsPDF.

LoadingIndicator.tsx

Provides user feedback during longer AI calls:

• Rotates through progress messages such as market data fetching, regulatory analysis, and visualization synthesis.
• Exposes a cancel button that calls the parent stopAnalysis handler.

Canvas System

There is no custom drawing canvas or whiteboard canvas system in the current repo.

The project does use html2canvas, but only as an export utility. It captures a rendered analysis card as an image so jsPDF can generate a downloadable PDF. AI-generated visualizations are returned as base64 image URLs and displayed inside AnalysisCard.

Potential future canvas direction:

• Add a strategy canvas for comparing competitors across trust, language, wealth focus, access, and cognitive load.
• Add editable 2x2 matrices for risk, gap analysis, and opportunity prioritization.
• Add exportable board slides from selected AI-generated cards.

NLP and AI Routing

The AI system is centered in services/geminiService.ts and constants.ts.

Prompt architecture

• SYSTEM_INSTRUCTION defines the AI's role as Chief Strategy Officer for Mind Matters.
• The instruction anchors responses around rural financial inclusion, Dak Khana trust, Hero Button voice UX, Future Planner savings, Smart Spend nudges, and evidence-backed analysis.
• ANALYSIS_PROMPTS maps each AnalysisType to a structured framework prompt.

Routing flow

1. User clicks a sidebar framework/agent or submits a custom prompt.
2. handleAnalysisRequest creates a user message and stores the request in history.
3. The selected prompt is routed to generateAnalysis.
4. generateAnalysis first tries Gemini Pro with Google Search grounding.
5. If grounded generation fails, it retries without search.
6. If Pro fails, it falls back to a Flash model.
7. The response text and sources are returned to the UI.
8. extractVisualizationPrompt checks for a VISUALIZATION_PROMPT: marker.
9. If present, generateVisualization produces a boardroom-style image.
10. The final assistant message is rendered with sources and optional image output.

AI methods

Method	Purpose
generateAnalysis	Main grounded strategy/research generation
formalizeReport	Converts analysis into a board-level executive report
generateVisualization	Turns extracted visualization prompts into image outputs
extractVisualizationPrompt	Parses the AI response for visualization instructions

Hooks and Utilities

The app currently uses built-in React hooks directly rather than custom hooks.

Used hooks:

• useState for messages, history, loading state, active analysis, input, sidebar state, and PDF button state.
• useEffect for loading history, saving history, auto-scrolling, and rotating loading messages.
• useRef for the scroll target, export card reference, and abort controller.

Utility behavior:

• addToHistory deduplicates by query and keeps the 10 most recent items.
• clearHistory removes saved intelligence history.
• handleNewChat resets active session state.
• stopAnalysis aborts the current request and appends a cancellation message.
• renderContent in AnalysisCard performs lightweight markdown/table rendering.

Recommended next version:

• Extract useAnalysisRunner, useSearchHistory, and useAutoScroll hooks.
• Replace the hand-rolled markdown renderer with a markdown parser if report formatting grows.
• Add a typed AI response schema for charts, source quality, and visualization instructions.

Run Locally

Prerequisites: Node.js and a Gemini API key.

1. Install dependencies:

npm install

2. Create .env.local in the project root:

GEMINI_API_KEY=your_gemini_api_key_here

3. Start the Vite dev server:

npm run dev

4. Open the local URL shown by Vite. The config defaults to port 3000.

Known Limitations

• No backend: all app logic runs client-side.
• API key exposure risk: Vite injects the Gemini key into the browser bundle. Production should proxy AI calls through a backend.
• No auth/RBAC: the app is currently a single-user prototype.
• No saved reports database: only recent prompt history is stored in localStorage.
• No route-level pages: the experience is currently one React screen with conditional UI.
• No custom AppContext yet: state is centralized in App.tsx.
• No streaming UI: responses appear after model completion rather than token-by-token.
• Limited markdown rendering: AnalysisCard supports common headings, lists, and tables, but not full GitHub-flavored Markdown.
• Model names may need updates: preview Gemini model IDs can change over time.
• Grounding availability can vary: the app falls back to non-grounded responses when Google Search grounding is unavailable.
• PDF export depends on CDN scripts: jsPDF and html2canvas are loaded from CDNs in index.html.

Interview Talking Points

• I treated AI as a product workflow layer, not a chatbot, by mapping user intent to explicit strategic frameworks and agent roles.
• I designed the prompts around a clear fintech inclusion thesis: trust, voice UX, low literacy, behavior change, and rural savings adoption.
• I built the UI around the way PMs actually review strategy work: source-backed analysis, reusable history, executive formalization, visual synthesis, and PDF export.
• I kept the prototype honest by making limitations visible: auth, RBAC, backend persistence, and production key management are next-stage concerns.
• I would evolve this into a multi-user research workspace with saved reports, source scoring, experiment tracking, and a secure AI backend.

Author

Yatin Bhalla · Product Manager & AI Builder
🔗 LinkedIn · Gmail · X