Wized + AI part 1 - Let’s build an AI todo app

what's going on guys in today's video we're going to learn how to build an AI powered to-do app we're going to start by hardcoding an array we're going to manipulate then that array so we're going to learn how to render a list of tasks that we have to create and we're going to learn also how to add different items to the array remove items which in this case are going to be to-do items and then at the end we're going to add open AI to the mix so the final idea the final build that we're going to create is going to be an app that allows the user to just write a goal for example paint my room we send then a request to open Ai and then in response we get a list of items that we're going to render on the page which are going to be the tasks that need to be completed in order to achieve the goal without any further Ado let's jump right into building it all right so I'll first walk you through the webflow project I'll show you all of the elements that we have on the page and how the elements are structured so let's start first with this form over here we have the form wrapper which is by the way not a wizd element then inside of that we have the actual form which has a wizd attribute added to it we call it here form a a and inside of form AI we have one input field and a submit button so the input field doesn't have a wizd attribute we can access it because the form is a wizd element in the embet 2.0 and we can access it by the name property in this case we can see that this input has a name of AI message and with the other form we have the same thing so if you look at it the form wrapper is not having a wiz attribute the form has the attribute of form too and then inside we have the input which has a name of task name and we have the submit button so yeah no matter if we're submitting these forms by hitting enter or we're clicking on this submit button we can basically extract the values that have been set inside of the form finally we have a list of to-do items and inside we have the to-do items so each item has an attribute of Wiz to-do item and you can see if I'm copying them and pasting them they have also a little bit of spacing added here um with this flexbox Gap all right I'll delete the items that I created and now we're going to jump into Wiz and we're going to start building okay perfect if I refresh the canvas on this page you can see that in page data we just have these two forms and we can access the input Fields like I mentioned earlier by submitting the form first so when whenever one of these forms get submitted we can see the value that's that's been submitted within the form so here for example we can write my goal is to build a to-do app if we submit this we can see here that the message was updated but we can also see that this form has been submitted to web flow and later we're going to learn how to avoid this how we can prevent the default behavior of the form and choose specifically what happens when a form gets submitted all right I'll refresh the canvas so that I have my form here again and I'm going to start by creating a variable that's just going to be a placeholder array which we're going to use so here I'm just going to hardcode the data of a to-do item or basically I'm going to hardcode the data of a list of to-do items and then later we're going to manipulate that array to show some basic functionality of how to um apply different classes to to do items based on whether they have been completed or not how to toggle the visibility these buttons Etc and then later we're going to get this whole list dynamically from open AI all right so here I'm going to create a new variable I'm going to call it array and inside here I'm going to return an array of objects so here I'm going to first write return I'm going to create an array and inside of this I'm going to structure my object object so the object is going to have two properties first we're going to have task name this can be any task for example install Windows and then we're going to add another property we have to add the comma at the end and we're going to call the second property is completed and this is going to be a Boolean so it's true or false in this case it's going to be false by default but if we cross it over we're going to change this state to true all right and whenever we want to have multiple objects inside of an array we have to separate them with a coma like this so I'm going to copy this and I'm just going to paste this same value a few more times and and as you can see our spacing is quite messed up but I'm going to show you a neat little trick how you can clean up your code so you can rightclick here and simply click on format document or you can even use this shortcut shift alt F and just like that our JavaScript code has been cleaned up okay three items is enough for now I'm just going to change these so they are different or download Chrome and finally we're going to have install ad blocker all right now we have our three tasks and we're going to use these tasks to render a list of items and we should have delete maafi it shall be deleted perfect now that we have our array variable we can refresh the canvas we're going to see then that the value gets uh populated over here and we can use this now to render a list of tasks so for that we're going to create a new action we're going to call it render tasks or render task list render tasks sounds good under type we're going to choose element and we're going to apply this to our to-do item under settings we're going to choose render list and now we have to add the array from which this list is going to be rendered so in our case we have our array that we just created and now we have to specify a variable for index now if you're confused about this array this array can come from anywhere you want it can be either an array that you received in a request or it can be an array that you just hardcoded like we did here in this example so it can be any array you can render the list from any array that you created or that you got from a backend all right now we have to specify a variable for Index this is going to be your iterator variable this is like a counter so it tells the computer which items have been rendered so far and which item is being currently render we're going to use this iterator variable in a little bit but for now just know that you need to create it and it's a convention to just call it I at the beginning and then if you are rendering a list of items within another list then you would use J if you have three Loops within each other then you would use K and so on all right but not to confuse you let's just return zero here because the first item in an array has an index of zero and then this value gets incremented with every item that's being rendered so here we're going to close this we're going to select our index variable that we created and now we can just close this and if we refresh the canvas we're going to see four items here being rendered cool now we just need to replace the value here the name of each task so here I'm going to create a new action I'm going to call it set task name under type I'm going to choose element again and under attribute I'm going to choose the item text under settings I'm going to choose set text plain text and here I'm going to select the text property or the task name property within that array so I can simply write here return v. array after v. array we have to write here a number or we can add our iterator variable so if we want to Cod a value if we know we want to just set the text for the third item in the array then we would write here two because it's starting with zero then one then two or if we wanted the first item we would write zero but since we want to dynamically set the text for each item that's being rendered we're going to write here V DOI and now we're going to use do notation to access this property over here so we're going to write Dot and here we have is completed or task name in our case we're going to choose task name all right and if we refresh the canvas again we can see that all of our tasks are appearing cool now we want to add functionality that's going to allow us to cross over the items that have been completed and toggle that state as well so if we by accident clicked on yeah completed we can then later reset it back so let's learn how to do that with run functions under actions we're going to create a new action and we can call it set completed State under type we're going to choose element under attribute we're going to choose our our toggle button by the way the toggle button contains both icons so we're going to conditionally display one icon and hide the other depending on whether the status of the task is is completed or not okay so we're going to select this to do item toggle and here we're going to choose on event click run function and this run function allows us to write any sort of JavaScript that we want to run whenever this event occurs in this case a click so here this becomes incredibly powerful because we can not only run some arbitrary JavaScript we can even update values that we have over here so we can directly access and update for example the iterator variable by just writing v.i equals let's say 24 and you're going to see it update immediately of course this is going to get updated whenever this click occures again and again and again and we can also do more we can change cookie values just like this by assigning a value we can change form values Etc so run functions are really powerful you can even initiate charts or yeah start a library whenever an event occures so yeah really powerful concept for now we're going to keep it really simple and we're just going to update the state of these items so here again we're going to write return we're going to select our array and here we're going to use v.i once again because for each item that's being clicked we want to update the state for that item in particular so here we're going to write dot is completed and we're going to change this property to whatever the opposite is of the current value so if it's true when the button gets clicked we want to set it to false and when it's false whenever the button is clicked we want to set it to true so the way we're going to do this is we're going to write equals then we're going to copy this same value that we have over here and we're going to add an exclamation mark and this will set the value of is completed to the opposite of what it is currently oh sorry I don't want to return this so it's a run function I just want to assign the value of the opposite I don't want to return the value my bad okay so just to repeat all I have to do here is just write equals the same value with an exclamation mark before and that's going to do the opposite and now if I close this and I refresh the canvas you're going to see that this state is actually going to get toggled okay now let's use this state to just cross these items off so in client first we have this class of text style strike through and if we just write text style strike through you're going to see that we're crossing off the item and this is the class that we want to toggle depending on the state of the Titan so I'm going to copy this class and I'm just going to head over to WIS and here I'm going to call this action set strike through or set strike through class under type I'm going to choose element and I'm going to apply this to our to-do item text property under settings I'm going to choose set class our class is going to be text style strike through and now we have to specify a condition so when the condition is true the items are going to be crossed so let's say if we wanted to cross all of the items we could simply write return true and now if we refresh the canvas we can see that all of our items are crossed if we write false it's going to do the opposite none of the items will be crossed but we want to set this value dynamically based on the value that's inside of this variable over here so what we're going to do here is we're going to select our array we're going to write D do I dots is completed and now you can see if I refresh the canvas if I would for example change this to True here the first item will be crossed and whenever since we set up and since we set up earlier the Run function whenever we're clicking any of these buttons we're changing the state and we can do that now for every item uh in the list now the only thing that's left is we have to hide and show these icons depending on whether the state is true or false for this item so when the item is completed we can see this reset button to just delete that class that we added of text style strike through or if it's not crossed we want to show this done icon so we're going to create a new action let's call it toggle icon VIs visibility okay done icon visibility all right here we're going to select element okay I should stick with the convention that I added before so complete icon visibility my bad all right now we're going to choose set visibility visible if and we're going to choose the same property that we had in our text style strike through property which is v. array V DOI dots is completed and of course we have to return the value and now we have to do the opposite for the other icon so we can maybe just duplicate this we're going to delete copy from the name and we're going to call it here reset because it's the reset icon okay and here we're going to apply it to the reset icon and what we're going to do here is the opposite so exclamation mark means that it's going to mutate the value and return the opposite okay cool and now if we refresh our canvas we can see here that okay we did the opposite so um we're showing the wrong icon but all we have to do is change the properties so we're going to go to toggle reset icon we're going to remove the exclamation mark and we're going to add it to the completed icon like so and now it should be working as expected we can refresh the canvas and we can see now we can reset the state or we can complete an item cool now let's learn how to remove an item from the list so we have this delete button over here as well and we're going to apply the action to this button and then we're simply going to remove the current item from the array so under actions we're going to create a new action I'm going to call it remove item we're going to choose element and here we're going to select the delete B button over here under settings we're going to choose on event click we're going to run a function again and in the Run function we're going to write the following we're not going to return the value again because we're in a run function and we're just going to write delete here we're going to write array dot splice and then we have to write which item we want to remove which is v.i in our case and then the second item is going to be the number of items that we want to delete in our case we just want to delete one okay and now let's get some visual feedback on this was this correct that I wrote and we can see now the correct item is being removed now you might be thinking why did we do all of this if we're still going to get data from our request and yes we're going to get data from open AI from a request but what we can do is simply update the array that we now created so whenever we get a response from open AI we're simply going to update the array and then all of the functionality all these actions that we built will still be working we still haven't added one more functionality that we need we want to be able to add manually items to this list so let's jump back into actions again and let's add an action that's going to add an item to our array whenever a user submits this form okay so we're going to go back to actions we can call this submit uh to-do form under type we're going to choose element we're going to find our form and here we're going to choose on event submit we want to First prevent default because we don't want this form to be submitted to web flow and we're also going to delete the value that's being here so if the user writes for example paint my room and they submit the form we want want this to be empty again so that the user can add another task to the list okay and under action we're going to choose run function again here under function we're going to write the following v. array dot push this is another array method which allows us to inject an item into the array and here we're simply going to write the following we're going to select our task name field and that's it and now we can see if we close this if we refresh our canvas we can write here for example install Arc I think that's popular these days and we can see that an item has been added but uh we made a mistake because we need to actually set the value in the array to object so this to have the same structure like the other items right now all we did was we submitted um install or Arc to our array but here instead we're having an array of objects and this is just a string so this is not working so we have to get back to our action and change it up a little bit we should also organize our projects and put everything into folders so we're going to organize the actions in a a little bit but for now we're going to do the following we're going to create a new variable and this is going to be called to-do item it can be anything we're going to write equals to and now we're going to create an object that has exactly the same structure as what we were having before so here we're going to write task name and the task name is going to be f. form to do task name like so and is completed is going to be false all right cool and now inside here we're simply going to push this to do item so we can copy this value paste it here and now this should be correct okay let's refresh our canvas let's add an item and there we go now it's correct and we can toggle also the state and we can remove it as well cool now let's organize our actions because this is getting quite messy already and then we're going to jump into the open AI request so here I'm going to create a folder I'm going to call it to do basic functionality okay and I'll put all of the actions inside there cool and then I'm going to have another folder for the open AI uh actions that we're going to have okay now let's add open AI to my apps here we're going to choose rest API and now we have to specify a base URL the base URL we can simply get from the docs and in our case we're going to use chat completions so we can go to create chat completion we can see that we need a post request but what we came for is to get this base URL so we're going to copy this value over here everything except for the last part which is the endpoint and here we're going to write return quotes and inside of this we're going to paste our string which is open AI V1 chat all right and now we have to create our request which is going to be called create too list okay under app we're going to choose open Ai and here we can actually we're going to just have one request so we don't need a folder here we're going to write return then we're going to paste the rest of the URL which was completions like so and under method we're going to select post now we can try to request this asset but it will not work because we didn't provide our API key so we can see here status code 401 unauthorized and we can see also in the error message you didn't provide an API key okay so let's go to headers and let's add authorization here and here we're going to provide our API key so here we're going to write return we can write beer like this space plus and here inside we have to paste in our API key now in order to get your API key what you need to do is create an account on open.com and there you need to add your credit card information as well because for each request you're going to be charged a little bit if you're building an app for yourself that's going to be a really small amount you can do maybe a 100 requests for like a dollar or so it's really cheap but if you're building an app commercially that's something you have to be attentive of because your spendings can go through the roof here I already have an API key so I'm just going to paste it in here and I'm also going to explain a few other options that we have here here I'm connecting two strings like that but in the future we're going to have another option you'll be able to add to page data environmental variables which will allow you to basically paste in your API key without it being visible here in the console ever so it will be just like adding another variable um and you'll be able to use it and also we will have um requests that can be executed on the server which at the moment in the embed 2.0 we don't have but that's coming very very soon and what you should never do is do this normally you would want to keep your API key Either in these environmental variables which we will have hidden or you would want to keep that on your backend on your server and you want to run some sort of authentication to ensure that the user that's making the request is allowed to make this request either they have a subscription or it's you as the admin so yeah never expose your API key like I'm doing over here I'm going to delete this API key after this video so it doesn't really matter but if you're building an app for yourself really be mindful of sharing your API Keys should you create a variable for the API key well yes normally you would create an environmental variable for that and for now we can just create a simple variable like a regular one but that's not how you should do it in a real project so we're going to go to page data I'm going to call it here open AI API our key all right here we're going to write return and I'm going to paste it in here like so okay now I'm going to go back to the action as well so yeah in the future environmental variables and executing the request on the server this will ensure that the API key will never be available on the front end okay I'll go back to the request now and now I'm going to swap my API key with my simulated environmental variable okay we can see here it says is undefined but if I just refresh the canvas we can see the key one more thing that we have to add here is content type here we're going to just write application Json like so let me double check yeah application Jason all right and now we can start building our completion so here under body I'm first going to add a parameter of messages and this input here is expecting an array so you can see here messages you can see you have an example as well and you can see which properties you can pass into these messages so you have a role content name which is optional as well and function call so in our case we're going to have this return and I already have a prompt which I've been experimenting with normally whenever you need to create a prompt you should yeah either try a few things or you can ask chat GPD to help you but it needs a little bit of trial and error to get the response that you want so the prompt that I'm going to use here I'm going to cover it line by line is going to be this one okay so I have two messages that I'm sending so we have R system and the content is you are to produce a Json with a property of tasks containing a list of actionable tasks to achieve the goal provided each uh each task needs to be structured as an object with two properties task name which is one to seven words long and is completed which is set to false by default and then here we have the second message which is given the goal here I have a hardcoded value which is Paint The Room provide me with a list of tasks we're going to swap this value over here with the input that we have in our app so that this value is dynamically added by the user for now we can keep it paint the room just to see if we're going to get a good response and then we can build our other actions that are needed in the process so we can try to run this request and we can see that we didn't provide a model yet so here we're going to add another property of model we're going to use Da Vinci turbo 3.5 GPT 3.5 turbo all right okay and there's one more thing that we can add here and that's temperature so the temperature property if you write one it's going to give you a different result completely every single time it's creative but you'll have also more hallucinations but if you write zero you're going to get every single time the same response so in my case I want to set it somewhere in between but you can experiment with this to get values that you're happy with so here we're going to write 0 two okay and now we can run our request and we can see that that we're getting actually a to-do list okay so if we look at message content we can see here that we got tasks and then we have task name is completed task name and so on and that's exactly what we specified we wrote here that we want to have a property of tasks containing a list of actionable tasks and inside we have each task with task name and is completed like we have in our array cool so now we want to get the value actually from the form here so here notice that I'm using btics here so it looks similar to single quotes but it's not it's a bit different so we're using btics here at the beginning and at the end and now I'm going to inject a variable here so the way I'm going to do this is by using a dollar sign squiggly brackets and now inside here I can add any JavaScript so let's say if I create a variable like so okay sorry I'm in the array I don't want that I want to go before the return statement for example I can create variable like format hard drive like so and we can see here if I just use myar here that's going to be returned so you can see here given the goal format hard drive okay in our case we are not getting this variable we want to inject what whatever the user writes so we're going to delete that and we're simply going to click here on form ai ai message okay and we're going to trigger this request whenever the form is submitted so this way we are sure that we're going to get this value okay so let's build that action as well I'm going to create a new folder call it open a a I here I'm going to call this section submit and then the name of the request which was create to-do list okay we're going to choose element here attribute that's going to be our AI form under settings we're going to choose on event submit we want to prevent default we don't want this form to be submitted to webflow we're going to reset the form and under action we're going to choose perform request create to-do list all right and we're also going to make this a conditional because we want to ensure that the form is not empty if it's being submitted so here the conditional is going to be return form ai ai message and this will ensure that the value is not falsy if it's just empty like it is now by default it's falsy so the user has to write something inside Additionally you could write some logic where the user needs to meet a certain pattern it needs to be more than so and so many characters Etc but for now we're just going to keep it simple we're just going to write that it should not be empty okay cool and now we can just write something here and see if we're getting a good good response so build a to-do app with JavaScript let's ask AI I think I have to refresh the canvas quickly okay let's try this and we can see that our request is being executed in the background we are not showing any loader for now and we can see here that we indeed got a response so create HTML structure is completed false style the app with CSS yada yada all right now what we want to do is take this value and inject it into our array that's rendering these items but the problem is that this here is a string so we have to parse the string in order to be able to work with that array and we're going to go back to our action we're going to create a new action we're going to call it a after create to do item um we're going to add it to our open AI folder and under type we're going to choose event because we want to trigger this logic after a request has been executed so here we're going to listen to our request finishing which is going to be our create to-do list request now under actions we're going to execute a run function again and here what we're going to do is the following let's do it like this so I'm going to create a variable called pared array equals Json do pars and now I'm going to select message content like so and now what I'm going to do is store the tasks so not the whole currently what I'm having in par array is basically everything that you see here in this message so we have this object we have tasks and everything that's inside so I want to extract only what's with in the tasks so I'm going to write here v. array I'm going to reset this value to the result of this so I'm going to write here uh sorry par not par par array. tasks okay now I can close this and I can try to run this request again so I'll refresh the page here I'm going to call this this request I'm going to write build a to-do app with JavaScript once again and we can see here that now we are updating the item and we can cross items over we can add additional items to the list like send client invoice and it's all interactive and yeah also we have a lot of hardcoded values here in this array by default we want this array to be empty as well when we're starting out so whenever the page refreshes and so on we want it to be empty like so we're starting with a blank page and then when we write for example paint my room we're going to get to do items thanks everyone for jumping in I hope you enjoyed this video we covered quite a lot of Base we learned how to use array methods to manipulate an array of data and then later we learned how to add items from open AI to that array in our next session we're going to learn how to add authentication to the mix so that the user can save these to-do items on their profile all right thanks so much for jumping in and I'll see you in the next [Music] session he

Channel: Wized

Views: 2,236

Keywords: Wized, Webflow, AI, Web app, APP, AI APP

Id: Qw9sE1_pLgY

Length: 44min 32sec (2672 seconds)

Published: Tue Jan 02 2024