AI-powered Student Support Chatbot: Project Overview & Codebase Walkthrough

August 17, 2025 šŸ‘©šŸ½ā€šŸ”¬ Letisia Pangata'a

Intermediate

This post discusses development process and codebase structure of the A.I-powered Student Support Chatbot project. The chatbot is designed to assist students by answering their queries using a knowledge base and providing a web-based chat interface. The project is organized into three main components: the backend bot, the knowledge base, and the web frontend.


Project Structure

student-support-chatbot/
│
ā”œā”€ā”€ README.md
ā”œā”€ā”€ bot/
│   ā”œā”€ā”€ app.py
│   └── requirements.txt
ā”œā”€ā”€ qna/
│   └── knowledge-base.tsv
└── web/
    ā”œā”€ā”€ chatbot.js
    ā”œā”€ā”€ index.html
    └── styles.css

1. bot/ — The Backend Chatbot

  • app.py: The main Python application that powers the chatbot logic and API.
  • requirements.txt: Lists Python dependencies for the backend.

2. qna/ — The Knowledge Base

  • knowledge-base.tsv: A tab-separated file containing question-answer pairs used by the chatbot to respond to user queries.

3. web/ — The Frontend

  • index.html: The main web page for the chat interface.
  • chatbot.js: Handles frontend logic, user input, and communication with the backend.
  • styles.css: Styles for the chat interface.

Backend: bot/app.py

The backend is a Python Flask application that exposes an API endpoint for the chatbot. It loads the knowledge base and matches user questions to the best answer.

Key Features:

  • Loads Q&A pairs from qna/knowledge-base.tsv.
  • Uses simple text matching or NLP techniques to find the best answer.
  • Exposes a /chat endpoint for frontend communication.

Sample Code Snippet:

from flask import Flask, request, jsonify
import csv

app = Flask(__name__)

# Load knowledge base
def load_knowledge_base(path):
    kb = []
    with open(path, encoding='utf-8') as f:
        reader = csv.reader(f, delimiter='\t')
        for row in reader:
            if len(row) == 2:
                kb.append({'question': row[0], 'answer': row[1]})
    return kb

knowledge_base = load_knowledge_base('../qna/knowledge-base.tsv')

@app.route('/chat', methods=['POST'])
def chat():
    user_message = request.json.get('message', '')
    # ...matching logic...
    return jsonify({'answer': best_answer})

if __name__ == '__main__':
    app.run(debug=True)

Knowledge Base: qna/knowledge-base.tsv

This file contains the core Q&A data. Each line is a tab-separated pair:

How do I reset my password?\tYou can reset your password by ...
Where can I find my grades?\tYour grades are available on ...

You can expand this file to cover more topics as needed.


Frontend: web/

The frontend is a simple, modern web interface for chatting with the bot.

index.html

  • Contains the chat window and input form.

chatbot.js

  • Handles sending user messages to the backend and displaying responses.
  • Uses fetch to POST messages to /chat.

Sample Code Snippet:

document.getElementById('chat-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const input = document.getElementById('user-input');
  const message = input.value;
  // ...display user message...
  const response = await fetch('/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message })
  });
  const data = await response.json();
  // ...display bot response...
});

styles.css

  • Provides a clean, user-friendly chat UI.

Development Workflow

  1. Set up the backend:
    • Install Python dependencies: pip install -r bot/requirements.txt
    • Run the Flask app: python bot/app.py
  2. Edit the knowledge base:
    • Add or update Q&A pairs in qna/knowledge-base.tsv.
  3. Launch the frontend:
    • Open web/index.html in your browser.
    • Ensure the backend is running and accessible.

Extending the Project

  • Improve matching: Integrate NLP libraries (e.g., spaCy, NLTK) for better question understanding.
  • Authentication: Add user login for personalized support.
  • Deployment: Use Docker or cloud services for production deployment.

Conclusion

The Student Support Chatbot is a modular, extensible project that demonstrates how to combine a Python backend, a simple knowledge base, and a modern web frontend to deliver real-time support to students. Contributions and improvements are welcome.


Disclaimer

This project was developed using a combination of publicly available learning resources, reference books, open source projects, and artificial intelligence tools. All efforts have been made to attribute and comply with relevant licenses. Contributions and insights from the broader open source and educational communities are gratefully acknowledged. This software is provided as-is, without warranty of any kind, express or implied. The author assumes no responsibility for any loss, damage, or disruption caused by the use of this code. It is intended for educational and experimental purposes only and may not be suitable for production environments.

← Go Back