New Streamlit Chat Feature – Build a ChatGPT Clone in Under 50 Lines of Code 🤯
Introduction
Streamlit recently introduced a new chat feature that enables developers to create chat applications easily. In this post, I’ll walk you through building a simple chat application and then progress to creating a ChatGPT clone using Streamlit’s chat capabilities.
For those who are new to Streamlit, it’s essential to ensure you have the latest version installed. You can do this by running pip install streamlit --upgrade in your command prompt or terminal.
Simple Example
Let’s start with a straightforward example. After importing Streamlit as st, I’ll utilize the new chat_message element to create a basic chat interface. I will use the user role to display a simple greeting:
import streamlit as st
with st.chat_message("user"):
write("Hello")After saving the script, I run the app, and I can see my simple chat message displayed. The chat_message element acts as a container where you can include other elements, such as text or images.
Echo Bot
Now, let’s create a more interactive bot that echoes user input. This bot will respond with the same message that the user inputs. To achieve this, we’ll implement the session state feature in Streamlit, which allows the app to remember data between user interactions.
First, I will define a session variable called messages. If it doesn’t exist, I’ll initialize it as an empty list. Each message will be stored as a dictionary containing the role (either ‘user’ or ‘assistant’) and the content (the actual message).
if "messages" not in st.session_state:
st.session_state.messages = []
Next, I’ll display the chat history by iterating through the messages list and showing each message in a chat message container:
for message in st.session_state.messages:
with st.chat_message(message["role"]):
st.write(message["content"])Now, to capture user input, I’ll use the chat_input feature at the bottom of the app. When the user types a message, it will be added to the session variable:
if prompt := st.chat_input("Say something"):
st.session_state.messages.append({"role": "user", "content": prompt})
For the bot’s response, I’ll simply echo the user’s input using an f-string:
response = f"Echo: {prompt}"
st.session_state.messages.append({"role": "assistant", "content": response})Now, we have a fully functional echo bot! The chat history is retained, and the bot remembers previous conversations.
ChatGPT Clone
With the basics in place, let’s build a ChatGPT-like clone. Instead of echoing the user’s input, we will use the OpenAI API to generate responses. First, I need to install the OpenAI library:
pip install openai
Next, I’ll modify the app to incorporate the OpenAI API key securely using Streamlit’s secrets manager. To do this, I will create a folder called .streamlit in the root directory and add a secrets.toml file containing my API key:
[openai]
api_key = "YOUR_API_KEY"
Now, in the app, I will load this API key and set the model to gpt-3.5-turbo. This model will be used to generate responses:
import openai
openai.api_key = st.secrets["openai"]["api_key"]
model = "gpt-3.5-turbo"
To generate responses from ChatGPT, I will set up a loop that calls the OpenAI API and streams the response to simulate a typing effect:
with st.chat_message("assistant"):
response_stream = openai.ChatCompletion.create(
model=model,
messages=st.session_state.messages,
stream=True
)
for chunk in response_stream:
# Process and display the response chunk
Finally, I will display the full response and add it to the session variable to maintain the conversation history. After testing the app, I can see that it retains chat history and generates responses from ChatGPT effectively!
Outro
In this tutorial, I demonstrated how to build a simple chat application using Streamlit and then enhanced it to create a ChatGPT clone. Both examples utilized the session state feature to maintain chat history, making the experience more interactive and engaging.
With just a few lines of code, I created a functional ChatGPT clone! For those interested in further development, I encourage you to explore the Streamlit documentation for more features and customization options.
