🤖 AI-Powered Chatbot

A powerful, production-ready AI Chatbot designed to help users manage tasks, answer queries, and troubleshoot issues using advanced LLMs (Llama 3, Gemini) and a modern Agentic workflow.

---

---

🔗 Project Submission Links

Here are all the direct links for the assignment submission:

Resource	Link	Description
🌍 Live App	Click Here	Interact with the deployed chatbot
🔌 API Docs	Click Here	Backend Swagger UI
💻 GitHub	Click Here	Source Code & Version History
📁 Source Code	Google Drive	Full Project Zip File
🎥 Videos	Google Drive	Intro, Experimentation & Live Demo
📄 User Manual	Google Drive	Detailed User Guide (PDF)
📋 Submission PDF	Google Drive	Consolidated Submission Document

---

📚 Documentation

• 📖 User Manual (DOCX): Download User Manual
• 📋 Problem Statement: View Problem Statement

---

✨ Key Features

🧠 Advanced Natural Language Understanding

• Hybrid Intent Detection: Rule-based patterns + LLM fallback for 100% reliability
• Semantic Task Matching: LLM-powered matching (e.g., "medicine" → "buy medicine for my mother")
• Natural Language Operations:
  • ✅ "no need to buy the car" → Deletes task
  • ✅ "X is not important" → Sets priority to low
  • ✅ "X is urgent" / "asap" → Sets priority to urgent
  • ✅ "cancel the medicine task" → Deletes task
• Index-based Selection: "update task 1", "delete task 2" (from numbered lists)

💬 Intelligent Chatbot

• Multi-Intent Routing: Automatically detects 6 intent types (query, create, update, delete, Q&A, troubleshooting)
• Context-Aware Task Detection: Prevents duplicates by analyzing existing tasks
  • Example: "I need to buy medicine" creates task, then "I need medicine asap" updates it (not duplicate!)
• Two-Stage Validation: Rule-based pre-filtering + LLM validation for accuracy
• Smart Defaults: Auto-generates descriptions with time remaining calculations
• Date Intelligence: Parses "tomorrow", "next Friday", "in 3 days" to actual dates

📝 Task Management (CRUD)

• Create: "I need to buy milk tomorrow at 5pm"
• Read/Query: Filter by status, priority, date, keywords
• Update: Natural language priority/status changes
• Delete: Bulk ("delete all") or specific ("no need to X")
• Auto-Description: If not provided, generates from due date

🔍 Advanced Filtering

• Status: pending, completed, in_progress, cancelled
• Priority: low, medium, high, urgent
• Date: "today", "this week", "next Friday", specific dates
• Semantic Search: Fuzzy matching for task titles/descriptions

🎨 Modern UI

• Beautiful Glassmorphism design with responsive sidebar
• Real-time task statistics dashboard
• Smooth animations and transitions
• Mobile-responsive with touch-friendly navigation

🔒 Security

• Frontend ↔ Backend ↔ Database architecture (No direct DB access)
• JWT-based authentication with Row Level Security (RLS)
• Protected API endpoints with user isolation

---

🛠️ Tech Stack

Frontend

• Core: HTML5, CSS3, JavaScript (Vanilla)
• Styling: Custom CSS with Glassmorphism effects
• Communication: Fetch API, Server-Sent Events (SSE) for streaming

Backend

• Framework: FastAPI (Python 3.10+)
• AI Orchestration: LangChain, LangGraph
• LLMs: Groq (Llama 3.3), Google Gemini
• Database: Supabase (PostgreSQL) / SQLite (Local dev)
• Authentication: JWT (JSON Web Tokens)

Deployment

• Platform: Render
• Infrastructure: Infrastructure as Code (IaC) via render.yaml

---

🏗️ Development Journey

🏗️ Development Journey

This project evolved significantly from a simple prototype to a fully deployed application:

1. 🧪 Experimentation Phase:

   • Started by prototyping the core Agentic Logic in a Jupyter Notebook (chatbot_experimentation.ipynb).
   • Experimented with various LLMs, ultimately selecting Gemini 2.0 Flash for its speed and reasoning capabilities.
   • Built and tested custom tools (Task Management, Troubleshooting) using LangGraph's state machine to ensure reliable tool calling.

2. ⚙️ The Decision to Scale:

   • Once the logic was proven in the notebook, I decided to build a complete, user-friendly system.
   • Migrated the agentic code to a robust FastAPI Backend to handle concurrent requests and maintain state efficiently.

3. 🎨 Frontend Implementation:

   • Developed a custom Frontend using Vanilla JS and Glassmorphism design to provide a premium user experience.
   • Connected the frontend to the backend using REST APIs and Server-Sent Events (SSE) for real-time streaming tokens.

4. 🚀 Production Deployment:

   • Deployed the entire stack on Render (Cloud Platform).
   • Configured the Backend as a Web Service and the Frontend as a Static Site, enabling global access.

---

⚠️ Architectural Decisions & Limitations

1. 🧠 Memory / Context Window:

   • The chatbot is optimized to remember the last 10 messages of the conversation.
   • Reason: This balance ensures low latency (fast responses) and prevents hitting LLM token limits (Quota Management) while maintaining sufficient context for immediate task handling.

2. 🔐 Forgot Password Functionality:

   • This feature is currently not implemented.
   • Reason: Implementing secure password recovery requires integrating an external SMTP Email Service. Furthermore, during the rigorous testing phase, we hit the Supabase Email Rate Limits, confirming that a dedicated SMTP provider (like SendGrid) would be necessary for a production environment. To keep the project cost-free and accessible for evaluation without complex API setups, this was excluded.

3. 🤖 AI & Database Stack:

   • Production Backend: Powered by Groq (Llama-3.3-70b-versatile) for high-speed Intent Detection, Natural Language Processing, and Response Generation.
   • Database: Supabase (PostgreSQL) is used for the deployed application. (Note: SQLite and Gemini 2.5 Flash were used during the initial experimentation/prototyping phase).

---

📊 System Architecture Workflow

Here is the high-level data flow of the deployed application:

🎨 Interactive Architecture Diagram (Click to expand)

graph TD
    User["👤 User Message"] --> Frontend["🖥️ Frontend (Vanilla JS)"]
    Frontend -->|SSE Stream| Backend["⚙️ FastAPI Backend"]
  
    Backend --> Auth{"🔐 Authenticated?"}
    Auth -->|No| Reject["⛔ Return 401"]
    Auth -->|Yes| Agent["🧠 LangGraph Agent"]
  
    Agent --> Intent["🔍 Detect Intent (Llama 3)"]
    Intent --> Router{"🚦 Router"}
  
    Router -->|Task Operation| Task["🛠️ Task Service"]
    Router -->|General Chat| Chat["💬 Llama 3 Response"]
    Router -->|Troubleshooting| Trouble["🔧 Llama 3 Analysis"]
  
    Task --> Parser["🤖 Llama 3 Parser"]
    Parser --> DB[("🗄️ Supabase DB")]
  
    Chat --> Stream["📤 Stream Response"]
    Trouble --> Stream
    DB --> Stream
  
    Stream --> Frontend
  
    style User fill:#ffeb3b,stroke:#333,stroke-width:2px
    style Frontend fill:#4caf50,stroke:#333,stroke-width:2px
    style Backend fill:#2196f3,stroke:#333,stroke-width:2px,color:#fff
    style Agent fill:#9c27b0,stroke:#333,stroke-width:2px,color:#fff
    style Router fill:#ff9800,stroke:#333,stroke-width:2px
    style DB fill:#ff5722,stroke:#333,stroke-width:2px,color:#fff
    style Stream fill:#00bcd4,stroke:#333,stroke-width:2px

Loading

---

⚙️ Local Setup Guide

Follow these steps to run the project locally.

1. Clone the Repository

git clone https://github.com/Prabhat9801/ChatBot.git
cd ChatBot

2. Backend Setup

Navigate to the backend directory and set up the Python environment.

cd backend
python -m venv venv
# Windows
.\venv\Scripts\activate
# Mac/Linux
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

Configure Environment Variables: Create a .env file in the backend/ directory:

# App Config
ENVIRONMENT=development
DEBUG=True
PORT=8000
HOST=0.0.0.0

# API Keys (Required)
GROQ_API_KEY=your_groq_api_key_here
GOOGLE_API_KEY=your_google_api_key_here

# Database (Supabase)
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_KEY=your_supabase_service_key

Run the Backend:

uvicorn app.main:app --reload

The API will be available at http://localhost:8000.

3. Frontend Setup

The frontend is a static site. You can serve it using any static server or simply open index.html.

1. Update API URL: Open frontend/js/api.js and ensure the baseURL points to your local server:

   baseURL: 'http://127.0.0.1:8000',

2. Run Frontend: You can use Python to serve it:

   cd frontend
   python -m http.server 3000

   Visit http://localhost:3000 in your browser.

⚠️ Important Note for Local Development:

1. Frontend (frontend/js/api.js): You MUST change the baseURL back to localhost:

   baseURL: 'http://127.0.0.1:8000',

2. Backend (backend/app/config.py): Ensure allowed_origins allows your local frontend URL (or is set to "*").

---

🌍 Deployment

This project is configured for seamless deployment on Render.

1. Push to GitHub.
2. Create Blueprint on Render: Select the render.yaml file from the root.
3. Add Environment Variables: In the Render Dashboard, add your API keys (GROQ_API_KEY, GOOGLE_API_KEY, etc.).
4. Frontend Config: Update frontend/js/api.js with the production backend URL before deploying the frontend.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ by Prabhat