ChatGPT with WhatsApp - Lets create a bot that works

hello everybody so welcome to my channel and today I'm bringing you a very very special and interesting video where we will be creating a WhatsApp chat board with the help of chat GPD now if you have not been living under a rock or you're not a vampire who just woke up from his sleep you would probably heard of Chad GPD it's a magical piece of software that internet has been buzzing about Chad GPD is an NLP meaning natural language processor and what it can do is beyond astonishing you can ask it to solve any problem in code in any language and also you can ask any kind of question or even instruct it to write a 40-page article on neurobiology there are endless use cases for it luckily they have a public API which you can sign up for and I decided to create a WhatsApp chat bot using think twelo's WhatsApp API chat GPD and next.js so it's demo time now alright so the way it works is that you have to send a prompt to a specific number now this number can be any number but in this specific case I'm using sandbox number if you want to use a real number in your own country you have to buy that from Taylor so prompt says here that give me ideas for birthday gift for my mom and I wrote some description about post she likes so let's send it and see what it gives me back all right pretty cool actually it gave me a lot of cool ideas here some of them are very common sense but other ones can be very interesting okay let's try to write another prompt so as you can see that this prompt is pretty unique and let's try to run it and see what it gives me back oh pretty cool somehow I knew that the Ramstein would be first let's try one more prompt so this prompt is Chord related I'm simply asking for the JS code to sort an array in a descending order by date so let's see what it gives us so that's pretty cool the benefit of this is that you can just ask any question in WhatsApp and then forward the message to your friends if you want to so now that I have shown you how it works let's start coding for this tutorial you would need a open AI account obviously to use chat GPT apis and then you would need to allow account for the WhatsApp integration and also you would need some sort of server it could be worse cell or it could be any sort of server which can host your next JS code in addition to that you would need to have some knowledge of JavaScript and if you have next JS knowledge that's a bonus also need to have Nord 14.0 or above installed in your computer and you need to have a WhatsApp account for sure now I have a WhatsApp chatbot folder opened in my vs code at first I will initiate the project to initiate I can say npm in it minus y it will initiate the project like that next we will install next.js react and react Dom in our package all right so now that it has installed all the dependencies what we need to do is open our package.json we will replace scripts with next.js scripts and let me fix that first okay and now we need to create some folders here so I will create a folder called public this is where I will compile HTML will live and another one called pages and inside we'll create a page called about so this is next js's structure basically and we will place this code here this is basically just a component so now that we have set up our environment let's run it and verify so in order to verify we have to run the server so to run the server I will write npm run Def and this should start a server here so let me open this in a browser so we'll paste our URL here and then about and as you can see it's all set up it's working here next we need to prepare our Duelo account and install toiler SDK in our next JS server so there are two types of messages that Toyota supports for the WhatsApp the first one is the template message which basically are predefined messages that can work as a prop so for example you might want to send an order details to a customer and to send these details you need to get a pre-approval on a template and that's how you can send a message to a customer without customer sending you the message the second option is that the customer initiates the message and what it does is that it creates a 24 hour window where you can send a message to a customer and customer can't send a message to you so let's install SDK in our next JS application so I will stop the server and I will run npm install twilo and then we will create dot EnV file to host our credentials and next.js supports environment variables by default the purpose of this is to not expose our secret keys to client-side users so I will put my credentials here you will replace this information with your own details next what we need to do is we need to create an API route where Tolo will send a web Hook when user sends us a message and this webhook will contain the information about the user's message so let's see how we do it so first I will create API folder inside pages and inside it I will create a file called message dot JS and then I will place this code here so I will explain the code as well so the Handler is basically the Handler for the API route so the way it works is that inside the Handler we have this message response initiation and in order to read more about this twiml language that twilo has this is basically an XML where you can generate a message and send it back to Toyota webhook we are placing our message here and then we are sending back to toilo with Text slash sxml content type so what this does is basically when user sends us a message it will come here and it will generate this messaging response and it will send it back to the user so just to test it before we try it with WhatsApp let's run our Dev server and test this endpoint so let me write here apis message so this is the end point we created and as you can see it is sending this response with the message we defined so this will go back to the twilo's web hook so one final step in this puzzle is that you need to place this web hook in twilo's console and it's time to test our code there so let me send a test message here boom it worked so it gave us the same message as we sent in our endpoint next we have to set up our chat GPT library in our project first thing you need to do is you need to create an open AI account and then you need to obtain your API key from there I will put the link in the PDF as well so next we have to place this key in our DOT EnV file you will have to replace your key here and then we will install openai Library so npm install open Ai and then we will replace the message Handler with this new code here so let me explain how it works so we are importing configuration and then we are getting our API key here now anything that is placed in dot environment file will be under process.env variable we assign it to the configuration and then we initiate open API AI library with the configuration and then we have this send message body that we are copying here so when Taylor sends a web hook it's a post web hook with the body as a message so we are capturing it here and then checking it if it's not empty and here's the open AI part so what we are doing here is we are creating something called completion and completion is what chat GDP sends as a response to your prompt now if you notice here that we have a model called text that will see 003 now this is the latest model that charge GPT has and is the most improved one and then we send a prompt now temperature is parameter that defines how confident the model is responding to your prompt so if you set it to zero then it will be very certain but it won't be giving you different answers with every different prompt it will be a bit conservative but but if you set it to 1 then it will be less confident but more adventurous and it will give you more liberal answers now I placed it here to 0.6 because this is what I find giving me better results and then there's an parameter which defines how many choices you want to have asking many choices can be bit costly so I'm bit conservative here and I'm just asking for one choice and then we have Max token what are tokens so tokens are basically how check GPT calculate your balance so in this case the total number of tokens will be the number of words in your prompt plus number of words in the answer so please be careful because it can quickly Mount up to exhaust your token balance so 50 for our case is bit too low so I will change it to 300 and this is our reply to be sent completion sends us a number of choices in in this case it will be just one choice so we are reaching into the first array and then grabbing the text and placing it as a reply to be sent and then there's some error catching here and then we are sending back the response same as before so now everything is set up let me save it and let's try to test it I'm going to write a prompt it's going to seem bit weird but let's try to see its capabilities so it says give top songs in 2022 in hip hop by Asian artists I don't listen to Hip Hop so excuse me for that but let me send it now oh okay so there was an issue it sent me a message let's see where it sends this message so it was going in this condition let me console the error here what what is it and then response and I will try to send this message again see what happens okay so it says here that in direct API key so I guess in my hurry to code it I forgot to Port the API key in my EnV file so let me place the API key here and let me restart the server as well so it takes effect all right so I'll send the same prompt again let's see what happens all right so it took a little bit of time but it has given me this response now I recognize BTS but I'm not sure about other artists so let me change the prompt a little bit see a different result so I will say instead of Hip Hop let's give me some rock oh wow okay so it has given me a lot of suggestions here I'm not sure which one is correct but there is another problem that we need to solve it's not apparent here but sometimes what happens is that when the answer that AI gives us is longer than the max tokens that we have given it in order to contain the message the message cuts off abruptly so I will reduce the max token here just to show you how it it is so instead of 300 I will give it 50 and I will send another prompt here and yes as you can see this is what I'm I was talking about so now it has cut the message when it's reached to our Max token to solve this problem we'll do some JavaScript code so I will place this function here and what it does it takes the input text and it slices the text based on a specific character so in this case what we are looking for is a full stop followed by the space and by the number so this is a specifically a format that GTP uses to generate its list so what we are doing is that we are trying to find the last occurrence of the complete sentence and then we are removing everything after let's wrap our text here reply to be sent with this function okay let's save it alright so we'll copy the same prompt here and we'll send it again all right so we requested for five pickup lines but it gave us only two and that's because we have given a Max token variable set to 50. but as you can see after second one it didn't cut abruptly the texts that should be there of course this is not perfect and if GTP changes its format somehow like it doesn't have the same period or same structure as before it won't work that's just quick simple fix to resolve this issue anyways I hope you like this tutorial and make sure to like And subscribe this video for more similar content and also check the PDF attached in the description of this video and thanks for watching

Channel: Just Flip It

Views: 10,906

Keywords: chatgpt, open ai, chat gpt, whatsapp, tutorial, next js, ai, artificial intelligence, nlp, twilio, webhook, code, js, javascript, tool, chatbot, Chat gpt

Id: CtzuhxyrAgM

Length: 14min 31sec (871 seconds)

Published: Tue Jan 17 2023