Search⌘ K
Home
Courses
Build AI Chatbots with Open-Source LLMs, LangChain, and Streamlit

Integrating Chatbots with the Streamlit Interface

Explore how to build and integrate conversational chatbots using Streamlit's chat components combined with large language models. Understand the code structure for managing chat history, user inputs, and AI-generated responses. Gain practical skills in setting up real-time interactive dialogue systems with seamless back-end and front-end integration.

We'll cover the following...

Introduction to chat elements

Streamlit provides a couple of chat elements specifically designed to build conversational chatbots. These elements allow us to build a question-answer dialogue between the user and the LLM.

  • st.chat_input: This displays a chat input widget that allows the user to type in queries.

  • st.chat_message: This displays a chat message container that allows the app to display messages from the user or the LLM.

  • st.status: This displays output from long-running processes and external API calls so that the user can get updates while the chatbot is working on its response.

Understanding the coding process

Let’s build a chatbot using Streamlit, Groq, and Llama LLM. We will first go through the code to understand how the different elements and functions work.

We’ll start by coding the main app.py script:

Python
import streamlit as st
import pandas as pd
from chatbot import generate_answer
# Set the general configuration of the main page
st.set_page_config(
    page_title="Chatbot",
    page_icon="🧊",
    layout="wide",
    initial_sidebar_state="expanded"
)
# Set the title
st.title(":rainbow[LLM chatbot]")
# Initialize chat history
if "messages" not in st.session_state:
    st.session_state.messages = []
# Display chat messages from history on app rerun
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("How can I help you today?"):
    # Add user message to chat history
    st.session_state.messages.append({"role": "user", "content": prompt})
    # Display user message in chat message container
    with st.chat_message("user"):
        st.markdown(prompt)
    # Display assistant response in chat message container
    response = generate_answer(prompt)
    st.session_state.messages.append({"role": "assistant", "content": response})

In this code, we perform the following steps:

  • Lines 1–2: We import the necessary libraries, including streamlit and pandas ...