Create a Chatbot GUI with Streamlit in Python: A Step-by-Step Guide

📘 Introduction

Chatbots are transforming the way we interact with data, services, and even entertainment. But building an intuitive interface for your chatbot can often feel like a front-end headache. That’s where Streamlit shines. It helps you create interactive, elegant UIs for your Python scripts—without touching HTML or CSS.

In this tutorial, you’ll learn how to build a simple but powerful chatbot interface using Streamlit in just a few steps.

✅ Prerequisites

Before we begin, make sure you’ve got the following ready:

☑️ Python 3.8 or later installed

⚙️1️⃣ Install Streamlit

Let’s kick things off by installing Streamlit. Open your terminal and run:

pip install streamlit

💻2️⃣ Build Your Chatbot UI

Create a new file in your working directory and name it app.py. Open it in your favorite code editor and paste the following code:

import streamlit as st

# A mock chatbot function
def chatbot_response(user_input):
    return f"You said: '{user_input}'. This is a dummy response 🤖"

# App title
st.title("💬 Chat with Your Bot")

# Initialize chat history
if "messages" not in st.session_state:
    st.session_state.messages = []

# Display chat history
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

# Accept user input
if prompt := st.chat_input("Your question"):
    # Display user message in chat
    with st.chat_message("user"):
        st.markdown(prompt)

    # Add user message to chat history
    st.session_state.messages.append({
        "role": "user", 
        "content": prompt
    })

    # Get assistant response
    response = chatbot_response(prompt)

    # Display assistant response in chat
    with st.chat_message("assistant"):
        st.markdown(response)

    # Add assistant response to chat history
    st.session_state.messages.append({
        "role": "assistant", 
        "content": response
    })