DEV Community

Cover image for Enhance your Website with AI: Embed a GPT-ChatBot with Flowise
raphiki for Technology at Worldline

Posted on • Edited on

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.

OpenAI Key

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

Pinecone Index

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

Pinecone API

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.

New Space in Hugging Face

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

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


Enter fullscreen mode Exit fullscreen mode

Files in Hugging Face

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

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

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

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

Chat for upsert

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

Check your index in the Pinecone console.

Vectors in Pinecone

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

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

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

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

ChatBot on YogArkana

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>


Enter fullscreen mode Exit fullscreen mode

Customized ChatBot

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>


Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
nchitsike profile image
norbert chitsike

Thanks for the tutorial. I have question would you know how to pass my Web application variables into the chat bot

Collapse
 
makis_takis_68b6343060959 profile image
Makis Takis

Great one big thanks