Build Your Custom AI Chatbot Without Code In Minutes

Chatbots are becoming indispensable tools in the digital landscape.

They are everywhere, and they are changing the way we do things.

Until recently, this was a game for developers. But today, we are going to teach you how to create your own chatbot trained in any website data without writing any code. In MINUTES!

Boring FAQs… Where is the Chatbot?

Introducing FlowiseAI

FlowiseAI is a drag & drop tool that helps you build AI applications without any coding. It’s built on top of Langchain, the current most popular library for creating AI products.

With it, you can quickly create and customize your own AI applications, such as chatbots, language translators, and more. Even better, it’s free and open-source, meaning anyone can use it for personal or business needs.

No reason not to build your own AI product anymore.

What You Need Before We Start

A GitHub Account If you don’t have one, go to https://github.com/signup. It’s free and easy to register.

An OpenAI API Key

1. Go to https://platform.openai.com/signup and Sign Up. It’s free.
2. Go to the top right corner, click on the profile picture, and select “View API Keys”.
3. Create and save your API Key somewhere. They don’t allow you to get this code afterward. If you lose it, you will need to delete it and create a new one.
4. New accounts get a 5$ credit which is more than enough for this tutorial, but if you decide to go live, you will need to register your credit card and choose your usage limits.

Publishing your own version of Flowise

As an open-source tool, the first step to using Flowise is to deploy it to the cloud (or locally if you only want to play with it).

Here I will guide the setup using Railway since it’s the easiest one and free to start, but you can see the documentation for other options here or on the GitHub page for local installation.

1. Open the following Railway prebuilt template
2. Click Deploy Now
3. Sign In with GitHub and Authorize Flowise
4. Agree with Terms and Policies.
5. Verify Account if needed.
6. Change to your preferred repository name, check the private repository option, and click Deploy.
7. It started building. When it’s ready, you will see the published URL. This may take a few minutes.
8. Click on the link and start the app. The URL will look like frontend-production-XXXX.up.railway.app
9. (optional but recommended) To add authorization, navigate to the Variables tab and add two variables: FLOWISE_USERNAME and FLOWISE_PASSWORD (fill in the values of your choice)

That’s it! You now have a deployed Flowise on Railway!

Your Own Trained Chatbot

One of the coolest things about ChatGPT bots is that we can train them on any data.

Transforming it from a generalist to an expert in any product or subject. Flowise lets you do it in several ways; for our example, I’m teaching it about a cool AI app called Elephas, and we will use the content on their website as the training data.

For this to work, we will create one flow that reads our chosen website and feed its data to a conversation bot that uses it to answer questions in human language.

To avoid the need for extra accounts, this is a simple, functional version but not the most performative; I talk about it in the next steps section.

Let’s start.

• On the main page, click on the “Add New” button. It will create a new flow for us.
• From there, click on the + button on the top left.
• It opens their list of nodes (think of it as blocks) to use. We will need 6 nodes for our first flow. Recursive Character Text Split, Cheerio Web Scrapper, OpenAI Embeddings, In-Memory Vector Store, ChatOpenAI, and Conversational Retriever QA Chain. I will explain each one later. For now, search for each one of those, drag and drop it into the canvas. Try to position it like the image below. If it’s too tight, zoom out with the minus button at the bottom.

1. Now let’s set it up, starting from the left.
2. The Recursive Character: Text Split is there to break down the text data we collect into small chunks that will later be served to our chatbot to help it answer questions correctly.
3. Click on the circle on its border where it says “RecursiveCharacterTextSplitter”, drag and connect with the Text Splitter circle on the Cheerio WebScrapper Node. You will see a line connecting both if it works.
4. On the chunk overlap field, fill in 200. This is how many characters will be repeated between chunks to avoid breaking information too much and losing context.
5. Cheerio Web Scrapper: This node is used to read all text from the website chosen.
6. Fill in the URL you want to use as training data. For this tutorial I’ll use “https://elephas.app/”.
7. If you want to read all pages instead of only the main one, click on the additional parameters button and, select “Web scrap for relative links”, change the links limit to have a maximum number of pages allowed. This is important to avoid using more pages than you want; OpenAI API is paid by the amount of data used.
8. Connect the Node with the In-Memory Vector Store on the right. As before, drag from the small circle on the right to the circle on the left. Document to Document.
9. OpenAI Embeddings: Embeddings are a way to turn words or sentences into a mathematical representation that AI tools can search and use for natural language processing tasks.
10. Add your OpenAI API Key from before.
11. Connect it to the In-Memory Vector Store Node. OpenAIEmbeddings → Embeddings.
12. In-Memory Vector Store: A Vector Store is a database to store embeddings. There are several services to choose from, but we are using the simplest one to avoid creating new accounts.
13. Connect it to the Conversational Retriever QA Chain. Memory Retriever → Vector Store Retriever.
14. ChatOpenAI: This lets us use the famous ChatGPT language model of our choice.
15. Add your OpenAI API Key and change the temperature to 0. It tells the chat to avoid being creative and answer questions with concrete information.
16. Connect it to the Conversational Retriever QA Chain. ChatOpenAI → Language Model.
17. Conversational Retriever QA Chain: This is our chat of choice. This one is made for question-answering tasks. Nothing to do here. All set.
18. Save and choose a name for this flow. See the complete canvas below:

Now let’s test it.

Click on the chat button in the top right corner and ask a question about the site you chose. I’m starting with “What is Elephas?”. The first answer will be slower because it needs to run the training process.

Cool, isn’t it? Play with it a bit to see how well it works for you.

Adding the bot to a website

The bot is ready and can be used on any website.

On the top right corner, click on the </> icon. It will give you four options to choose from to use the bot.

I’m going to use the content on the Embed tab. Copy and paste the code to the body of any website, and it will display a chat icon as you can see on the image below. If you want to customize the look of it, click “Show Embed Chat Config” and copy the code. You can then change the images, color, and position of the chatbot when adding it to your site.

Next Steps

If you want to use this on your website long-term, I recommend replacing the In-Memory Vector Store with a persistent one like Pinecone, Chroma, or Supabase. It’s not complicated, but you will need to create an account in one of those tools and replace the In-Memory Store with it.

The best way for this is with two flows. One to train the bot and the other to use it, so you are running the training part more than once.

For the first, remove the In-Memory Store node and replace it with an Upsert Document one and fill in the setup information. After that, you will test it on the chat to run it once. Duplicate it to be used as the chatbot only, and remove the Upsert Document you created, the Recursive Character Splitter Node, and the Cheerio Web Scraper. Add the Load Existing Index Node, fill in the setup data, and voila. Bot working. This is the one you will copy the embed script and add to your site.

That’s all. AI chatbot created and ready to use with no coding required!

Using FlowiseAI, we’ve seen how powerful tools like Langchain are now accessible to everyone, regardless of technical background. Giving access to a world of possibilities and chatbots is only one of them.

Keep building!

For more free content like this: Subscribe to my Newsletter.