Finster Chat

AI-powered personal finance guidance with actionable strategies across wealth, investing, debt, and retirement.

---

Live Demo

• Production: https://finsterchat.com

---

What Is This Website?

Finster Chat is a web-based personal finance platform that combines structured educational content with an interactive AI assistant.

• Who it's for: Individuals and families who want practical help with budgeting, investing, debt reduction, and retirement planning.
• Problem it solves: Financial advice is often fragmented, expensive, or hard to understand; Finster Chat centralizes guidance in one approachable experience.
• Why it's unique: It pairs color-coded finance learning paths with a floating, context-aware AI assistant for real-time, personalized support.

---

Key Features

For Users

• Explore four core finance domains with dedicated pages and strategy content.
• Chat with Finster, an AI assistant that supports follow-up prompts and session-aware guidance.
• Use an interactive retirement savings calculator with charted yearly projections.

For Developers

• Next.js App Router architecture with TypeScript and reusable component/layout patterns.
• Auth0 authentication flow with optional backend user upsert on login callback.

---

How It Works

For Users

1. Visit topic areas (Wealth, Investment, Debt, Retirement) and review practical guidance pages.
2. Open the floating Finster assistant to ask finance questions and receive tailored responses.
3. Validate plans with tools like the retirement projection calculator and iterate with AI suggestions.

For Developers

• Frontend: Next.js 14 + React + Tailwind CSS, with route-based content pages and shared UI components.
• Backend: External .NET Core REST API for chat, profile upsert, and finance-related services.
• Data Flow: User input -> Next.js UI/Auth0 session -> backend API endpoints -> structured AI response rendered in chat UI.

---

Tech Stack

• Frontend: Next.js 14, React 18, TypeScript, Tailwind CSS
• Backend: External .NET Core REST API
• Database: Managed by the external backend (not directly in this repo)
• Infrastructure: Vercel deployment, Auth0 identity platform
• APIs / AI: Backend chat endpoint integration, React Markdown + GFM rendering for rich AI responses

---

Architecture Overview

The project is a Next.js App Router application that serves SEO-optimized finance content and a client-side AI chat experience. Authentication is handled via Auth0; on successful callback, the app can upsert the user into an external backend and store a backend user id in session context. Chat requests are posted from the ChatBot context/provider to backend API endpoints, and responses are rendered with markdown support.

[Browser]
   |
   v
[Next.js App Router (UI + Routes)]
   |                \
   |                 \--> [Auth0 SDK Routes: /api/auth/*]
   |                           |
   |                           v
   |                      [Auth0 Tenant]
   |
   \--> [ChatBot Context] --> [External .NET API: /api/StockChatApi/chat]
                                |
                                v
                        [AI/Finance Services + Data]

Environment Variables

Create a .env file:

# Auth0
AUTH0_ISSUER_BASE_URL=https://YOUR_TENANT.us.auth0.com
AUTH0_DOMAIN=YOUR_TENANT.us.auth0.com
AUTH0_CLIENT_ID=YOUR_AUTH0_CLIENT_ID
AUTH0_CLIENT_SECRET=YOUR_AUTH0_CLIENT_SECRET
AUTH0_SECRET=YOUR_LONG_RANDOM_SECRET
AUTH0_BASE_URL=http://localhost:3000
NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000

# Backend integration
BACKEND_AUTH_API_URL=http://localhost:5280
BACKEND_AUTH_API_KEY=YOUR_BACKEND_AUTH_KEY
BACKEND_API_URL=http://localhost:5280
BACKEND_API_KEY=YOUR_BACKEND_API_KEY
NEXT_PUBLIC_API_BASE_URL=http://localhost:5280
NEXT_PUBLIC_BACKEND_API_URL=http://localhost:5280
NEXT_PUBLIC_API_URL=http://localhost:5280/api

# Optional provider keys
OPENAI_API_KEY=YOUR_OPENAI_KEY
CLAUDE_API_KEY=YOUR_CLAUDE_KEY

Prerequisites

• Node.js 18+
• npm

---

API / Backend Details (if applicable)

Example Endpoint

GET /api/profile

Example Response

{
  "success": true,
  "data": []
}

Authentication

Auth is implemented with @auth0/nextjs-auth0 using App Router endpoints under /api/auth/*. After login callback, the app can post a user profile payload to a backend upsert endpoint and attach backend_user_id to the session user object.

---

Screenshots / UI Preview

Feature	Preview
Homepage Experience
Floating AI Assistant

---

Use Cases

• Build a step-by-step personal finance plan across multiple financial life stages.
• Ask AI for practical next actions on debt payoff, investment direction, or retirement contributions.
• Simulate retirement savings outcomes before making real financial decisions.

---

Roadmap

• Add authenticated dashboards for net-worth and goal tracking.
• Introduce additional calculators (debt snowball/avalanche, tax-aware withdrawal planner).
• Expand AI memory and personalization controls per user profile.

---

Contributing

Contributions are welcome!

1. Fork the repo
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit your changes
4. Push to your branch
5. Open a Pull Request

---

License

MIT

---

Links

• GitHub Organization: https://github.com/aisuretech/
• Website: https://finsterchat.com
• Contact: info@AISureTech.com

---

Final Note

If this project interests you, check out the live site and explore what it can do.

Visit Finster Chat and see how AI can make financial planning simpler, faster, and more actionable.