A Flask-based web chatbot that answers artificial-intelligence questions using a local FAQ knowledge base. Instead of calling an external AI API, it pairs NLTK text preprocessing with a scikit-learn TF-IDF vectorizer and cosine-similarity matching to find the closest FAQ answer for each user question. The interface is a glassmorphism-style chat window with persistent history, suggested questions, typing and loading animations, and a copy-to-clipboard button.
The AI FAQ Chatbot is a self-contained web application built with Python and
Flask. A visitor types a question about AI (machine learning, neural networks,
NLP, deep learning, and related topics), and the chatbot replies with the most
relevant answer from a built-in set of 55 FAQs stored in faq.json.
Matching is powered by natural-language processing rather than simple keyword counting: every question is lowercased, tokenized, stripped of punctuation and stop words, and lemmatized before being compared with the FAQ corpus using TF-IDF vectors and cosine similarity. If no FAQ reaches a 0.40 similarity threshold, the bot apologizes and asks the user to rephrase.
The frontend is plain HTML, CSS, and JavaScript — no build step or framework is required. Chat history is saved in the browser's LocalStorage, so a conversation survives page reloads.
- NLP-powered FAQ matching — NLTK preprocessing (lowercasing, tokenization, punctuation removal, stop-word removal, lemmatization) combined with scikit-learn TF-IDF vectors and cosine similarity.
- Chat history — messages persist in the browser's LocalStorage and reload on the next visit.
- Suggested questions — a row of FAQ-derived chips appears on load; tapping one sends it instantly.
- Typing animation — three animated dots show while the bot is "thinking."
- Loading spinner — the send button shows a spinner while the backend processes the request.
- Copy button — every bot response has a one-click copy button with a "Copied" confirmation.
- Clear chat with confirmation — a modal popup guards against accidental clears (Esc and backdrop click also dismiss it).
- Timestamps — each message displays its send time.
- Auto-scroll — the chat window scrolls to the newest message automatically.
- Press Enter to send — the input submits on Enter, like any chat app.
- Responsive glassmorphism UI — works from mobile to desktop with a blurred-glass aesthetic, animated background blobs, and micro-interactions.
| Area | Technology |
|---|---|
| Backend framework | Flask 3.0.3 |
| NLP preprocessing | NLTK 3.10.0 (tokenization, stop words, lemmatization) |
| Vectorization & similarity | scikit-learn 1.9.0 (TfidfVectorizer, cosine_similarity) |
| Numerical computing | NumPy 2.5.1 |
| Frontend | Vanilla HTML, CSS, JavaScript (no framework, no build step) |
| Data source | faq.json (55 AI-related Q&A pairs) |
| Persistence | Browser LocalStorage (chat history) |
FAQ_Chatbot/
├── app.py # Flask app: NLP engine, /ask endpoint, suggestion list
├── faq.json # 55 AI-related FAQs (questions + answers)
├── requirements.txt # Python dependencies
├── README.md # This file
├── .gitignore
├── templates/
│ └── index.html # Chatbot UI (Jinja2 template)
└── static/
├── css/
│ └── style.css # Glassmorphism styling
└── js/
└── script.js # Frontend logic (history, copy, suggestions, fetch)
-
Clone or download the project into a folder of your choice.
-
(Recommended) Create and activate a virtual environment:
python -m venv venv source venv/bin/activate # macOS / Linux # venv\Scripts\activate # Windows
-
Install the Python dependencies:
pip install -r requirements.txt
This installs Flask, NLTK, scikit-learn, and NumPy.
-
NLTK data (tokenizers, stop words, WordNet) is downloaded automatically the first time
app.pyruns, so no manual download step is required. If your environment has no internet on first run, run once in a connected environment to cache the data:python -c "import nltk; [nltk.download(p) for p in ['punkt','punkt_tab','stopwords','wordnet']]"
python app.pyThen open http://127.0.0.1:5000 in your browser.
Type a question (or tap a suggested chip) and press Enter to send it. The bot preprocesses your question, compares it against every FAQ using TF-IDF cosine similarity, and returns the best match. Use the trash icon in the header to clear the conversation (you'll be asked to confirm).
Add your screenshots to a screenshots/ folder and reference them here.
| Screenshot | Description |
|---|---|
screenshots/chat-empty.png |
The chat window on first load with the greeting and suggested questions. |
screenshots/chat-conversation.png |
An ongoing conversation with user and bot messages, timestamps, and copy buttons. |
screenshots/typing-indicator.png |
The animated typing dots shown while the bot is processing. |
screenshots/loading-spinner.png |
The send-button spinner during a backend request. |
screenshots/clear-modal.png |
The "Clear chat?" confirmation popup. |
screenshots/mobile-view.png |
The responsive layout on a narrow mobile viewport. |
- Preprocess — the user's question and every FAQ question are lowercased, tokenized with NLTK, filtered to alphabetic tokens, stripped of English stop words, and lemmatized with WordNetLemmatizer.
- Vectorize — all preprocessed FAQ questions are fit into a
TfidfVectorizeronce at startup, building a TF-IDF matrix. - Compare — the preprocessed user question is transformed with the same
vectorizer, then compared to every FAQ vector using
cosine_similarity. - Threshold — the highest-scoring FAQ wins. If its score is below 0.40,
the bot replies:
"Sorry, I couldn't find an answer to that question."
Open faq.json and append a new object to the faqs array:
{
"id": 56,
"question": "Your new question here?",
"answer": "The answer the chatbot should return."
}Restart the app (or let Flask's debug reloader pick up the change) so the new FAQ is included in the TF-IDF matrix.
- Semantic embeddings — replace TF-IDF with sentence embeddings (e.g., Sentence-Transformers) for meaning-based matching beyond keyword overlap.
- Multi-turn context — let the bot use prior messages to resolve pronouns and follow-up questions.
- Fuzzy typo tolerance — add spell correction before preprocessing.
- Admin panel — a UI for adding, editing, and deleting FAQs without touching the JSON file.
- Analytics — log unanswered questions to identify gaps in the FAQ set.
- Multi-language support — preprocessing and stop-word lists for languages beyond English.
- Deployment — containerize with Docker and deploy behind a production WSGI server (Gunicorn / uWSGI) instead of the built-in dev server.
This project is released under the MIT License.
MIT License
Copyright (c) 2026 AI FAQ Chatbot
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.