Build a Local Chat Application with Streamlit – Step-by-Step Guide

Streamlit is a powerful framework that lets you build web applications in Python with ease. Whether you’re a beginner or a seasoned developer, creating a chat app with Streamlit is an exciting way to explore its potential. In this blog, we’ll guide you through building a local chat application step by step.

Video- Chat Application with Streamlit

What Is Streamlit?

Streamlit is an open-source Python library that makes it simple to create and share beautiful, custom web apps for machine learning and data science projects. Its interactive features make it a great choice for applications like dashboards, visualization tools, and even chat apps!

What Will We Build?

In this tutorial, we’ll create a local chat application where users can:

• Enter their username and message.
• Send and display messages in real-time.
• Run the app locally with a clean and intuitive interface.

Step 1: Set Up the Project

First, let’s create a project folder and set up our environment. Follow these steps:

1. Create a new folder named local_chat_app.
2. Inside the folder, create the following files:

• app.py – Main Streamlit application file.
• chat_backend.py – Backend logic for storing and retrieving messages.
• requirements.txt – List of dependencies.

Install Dependencies

Add the following to your requirements.txt file:

streamlit        

Now, install Streamlit using pip:

pip install streamlit        

Step 2: Build the Backend

The backend is responsible for managing the chat messages. Open chat_backend.py and write the following code:

# chat_backend.py
class ChatBackend:
    def __init__(self):
        self.messages = []        

    def add_message(self, username, message):
        self.messages.append({"username": username, "message": message})    def get_messages(self):
        return self.messages        

Explanation:

• The ChatBackend class initializes an empty list to store messages.
• add_message(username, message) saves a message in the list with the username.
• get_messages() retrieves all messages.

Step 3: Create the Frontend

Open app.py and start building the Streamlit interface.

Initial Setup

import streamlit as st
from chat_backend import ChatBackend        

# Initialize the backend
chat_backend = ChatBackend()# App title
st.title("Local Chat Application")        

Here, we import Streamlit and the ChatBackend class, initialize the backend, and add a title to the app.

Input Fields

Add input fields for the username and message:

# Input fields
username = st.text_input("Enter your username", max_chars=20)
message = st.text_input("Enter your message", max_chars=100)        

# Button to send messages
if st.button("Send"):
    if username and message:
        chat_backend.add_message(username, message)
    else:
        st.warning("Both username and message are required!")        

Display Chat Messages

Finally, display the chat messages:

st.subheader("Chat Messages")
messages = chat_backend.get_messages()        

for msg in messages:
    st.write(f"**{msg['username']}:** {msg['message']}")        

Step 4: Run the Application

To run the app, open your terminal and type:

streamlit run app.py        

Streamlit will open the app in your default web browser. You can now enter a username and message to start chatting!

How It Works

Frontend: Users enter their username and message. When they click “Send,” the app validates the inputs and sends the data to the backend.

Backend: The ChatBackend class stores the messages in a list. These messages are fetched and displayed on the app interface.

Extending the App

This is just the beginning! Here are some ways you can enhance the app:

• Add a Database: Store messages in a database like SQLite or MongoDB for persistence.
• Real-Time Features: Use libraries like socket.io for real-time updates.
• Styling: Customize the UI with Streamlit components or CSS.

Conclusion

In this tutorial, we built a fully functional local chat application using Streamlit. This project is a great way to learn about web app development in Python. With just a few lines of code, you can create interactive, user-friendly apps.

Try building this app yourself and let us know how it turned out! Have ideas for features to add? Share them in the comments below.

Don’t forget to share this blog and follow us for more tutorials. Happy coding! ??