How To Create an AI Chatbot with OpenAI and Wix

hi there amitan and welcome back to Wix with in this tutorial I'm going to be showing you how to create a chat bot that is driven by AI using openai's chat gpt3 and we're going to be creating something like you see here which is a fake Wix support chat and you can see that if for example I write in here my name and I send that off to the bot then I will get a response that is driven by Ai and you can have a complete conversation that feels like a WIC support conversation driven by AI so if you want to build something like this follow along [Music] so the first thing we're going to do is head to the open AI website and this is the technology that we're going to be using for our AI chat um there might be other options for creating an AI chat but this is the company that has created the very famous uh chat GPT and they offer another service called gbt3 which is what we're going to be using to create our chat bot and in order to do that just head over to API and this is where we're gonna get started so I'm just going to go over here and click get started and if you don't have an account you're gonna have to create your account um you're gonna have to verify your email you are going to have to verify a phone number and then you will get set up with some free credits that you can use to test out the API I already created my account so I'm just gonna select all the traffic lights here and continue it believes I'm a person excellent I'm going to put in my password uh and oh sorry I was in create account I just want to log in and there we go so I'm in and this is the home screen that you should get to once you create your account and if I head over here to personal I can go and view my API Keys okay so the API key is kind of like a password which will let you access the API and to create a key you just have to click here create new secret key I'm going to do that in a moment when I pause the video so you don't see what my secret API key is but in general you should know that once you create this key you should store it somewhere because you will not be able to view it again on the website uh even if you come back to this page they will not show your API key again so you have to save it somewhere secure and this is really just so that people don't get unauthorized access to your API because eventually it does start costing money and you don't want people to make API calls on your buck this is where you would set up Bill feeling once you pass the kind of the tokens you have and you can check that out over here so usage you can see here that I have 18 dollars of free credits and it expires May 1st so after May 1st I'm going to need to set up payments if I want to keep this app running and that's pretty much all for API keys so I'm going to go ahead and I'm going to generate my API key and then we're going to be storing it inside of our secret manager in Wix so I'm going to go ahead and do that and be back with you in one second okay so now that I got my API key from open AI I head over to my editor X or Wix dashboard and go to developer tools secret manager and I added a secret where the name is open AI API key and the value is the API key that I got from openai and after saving that that will be stored here in the secrets manager and we can call this from the back end of our website and if I head back over to open AI you can see here that my secret key is not fully visible um and it will never be again so if I hadn't stored my API key it would have been lost I could create a new one so it's not really a big deal but just note that once you create it that's the last time you'll be able to see it on the open AI website now that we have an API key we can head over to the documentation and this is the documentation for all of the openai apis and services and we're not going to be using all of them we're going to be using a very specific one which is called text completion and text completion to put it simply takes a prompt and returns an answer based on what was in The Prompt so you can see here that for example The Prompt is write a tagline tagline for an ice cream shop and it answers we serve up Smiles with every scoop and we can adjust things like how long the answer will be what the tone of the answer would be and stuff like that all using the API I do recommend taking the time to read this because it will outline you know how to best use this API and it even gives some examples of how to create something more like a chat bot which is what we're going to be doing in this demonstration now in order to actually see how to implement the API you have to go down here to API reference and I recommend reading some of the documentation here introduction authentication and lastly you can head over to the completions and this is the actual instructions for how to implement this API so first I'm going to do some setup on our Wix website so I'm going to head over back to my editor and I'm going to create a backend file I'm going to zoom in a little bit just so you can see a little better so I'm going to go here to either Plus or ADD web module and I'm going to call this open Ai and the reason we're doing this in the back end is because we have sensitive information here that we don't want to expose to the front end of the website you can learn more about this in my general API tutorial I go a lot more in depth and explain things there so I may Breeze through some things here that you can you can look up there if you want something more detailed so first I'm going to create a function and I'm exporting this so that I can kind of run it here in the back end and we're going to need to import it to the front end and I'm just going to call this get answer from AI and this is going to be an asynchronous function because we're making a um a call to an API we're using fetch and in order to do that we are going to need to import each year on the top level so I'm going to import fetch from Wix fetch and I'm also going to import get secret from the wix secrets back end okay and these are two things that we're going to need to use inside of our get answer from API from AI sorry function so we're going to need a few things here so we're going to need our URL or our endpoint uh we're going to need the API key and we're going to need a body and we're going to have our options and now let's head over to the API itself and see how we get each of those uh things so I'm going to head over to the API reference and right over here we have our endpoint so I'm going to go over there and grab the endpoint and paste it right here back in the editor under URL the end point that we're going to be calling and for the API key I can just use here a weight fsecret and I'm going to copy over the name of my API key here from the secrets manager and I always prefer copy pasting because no it's very easy to make a typo um and I feel like when I copy paste values I I make less typos so that's just my method you can also type it out body will get to in a moment as for options so we already know that the method is going to be post and you can see that right over here in the API reference it's going to be in post so let's go a little in depth and see kind of what our parameters look like what our body looks like that we're sending to the API um endpoint so we have the model and basically openai has different models which are kind of different AI brains and if you follow the link here of the model overview then you can kind of see the different models and we're going to be using models from the gpt3 uh and even within gpt3 they have different sub models and these are have different capabilities that you can see here for example um the text DaVinci is the most capable one um but it could be that it's a bit slower um very capable faster and lower cost than DaVinci okay so there's like a cost model because as we said um you know this API is not free forever we're currently using a free trial but it won't be free forever and you kind of need to weigh the cost benefits as well as speed that you want from your app so that you can read more about here uh except for model which is the only required thing to pass to the API we have a prompt which it says here optional but I don't see a situation where you're passing this um these parameters without a prompt because otherwise the API is kind of useless um and another one that we're going to be using is Max tokens so tokens are not exactly characters you can follow this link to read more about tokens here and see you know how many tokens you want your answer to be uh here they say roughly rule of thumb one token is four characters of text so just kind of you can do times four um or 100 tokens is 75 words however you want to calculate it and the last thing that you can pass in not the last thing you can pass in but last thing we'll be doing in this tutorial is temperature um so that is according to the definition here how risk taking it this model is so you know if it's a higher temperature then it will be more creative this would be good if you're saying like Okay write me a poem whereas if it's lower that might be better for if you need like some technical instructions or something like that and you can go on here and read and these are all options that you can pass in which can really change you know how the AI behaves um but I'm not going to go into each one in depth because that would just take a very long time um so I'm gonna go ahead and copy over just these four first parameters from the body and I'm gonna head back to our editor and I'm going to put this right over here and make sure I have that closing squiggly bracket in there so we're using the text DaVinci The Prompt for now is just say this is a test what I'm going to do is I'm actually going to take out this prompt here and switch it out for a variable which we're going to pass into our get answer from AI function and that way I can determine what the prompt will be and it'll be different each time for Max tokens I'm going to want a little more than seven I'm going to go with something like 20. um and for temperature I'm just going to put it at 0.5 something in the middle to start with and we can adjust that kind of as we're developing our bot and the next thing I'm going to want to add here for are going to be our headers so we have two headers that we should be passing here one is the authentication one and one is just the um the content type so if we head over here to the reference we can see here content type application uh Json and authorization bear your API so I'm going to copy those two over and I'm going to put those right here under headers and I need to just make some adjustments here because I copied it over from the curl version but we're using fetch over here so it's slightly different and I'm going to put this into explained and for the bear I'm going to use temporary literal because we're going to be putting our API key right in here um and this needs a comma and here I'm going to switch out your API key scroll down zoom in a little bit here I'm going to be using instead of your API key I'm going to be using API key and make sure that you have a space here okay there needs to be a space between bear and API key otherwise it won't work um okay so we have our URL API key body let's put our body in with our options as well so our body is going to be uh Json dot stringify body and again I'm not going into depth here in terms of what is how exactly all the elements of fetch work if you want to learn more about that I recommend checking out my other API tutorial but now we just kind of need to pass all of this into our so I'm going to go over here Fetch and pass in our URL and pass in our options and then I can say const data will be equal to response dot Json don't forget await here as well because that Json is also a promise and then I can return the data okay so if everything is working here then when I run this function with a prompt I should get back an answer from the AI I'm just going to zoom in should I zoom in one more is that too big okay that's fine let me go ahead and close this just kind of zooming in so you can get a nice good look a nice good look at the code even though it makes the editor a little hard to work with I'm going to go ahead and click run and let's see what the hit returns so this is what got returned from our call and we got an error you must provide a model parameter so let's take a look back at our function and we are definitely passing in the model so I'm going to go and do a quick look at what we have and boom okay so we have a typo 80 percent of the bugs I would say are usually typos so if everything seems like it should be working and it's not working look for the typo and sometimes it can take a while to find and that's why I said like before I like to copy paste things more than writing them out myself because if I had went to let's say mdn and copied over these options I wouldn't have had this type 1 method but I was like oh I know this I'm going to do it myself and turns out I have an error which is not the end of the world it just kind of slows things down a bit so now that I fixed up this method from my typo I'm going to go ahead and get rid of this console because I don't need it and let's run our function one more time I'm going to erase this previous answer and run okay so now our text completion came back and we have here uh choices zero and here we have um usage and I'm looking for the actual answer so I think it's this package.com.example Android um oh because I passed it with no okay so this is what's going to happen if you pass with no prompt uh so that's something you don't want and if I pass for example a prompt that says are you working then and we run this then I will get something a little more intelligible so choices no I'm not working right now which is ironic because it is working um so as you see the um the uh open AI has a bit of a sense of humor let's see what would happen if I change the temperature let's say to zero would it be less comical I'm curious so I'm going to have here are you working I'm going to run it and it came back and the choices now are okay same answer okay so the temperature didn't manage matter here that much um but maybe for a different prompt it would have made a little bit more of a difference um it's kind of just the kind of thing you have to play around with or read the documentation in depth to understand a little better um and this you can see here the length of about I guess this is the length of about 20 tokens which we told it so it could be we're going to want to up our token Edge a little bit let's say to something like um 150 just to make our answers slightly longer but now we have our basic kind of prompt answer working so we can actually head to the front end of our website and set up our interface for the user to actually interact with our kind of AI API that we set up here so I'm going to go and make this smaller I'm going to zoom out a little bit and here on the home page I'm going to be setting up a few things I'm going to be setting up an input element I'm going to set up a button and I'm going to set up a text box which will display the answer and I'm going to display kind of some indications for the user that the answer is loading or something like that okay so I'm going to hit set that up right now and I'll be back and explain what's going on in a moment okay so I went ahead and I set up our front end elements and as I said we have a text box we have a button we have the text where the answer will be and we have this kind of bloody animation that I put in for loading and I'm kind of going to assume that you know how to do all those things using the Wix editor now we're going to go ahead and we are going to write the code that will make this page function so before I do that I'm going to go ahead and name my elements so for the text box I'll say prompt input button will be let's say ask button this will be loading animation [Music] this will be our answer text okay and now what we want to do is our answer text will only show once we get our answer so this is going to start off as hidden or collapsed you can decide based on your kind of user interface and what works there now we're going to write out a function which will get the um it will use the prompt to get the answer and then display that here so I'm going to say const question let's call it that and let me Zoom way in so you can see what I'm doing here with the code I always forget the zooming in part and excellent so hopefully you can see this now and so this function ask question is first going to take the input from The Prompt so we're going to say const prompt is equal to prompt input dot value and now we're going to need to pass this into our AI function the get answer from AI so we're going to import that from the back end get answer from Ai and I'm importing that from backend slash open AI and this I now need to turn into an async function because the function get answer from AI is also asynchronous and I'm going to say const answer is equal to a weight get answer from AI and pass in the prompt here and then as soon as we have an answer I'm going to say that the value of our answer text should be equal to our answer and that we should show our answer text and that's pretty much it the last thing I need to add in is just our little kind of loading animation so the loading animation I'm going to start as soon as somebody starts asking a question so I'm going to say loading animation dot show and I'm going to make sure that it's hidden to begin with I'm going to make that hidden and then as soon as our answer text shows then I'm going to hide that loading animation so loading animation dot hide and this ask a question uh function is all going to run when we click on our button so we're going to add an event listener for our ask button on click and we're going to pass in this ask question a function and that should pretty much be it um I'm just gonna zoom out back so we can see our entire layout here and I'm going to just change this to just to make it a little more realistic um ask a question [Music] oh man okay yeah I hate sometimes this happens in Wix let me do it here ask ask a question copy that over oh my gosh I'm crazy okay let's start by changing the text of the start now button so I'm going to say this ask uh sorry uh ask yes uh and here instead of ask a question I'll actually change it to write a question um I'll just leave it at ask a question I don't want to go too crazy so let's head into preview mode and now I'm going to ask my question I'm going to ask the same question is this working and we should get a longer answer this time because I up the tokens and okay so it did show our paragraph text here but it didn't populate it with the answer so let's head back up okay so here's my mistake um if you remember when we did the get answers from AI then here within the answer so we got this this is actually the answer so it's includes a lot of things except for our actual answer so what I want to do is I'm going to make some changes to the get answer from AI function I'm going to change it so that it only really sends this text back to the front end because that's really the only thing that I want in the front end from this whole function so let me Zoom back in and I'm going to go over here and say that I want to return data dot choices zero dot text and now if I run this it should just return no I'm not working right now okay and this is what we actually want in our front end so if I go and I close this zoom out again and run this again in preview mode I'm going to go ahead and say are you working give me a long answer okay I want I want something a little longer than just it's like one sentence answer and let's see what it comes back with okay so here's our long answer and we have some layout here issues um sorry some layout issues here in editor X I mean this is pretty easy to fix I'm just going to add like a stack uh for all of this or we could just place it in a container and change this let's say to a 1 by 3 container and make sure that this is in the bottom head over here just on the bottom make sure the button is in the middle and this can also be in the middle and this can be on the top excellent this should deal with our layout issue write me a poem and let's see what comes out here there you go okay so our poem is here on the bottom so if your goal was to just create something like this a simple question answer um AI then you're done with this tutorial what I'm going to do now is I'm actually going to try and take it a step further and create something that is a little more like a chat bot and in order to do that what I'm going to do is I'm going to add a repeater where I'm going to present the kind of back and forth between the chat bot and the person and I'm going to also style The Prompt in a slightly different way so that it mimics more of a conversation so I am going to pause the video add some UI elements and continue explaining how we're going to set that up okay so I finished setting up the basic UI for our chat bot and we still have our prompt input send button and animation the only thing I changed up is instead of having a text answer we have a repeater with text boxes inside of them and this is really where our chat is going to display now what I'm going to do is I'm going to head over to the back end and kind of plan out how this chatbot is going to work so let's zoom in a little bit and I'm going to go to our back end open AI file and what we need to do first let's do some planning so let's think about what we need to pass to our AI in order to get an answer the first thing we're going to need to pass in is an introduction like something that kind of explains to the AI bot who they are what they should be doing how they should be acting and this will kind of give a little context and form how the answers come out the second thing that we're going to need to do is pass in the whole previous conversation and that is because I want the bot to kind of remember what has happened in the past in case the person references it in their next question so we're going to need to pass in all the prompts and the AI answers so the way I'm going to style it is I'm going to style it as just a string for the introduction I'm going to have a string and for the prompt and AI answers what I'm going to do is I'm going to have an array of objects and the reason I'm using an array is because it's it's has a specific order so the conversation is having has a specific order and of objects is because I kind of want to record two pieces of data for each of these array entries one is the the name of the person or or AI or whoever whoever created that entry and the entry itself uh so let's so it will look something kind of like this uh we're gonna have an array and inside of that array will be an object and then here I'll have what's a name and here we'll have a user's name and then we'll have text and this will be the text and then they'll be after this object there will be another object which is exactly the same okay and here we have our AI bot and we have its text okay and it'll just be a back and forth like this um and theoretically you know one of them can give two questions or answers in a row but that would be a little more complicated to plan out okay so now that we've kind of planned out how our prompts are going to work we should create a function that will create one single prompt out of this logic okay because our user is just going to give a question and all of this information will be stored on the front end and passed into a function which will turn it into one single prompt string so let's create that function and I'm going to call that const generate prompt and this is also going to be an async function and I'm going to export it as well because this is actually the function that we're going to be using on the front end and so what are we going to do here so this generate prompt will take a uh a question and I'm not writing prompt here because this is what gets passed here is not the prompt that gets asked directly to the AI bot okay so actually I am taking that back this won't be a question this will be a chat array chat array see I'm already changing my mind uh because we're going to store this on the front end for now okay we're going to store this chat on the front end if you want it to persist you can also store it to a data set or to session or something like that but I'm just going to go simple and store it on the front end so we're actually going to pass the this full array each time that we generate a new prompt and our const here will be the introduction so introduction and what I'm going to do with this chatbot is I'm going to style it to act like Wix support okay so I want to give it an introduction which tells it you are a Wix support representative who are helpful light and professional you need to ask for the website email and issue the person is encountering eventually you will say you can't help and need to pass the question on to the offline team okay so that's a typical WIC support conversation and that's going to be the intro I might need to tweak this eventually because I don't know how the AI bot is going to act with this information but that's in general my instructions to the AI bot before I tell it what the actual conversation is um I'm going to say also uh WIC support representative at the end I'm just going to say in the beginning I'll say um make up a name for yourself again I don't know if that will work but that's what I wanted to do and here we are going to have our chat array okay and now we need to basically change this chat array into just text so I'm going to say can't conversation and this will just be equal to an empty string and now what I'm going to do is I'm going to Loop through our array so I'm going to say chat array Dot for each and I'm going to say here entry and then for each entry what I'm going to do is I'm going to say um let's say what should I call it message equals or no outline anything this is the hardest part of coding um that's what they always say so chat line equals to entry dot name let's let's do this as a template literal so entry.name about that space and then here we're going to have entry dot text um and then let's see if I should put in a new line here I'll just make sure there's a period let's see how this works again there might need to be tweaking here uh this is kind of the first time I'm doing it I didn't practice this so here goes nothing uh basically what I did is I said let's say for example it will have the name of the chatbot and the text so how will it know what the name is um okay we might need to work that later on yeah we might need to figure that out later on but for now it'll do that and then what we'll do is we will call the get answer from AI so I'm going to say const answer equals weight answer from Ai and here we're going to pass in our oh I forgot here sorry conversation plus equals chat line okay basically we're adding all the chat lines to the conversation this should be a Letch so we can change it and then or maybe I should just do this introduction okay maybe we don't even need this let's just say let introduction and I'm going to block this out and then you will have introduction [Music] I don't know if like not having spaces between the lines will matter or not to be honest with the chatbot but we'll see and then we get chant uh get answer from AI introduction and we can return [Music] answer okay so this will be a single answer then what we can do is the following so we're going to pass this General we're going to call this from the front end so I'm going to go back to our front end right here in home and here we're going to have generate generate prompt and here we're going to have our uh chat array and let's say ouch okay so then when somebody asks a question what are we going to do we're going to say that the prompt so this is going to be now I'm going to change the names up a little bit so this is going to be text input and then I'm going to say text equals to text input.value just because it's to differentiate that this is not exactly our prompt anymore this is just part of the prompt and then for now I'm just going to call this person user I'm not going to later on we can let them put them put in their name and then use their name in the conversation but I'm just going to say that array dot push and what we're going to be pushing in here is an object which will be uh name will be user text will be the text okay so this is what we're going to be pushing into the array and then the answer will be generate prompt from recat array okay so for the first question essentially um there will be kind of um this is this will be the only entry and then as soon as we get an answer back from the AI then we need to handle handle it a different a little differently so our answer we're also going to be pushing to the chat array so let's say chat array dot push and here we're going to also have an object and this will be name Wix rep and our text will be the answer and after we get back this answer now what we're going to do is we're going to actually populate our repeater so I'm going to go ahead and set up our repeater population so I'm going to say that we need my repeater no let's call this chat log repeater and here we're going to have here we can write catalog repeater dot on items ready and here we're going to have a callback function and I'm kind of assuming you you know the basics of populating a repeater using Velo and item data so one thing I'm already picking up on here is that we're going to need an ID for each of these entries for it to work in our repeater so what I'm going to actually do is I'm going to add here an ID and this is going to be just a random ID so I'm going to use math Dot four and math [Music] dot random times a bunch and then dot two string because this needs to be a string and this should be good enough for now I mean in the future maybe I would use like a uu ID generator or something like that for this but for now this is totally sufficient and here so when we're probably in the repeater we're going to say the text should be equal to uh sorry X so this is going to be item text Dot text and here I'm going to use template literal and we're going to say that it should be very similar to how we set it up for our bot so it'll be itemdata dot name and then we're going to have our item data text and now we just need to after we push the answer to the array we just need to populate the repeater so we're going to say uh sorry not populated but pass in the data so chat log repeater dot data equals chat array uh this is not right and format one last thing I'm going to do from a kind of user experience UI perspective is hide our repeater and I'm only going to show it um right over here so I'm going to hide and this will just mean that we won't see that ugly starter repeater when there's nothing in there yet that show okay here goes nothing Let's uh preview this and I'm imagining that we're gonna need to do some tweaking let me zoom out a bit because I didn't really do a lot of the uh formatting in terms of you know editor X and whatnot so it's kind of a little Bunch together here but like I'm just going to say hi see what happens Okay so user hi um Wix rep hello there my name is name okay so this didn't really work I'm gonna have to figure out how to do it so it generates kind of like a random name and then puts it in there um but I'm here to help you with your issues maybe having a problem with your website can you please bring up your website URL your email address and a brief description that is where you're counting so yeah in the chat itself they might say this like one after the other they might not say everything at once and that can also all be styled kind of in the introduction so let's say I'll say my website is www.example.com [Music] and let's see what happens now okay so we have our next input and we have our answer so already some things that I'm realizing here that can be improved um so obviously the fact that we don't want this repeater to jump up and cover the inbox input box when it's uh kind of full uh but also we might want to display the user's question before the Wix rep answers that's how a chat box would usually work a chat bot sorry um and let's see what we got here for the answer my email is example.com I'm having trouble filled out of my website so the Wix rep kind of made up its own email and its own um its own uh problem okay because I this is actually quite amusing so basically I asked it asked for three things I gave it one so it decided that it would make up its own answer um to my questions um and then like a few more details of the issue having so let's go ahead and I'm going to try and address some of the issues that we had here which is one the name uh to the the user should see kind of their their question before the answer comes and try and prevent this kind of situation from happening uh so I'm going to go here to edit site first let's deal with the layout so I'm going to actually group all this stuff together uh okay I'm experiencing a slight slow down here excellent place in container and then I'm going to place both of these also in its own container kind of like we did for the uh the regular questions and let's put these two together so let's just stack them that should be good enough okay it's not beautiful but it should prevent the problem that we were having before um the next thing that I want to do is right over here which is rather simple let me just go ahead and zoom in a little bit is that also after we push our question to the chat array I'm going to populate the chat log repeater okay and this should be enough to display our question before the answer comes and this function is starting to get a little convoluted so maybe in the future I would refactor this and split it up into several different functions but for now I'm going to keep it as is now let's head to our back end and try and fix some of the quirky behavior that we were getting from the AI so I'm going to go ahead to our back end and first um what I'm going to do is I'm going to say I'm going to separate out the creation of the name into like a separate action thank you so I'm going to say let name equal to generate answer from AI and The Prompt will be create a random [Music] person's name and that will be the name and then here I'm just going to directly tell it what its name is I'm going to change this into a template literal for the introduction and I'm going to put here instead of make up a name for yourself I'm going to say named whatever comes back from name okay so we're kind of using the AI multiple times to generate different parts of this bot and okay so your helpful polite and professional you need to ask for website email issue presented countering in three separate separate [Music] questions if you don't receive necessary information ask again okay because that's kind of the behavior that we want we don't want it to make up answers um yeah okay this looks pretty good um let's see kind of how it behaves now so I'm going to zoom back out and go back into preview mode foreign and let's try it out so I'm going to say hi hi okay so we have here John Smith okay so interesting so I had told it to call itself uh Wix rep I forgot to tell it to pass that kind of name value to the front end so we can kind of do that back and forth with the names but actually because I had already told it it's a chat bot so when it generates its own um prompts its own answers then it kind of you know prefixed it with the name that it made up for itself so that's interesting I'm gonna have to think about how to fix that but anyways this is a much better start so I'm John with Wix support can you please tell me the website you're having issue with so this is more realistic so it's not going to ask for three things at the same time it just asks for the website and then I'm going to say yeah my website is www.example .com send that and then okay great thank you can you please tell me the email address associated with the website so I'm going to say Bob at example.com perfect can you please tell me what the issue is again so this is actually like really good I'm really happy with this result because it's really feeling exactly like a conversation with WIC support so let me say um I have an element that I want to make wider how do I do that and let's see what they say sure I can help you with that can you please tell me which element you are trying to make wider so this is exactly this is really great this is like exactly how I mean maybe Wix has bots on the end I don't know I mean just judging by this conversation that I'm having here with my bot this is exactly what the Wix rep would say um I'm gonna say it is the Box the green element on my home page and as you can see here like it's not so comfortable in terms of like how the repeater is styled but great let me see let me look and see what I could do to help that is exactly what the Wix rep would say like a thousand percent what the Wix rep would say [Music] let's see um so that's that's the only answer it's going to give um I could think of how to make it give two answers in a row um you kind of really have to get into like you have to give a lot of help to the AI bot if you wanted to do more complex things because it really only knows how to make like you're making an API call you're passing in a prompt it gives back an answer so if you want something more complex like having the AI bot say like okay I'm going to take a look and then reply kind of a few seconds later with a new prompt um then you're gonna have to think about how you're going to do something like that foreign [Music] a lot of tweaking and playing around with the UI I kind of designed it so it looks a little bit like Wix support obviously it's not one for one but it's pretty close second uh and I've just been tweaking kind of the algorithm and I'll Point those stuff at you in a moment but I just want to show you a conversation that I just had with the bot which I feel is pretty good obviously there's a lot of room to improve I would like if for example over here it wasn't saying all these things at once I would like for it to try and proposed some solutions before saying it can't provide a solution but overall based on the instructions that I gave it this is pretty good so let's go and take a look under the hood so first for the back end I've been playing around with the prompt a lot and making it longer shorter giving more instructions and what I found is like simpler is better if you try and over complicate the kind of this introduction then it gets confused then it started doing really weird things I'm sure I can probably engineer this a little better but for now it's giving a conversation like you just saw I also noticed that adding in the um kind of the double indentation before the chat line that is provided helps the chatbot understand a little bit and that's true also in the responses that it provides so in the front end I kind of needed to account for that and slice off those um like that double um what's it called new line uh and just account for that so that like the UI doesn't get screwed up in terms of how I set this up so basically it's just a repeater and there's a wrapper and text for the bot and a reference text for the user and then I just kind of condition uh inside of here depending on if a name comes back because as you saw uh previously in the demonstration once I tell the bot that it has a name it kind of knows to use that name in the chat so we don't really need to pass the bottom name and you can see here that when I'm passing um things to the bot um I'm only passing kind of the text itself and I don't need to pass the name and I only pass a name when I'm talking about the user and I get that name from the first answer that they give so I said um you know if the chatter radar length is 1 then the name should just be equal to the text that they answer so I'm just assuming that they're going to give their name in plain text they're not going to say something like my name is so and so I'm trying to think what else I should point out here in terms of what I've done I added a uh just that you can press enter key and it'll ask the question using on key press for the text input and the rest was just kind of editor X designing making this sticky and Etc um and yeah I think I'm gonna wrap this up at this point I'm pretty happy with this result I will leave a link to this template in the comments below I will probably all be offering this as well uh for sale for a few bucks if somebody wants to just copy over the template and stick in your own um you know open AI API key and design your own chat then you can do that um yeah all the details will probably be on my website soon after publishing this uh video if not then you can feel free to reach out via my website uh that's all for today uh if you like this video please don't forget to like And subscribe I try to put out new content every week so stay tuned [Music]

Channel: The Wix Wiz

Views: 30,825

Keywords:

Id: hQo1TYbFOHs

Length: 58min 51sec (3531 seconds)

Published: Sat Jan 07 2023