Enhance your Website with AI: Embed a GPT-ChatBot with Flowise

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. Ensure its secure storage.

Also, sign up at Pinecone, create a new Chat Application project, and set up a new index (for instance, yogarkana).

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

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

Deploying Flowise on Hugging Face

Flowise, an open-source, no-code visual tool, utilizes LangchainJS. 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 and then a new Space.

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.

In the Files view, create a new Dockerfile with this content:

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"]

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.

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.

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.

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

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.

Check your index in the Pinecone console.

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.

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.

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.

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

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.

<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>

For more extensive customization, fork the Flowise Chat Embed repository on GitHub and modify the widget's source code. Update the embedding script to import code from your forked repository.

<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!