An Interactive Chatbot App with Groq’s LLMs Using Streamlit: A Step-by-Step Tutorial

In this tutorial, we’ll walk you through the process of creating an interactive chatbot app using Groq’s Language Models (LLMs) with Streamlit. Whether you’re a seasoned developer or a beginner, this guide will help you build a functional chatbot from scratch.

Introduction:

Chatbots have become an essential tool for businesses and developers to interact with users in a dynamic and automated manner. Leveraging Groq’s advanced LLMs and the simplicity of Streamlit, we can create a sophisticated chatbot with minimal code. This tutorial will break down the steps to get you started.

Step 1: Setting Up the Environment

Before we begin coding, we need to set up our development environment.

Prerequisites:

1. Python: Make sure you have Python installed on your system.
2. Groq API Key: Sign up on Groq’s platform (https://console.groq.com/keys) to get your API key
3. Installing Required Libraries

pip install groq
pip install streamlit
pip install python-dotenv

Step 2: Creating the Chatbot Interface:

Streamlit makes it easy to create a web-based interface for our chatbot.

Create a new Python file, say app.py, and start by importing the necessary libraries:

import os
import streamlit as st
from groq import Groq
from dotenv import load_dotenv

Set up the structure of the Streamlit app:

load_dotenv()
groq_api_key = os.getenv("groq_api_key")

st.sidebar.title("Personalization")
prompt = st.sidebar.title("System Prompt: ")
model = st.sidebar.selectbox(
    'Choose a model', ['Llama3-8b-8192', 'Llama3-70b-8192','Mixtral-8x7b-32768','Gemma-7b-It']
)

# Groq client
client = Groq(api_key = groq_api_key)

# Streamlit Interface
st.title("💬 Chat with Groq's LLM")

# Initialize sessesion state for history
if "history" not in st.session_state:
    st.session_state.history = []

user_input = st.text_input("Enter your query: ", "")

if st.button("Submit"):
    chat_completion = client.chat.completions.create(
        messages=[
            {
                "role" : "user",
                "content" : user_input,
            }
        ],
        model = model,
    )
    # Store the query and response in history
    response = chat_completion.choices[0].message.content
    st.session_state.history.append({"query" : user_input, "response" : response})

    # Display the response
    st.markdown(f'<div class="response-box">{response}</div>', unsafe_allow_html=True)

# Display history
st.sidebar.title("History")
for i, entry in enumerate(st.session_state.history):
    if st.sidebar.button(f'Query {i+1}: {entry["query"]}'):
        st.markdown(f'<div class="response-box">{entry["response"]}</div>', unsafe_allow_html=True)

Running the Application:

streamlit run app.py
or
streamlit run app.py --server.port=8502

Conclusion:

Congratulations! You have successfully built an interactive chatbot app using Groq’s LLMs and Streamlit. This powerful combination allows for creating sophisticated conversational agents with minimal effort. Experiment with the chatbot, add more features, and customize it to fit your needs. :-)

Additional Resources:

For more details, check out the full tutorial on YouTube :