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 using Vector embeddings, vector search 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 database and vector search
  • LangChain for AI integrations
  • Google Vertex AI for embeddings
  • 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 (llama-3.1-8b-instant)
  • LangChain core libraries
  • Vector embeddings with Google Vertex AI

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 vector search 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 and response generation
  • Vector Database: MongoDB with vector search for finding relevant content
  • 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:

    • User messages are converted to embeddings using Vertex AI through LangChain
    • MongoDB vector search finds relevant content from the website
    • Message, relevant content, and chat history are sent to Groq AI
    • AI response is stored and returned to the frontend

  • 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

  • Vector Database Integration: Setting up and optimizing MongoDB's vector search capabilities required careful configuration and testing.
  • 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

  • Response Streaming: Implementing streaming for a more dynamic chat experience
  • 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