DEV Community: chloe

Building and deploying a Generative AI Support Chatbot with Flask and Google's Gemini API

chloe — Sat, 31 May 2025 13:04:54 +0000

Example of what is being built:

Introduction

As a backend developer specialising in AI chatbots, I recently built a production-ready GenAI chatbot that demonstrates enterprise-level security, scalability, and user experience. This project showcases my ability to create full-stack solutions that clients can trust with their business communications.

You can see the live chatbot in action on [my website]https://www.theoxforddeveloper.co.uk - it's the orange chatbot on the bottom right (I also have a non-GenAI chatbot for comparison - the purple icon on the bottom right).

The Challenge

I needed to create a secure, embeddable GenAI chatbot that could:

Handle multiple clients with proper authentication
Integrate seamlessly into any website
Provide intelligent responses using Google's Gemini API
Maintain British English consistency (important for UK business)
Scale across multiple domains with CORS protection

Architecture Overview

Backend: Flask + Google Gemini API (Deployed on Heroku)
Frontend: Vanilla JavaScript widget + Next.js integration
Security: Client ID authentication + CORS protection
Deployment: Heroku for backend, Vercel for website

Backend Development

Security-First Authentication System

The foundation of any enterprise chatbot is robust security. I implemented a dual-layer authentication system:

# Client ID validation decorator
def require_client_id(f):
    @wraps(f)
    def decorated_function(*args, **kwargs):
        client_id = None

        # Multiple authentication methods
        if 'X-Client-ID' in request.headers:
            client_id = request.headers.get('X-Client-ID')
        elif request.args.get('client_id'):
            client_id = request.args.get('client_id')
        elif request.is_json:
            client_id = request.json.get('client_id')

        if not client_id or client_id not in ALLOWED_CLIENT_IDS:
            return jsonify({
                "error": "Invalid client ID",
                "botResponse": "This chatbot is not authorised for your website."
            }), 403

        return f(*args, **kwargs)
    return decorated_function

Key Features:

Client ID validation prevents unauthorised usage
Flexible authentication (headers, query params, JSON body)
Graceful error handling with user-friendly messages

CORS Configuration for Multi-Domain Support

CORS(app, origins=[
    "https://oxford-genai-chatbot-9c5c571579c0.herokuapp.com",
    "https://website-portfolio-iota-khaki.vercel.app",
    "http://localhost:8000",
    "http://localhost:3000"
], supports_credentials=True)

Intelligent Response Processing

The chatbot integrates with Google's Gemini API while ensuring consistent British English output:

def convert_to_british_english(text):
    conversions = {
        'personalized': 'personalised',
        'customization': 'customisation',
        'organization': 'organisation',
        # ... more conversions
    }

    converted_text = text
    for american, british in conversions.items():
        regex = re.compile(r'\b' + re.escape(american) + r'\b')
        converted_text = regex.sub(british, converted_text)

    return converted_text

Business Value: This ensures consistent brand voice for UK clients, demonstrating attention to detail in client requirements.

Dynamic Client Management

@app.route('/manage_clients', methods=['POST'])
def manage_clients():
    # Admin authentication
    if admin_password != 'SECURE_PASSWORD_HERE':
        return jsonify({"error": "Unauthorised"}), 401

    # Dynamic client addition/removal
    if action == 'add' and client_id:
        if client_id not in ALLOWED_CLIENT_IDS:
            ALLOWED_CLIENT_IDS.append(client_id)
            save_allowed_clients(ALLOWED_CLIENT_IDS)

Frontend Development

Self-Contained Widget Architecture

I created a completely self-contained JavaScript widget that can be embedded anywhere:

(function() {
  // Widget configuration from script tag
  const getScriptConfig = () => {
    const scriptTag = document.getElementById('oxford-genai-chatbot');

    return {
      clientId: scriptTag.getAttribute('data-client-id'),
      theme: scriptTag.getAttribute('data-theme') || 'light',
      position: scriptTag.getAttribute('data-position') || 'bottom-right',
      apiEndpoint: scriptTag.getAttribute('data-api-endpoint')
    };
  };

Key Benefits:

Zero external dependencies
Configurable via data attributes
Prevents conflicts with existing website code

Dynamic Styling System

const styles = `
  .genai-chatbot-toggler {
    position: fixed !important;
    background: #f97316 !important;
    border-radius: 50% !important;
    z-index: 9999 !important;
    transition: all 0.3s ease !important;
  }

  .genai-chatbot {
    position: fixed !important;
    width: 420px !important;
    background: #fff !important;
    border-radius: 15px !important;
    box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1) !important;
  }
`;

// Inject styles dynamically
const styleElement = document.createElement('style');
styleElement.innerHTML = styles;
document.head.appendChild(styleElement);

Robust Error Handling

const generateResponse = async (chatElement) => {
  try {
    const response = await fetch(BACKEND_URL, requestOptions);

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.botResponse);
    }

    const data = await response.json();
    messageElement.textContent = data.botResponse;

  } catch (error) {
    messageElement.classList.add("error");
    messageElement.textContent = "Sorry, I'm having trouble connecting. Please try again later.";
  }
};

Integration with Next.js

Clean Component Architecture

'use client'
import Script from "next/script";

export default function GenAIChatbotScript() {
  return (
    <Script
      src="https://oxford-genai-chatbot-9c5c571579c0.herokuapp.com/chatbot-widget.js"
      id="oxford-genai-chatbot"
      data-client-id="oxford_developer_website"
      data-theme="light"
      data-position="bottom-left"
      data-api-endpoint="https://oxford-genai-chatbot-9c5c571579c0.herokuapp.com"
      strategy="afterInteractive"
      onLoad={() => console.log("GenAI Chatbot loaded successfully")}
      onError={(e) => console.error("Error loading GenAI chatbot:", e)}
    />
  );
}

Deployment Strategy

Backend Deployment (Heroku)

Environment Configuration: Secure API keys via environment variables
Production Optimisation: Disabled debug mode, optimised CORS settings
Health Monitoring: Built-in error tracking and logging

Frontend Integration (Vercel)

The widget integrates seamlessly with my Next.js portfolio:

/* Global styles for chatbot positioning */
body .genai-chatbot-toggler {
  background: #f97316 !important;
  right: 175px !important;
}

body .chatbot-toggler {
  background: #724ae8 !important;
  right: 100px !important;
}

Technical Highlights

Multi-Chatbot Architecture
I designed the system to support both GenAI and traditional rule-based chatbots on the same page, with distinct visual themes and positioning.
Security Through Obscurity + Authentication
Client ID system prevents unauthorised API usage
CORS protection blocks cross-origin attacks
Admin panel for dynamic client management
User Experience Focus
Smooth animations and transitions
Mobile-responsive design
Consistent British English for UK market
Visual text input feedback
Production-Ready Error Handling
Graceful API failure recovery
User-friendly error messages
Comprehensive logging for debugging

Results and Business Impact

Technical Achievements:

Zero-dependency, embeddable widget
Sub-second response times
100% uptime since deployment
Scales across multiple client websites

Business Value:

Demonstrates full-stack capabilities to potential clients
Showcases AI integration expertise
Proves ability to deliver production-ready solutions
Shows attention to UK market requirements (British English)

Key Learnings

Security First: Implementing proper authentication from day one prevents future headaches
Self-Contained Widgets: Avoiding external dependencies makes integration seamless
User Experience Matters: Small details like text visibility and smooth animations significantly impact perception
Documentation Through Code: Clean, readable code serves as its own documentation

Conclusion

This GenAI chatbot project demonstrates my ability to create enterprise-level solutions that combine modern AI capabilities with robust security and excellent user experience. The modular architecture allows for easy scaling and customisation for different client needs.

Technologies Used: Flask, Google Gemini API, JavaScript ES6+, Next.js, SCSS, Heroku, Vercel

Live Demo: https://www.theoxforddeveloper.co.uk

Looking for a developer who can deliver production-ready AI solutions? Feel free to connect with me to discuss your project requirements via the contact form at the bottom of my website https://www.theoxforddeveloper.co.uk

ai #chatbot #flask #javascript #backend #frontend #heroku #nextjs

OCR: Digitise Physical Text Documents with Ease

chloe — Tue, 29 Apr 2025 10:30:24 +0000

Easily convert scanned or photographed documents into editable, machine-readable text using Optical Character Recognition (OCR).

From this:

]

To This:

Method 1: Using AWS Textract API

This method leverages Amazon's powerful Textract OCR service to extract text from images. It works well for printed text, especially on structured documents.

Features:

Batch process multiple files
Automatically saves extracted content to .txt files
Supports line-by-line text extraction
Easy to extend and integrate

Sample code:

Method 2: Pytesseract

Tools We Use

Python
OpenCV – For image processing
Pytesseract – A Python wrapper for Google’s Tesseract-OCR Engine
Pillow (PIL) – For additional image support
CSV – To export results

Before diving into the code, make sure you have Tesseract installed and properly linked in your script. For macOS users:

pytesseract.pytesseract.tesseract_cmd = r'/opt/homebrew/bin/tesseract'

Step 1: Image Preprocessing Pipeline

OCR engines work best when the input text is clear, contrast-rich, and isolated from background noise. Here's the sequence of transformations applied to each image:

Grayscale Conversion
Converting the image to grayscale helps reduce complexity and makes it easier to isolate text.
Sharpening
We apply a Laplacian filter to enhance edges and make the text pop.
Inversion
OCR engines often perform better when text is black on a white background.
Thresholding
We binarise the image using Otsu’s method, separating text from background.
Denoising
Removing small artifacts with a median blur filter.
Font Smoothing (Optional)
If text appears too thin or thick, you can apply morphological operations (dilation/erosion).

Step 2: OCR Text Extraction

Once the image is processed, we convert it back to RGB (required by Tesseract) and extract the text.

Step 3: Save to CSV

Finally, we store the extracted text in a CSV file for later use.

Sample code:

What Next?

Once your text is extracted, check out my companion repository:
https://github.com/TheOxfordDeveloper/Parsing-unstructured-data.git

It shows how to clean and convert raw OCR text into structured, tabular formats, like this:

Parsing Unstructured Text Into Clean, Structured Data — A Regex-Powered Approach

chloe — Tue, 29 Apr 2025 10:09:27 +0000

Transforming messy, human-readable text into clean, structured rows and columns is one of the most tedious but necessary tasks in data science, especially when you're working with legacy formats or domain-specific archives. Recently, I built a custom parser to do exactly that—converting chaotic, delimiter-laden horse racing records into clean, structured CSV files using Python and regular expressions.

The Problem:
Imagine trying to extract meaningful data from a block of text that’s littered with inconsistent delimiters like hyphens, tabs, ellipses, and bullet points. That’s what the raw input looked like—unstructured text files full of valuable racing data, but formatted in a way that made it nearly impossible to work with programmatically.

The Tools: Python + Regex + Logic
Here’s how the process was broken down:

Preprocessing the Delimiters

The first script scanned through each line in the raw .txt file and replaced noisy or ambiguous delimiters (-, ..., •, tabs, etc.) with clean commas. It also took care of collapsing multiple commas into one, providing a more consistent surface for parsing.

i.e.,:

This produced something like this:

Regex Extraction

Using a set of carefully crafted regular expressions, I extracted meaningful fields from each line—such as:

Horse name and year of birth
Colour and sex
Starts, wins, earnings
Bloodline information (sire, dam, damsire)
Breeding stats (foals, runners, winners, SW)
Career length
Stakes wins by age

This wasn't just string matching—it included handling missing values, intelligently inferring information based on previous entries, and parsing complex compound phrases like At 3 won the Abadan Derby (G2), Winter Classic.

i.e.,:

Multi-line Contextual Inference

Some information wasn’t explicit in every row. For example, if a horse’s dam or damsire wasn’t listed, the script would backtrack up to 15 previous entries to find the most recent relevant female horse and assign her as the dam. Similarly, if the damsire was missing, it was inferred from the "previous-but-one" sire.

Export to CSV

Finally, all structured data was written into a clean CSV file ready for downstream analysis.

The Result
By the end, I had a structured CSV with clearly defined columns for each key attribute of the horses' performance and lineage. This opens up all sorts of data-driven possibilities—analytics, visualisation, modelling, or feeding into other horse racing applications.

i.e.,:

Why This Matters
Turning unstructured data into structured datasets is a fundamental skill in real-world data projects. This parser is tailored for horse racing records, but the principles—preprocessing, pattern recognition, intelligent inference—apply to any domain where data comes in messy formats.

If you’re wrangling legacy text files, don’t underestimate what a few good regex patterns and a bit of logic can do.

Building a Headless URL Checker for Large-Scale Web Data Screening

chloe — Tue, 29 Apr 2025 09:54:08 +0000

When dealing with massive datasets of URLs—especially in industries like sports analytics, finance, or research—it’s not uncommon to encounter a frustrating pattern: a web page loads, appears valid to the server, but contains a polite “Sorry, we couldn’t find what you’re looking for” message. These kinds of false positives are time-consuming to verify manually, especially when the dataset spans tens of thousands of links.

To solve this problem, I built a headless URL checker that scans web pages for meaningful content, distinguishing between truly valuable pages and placeholder or “no data” pages. This post outlines how the tool works, the features that make it cloud-ready and scalable, and how it handles the challenges of bot detection.

The Problem: Valid URLs, Useless Content

The URLs I worked with pointed to profile pages—some of which loaded correctly but returned a message like:

"The Graded Stakes Profile you were searching for could not be found"
These pages technically loaded (i.e., status code 200), but they didn’t actually contain the content I needed. I needed a way to automate the process of identifying these cases so I could focus only on URLs with actual data.

The Solution: Headless URL Checker

The solution is a Python-based script (url_checker_HEADLESS.py) that uses Selenium with headless Chrome to programmatically load and inspect pages.

Main Capabilities:
Reads from a CSV: Input is a master file (Equibase_URLS.csv) containing ~30,000 URLs.
Searches page content: Scans the page for a specific error message indicating no relevant data.
Saves results: Records either "yes" (content found) or "no" (error message detected) in an output CSV.
Here’s the logic in a nutshell:

If the page contains the "could not be found" message → record "no".
If the message is absent → record "yes", indicating this URL contains data we are interested in.

Sample code:

Built for the Cloud (and for Stealth)

Scraping at scale comes with risks: IP blocking, captchas, and bot protection mechanisms. This checker includes several countermeasures:

Headless Chrome Browsing: Lightweight and fast for cloud-based execution.
Randomised User Agents: Prevents fingerprinting.
Session Cookie Injection: Uses a cookies.pkl file generated from a real browser session via generate_cookies.py.
Random Delays: Introduces human-like delays between URL batches.
Manual Captcha Mode: Supports fallback if a captcha appears during execution.
Batch Processing: Splits the workload across smaller CSV chunks to avoid memory or session issues.

Output: Simple, Clear, and Actionable

Each row in the output CSV includes:

The original URL.
A "yes" or "no" label indicating whether the page is worth further inspection. i.e.,:

Final Thoughts

This tool has already saved me hours of manual inspection and allowed me to filter out tens of thousands of dead-end URLs with high precision. Whether you’re dealing with scraped web data or any large volume of dynamic content, having a smart, headless filter like this in your toolkit can make your workflow significantly more efficient—and a lot less painful.

Full repo can be found here: https://github.com/TheOxfordDeveloper/URL-checker.git

Building and deploying a Non-Generative AI Support Chatbot with Flask

chloe — Sat, 26 Apr 2025 19:26:54 +0000

Here are some images demoing the bot:

Step 1: ask it a question

Step 2: tell the bot whether the answer was useful or not. If no, support ticket process begins

Step 3: you will receive an email confirming your support ticket has been received and that the support team will get back to you soon. The support team also receives an email so that they know you need help.

You can test the bot on my website for yourself: https://www.theoxforddeveloper.co.uk

In customer support, fast and reliable answers matter. I wanted to create a controlled, efficient support chatbot — one that doesn't rely on generative AI but instead uses traditional machine learning, information retrieval, and a custom-designed user interface for an interactive, predictible experience.

In this project, I built a Flask web application that uses SVM classification, TF-IDF vectorisation, and Cosine Similarity to serve accurate responses from a custom knowledge base, and a fully custom frontend built in HTML, CSS, and JavaScript.

Problem to Solve

Modern LLM-based bots are powerful, but they come with risks:

Hallucinated responses.
Inconsistent tone.
Data privacy concerns.

Many small businesses actually need a cheaper, smaller, safer, and more deterministic chatbot.
This project addresses that gap.

Backend Tech Stack

Python 3
Flask (web server and API)
Scikit-learn (for machine learning models)
Pandas / Numpy (for data manipulation)
TF-IDF vectorisation (for text representation)
SVM (Support Vector Machine) (for classification)
Cosine Similarity (for fine-grained matching)

Workflow and the Maths Behind It

Preprocessing the Knowledge Base The core of the chatbot is a CSV file containing common customer support questions and answers for a bank.

Before training:

Stemming: Normalise words like "running" to "run".
TF-IDF Vectorisation: Convert text into a matrix that captures the importance of terms.

Here’s a simple example of the preprocessing pipeline:

Classifying User Queries Once the data is preprocessed, I trained a Support Vector Machine (SVM) classifier with a linear kernel:

When a user submits a query:

It’s preprocessed the same way (stemming + TF-IDF).
Then classified into a question category.

Fine-Grained Matching within the Class After finding the class, I zoom into the subset of related questions and use Cosine Similarity to identify the closest match.

This ensures fast and accurate matching even if user phrasing varies.

Handling Escalations: Automated Support Ticket System

Even with the best machine learning models, some user queries might not be answered perfectly. To handle these cases professionally, I built an automated support ticket creation system inside the chatbot flow. When a user indicates that the chatbot's answer was not helpful, the bot automatically initiates a support ticket creation dialogue.

How the Support Ticket Flow Works

Ask for the user's email:
The bot prompts the user to input a valid email address. A simple email format check (@ and . present) is performed.
Confirm or Update the Question: The user can either confirm the original query or provide additional detailed information.
Generate and Log the Ticket: A unique ticket ID is created based on the timestamp.
The ticket is saved using a helper function (save_support_ticket()).
An email notification is sent to the user using send_email_notification() and sent to the support team.
Handle Errors Gracefully: If something fails, users are informed politely, and the system logs the error and support ticket locally for admins.

Sample code:

Each step is stateful — meaning the chatbot remembers where the user is in the conversation flow — and the system automatically progresses based on user input.

This support ticket system enables the user to contact the support team correctly if the bot fails to answer their query to their liking. By combining smart automation with human fallback options, I built a chatbot that doesn't just answer questions — it ensures no customer is ever left behind.

Frontend Tech Stack and deployment

HTML5 (structure)
CSS3 (styling, animations)
Vanilla JavaScript (dynamic behavior)
Google Fonts and Material Symbols (icons)
Responsive Design (for mobile and desktop
Heroku to deploy
JS widget for deployment

Chatbot UI Features

Clean, Toggleable Interface
The chatbot toggles open and closed with a floating button, creating a minimal footprint when not in use. I used CSS transitions for smooth animations between states.
Modern, Card-Style Chat Window
The main chat interface is styled like a mobile chat app. Messages are dynamically appended to the chatbox using JavaScript.
Fully Responsive Design
On mobile screens, the chatbot resizes to full-screen mode automatically for better usability.
Asynchronous Communication with Backend
When the user submits a message, JavaScript sends an HTTP request to the Flask server.
The chatbot displays the server’s reply without reloading the page, creating a smooth, real-time experience.

Example of the JS widget:

Design Philosophy

Speed: Lightweight frontend and backend.
Simplicity: No frameworks; pure HTML/CSS/JS for maximum control.
Professionalism: Clean UX and error handling.
Expandability: Easy to add new questions, classes, or UI features.

What I Learned

Classic machine learning techniques can deliver incredible value in well-defined domains.
Frontend design plays a crucial role in user trust and experience.
Building debug tools and fallback strategies improves reliability.
Full-stack integration (Flask + Vanilla JS) made me appreciate how different layers must work together for a seamless product.

Final Thoughts

This project shows that you don't always need the biggest AI models to solve real problems.
With thoughtful backend logic and a polished, user-friendly frontend, you can build robust, safe, and beautiful ML experiences.

DEV Community: chloe

Building and deploying a Generative AI Support Chatbot with Flask and Google's Gemini API

Integration with Next.js

Clean Component Architecture

Tags

ai #chatbot #flask #javascript #backend #frontend #heroku #nextjs

OCR: Digitise Physical Text Documents with Ease

Parsing Unstructured Text Into Clean, Structured Data — A Regex-Powered Approach

Building a Headless URL Checker for Large-Scale Web Data Screening

Building and deploying a Non-Generative AI Support Chatbot with Flask