top of page

Build Brilliant Bots: Elevate Your Website with ChatGPT


AI chatbot on website

Chatbots have been a staple on websites for many years, predating the recent surge in Generative AI (GenAI) and ChatGPT technologies. Unfortunately, earlier versions of these chatbots often fell short, providing inaccurate responses and failing to meet user expectations. Now, with the introduction of GenAI and ChatGPT, we have the chance to harness these cutting-edge advancements to offer a significantly enhanced chat experience for your website visitors.


In this guide, we’ll explore the process of building an intelligent chatbot customized to your company’s unique content and needs. The initial focus will be on indexing your website to enable the chatbot to answer relevant questions with precision. As we progress, future posts will delve into strategies for expanding the knowledge base and incorporating advanced features to make the chatbot even more effective and versatile.


Objectives

  • Leverage low-code/no-code components for ease of development.

  • Ensure the chatbot provides accurate content related to the company’s products and services.

  • Enhance customer engagement through accurate and prompt responses.


Tools and Technologies Used (expand each for more detail)

OpenAI API

Large Language Models (LLMs), like those powered by OpenAI’s ChatGPT, are AI systems designed to understand and generate human-like text. ChatGPT, built on advanced GPT architecture, can process natural language inputs, provide detailed responses, and handle diverse conversational contexts. The OpenAI API allows developers to integrate this functionality seamlessly into applications, enabling customized and intelligent interactions.

Flowise AI

Pinecone


Step-by-Step Implementation

Set Up the Chat Flow

  • Access the Flowise application.

  • From the Chatflows section, click Add New to create a new chat flow.

  • Assign an appropriate name to the chat flow and save it.


Flowise chatflow screen
Create a ChatFlow

Add Core Nodes


Click on Add Node and Add a “Conversational Retrieval QA Chain” node to the chat flow.


Conversation Retrieval QA chain
Conversational Retrieval QA Chain

Add a ChatOpenAI node and link it to the Conversational Retrieval QA Chain


ChatOpenAI Node
ChatOpenAI Node


Obtain your OpenAI API key

To obtain your OpenAI API key, follow these steps:

1. Sign Up: Create an account on the OpenAI platform.

2. Generate API Key: After logging in, navigate to the API keys section in your account settings. Click on “Create new secret key” to generate your unique API key.

3. Secure Your Key: Copy the API key and store it securely, as it will not be displayed again. It’s recommended to set it as an environment variable on your local machine to keep it safe.

For detailed instructions, refer to OpenAI’s official quickstart guide.

Note: Keep your API key confidential to prevent unauthorized access to your OpenAI account.


Set up the OpenAI API credentials in Flowise:

  • Provide a name for the credential.

  • Save the API key.

  • Select a suitable model like gpt-4o-mini and set the Temperature to 0.5 to ensure the chatbot remains factual.


OpenAI configurations
OpenAI configurations

Pinecone Integration



Setup a Pinecone account

Sign Up for Pinecone: Visit the Pinecone website and create an account using your email or an existing authentication method.

Create a Project: After logging in, navigate to the dashboard and create a new project. Specify the required settings such as region and capacity.

Generate an API Key: Go to the API Keys section in the dashboard. Click on “Create API Key,” provide a name, select permissions (e.g., read/write), and save.

Secure Your API Key: Copy the generated API key and store it securely, as it won’t be displayed again. Use environment variables in your application setup to keep it safe.

Create an index in Pinecone to store your chatbot’s knowledge.


Create Pinecone Index
Create Pinecone Index

Add a Pinecone node and configure it with your Pinecone API key


Pinecone Configuration
Pinecone Configuration


Add an OpenAI Embeddings node using the OpenAI credential and connect it to the Pinecone node


OpenAI Embeddings
OpenAI Embeddings


Index Your Website


Add a Cheerio web scraper node to extract content from your website and point it to the website you want to scrape.


Web scraper configuration
Web scraper configuration

Add a “Recursive Character Text Splitter” node to properly segment the content before storing it in Pinecone.


Recursive Character Text Splitter
Recursive Character Text Splitter

To index the content for the first time, we will perform an "upsert" that will scrape the content from the website, vectorize it and store in the Pinecone database. Click on the Upsert button on the top right.


Upsert to Pinecone
Upsert function to index site

Click the Upsert button to execute the pipeline. (The time taken depends on the amount of content being processed.)


Upsert to Pinecone
Upsert to Pinecone


Once the upsert pipeline completes successfully, test the chatbot by asking questions to ensure it retrieves accurate and relevant answers.


Testing the chat
Chatbot Testing

Embed the Chatbot

Use the Code Embed option to generate HTML code.


Code embed
Code Embed

Add this code to your desired web page using your website editor or CMS.


Code embed
Add Embed code on your web page

Congratulations! You have successfully integrated an AI chatbot into your website.


Chatbot in website
Chatbot in web site


Congratulations! You now have a fully functional AI chatbot trained on your company’s content. By following these steps, you’ve leveraged the power of Flowise, OpenAI API, and Pinecone to build a practical solution for improving customer interactions. Stay tuned for the next post in this series, where we’ll discuss enhancements and advanced functionalities.

12 views0 comments

Recent Posts

See All

Comments


contact@techfuse.ai

18 King Street East, Suite 1400, Toronto, ON, Canada, M5C 1C4

Stay in Contact with us

Submission Successful!

Connect with Us:

  • LinkedIn
  • Facebook

© 2024 TechFuse All Rights Reserved

bottom of page