Building an Interactive Chatbot with Langchain and ChainLit: Leveraging Our Data for Enhanced Conversational Experiences
Tags: ai, openai, nlp, chatbot
Published: 2023-07-05 05:58:53

## 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**:
```python
pip install chainlit langchain tabulate pandas
```
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](scrapehero.com), one of the leading web-scraping companies in the world. Click here for **[Data Source](https://www.scrapehero.com/location-reports/McDonalds-USA/)** that we used for analysis!

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

**Sample Data:**
![Sample_Data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/500ir6auv4u0ul28ljo0.png)


## Lets dive into the code

> **app.py**
```python
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()


```

To run UI: 

> **chainlit run app.py**


![HomePage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lbqq30aavdyt5z2y5en.png)

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

![Q1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ph8mz8dke38t88ihcw2a.png)

Correct! 🤩

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

![Q2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3kv3qwba696td37bv7a.png)

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

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

![Q3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7x232p27ygunjb5bnq1.png)

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

![Q4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzneu9p6xv9uqb5em672.png)

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

![Q5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u673zzrulnswcrr64fx6.png)

## 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](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/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](https://github.com/amalaj7/Chatbot-using-Langchain-Chainlit/) .

Hope you learned something new today, **Happy Learning**!