This series of articles provides insights into developing a full-stack chatbot application with a strong focus on UI/UX. This is the first of 3 articles in the series.

Chatbots are mainly used for customer service, personal assistance, and information retrieval in the industry. They consist of a chat interface that enables end users to interact with a non-human entity for automated assistance. The invention of the chatbot is revolutionary as it greatly reduces manpower and business operational costs, and it can operate 24/7 with consistent performance provided there is adequate engineering maintenance.

Inspired by ChatGPT, I started a personal project last summer to develop a rule-based chatbot for fun. This summer, during my internship, I developed an advanced chatbot application using Retrieval Augmented Generation (RAG) integrated with Large Language Models (LLMs). In this series of code examples, I will primarily use HTML, CSS, JavaScript, and Python. You might be using frameworks like React, Bootstrap, or other modern technologies for the frontend. Go ahead! I preferred to code with vanilla frontend languages without frameworks as my interfaces were simplistic and I wanted to have complete control over the design, but you can still adapt the coding examples I provided to your product.

I have learned everything about frontend, UI/UX, backend, and chatbot development from scratch through trial and error and online resources, without formal education in software engineering. Although this is about full-stack chatbot development, all of the insights I’ll discuss in this series will mainly focus on frontend with minimal backend aspects and mostly based on my experiences and intuitions. Some of the tips, tricks, and insights I learned were personally taught to me by experienced industry engineers.

To be clear, this is not a step-by-step tutorial on constructing a chatbot. Rather, this article aims to guide you and provide insights on how to approach the process. To fully grasp the concepts discussed, it is best to have a basic understanding of software engineering and natural language processing (NLP).

Step 1: Define the Chatbot’s Objectives

The first question you should ask yourself is: What is the purpose of your chatbot? Is the chatbot for customer service to answer customers’ queries? Should it perform information retrieval tasks like retrieving essential information from PDFs? Or should it be used merely for entertaining users? Each purpose requires a very different approach to constructing the backend logic. Based on your objectives, do you need an AI to operate the conversation, or will a rule-based system using Python NLTK suffice? The former is much more complicated as it requires significant computational power especially a GPU for scalability, while the latter is easier to implement but tedious in defining all the rules needed for the conversation flow.

Here’s a detailed comparison between AI and non-AI chatbots to help you decide which approach suits your needs the best:

Regardless of the objectives of your project and proposed tools and technologies, the UI/UX aspects of a chatbot are universal and can be implemented in most scenarios.

Step 2: Decide on Chatbot’s Features

What do you want your chatbot software to do besides chatting? Do you need a reset history functionality? What about a light and dark mode feature that allows users to select their own aesthetic interface for the software? Should users send messages through a clickable button or just press Enter on the keyboard to achieve the same result, or both? Do you want users to save or share their conversation history? What if users want to delete a message or copy it, do you want to include a feature for this? Do you need clickable prompts so that users have an idea to get started with the conversation? Do you need a simple FAQ so that users can learn more about your software? Should users be using voice commands for inputting text? Most of the features you add will directly impact the UX of the product, either enhancing or degrading it, so it is crucial to consider them decisively. Don’t overwhelm your users with too many features. The key to good UI/UX is to enable your users to use your chatbot without having to think much.

Don’t worry too much about the nitty-gritty details of the features. I didn’t have all the ideas in mind when I constructed the chatbots. Based on my experience, frontend development is an iterative process. You can’t plan everything right from the beginning. As time passes and you have an MVP for your chatbot, you will naturally get ideas as you observe users interacting with your product. Observe their reactions when they navigate the product and take note of their pain points, then reimplement improvements. UI/UX can never be perfect on the first try. In product development, your main focus should be the core functionality of the product—in this context, the conversationalist chatbot. Focus on your chatbot logic with a basic interface first, then refine the UI/UX over time.

Naming Your Chatbot

Don’t forget to name your chatbot. Try to name your chatbot with a non-human name like MathBot, ChatArt, or something that is not a name like John Doe, Muthu, Siti, or Wang Dai Lou.

Here is the thought process for your reference:

1. Choose a Concept
   • What is the main purpose of your chatbot?
2. Brainstorm Names
   • List potential names that are non-human.
3. Check Uniqueness
   • Ensure the name is unique and not used by others.
4. Finalise
   • Select the best name that fits the purpose and uniqueness criteria.

Step 3: Project Setup and Planning

File Directory Setup

To get started, you should create a new virtual environment in your preferred IDE. VS Code is always recommended. At a basic level, you need 5 different files, each for its own purpose, and they can be named anything. Let’s name them index.html, styles.css, script.js, chatbot.py, and app.py for the standard practices. The python chatbot.py is to include the chatbot conversation, while app.py is to integrate the frontend and backend using Flask.

The project structure setup could be:

project/
│
├── static/
│   ├── styles.css
│   └── script.js
│
├── templates/
│   └── index.html
├── chatbot.py
├── app.py
└── requirements.txt

The project structure varies according to your languages and frameworks, as well as the scale of your chatbot. Feel free to adjust it to your needs.

Before proceeding, I want to share an important tip:

Tip: It is important to know how to regularly save your code using Git on an online platform like GitHub from the IDE you’re using whenever you make progress.

This practice helps in tracking changes to your code and ensures thorough documentation throughout the development process. Avoid manually modifying the code directly on GitHub after that, as this can cause Git conflicts and slow down the engineering progress.

Software Engineering (SWE) Methodology

It’s beneficial to follow a SWE methodology like Agile, Waterfall, DevOps, or Lean. While there are certainly more methodologies available, I personally find myself using Agile more often as I always start by building a minimal basic application, then iteratively add complexity by introducing new features. Then, continually make improvements based on regular stakeholder feedback.

I have compared these 4 methodologies based on my understanding:

Design Patterns and Architecture

When developing an appication, leveraging design patterns and architectures is crucial for creating a maintainable and efficient system.

Design patterns offer pre-defined solutions to common problems, tailored for various scenarios and requirements. They address common code-level issues and help to refine and build subsystems. Their relevance can vary depending on programming languages and paradigms. For instance, Singleton is common in OOP languages like Java and C++ but less so in functional languages like Haskell. To be concise, design patterns are medium-scale tactics for structuring and defining entity relationships.

While architectural styles operate at a higher level, focusing on large-scale components and a system’s overall structure and mechanisms. They provide strategic guidance for the system’s global properties and organisation.

You can think of design patterns as simple building instructions for making different Lego structures, while architectural styles are like the big map showing how to build an entire Lego city.

Here are some key design patterns and architectural styles to know when building a chatbot application:

Design Patterns

Architectural Styles

Understanding these concepts in detail isn’t compulsory, but it’s still good to know them at a high level. They assist in designing code properly and managing component interactions. Typically, a single application will use a mix of design patterns and architectural styles to address various needs. For more in-depth knowledge, do search online as I’m only providing a quick recap.

Personally, I didn’t realise I was using these patterns when I first started coding. However, knowing them has really helped in developing an intuition for managing different technology architectures in a project.

Step 4: Develop Chatbot Logic for Backend Functionality

Although this is listed as Step 4, you could also make it Step 5. You can construct the backend before the frontend, or vice versa. There’s no hard rule for this. The backend and frontend can also be developed simultaneously, especially if you’re working in a team with dedicated roles for frontend, backend, database, etc. But I prefer to construct the chatbot logic before building the frontend because understanding how the chatbot functions helps in designing a UI that complements the overall UX.

Designing Chatbot Conversations

When designing the chatbot conversation output, it is best not to make it too “human”. From my observation, if it is too human-like, users might expect too much from the chatbot and treat it as a super AI when it’s not, so it might disappoint users more when its performance doesn’t match their expectations. Try to avoid generating output that includes emotions, slang, or filler words. The tone of language should be professional and formal unless you’re trying to build a chatbot for entertainment, then that’s a different context.

Designing Chatbot Pipeline

For a non-AI chatbot, a rule-based system forms the backbone of its functionality without relying on complex language models. It operates by establishing predefined rules and patterns that dictate how the chatbot interprets user inputs and generates responses. That’s why you need to consider all possible interactions users may have with your chatbot. It’s best to include clickable common query prompts or a clear initial instruction message from the bot to help users effectively navigate the conversation. Clickable prompts offer users predefined options or actions, each linked to specific rules within the chatbot’s decision-making framework and allows it to quickly retrieve and deliver responses to common queries.

For an AI chatbot, you need to find an LLM suitable for your context. There are two types of LLMs: proprietary and open source. Proprietary models are powerful but require payment per API call, while open-source models are free but less powerful. Typically for a production business chatbot in customer service, education, research, or internal company use, you would need to build a Retrieval Augmented Generation (RAG) pipeline with relevant datasets (it could be in JSON, PDF, CSV, or whatever format for storing information) and integrate the LLM into it. The LLM utilises embeddings (vector representations of text) to understand and generate human-like responses. So prompt engineering becomes a crucial process to “fine-tune” the model’s performance, often involving techniques such as few-shot learning and context management to optimise for specific tasks.

Assuming you have built the chatbot logic using Python and included it in chatbot.py. It is recommended to test your chatbot conversation logic before integrating it with the frontend. Especially if you’re using an LLM, you need to set up various configurations like embedding models, tokenizers, and more settings. A single aspect not working correctly can crash your entire chatbot system. That’s why it is essential to have error logging in place and carefully observe every output your code produces before integrating with the frontend.