Streamlit is an intuitive and efficient tool for quickly building web interfaces in Python. It is particularly well-suited for prototyping AI applications, machine learning dashboards, and other interactive web-based tools. With Streamlit, you can easily develop modern, React-powered interfaces while keeping everything within a Python-based environment. Additionally, deploying Streamlit applications is straightforward, whether to the cloud or as a standalone service.
Before starting, ensure you have Visual Studio Code (VS Code) open to your project directory. If you’ve followed the previous setup instructions, you should be ready to proceed. If you need guidance on setting up your development environment, refer to the setup documentation.
We begin by creating a Python script named streamlit_chat_app.py in our project directory. The initial section of the script initializes the Streamlit state, loads environment variables, and configures the OpenAI client.
streamlit_chat_app.py (Initialization Section)
import streamlit as st
from dotenv import load_dotenv
from openai import OpenAI
load_dotenv() # Load environment variables
st.title("AI Chatbot Interface")
client = OpenAI() # Initialize OpenAI client
# Set up session state variables
if "openai_model" not in st.session_state:
st.session_state["openai_model"] = "gpt-4-1106-preview"
if "messages" not in st.session_state:
st.session_state["messages"] = []
# Display chat messages
for message in st.session_state["messages"]:
with st.chat_message(message["role"]):
st.markdown(message["content"])The next section of the script captures user input, processes it using the OpenAI API, and appends it to the chat history.
streamlit_chat_app.py (User Interaction Section)
if prompt := st.chat_input("What can I help you with today?"):
st.session_state.messages.append({"role": "user", "content": prompt})
with st.chat_message("user"):
st.markdown(prompt)
with st.spinner(text="Generating response..."):
with st.chat_message("assistant"):
response = client.chat.completions.create(
model=st.session_state["openai_model"],
messages=[
{"role": m["role"], "content": m["content"]}
for m in st.session_state.messages
],
)
response_content = response.choices[0].message.content
response = st.markdown(response_content, unsafe_allow_html=True)
st.session_state.messages.append({"role": "assistant", "content": response_content})
This script captures user input from the chat box, processes the request using OpenAI’s API, and updates the chat history. The st.spinner component provides a visual indicator while the response is being generated.
To debug the Streamlit app in VS Code, configure a launch.json file inside the .vscode directory.
.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Python Debugger: Module",
"type": "debugpy",
"request": "launch",
"module": "streamlit",
"args": ["run", "${file}"]
}
]
}After saving this configuration, open streamlit_chat_app.py in VS Code and press F5 to launch the application in debug mode. The application will start in the terminal, and within seconds, a chat interface will appear.
Modern chat applications improve responsiveness by streaming content as it is generated. Streamlit provides built-in support for streaming with st.write_stream. To integrate streaming into our chat application, update the script as follows:
streamlit_chat_streaming.py
with st.chat_message("assistant"):
stream = client.chat.completions.create(
model=st.session_state["openai_model"],
messages=[
{"role": m["role"], "content": m["content"]}
for m in st.session_state.messages
],
stream=True, # Enable streaming
)
response = st.write_stream(stream) # Stream response to UI
st.session_state.messages.append({"role": "assistant", "content": response})This version allows responses to appear progressively, improving user engagement. Press F5 to run the app and see the streaming effect in real-time.
In this tutorial, we built a simple chat application using Streamlit, integrated OpenAI’s API, and enhanced the user experience with streaming responses. With just a few lines of Python, we created a fully functional chatbot interface. This demonstrates Streamlit’s power in building AI-driven applications quickly and efficiently.
Stay tuned for the next tutorial, where we explore more advanced customizations!