DEV Community

Cover image for Building an Interactive Chatbot with Langchain and ChainLit: Leveraging Our Data for Enhanced Conversational Experiences
Amal Ajay for ScrapeHero

Posted on

Building an Interactive Chatbot with Langchain and ChainLit: Leveraging Our Data for Enhanced Conversational Experiences

Langchain:

Langchain is an open-source library that provides developers the tools to build applications backed by large language models (LLMs). It provides a standard interface for chaining together different components to create more advanced use cases around LLMs. These components include:

  • Prompt templates: Templates for different types of prompts, such as "chatbot" style templates, ELI5 question-answering, etc.
  • LLMs: Large language models like OpenAI Models, Anthropic, Azure, BLOOM, etc.
  • Agents: Use LLMs to decide what actions should be taken.
  • Memory: It refers to persisting state between calls of a chain/agent.
  • Evaluation: Evaluates the performance of chains and agents.

Langchain also provides a number of integrations with other tools, such as:

  • OpenAI API: OpenAI API provide access to its models.
  • Hugging Face Transformers: It is a library for working with LLMs & custom models.
  • Chainlit: Chainlit is a library for creating user interfaces for chatbots expecially for LLMs.

Chainlit

Chainlit is an open-source library that makes it easy to create user interfaces for chatbots powered by large language models (LLMs). It is built on top of the React framework and provides a number of features that make it easy to create interactive and engaging chatbot experiences.

Some of the key features of Chainlit include:

  • Easy integration with LLMs: Chainlit can be easily integrated with any LLM that supports the OpenAI API. This makes it easy to create chatbots that can generate text, translate languages, answer questions, and more.
  • Flexible UI components: Chainlit provides a number of flexible UI components that can be used to create a variety of chatbot experiences. These components include text boxes, buttons, dropdown menus, and more.
  • Support for custom styling: Chainlit supports custom styling, so you can easily customize the look and feel of your chatbot.
  • Easy deployment: Chainlit can be deployed to any web server, making it easy to share your chatbot with others.

Getting Started

Requirements:

pip install chainlit langchain tabulate pandas
Enter fullscreen mode Exit fullscreen mode

Use

Python Version: 3.10

Data:

Data is about location reviews and ratings of McDonald's stores in USA region.

Data has been collected from ScrapeHero, one of the leading web-scraping companies in the world. Click here for Data Source that we used for analysis!

Columns:
ID, Provider_name, Address, Street, Zip_Code, State, City, Author, Review, Rating

Sample Data:
Sample_Data

Lets dive into the code

app.py

from langchain.agents import create_pandas_dataframe_agent
from langchain.llms import OpenAI
import pandas as pd
import chainlit as cl
import io

open_ai_key = "YOUR_API_KEY"

# Create an OpenAI object.
llm = OpenAI(openai_api_key=open_ai_key)


def create_agent(data: str, llm):

    # Create a Pandas DataFrame agent.
    return create_pandas_dataframe_agent(llm, data, verbose=False)


@cl.on_chat_start
async def on_chat_start():

    # Sending an image with the local file path
    elements = [
    cl.Image(name="image1", display="inline", path="./good_day.jpg")
    ]
    await cl.Message(content="Hello there, Welcome to AskAnyQuery related to Data!", elements=elements).send()

    files = None

    # Waits for user to upload csv data
    while files == None:
        files = await cl.AskFileMessage(
            content="Please upload a csv file to begin!", accept=["text/csv"], max_size_mb= 100
        ).send()

    # load the csv data and store in user_session
    file = files[0]
    csv_file = io.BytesIO(file.content)
    df = pd.read_csv(csv_file, encoding="utf-8")

    # creating user session to store data
    cl.user_session.set('data', df)

    # Send response back to user
    await cl.Message(
        content=f"`{file.name}` uploaded! Now you ask me anything related to your data"
    ).send()


@cl.on_message
async def main(message: str):

    # Get data
    df = cl.user_session.get('data')

    # Agent creation
    agent = create_agent(df, llm)

    # Run model 
    response = agent.run(message)

    # Send a response back to the user
    await cl.Message(
        content=response,
    ).send()


Enter fullscreen mode Exit fullscreen mode

To run UI:

chainlit run app.py

HomePage

Question 1: What is the average rating for McDonald's across all locations?

Q1

Correct! 🤩

Question 2: Which state has the highest average rating for McDonald's?

Q2

Guam (GU) Location. Users voted for 5 star across all stores.

Question 3: Which state has the highest number of reviews?

Q3

Question 4: Give me top 5 negative reviews mentioned in Florida location? Give them in bullet points.

Q4

Question 5: What are the top 5 positive reviews from 6875 Sandlake Rd, Orlando in Florida, give them in bullet points.

Q5

What We Have Learnt & What Can Be Improved

Now with the help of Langchain and Chainlit we can easily built chatbot according to custom use-cases.
Also while analysing large data, OpenAI model GPT-3.5 turbo has a limited context length of 4096 tokens which causes a error if we wanted an analysis on huge data. In that case, you can go for GPT-4 which has 32,768 context length tokens or Anthropic that has 100k context length.

Next step can be including plots in the Chatbot when user asks queries about plotting figures. For example: User can ask query like Create a bar graph on the top 5 rated stores location of Mcdonalds in USA .

The above mentioned code are available in my Github Repository attached here .

Hope you learned something new today, Happy Learning!

Top comments (0)