Skip to main content
Back to home

AI Chatbot with Vector Search

About The Project

  • The AI chatbot is a feature of my portfolio website, allowing visitors to interact with an AI representation of me. - The chatbot can answer questions about my skills, experience, projects, and more using information from my website content powered by Mem0 for contextual memory retrieval and natural language processing.

Inspiration

  • I got the inspiration after watching Popular youtuber, 📽️ WebDevCody's video. - I created this chatbot to provide visitors with an interactive way to learn more about me and my work without having to browse through different pages. - The goal was to make my portfolio more engaging while showcasing my skills in AI integration and fullstack development.

Technologies Used

Backend -

  • Next.js API routes
  • MongoDB for chat history storage
  • Mem0 for contextual knowledge retrieval
  • Groq SDK for AI response generation
  • NextAuth for authentication
  • Axios for HTTP requests

Frontend -

  • React 19
  • Next.js 15
  • Tailwind CSS
  • Radix UI components (Dialog, Avatar, ScrollArea, etc.)
  • GSAP for animations
  • Lucide React for icons
  • React Hook Form with Zod validation
  • React Toastify for notifications
  • Zustand for state management
  • class-variance-authority & tailwind-merge for styling utilities

AI & NLP -

  • Groq LLM (openai/gpt-oss-20b)
  • Mem0 for Knowledge and Memory Management

Data Processing -

  • Cheerio for HTML parsing
  • Marked for Markdown processing
  • xml2js for XML parsing
  • date-fns for date formatting

Features

  • Natural Conversation: Engage in natural dialogue with an AI representation of me
  • Contextual Awareness: The chatbot maintains conversation history to provide coherent responses
  • Knowledge Base: Uses Mem0 to find and reference relevant information from my website
  • Persistent Chats: Conversations are stored and can be resumed in future sessions
  • Responsive UI: Chat interface works seamlessly across desktop and mobile devices
  • Fast Response Time: Optimized for quick responses using efficient model selection

How It Works

Architecture Overview -

The chatbot system consists of four main components:

  • Frontend Interface: A React-based chat UI built with Tailwind CSS and Radix UI
  • Chat Backend: Next.js API endpoints handling message processing, streaming, and response generation
  • Memory Database: Mem0 for maintaining and retrieving relevant contextual knowledge
  • AI Model: Groq API for generating natural language responses

Process Flow -

  • Chat Initialization:

    • A new chat session is created with a unique ID
    • The ID is stored in localStorage for session persistence

  • Message Processing:

    • Mem0 searches its knowledge base for content relevant to the user's message
    • Message, relevant content, and chat history are sent to Groq AI
    • AI response is streamed back to the frontend in real-time
    • Final response is safely stored in MongoDB

  • Response Generation:

    • The Groq AI model responds based on a system prompt, chat history, relevant content, and the user's query
    • The model is optimized for concise, helpful responses

Challenges Faced

  • Knowledge Base Integration: Integrating and structuring data for Mem0 required careful thought to ensure the AI could efficiently recall the right facts about me.
  • Context Management: Balancing the amount of context (chat history and relevant content) sent to the AI model without exceeding token limits was challenging.
  • Response Optimization: Tuning the AI model to provide concise yet informative responses while maintaining a consistent persona.

Future Improvements

  • Feedback Mechanism: Adding capability for users to rate responses for continuous improvement
  • Caching System: Implementing caching for common questions to reduce latency and API costs
  • Enhanced UI Features: Adding typing indicators and read receipts for a more realistic chat experience