Enhance your Website with AI: Embed a GPT-ChatBot with Flowise
Tags: ai, pinecone, chatgpt, flowiseai
Published: 2023-11-10 11:25:55

In this step-by-step tutorial, I'll guide you through providing a chat interface on your website. We'll deploy Flowise on Hugging Face and use it to create a ChatBot. This bot will index your website's content in a Pinecone vectorstore and leverage OpenAI GPT for Natural Language Processing (NLP).

## Obtaining your OpenAI and Pinecone API keys

Initially, you'll require access to OpenAI's LLM and Pinecone vectorstore. Note that Flowise is compatible with various other LLMs, such as VerxtexAI, LocalAI, and certain models on Hugging Face, as well as other vectorstores like Qdrant, Supabase, FAISS, or Chroma.

To access OpenAI, create an account and generate an API key at [this page](https://platform.openai.com/api-keys). Ensure its secure storage.

![OpenAI Key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g9wof37nkyu2tpp4pht.png)

Also, sign up at [Pinecone](https://www.pinecone.io), create a new *Chat Application* project, and set up a new index (for instance, *yogarkana*).

![Pinecone Index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qhwqt272l7zejz91j9v.png)

Ensure your vectorstore is configured with 1536 dimensions (matching the OpenAI embedding model) and uses cosine distance to measure vector similarity.

![Pinecone API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8i9f4dkxnyz7kh6acyz.png)

Then, retrieve your API Key and the *Environment* value from the Pinecone admin console.

## Deploying Flowise on Hugging Face

[Flowise](https://flowiseai.com), an open-source, no-code visual tool, utilizes [LangchainJS](https://js.langchain.com). It can be deployed locally, in a Docker container, or on cloud platforms. For this guide, we'll use Docker in a Hugging Face Space.

If you don't have an account on Hugging Face, [create one](https://huggingface.co/join) and then a [new Space](https://huggingface.co/new-space).

![New Space in Hugging Face](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bctwrz2joy3r2vffp3lu.png)

For this tutorial I named it *Flowise*, selected *Docker* and a *Blank* template.

In the settings menu, set the `PORT` variable to 7860 and create `FLOWISE_USER` and `FLOWISE_PASSWORD` secrets for secure access.

![Hugging Face Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0noayl6u0awxc1sih9b3.png)

In the *Files* view, create a new Dockerfile with this content:
```Docker
FROM node:18-alpine
USER root

# Arguments that can be passed at build time
ARG FLOWISE_PATH=/usr/local/lib/node_modules/flowise
ARG BASE_PATH=/root/.flowise
ARG DATABASE_PATH=$BASE_PATH
ARG APIKEY_PATH=$BASE_PATH
ARG SECRETKEY_PATH=$BASE_PATH
ARG LOG_PATH=$BASE_PATH/logs

# Install dependencies
RUN apk add --no-cache git python3 py3-pip make g++ build-base cairo-dev pango-dev chromium

ENV PUPPETEER_SKIP_DOWNLOAD=true
ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser

# Install Flowise globally
RUN npm install -g flowise

# Configure Flowise directories using the ARG
RUN mkdir -p $LOG_PATH $FLOWISE_PATH/uploads && chmod -R 777 $LOG_PATH $FLOWISE_PATH

WORKDIR /data

CMD ["npx", "flowise", "start"]
```

![Files in Hugging Face](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1o8xnkfuqrcu8pgwwjx0.png)

Hugging Face will build everything in a few minutes, making Flowise available for use!

## Creating the Upsert Flow

Our first task is to scrape website content, obtain associated embedding vectors, and store them in Pinecone.

In the Flowise UI, select and link your components. Begin with a Cheerio Web Scraper.

![Web Scraper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ooy0z2vpl2h9apmczwum.png)

Note: In the example screenshot, the scraper is configured to index a single page. Adjust the *URL*, *Link Limit*, and *CSS Selector* parameters to target specific content.

Next, add a *HtmlToMarkdown Text Splitter* to convert HTML to Markdown and split content based on Markdown headers. Chain the two components.

![Text Splitter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znfdxs8wosea3wtbbotr.png)

The scraped documents are sent to OpenAI, and the returned vectors are stored in Pinecone. Add two new components for this purpose and configure them with the previously generated OpenAI and Pinecone keys.

![Embeddings and Picone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvok4fofn9ivektd3ruf.png)

Finally, add a *ChatOpenAI* agent and a *Conversational Retrieval QA Chain* to activate the flow. The OpenAI Key is needed again.

![Chat for upsert](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5aowgwixypxbybb1oir.png)

After setting up and saving the chatflow, initiate the upsert by starting a chat from the Flowise console. This triggers the scraping and indexing process.

![First Chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89pgty9390gggqy8norj.png)

Check your index in the Pinecone console.

![Vectors in Pinecone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvuswqutik2tqcp8xhwv.png)

## Creating the QA Flow

With embeddings in the vectorstore, create a separate flow for chat interactions with users.

Reuse *OpenAI Embeddings* and *ChatOpenAI* previous components. For the vectorstore, select a *Pinecone Load Existing Index* component, using the same parameters as in the upsert flow.

Complete the flow with a *Conversational Retrieval QA Chain* for document-based QA, enabling links to documents in chat responses.

![Chat Flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lug009jajo69uu5uaz2.png)

To refine the ChatBot, set additional parameters for general instructions using *System Message* and *Chain Option*. For example, I configured my bot to converse in French.

![Additional Parameters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwv0cpihgh6pnzjrinvh.png)

## Embedding the ChatBot on Your Website

Now that the ChatBot is functioning, embed it on your website. Flowise provides an API and various embedding options with ready-to-use code (shell, Python, JavaScript).

Choose the *Embed* and *Popup Html* options and copy/paste the provided code in our website's code. 

![Embed code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/303pt4vvj5dub76tn4mc.png)

Navigate to your modified website and start asking questions to the ChatBot!

![ChatBot on YogArkana](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bqk3ua2zeahuk03qz0t.png)

Customize the popup window by checking the *Show Embed Chat Config* box in Flowise and modifying widget parameters. You can alter colors, avatars, and messages.

```javascript
<script type="module">
    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
    Chatbot.init({
        chatflowid: "01e997da-2a5f-4db3-96c7-9e6810eb75a8",
        apiHost: "https://yogeek-flowise.hf.space",
        chatflowConfig: {
            // topK: 2
        },
        theme: {
            button: {
                backgroundColor: "#3B81F6",
                right: 20,
                bottom: 20,
                size: "medium",
                iconColor: "white",
                customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
            },
            chatWindow: {
                welcomeMessage: "Bonjour, je suis votre assistant sur YogAkana !",
                backgroundColor: "#ffffff",
                height: 700,
                width: 400,
                fontSize: 16,
                poweredByTextColor: "#dedede",
                botMessage: {
                    backgroundColor: "#e6fbf7",
                    textColor: "#303235",
                    showAvatar: true,
                    avatarSrc: "https://www.svgrepo.com/show/409868/bot.svg",
                },
                userMessage: {
                    backgroundColor: "#44BCA8",
                    textColor: "#ffffff",
                    showAvatar: true,
                    avatarSrc: "https://www.svgrepo.com/show/452487/user.svg",
                },
                textInput: {
                    placeholder: "Entrez votre question",
                    backgroundColor: "#ffffff",
                    textColor: "#303235",
                    sendButtonColor: "#44BCA8",
                }
            }
        }
    })
</script>
```

![Customized ChatBot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gq6b5v90vg1q28u1y8yp.png)

For more extensive customization, fork the [Flowise Chat Embed](https://github.com/FlowiseAI/FlowiseChatEmbed) repository on GitHub and modify the widget's source code. Update the embedding script to import code from your forked repository.

```javascript
<script type="module">
      import Chatbot from "https://cdn.jsdelivr.net/gh/username/forked-repo/dist/web.js"
      Chatbot.init({
          chatflowid: "01e997da-2a5f-4db3-96c7-9e6810eb75a8",
          apiHost: "https://yogeek-flowise.hf.space",
      })
</script>
```

---

In conclusion, integrating a GPT-powered ChatBot into your website using Flowise, Pinecone, and Hugging Face is a forward-thinking approach to enhancing user experience. With these tools, you've not only automated interactions but also harnessed the power of AI to provide real-time, efficient, and personalized responses to your visitors.

---
## Check my tutorial video on Flowise!

{% embed https://www.youtube.com/watch?v=IRAc3hW6yf8 %}