...

How to Build a Chatbot with GPT Using Landbot No-Code Platform

Illustrator: Adan Augusto
build a chatbot with GPT 3

As artificial intelligence continues to evolve, it brings forth remarkable advancements. One of the latest and most talked about breakthroughs in AI is GPT-3, an exceptional natural language processing (NLP) model developed by OpenAI that employs deep learning to generate text that closely resembles human language.

Why is it so important?

It's an absolute game-changer for chatbot creation as in combination with the right visual builder like Landbot, it can make AI bot building accessible to anyone.

In this step-by-step tutorial, we demonstrate how to build a chatbot with GPT-3 for your WhatsApp channel and do so, without writing a single line of code, if it’s not your forte or you simply want to speed up chatbot development. 

Though before we start, let’s clarify a couple of things you should know when working with GPT.  

GPT Completion API and Chat API Differences Explained

OpenAI offers two main types of GPT products: Completion API & Chat API.

These two APIs offer different features and advantages, but are often mistakenly treated as being interchangeable. To get the best results, it's essential that you choose the right API for your use case.

The Completions API models are designed to generate text based on a prompt or partial input. They excel at tasks like text completion (like the automated suggestions you see when writing an email), text generation, and language translation. They are most commonly used for writing assistance, content generation, or summarization.

On the other hand, Chat API models are specifically trained to facilitate conversational interactions. Their purpose is to simulate a conversation with a human-like language understanding. These types of models are more suited for tasks involving back-and-forth interactions, providing responses to user queries, and engaging in dialogue-based applications.

Chat models are significantly harder to train than the Completions models. 

While a completion model will typically generate a single response given a prompt, a chat model is capable of handling of natural turn-taking within a conversation and can maintain context across multiple user inputs.

All in all, when choosing the model, you must closely consider your use case, the goal you want to achieve, and the technical capabilities of your team.

GPT Limitations and Problems

GPT large language models are not without issues. 

The most common problems you are likely to encounter are: 

  • Hallucinations. When a bot goes rogue and makes up an answer, it’s called a hallucination. You can try to minimize the probability of this happening by providing it with a really clear prompt and by setting the temperature as low as possible. Still, there is no guarantee your bot won’t hallucinate from time to time.  
  • Timeouts. Like all APIs, from time to time, GPT will fail or take too long to respond. As you will see in the tutorial below, you can help regulate this issue by adding ‘Response Routing’ to your Webhook. This way, when it fails, you can remove the user from the conversation loop and either offer an error/try-again message or simply take them down an alternative rule-based flow instead of an AI conversation. 

While you can’t eliminate these problems completely, there are ways to keep them under control to minimize impact, for example, by writing better chatbot prompts. We will discuss it further in the tutorial.

How to Build a Chatbot with GPT-3 without Coding

In this tutorial, we will take you over a pre-designed WhatsApp GPT-3 template. The bot in question is a customer satisfaction bot that was designed to collect data and summarize the incident in case a customer was unsatisfied with the service/product. It uses the Completions API model. 

The article offers a step-by-step take-through of the template and detailed WHYs and HOWs behind everything you will encounter working with it.

Click here to access the WhatsApp-GPT-3 template to follow along with the tutorial!

NOTE: If reading isn’t really your preferred way of learning, you can watch the WhatsApp AI webinar recording which follows and explains the same flow:

1. Setting Up the Accounts

To be able to reproduce or create a similar chatbot, you will need to sign up or log in to Landbot and OpenAI accounts. Landbot offers a free trial. In the case of OpenAI, you will receive a free credit of $5, which is enough to last you for about three weeks of heavy testing, though you will have three months to spend it. Overall, OpenAI’s pricing depends on the volume of requests and the model of GPT you will be using. However, it’s quite cost-effective. 

As soon as you create your OpenAI account, you will be redirected to the API key area. If not, simply click on your account icon in the top right corner and select “View API keys.”

open ai api keus

2. Outline/Review the Chatbot's Purpose & Flow

We want this AI bot to do whatever it takes to collect a customer order number, email address, and a summary of the issue. Then, have it connect and send this information to our customer support team database—in this case, stored in Airtable—to check that the email and order number are verified. 

GPT chatbot template

The flow is divided into two main parts.

The first part is a loop where GPT will ask for the necessary information from the user. The dialog will continue until the bot has all the data it was instructed to gather. 

In the second part of the flow, the bot is going to create a summary of this conversation and send it to our Airtable database. 

3. Set Up an Opening Message

First of all, we need to set up the first outreach message the customer will receive via WhatsApp. The idea here is to use a straightforward, structured button question to assess the experience:

build a chatbot with gpt

The template offers this simple setup, but you can edit the content of the question as you see fit. Since this is a WhatsApp bot, it means you will have the user's name automatically, without asking, and you can use it to personalize the conversation from the start. 

Now, since the GPT is designed to collect incident reports, only the users who click on the sad face are going to converse with the AI bot. Those who click on the very or mildly satisfied option will receive a simple “Thank you” response, and the chat will be closed.

create a chatbot without coding

Since the majority of the responses lead down this path, the template connects the purple (default) button with the “Thank you” message and closes the chat. The default button comes in particularly handy in cases where you have many different responses which are important but don’t affect the direction of the flow. No need to drag an arrow from each response individually.

Now, we will drag a separate arrow from the “sad face” button to create an AI flow to cater to unsatisfied customers. 

4. Set up a Conversation “Memory Box”

Before anything else, we are going to create a storage container for the chat. Think of it as an empty box you are going fill with the conversation as it is created. 

gpt chatbot conversation memory

Why is this step so important? 

When we send this box to GPT, it will act as its memory so the bot doesn’t ask for the same information twice and will help us maintain a logical and helpful conversational flow. Without it, the GPT would just continue asking the same questions over and over again. 

To create the “box,” we will use the “Set a Variable” block:

gpt bot conversation memory

Since this is a template, the variable and value fields are populated already. 

It’s important to note that the variable storing all the conversation data is in an array format. The “Type the value” field includes empty square brackets, which represent the empty container here the conversation will be stored.

Note: You can always create your own variables to store data collected by the chatbot. The best practice is to give them descriptive names (e.g., “@conversation_history” in our case) so you know exactly what the information they are or will be storing is.

5. Connect Flow to GPT 

First, we will use the “Set a Variable” block again to store our OpenAI API key. This step is not compulsory if you are building your own flow. However, it is very useful when building templates as it makes the template setup easier to edit. In fact, thanks to this, setting the variable will be pretty much the only thing you will have to do to activate the connection.

connect your chatbot with GPT

Go to your OpenAI account and copy your API key.

GPT api key

Next, you could simply go and test the connection in the Webhook block. Still, for the sake of clarity, we will explain the setup in case you want to reproduce the connection from scratch.

Click on the Webhook block to open the editor. 

build a chatbot with gpt

You will see that in the case of this template, the “URL & Method” field is already populated with the POST method and a Competion model URL.

If you were to populate this yourself, you would find this information in the OpenAI API docs under Completions > Create Completion. 

make a chatbot with GPT completions api

So, even when working from scratch, all you need to do is copy and paste the URL and set the command to POST.

Next, move your attention to the “Customize Header” segment of the Webhook editor.

how to create a bot with GPT

This is the space where you need to enter the API authorization.

You can find this information in the “Example request” in the “Create Completion” segment.

how to set up a chatbot-gpt connection

‍

The customer header key is “Authorization” and the value is the word “Bearer” followed by a single space and your API key. 

Since you created the API key variable, the template automatically pulls your API into the Webhook using that variable. 

The next section in the block that requires attention is the “Customize Body” part. Once again, in the template, it’s already populated.

build a gpt chatbot

If you were to do this part yourself, you would need to refer to the “Example request” section in the OpenAI Completions documentation and copy the following:

how does a gpt chatbot work

This sequence specifies the: 

  • GPT model (There are many GPT models available. However, in our case, we are using “text-davinci-003” which, based on testing, we find to be the most reliable.)
  • Prompt (A prompt is, in other words, a set of instructions for GPT that clarifies the purpose and scope of the request. It should be as clear and straightforward as possible, leaving no room for interpretation. Feel free to repeat commands several times to achieve this. A clear prompt helps prevent hallucinations.)
  • Maximum Tokens (Tokens are the basic units that OpenAI GPT models—including ChatGPT—use to compute the length of a text. They are characters or groups of characters which may or may not correspond with words. But for the purpose of simplification you can think of them as the number of characters. The “Example request” gives us 7 tokens which would give us only 3-4 words at best. You can note, the template is set to 2000, though it’s unlikely this conversation will or has to use that many, it simply serves as a maximum limit before the conversation is cut off.)
  • Temperature (The GPT model temperature setting is, in the simplest words, an indication to the AI on how much it is allowed to improvise and “get creative.” The lowest possible temperature is 0 and the highest 1. The increments are measured in decimals, for example, 0.1, 0.2, etc. We set our bot’s temperature to 0, meaning it can only work with what’s there. You might want to increase the temperature if you are working with more creative use cases.)

The prompt used in our template is as follows: 

A client (@name) is contacting us because something went wrong. You must act as a friendly agent in charge of collecting a clear idea of what went wrong with the order, you need to ask them. We know there was an issue but we need to know what it was, so you need to find out. Also, get their email address and order number (don't show the summary to the user and do not create any info). Ask only one question at a time and be friendly. Your job is not to give support, only to collect the information. Don’t create any information, it must be given by the client. Here's your conversation history with the client: @conversation_history, once you've gathered all three pieces of information from the client and they no longer need help say ‘An agent will look into this’, be sure to use the keywords ‘An agent will look into this’ only when you have a clear summary of the issue (at least one sentence from the user), an order number, and an email address and the client no longer needs help. Client: @user_text. You: \n"

It forbids the bot to create information, emphasizing collecting and summarizing instead and doing so several times. It also introduces the variable that stores the whole conversation so the bot can access the updated memory with every loop turn-around. It also tells the bot user-created responses are stored as @user_text. And, since it’s a completion model, it is designed to complete the dialog, hence the “You: \n” prompt, so the bot knows to complete the responses to user inputs. 

The next section in the Webhook editor is “Test Your Request.” Once again, it’s all set up already. However, do click on the “Test the request” button to make sure everything is working correctly. 

test your chatbot connection

If the connection is working OK, you will receive a 200 response. 

The last sections to take care of are “Save Responses as Variables” and “Response Routing.”

make a bot with GPT 3

The“Save Responses as Variables” allows us to save the GPT’s response under a variable and show it to the user. The template is set up in such a way that it only pulls out and shows the text you want the user to see.

NOTE: If you are curious about how to set up this variable so it saves only the text part of the GPT response minus all the code bits, refer to the WhatsApp-GPT webinar at minute 49:10.

The “Response Routing” does a bit of damage control. If the Landbot-GPT connection is working well (200) the flow continues into the GPT loop we designed. If there is an error (429) and the GPT servers are overloaded, it allows you to reroute to the “Try again later” message. 

This is it for the Webhook block. Thanks to the template, you won’t really need to deal with any of the setup. Though, if you decide to build a chatbot with GPT yourself, these are the steps you will have to go through. 

6. Set Up Formula to Push Conversation into “Memory Box”

While the error 429 Webhook response reroutes the users the try-again-later message, the 200 response leads them into the conversational loop with the AI bot. 

As mentioned, for the conversation to actually work and lead somewhere, the bot needs to remember the data collected in every “round.” To do that we need to make sure to store the conversation inside the “empty box” we created at the beginning of the flow using the Set a Variable block.

To fill it in, we are using the Formulas block. In short, this block allows you to perform actions that normally require some coding such as more complex calculations, advanced formatting conditions or changes, etc. But instead of coding, you use functions more similar to formulas in GoogleSheets.

build a chatbot with gpt 3

If you wish to learn more about how the Formulas block works and what you can do with it, check out our video tutorial in the Landbot Academy. 

However, for the purposes of this guide, there is nothing more to do here. You only need to know, we are using the “Push” formula to push the @response (GPT) and, later, @user_text' (user input) inside our empty conversation memory box @conversation_history.

This is what the formula looks like:

Push(Push(@conversation_history, '@response'), '@user_text')

7. Create the Conversation Loop

Once we have a formula that ensures filling in the conversation history box, we can proceed to the actual conversation.  

store GPT API responses in Landbot

The Formulas block takes us to the “Ask a question” block. Instead of a fixed text, the bot's “question text” field is populated with @response variable that stores and showcases the GPT response, whatever that is in that particular space in the conversation loop. The user is given the space to answer in their own words, and their answer is stored in the @user_text variable. 

In theory, you could loop back to the Webhook block from here already. However, that would create a never-ending conversation. That’s why, before connecting back to the Webhook and closing the loop, we need to give the bot a way out if it has all the information it needs.

8. Set Up Condition to End the Conversation when Goal is Reached

A very simple way to allow the conversation to come to a close and gather all the data is using the Conditional Logic block. 

Since, in our prompt, we instructed to GPT to say, “An agent will look into this” when it had all the information necessary, the template uses this response as a condition to let the bot leave the loop:

exit GPT conversation loop

This way, if the AI bot says the agent will be in touch with the user, the flow will take it as a signal that all the necessary information has been collected and take the green output towards the EXIT flow. If the @response does not contain the word “agent” it will take the pink output and take the conversation back to the Webhook block to repeat the loop. 

9. Define Exit Flow

If you were building this flow from scratch, the easiest thing to do here would be to copy the Webhook block you set up previously, go to the “Customize Body” and simple update the Prompt to deliver new instructions (see webinar recording minute 54:20).

However, since the template we are working with was created to simplify your life, you don’t really need to deal with Webhook block at all, if you don’t want to. We used the same trick as before, employing the “Set a Variable” block so you don’t have to deal with Webhook fields if you are not confident enough.

write a GPT prompt

So, if you want to modify the final prompt, just open the “Set a Variable” editor and apply changes to the “type the value” field. 

Inside the Webhook, the prompt looks as follows: 

gpt instructions

Since it includes the variable @final_prompt instead of a fixed text, whatever changes you make to the prompt inside the “Set a Variable” block before will reflect automatically.

The final response from the GPT will include a summary of the incident with all customer information you need to resolve it. 

10. Send Information to your Database

The last thing left to do is to send the collected data to our database. The template uses our native Airtable integration:

push data from gpt chatbot to airtable database

To learn how to integrate Airtable, see the short tutorial below: 

However, feel free to substitute the Airtable block with GoogleSheets integration block or other.

After sending the information to the selected database, the bot says goodbye and closes the chat.

11. Avoid Common Errors

Bot building is an adventure and details can escape your attention. So, if things are not working make sure:

  • Variable names are spelled correctly 
  • None of the variables was accidentally deleted
  • You are using the correct API Key
  • You are using the right GPT model
  • Your Tokens are not expired. 

And that’s it! 

You have a working WhatsApp AI chatbot powered by GPT on your hands—without writing a single line of code! 

To Wrap Things Up

We hope you have found this article helpful on your journey to becoming a GPT connoisseur and creating bots that will improve customer experiences as well as help grow your business.

If you are interested in more resources related to using GPT in tandem with Landbot builder, be sure to check out our Knowledge Base. Also, keep an eye on our blog for more tips and tutorials!

‍