Build AI Chatbots with Open-Source LLMs, LangChain, and Streamlit/

...

/

Integrating Chatbots with the Streamlit Interface

Integrating Chatbots with the Streamlit Interface

Learn how to integrate the Streamlit chat interface with LLMs.

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:

Press + to interact
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. ...