How to Build a Lead-Generating Chatbot Using VectorShift and Airtable
VectorShiftAging📅 2024-08-16
Build Process
┌─────────────────────────────────────────────────────────────────────┐
│ BUILD CHATBOT WORKFLOW │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ PLANNING │
│ ──────── │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Define │───►│ Choose │───►│ Setup │ │
│ │ Scope │ │ Stack │ │ Project │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ DEVELOPMENT │
│ ─────────── │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Build │───►│ Add AI │───►│ Test & │ │
│ │ Features │ │ Logic │ │ Debug │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ DEPLOYMENT │
│ ────────── │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Deploy │───►│ Chatbot │ ◄── LIVE! │
│ │ to Cloud │ │ Running │ │
│ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Key Components
- Project architecture
- Core features implementation
- Best practices
Transcript
[00:00] Need a customer support chatbot that not only answers questions but also generates leads? In this video, I'll show you how to build one using VectorShift. No coding required. Today, we'll create a powerful chatbot that can pull answers from a custom knowledge base and automatically create leads in Airtable. Whether it's for your own business or a client, a lead-generating chatbot is a game changer. We'll be using VectorShift to streamline the process, including easy integration with third-party platforms like Airtable.
[00:32] If Airtable isn't your choice, then don't worry. VectorShift offers plenty of integrations that suit your needs. Let's start by going to vectorshift.ai and then log in or sign up for a free account. After logging in, click on "New" to create a new pipeline. And let's create a new pipeline from scratch. For this tutorial, I will assume that you are familiar with the fundamentals of using VectorShift. So if you are new, then you can check out my full VectorShift playlist on my channel. Let's start by giving our pipeline a name
[01:04] like "customer chatbot". And let's also go ahead and add an input node as well as an output node. So there's two phases to this project. First we'll create a simple React chatbot that can answer questions about our business. This chatbot will also be responsible for collecting the name and email address of the user. The second part of this video is to take the information that was collected and then store it in an Airtable table. Let's first focus on the chatbot. Let's add an LLM to the canvas.
[01:36] And for this demo, I will be using OpenAI and more specifically, the GPT-40 model from OpenAI. For the system message, let's enter "You are a customer support chatbot for Oak and Barrel". In the prompt, let's also create a placeholder for the user's question. To create placeholders or variables, we can simply use double curly braces. And let's give our variable a name like "question". This should create this question input on the LLM node. Let's then attach our input node to the
[02:08] question input on the LLM. And let's then pass the response from the LLM to the output node. Like so. What's nice about VectorShift is you do not have to provide your own API key, as VectorShift will allow you to use their key with a generous amount of free credits. But of course, if you want to do, or if you've exhausted the credit that VectorShift provides, you can provide your own key by checking this checkbox and entering the API key over here. I'll simply uncheck this box. We can test the chatbot by clicking on "Run Pipeline".
[02:39] Let's go to the chatbot view, and let's send a message like "Hello". Great, this is working. Let's also turn this into a conversational chatbot with chat history, so that our users can ask follow-up questions. To add memory to this chatbot, let's go to chat, and let's add the chat memory node. Like so. In our LLMs prompt, let's also create a placeholder for the chat history. So I'll add some text like "Conversation History", and let's add a new variable called "History".
[03:10] Like so. Let's attach the chat memory node to the history output on the LLM. Great, we should now be able to ask follow-up questions, so let's test this out. So let's say "My name is Leon", then let's ask it "What is my name?" And we can see that the memory is indeed working. Great. Now, we also want this chatbot to be able to answer questions about our business. So let's create a custom knowledge base. Let's go to knowledge base, and let's add the knowledge node.
[03:40] We can pass the user's input into the query input on the knowledge base reader. The knowledge base reader will then take the question from the user, then look up any related documents from the knowledge base, and then return those documents as results. Let's first create a new knowledge base. Let's give it a name, "Alkal Mine, Oak and Barrel". I'll leave the chunk size and the chunk overlap on the default values, and let's click on "Create". We can now add data to our knowledge base, and VectorShift offers a wide range of methods
[04:13] to connect to external data sources. We can upload files like Word documents, PDFs, etc. Or we could also use integrations, like connecting email accounts, airtables, forms, etc. We can also scrape websites, but what we'll do is simply upload a Word document that contains information about our Oak and Barrel restaurant. Now that our knowledge base has been populated, we can go back to our pipeline. Let's click on "Edit" next to the pipeline, and let's continue building this application.
[04:44] We can now attach the results from the knowledge base reader to our LLM. So within the prompt, let's create another placeholder for "Context", and I'll add another variable called "Context" as well. Now we can take the results from the knowledge base reader and add it to the context input on the LLM. Great! We can already test this out, so let's click on "Run", on the chatbot, I'm going to clear the chat, and let's ask it, "What are the current specials?" And we do indeed get the correct response back.
[05:16] Great! We now have a fully functional customer support chatbot that we could deploy to a website if we wanted to. But of course, we want this chatbot to also generate leads for us. So we want the chatbot to ask the user for their name and email address before starting with the conversation. In order to collect information from a user, we can use a data collector. So let's go to chat. Let's add a data collector mode, and let's add it to the canvas. Within the data collector, let's add two fields.
[05:48] The first field will be the name of the user, so the description can also be the name of the user, and as an example, I'll just provide my name. For the second field, let's add the email, the description can just be the email of the user, with an example of Leon at test.com. We can then attach the input from the user, and pass that to the inputs on the data collector. Then we want to pass the output of the data collector node into the LLM as well. So let's create another variable.
[06:20] Let's call this collected data, and let's create a variable called collected data as well. Then, let's take the output of the data collector node, and pass it into the collected data input on the LLM. Our prompt contains a whole bunch of input variables at the moment, so to get the best result from the LLM, let's start with exactly how to use all of this information. Also, before we move on, I do want to make one small change to the data collector. When we click on settings, let's disable
[06:51] auto-generate questions, as in the system prompt, we will instruct the model on exactly how to ask these questions. So let's enter the following. We will receive collected data, which will contain name and email. If name is present, but there is no email, then ask what is your email. If you have both, proceed with the following instructions. Then if "How can I help?" has not appeared in the conversation history, then respond with "How can I help?"
[07:22] So all this will do is ensure that the model will start out by asking the user for their name and email, and once it's received both of that information, it will respond with "How can I help?" So when the user continues with the conversation, we want the model to answer questions from the knowledge base. So let's add that to the prompt as well. If "How can I help?" has appeared in the conversation history, and you have received both the name and email in collected data, then answer the question based on the context.
[07:54] If you're unable to answer the question based on the context, then respond with "I am unable to answer the question." This is simply a guardrail to ensure that the model will only answer questions related to the context and nothing else. We don't want the user asking questions that is not related to our business. And for completeness sake, I'll also add something like "Please check again that you have followed all of the instructions." That should be everything our model needs for this application. Before we add Airtable, let's test out
[08:24] the functionality up until now. So in the chat, I'm going to clear this, and let's say "Hello." We will now expect the model to ask us for our name, which it does. So let's enter "My name is Leon," and now it's asking us for our email. My email is leon at test.com. And now that it's received both the name and email, it's asking us "How can I help?" So let's ask it, "Do you offer a kid's menu?" Great, so it's able to answer questions
[08:55] from the knowledge base. Now let's have a look at storing the lead information in Airtable. But first, if you find this video useful, then please hit the like button and subscribe to my channel for more content on Vectorshift and other no-code AI platforms. So let's have a look at integrating Airtable into this application. So what we want to do is add some sort of functionality that will check whether the name and email were both provided, and if so, store that information in Airtable.
[09:27] So what we'll do is add an LLM to the application that will be responsible for checking if the data collector has collected both the name and email address, and if so, conditionally call the logic to populate Airtable. So let's add that LLM to our application. Let's change the model to GPT40, and for the prompt, let's enter. Your job is to assess if you have received both the name and the email in the collected data, as well as in
[09:57] the conversation history. The last message should also be, "How can I help?" If both conditions are true, then output Y, otherwise output N. We can also provide an example of what that would look like. So receiving both the name and email will have a structure like this, where the name and email is populated. Let's also provide placeholders in the prompt to store the collected data and the conversation history. So in the prompt, let's create a placeholder for collection.
[10:28] Let's create a variable called collection as well. And below this, let's create a placeholder for history with a variable called history. Now we can simply grab the output from the data collector and pass that into the collection. Let's also go to our memory node over here, and let's attach the memory node to the history input on this LLM as well. So this model will receive the information that we collected from the data collector,
[10:58] and then respond with either a yes or a no. Y or N. So now we want to conditionally call air table if the response is Y. So let's add a condition node. Let's go to logic. Let's go to condition. Let's then say that if the condition double equals, in quotes, Y, then we'll perform some logic. Else we'll just do nothing. We also have to assign the value of input, which is this thing over here, and we want
[11:29] the input to come from the state of collector. So we want to receive the name and email. So if the condition is Y, we want to use LLMs to extract the name and email from the collected data, and then populate air table. So let's add two more LLMs to this project, like so. Let's also change the models for each of these to GPT40. Great. Now for the first model, let's pass in a system prompt of "Your job is to extract the name
[11:59] from a string," and then we can provide an example of what we would receive from the data collector, so the name and the email. This example, the response should be Leon. We can then attach the output of this condition node to the prompt of this LLM. Let's do the same thing for this second LLM, and this guy will be responsible for extracting the email account. It's pretty much the exact same prompt as for the name, but this time we're extracting the email. Now we can finally add the integration with air table.
[12:31] Let's go to integrations, let's add air table, and now we simply have to configure air table, which is luckily super simple. First we need to create an account, so go over to airtable.com and sign in or sign up for your free account. Once logged into your dashboard, go to the menu, and then add a new workspace. Let's give it a name like "Victor Shift Tutorial," and let's create a new base. Let's click on "Start from scratch," then let's give this base a name like "Oak and
[13:04] Barrel." Let's press enter. Let's also change the table name by double clicking on this tab, and let's call this "Leads." Let's save this, and for the columns, I'm actually going to double click on the notes column. Let's rename this to "Email." I'll leave it as long text. Let's save this, then let's delete the assignee column. Let's do the same for status, and let's also delete all of these empty rows by selecting them, right clicking, and let's click on
[13:34] "Delete all selected leads." Great. Let's go back to Vector Shift, and let's connect our account. I'm already signed in, but what you can do is click on this button over here, then click on "Connect New," and from this pop-up, click on "Add Base," then go to Vector Shift Tutorial, and click on "Oak and Barrel," or the base that you just created. Click on the Base dropdown, and select your base. Then also select the table, which I called "Leads."
[14:04] This will pull up all the available columns within a table, so go ahead and select "Name" and "Email." Let's save our configuration. Lastly, all we have to do is connect the response from the name "AlloM," and attach it to the name input on air table. Let's do the same for the email "AlloM." I do want to share with you a handy little tip for debugging Vector Shift flows. You can add additional output nodes to your pipeline to watch any output from your AlloMs.
[14:34] So let's actually take this AlloM that's responsible for returning yes or no, and let's also pass the output to this output node over here. This is not something that the user will see, but it is extremely helpful for watching what sort of output your AlloMs produce during the execution. Let's test this out by going to "Run," "Chatbot," and let's say "Hello." Then let's say "My name is Leon," "My email is Leon at test.com."
[15:05] And you might notice that as we're running this chat, we can see the output from this AlloM being shown in this output node over here, and currently it keeps saying "No." So watch what happens when I ask the next question. At this point, all these conditions will be met as we have collected the name and the email address, and the last message in the chat is "How can I help?" So let's run this. What are the specials? We get our response back, and this time the output from the AlloM is "Why?"
[15:36] So this should have triggered our Airtable logic, and if we go back to Airtable, we can see the name of the user and the email address showing up over here. So finally, we can deploy this chatbot by clicking on "Deploy changes." Then let's go back to "Pipelines," "Chatbots." Let's go to "Create new chatbot." Let's give our chatbot the name, like "Oak and barrel support." Under "Pipelines," let's select "Customer support." For the output, please ensure to select "Output 1" if you added
[16:08] multiple outputs for debugging. Then let's click on "Create chatbot." At this stage, we can customize the chatbot to look and feel the way we want. I'm simply going to click on "Export," and now we can integrate this chatbot in many different ways. We can use this embedding link to add the chatbot to our websites, connect it to Slack or Twilio for WhatsApp or SMS, or we can expose an API endpoint. I'll simply click on "Open chatbot" to test this out. This will give us a chat GPT-like interface for playing with our chatbot.
[16:39] Let's give it a go. Let's say, "Hey there." That's the name, let's say "John." For the email, let's enter "John" at "test.com," and let's say, "Do you sell steaks?" And if we go back to our table, we can see that John and John's email address was indeed captured. If you enjoyed this video, then check out my other vector shift videos over here. Thank you for watching, and I'll see you in the next one. Bye-bye.