Build a Low-Code ChatGPT App with Webflow and Wized

hello and welcome my name is Rory webflow developer and co-founder of propeller digital and today I'm going to be running you through a tutorial on how to build a chat GPT app using webflow wized and openai's API so those three tools what are we going to do with them webflow is going to be our front end you'll want some experience using webflow and a webflow account that you have room to create another website on you'll need an account on whizzed by fin Suite which we're going to use to link openai to webflow to send our information off to open AI to update the webflow front end with the data that we get back from openai at the time I released this video wiz is in closed beta if you want go onto their Discord server you might be able to get an invite code and in a couple of weeks should be open for registrations open AI we're going to be using to access their API for chat GPT more specifically we're going to be using their text completion API and their text model called text DaVinci which is washed Chachi PT uses you can register for a free account with openai to access their API and at the time I released this video If you create an account you get 18 worth of credit for their API which will be plenty for getting a web app up and going and testing it out so let's go straight in to the apps we have webflow for the front end whized over here and open AI so we're going to start by building a very quick and dirty webflow website we're not going to style it we're not going to worry about class names we're just going to Chuck down the elements that we need and get it straight into Wiz so we're going to call this uh chat GPT story generator is what we're going to be creating why not and basically all we're going to do here is slap a form on the page and put some custom attributes on it to link it in to Wiz so let's throw a section a container and a heading pop that there and we will just call it generator a little paragraph enter some text generation a story using shot GPT okay next we want a form and what we're going to do is we're first of all just gonna I'm even gonna bother putting those inside divs not quick and dirty so we're going to call this people in the story let's have location of the story and then we'll duplicate that and that and we will call this what happens in the story and that'll do for now you know I'm not going to be running any awards with this just a tutorial so we go into each text field and I'll shrink myself down here although we don't really need to have a name on these let's put them on to keep it tidy so what was that that was people in story plain text is fine now the way we get this information into whiz is we have to add a custom attribute and the name is going to be W hyphen El short for wized element and we will call this input people in story I'm just going to do the same for each of these location input location of story and this one we will call or we will say input what happens story okay let's change the text on this to generate a story and because we need something to happen when we click this we also need to give this a custom attribute okay even though we're not going for style here I also want to add in a text box that will appear and a latte animation while the story is being generated so I'm going to set this to flexbox and I'm going to go over to Lottie files and I'm just going to search for book okay this is pretty nice this this is exactly what I want okay so we're going to download this oh no I don't upload it to my workspace sorry I'll just download it as a Json file okay Bingo we got that okay we're gonna add in a Lottie file and we are going to upload our Lottie and we are going to replace that with our Lottie file it's a bit big let's put the width out and we'll stick another heading in here make it heading two we will take off the margin and we want to Center everything inside of this and we will say generating your story okay so again this needs a custom attribute for whiz to pick it up for us to use it and we're going to call it Lottie or we'll call it alert generating story okay next up we need a paragraph to put our story inside so we're going to put that let's get that inside the container I know we're not really trying to design it here but we have certain standards to keep to and we are going to leave that as it is for now we're going to call this text story results I think that'll do for now so we are going to before we publish it we are going to go over to Wiz and we're going to create a new project under my tutorials workspace and we are going to call this chat GPT story generator now we need to put in the staging domain of our webflow site so I do actually need to publish this first or not I could have gotten this from the dashboard of the settings but let's grab that uh that's loading fine I'll put that in there then the way we connect webflow to Wiz is we have to copy this script that it gives us into the head section of the site could go into project settings but handy thing the fin Suite extension for Chrome will allow us to go into custom code and where did that say the head yes up that in there save good to go publish again get that code working it's not exactly a lot on this website Bingo there we go okay continue alrighty now we're inside Wiz where things get interesting so we're not doing any authentication we're not letting people register and save their stories as nice as ought to be that's for down the line all we need to connect for now is chat gbt so inside Wiz we're going to click my apps or it should be open already and we're going to add our first up and we're going to call this chat GPT completions there's a number of built-in apps if your app isn't here we need to just use a general rest API so we're going to pop that in there okay so far so good over to the documentation for openai and openai will give us a number of different rest API endpoints to use or base URLs rather and this will dictate what chat GPT is going to do for us so if we go down here to API reference what we want is completions this is essentially what the chat GPT public side app does is is a completion model that takes a prompt and returns one or more predicted completions and here is the URL that we need so we're going to copy that and we're going to paste that in there like so next we need to send data out we need to send a request to open ai's API so we're going to go to data out we're going to click add and we're going to call this chat GPT generate story it's going to be my only request so I'm not going to bother making folders and now we can connect this to our cha GPT app so um oh I actually made a little error so we might want to use more than one parts of the API so we're actually going to do is we're going to go back into app and we're going to take out completions like so that way if we have different API endpoints we want to use we can populate them in here like so completions okay now we want to execute this on the we don't want to execute this on the server actually or do we let's come back to that and we are posting we're posting information to the API endpoint okay so if we look at the documentation it's going to tell us what we need to pass to it so if you were writing this out as a as a curl request in a in a text editor this is the information that you would pass to it so we already have this part sorted next thing is in the header of the request we need to pass in content type which is application slash Json and your API key which is a unique API key that you generate for your profile keep this secret treat it like a password if someone gets your API key they're going to be able to use your quota your 18 for free the openai have so generously given you so what we'll do is we'll copy this and it's content type all caps so in headers we're going to say content type we're going to paste that in there and then I am going to go to my account view API keys and uh I'm not bothered uh you know what instead of cutting out this part of the video I'll just uh I'll learn how to um how to block out this API key in Premiere Pro so here's my API key save it because you won't be able to view it again for security reasons so this is just going to be a throwaway one that I'm going to use for this and we're going to go back over here and we need to say authorization Bearer your API key so and that was just Bearer and then the API key so Bearer like so and that's going to return my API key we also want to tick value is a secret as well as execute on server what that is going to do is it's going to keep the API key hidden it's going to execute the request on Wiz server if you don't tick those people that are code Savvy can look at your application and steal your API key which we don't want so make sure to check that now we get to the exciting part the body of the requests so what we're going to use is model there are different types of models that the completion endpoint can use they vary in their speed and their cost text DaVinci 3 is what Chachi Pichi uses it's the best one gets the best results can give you the largest text result at the end the other ones are limited and how much text they can output it's also the more expensive one but it's the most fun one and useful one so in a real world situation you would test these out to see which works best for you so we are saying model over here so we're adding to the body of our request and we're saying model and we're pasting that value in there next up is prompt we're going to leave that one to last that's what we're going to send Chachi t Max tokens is the max number of tokens to generate in the completion so if you click into this if we click into this we can see what tokens are so if we copy this text up here tokens is just the way that the GPT text models process information so this is 244 characters there's all this coding stuff behind you know what a token is and how it splits it up but there's a max value that you can put on those I'm just going to put that in as a thousand for now Max tokens so that's going to limit how big it can be and how much money or how much of our credits are going to be used so max tokens we will say 1000 and then we're going to do temperature so let's look at what that does so the API says we find temperature there it is so we get to use a number between zero and two I think that was zero and one last time I checked but as it says here it will make the output more random the higher it is lower values will make it more focused and deterministic so another good way you can look at this is how much risk the completion API is going to take so you can play around with this the higher it goes the kind of whackier the story is going to be so for the sake of experimentation let's Notch this up to two let's make it go crazy okay next is the prompt this is where things get interesting so we are going to build a dynamic prompt based on what people enter here if we click x-ray up the top we can see the names of our Fields input people in story location of story what happens story let's hide those and click into our value box here okay so let's get started write a story that involves the following people we're going to keep this nice and simple under General here we can see our input field so this section is going to fill up over time with all the requests that you have created what we want to do is we want to write a story involving involved the following people and then people in story so actually let's populate this let's say uh uh George Bush Barney the Dinosaur location of story is going to be the moon let's throw it some curveballs what happens in the story okay we'll go wild here okay now inside our prompt we will see that this value is being pulled in write a story that involves the following people George Bush burning the dinosaur and the in the Moon this is what happens in the story foreign okay so one of the very powerful things about chat GPT or the completion problems is that it understands instructions in coding and HTML so let's do the following okay return the story as follows and I'm just going to put brackets in here and I'm going to say uh a h2 tag okay then we're going to say the middle h2 tag the end and then we're going to say return the story as red paragraph text okay let's see can it change it okay that looks good to me story takes place in the moon this is what happens oh we forgot to do a full stop here in space so that appears there turn the story as follows return the story in between these tags as red paragraph text okay that looks good to me so now what we need to do is trigger this now there is a trigger option here but this is for triggering on page load or with the variable condition doesn't work for a button what we need to do is first click at that to get rid of it we don't want to do anything after the request for now we're going to go to actions over here and we're going to create an action called generate story and we want this to apply to button generate story and we want this to happen on click in our configuration perform request we don't want this to be conditional we just want it to work and the request is chat GPT generate story okay so that's going to start generating it now even for us it's useful to know when this is generating so let's get this setup generating your story okay so we're going to say close that and we're going to say uh story preloader okay we're going to apply this to alert generating story and we're going to add the configuration so we want this to be visible visible if and it's going to get a little Cody here so if we click under our if we click that little drop down arrow by our request we have some we have results and we have state results we're going to look at when it's returning it's um it's it's prompt that it gives us the state is is it requesting has it requested the status code on the status so we want this to show if this is requesting so it shouldn't show at the start we'll show when it is requesting and stop when it's not requested okay so far so good finally we need an action to update this text so we're going to create new action close that and we're going to say display story we're going to apply this to our story results the configuration is going to be first of all the visibility and what we want to do is the status code if it's successful is going to be 200 so we wanted to do this if it's successful and then we want to use set text to set it as the result of the request now first of all we're going to have to get the request to see what the request looks like so let's go over here to data out to chat GPT generate story we can test this either by clicking the button or by clicking the little plus the play symbol here so we have response here we can drop that down and we can click Dash okay so now you see is requesting has changed to true and this is showing and I just realized that uh I did not have the Lottie set to Loop so let's quickly go over to the Lottie and set it to Loop so and publish that and this is going to take a little bit of time you know for a real app we would put a message in to say that you know this may take up to 30 seconds uh Chachi BT is great but it is not instantaneous faster than us humans but uh not instantaneous so we will wait for it to come back with the prompt now I think I have everything set up correctly first time round because it would have thrown an error yes there we go there we go okay oh my God oh it's gone wild it's gone uh okay anyways let's let's we'll fix that afterwards so go to display story and we want to set the text as the result that it has passed back to us it was President George Bush who encrypted one dollar odd digitally trimmed okay I did not realize how Wild temperature number two is going to be so we have this bit set up at least let's go back to our data out and let's bring that temperature way down to 0.5 okay and what next so let's go and preview this on the front end and run it there okay so everything that you do in Wiz as you'll see up here um the development version always reflects the current state of the configurator which we're in right now so we'll go over here and let's do the same thing and what happens in the story oh I want to copy that we're just going to use this over and over again and generate story bingo so now the request is running and we have set this div with the text and the Lottie file to only display while the request is running and boom our request does not look to have come through okay so we need to do some more testing over in Wiz let's try that again we want to refresh the canvas we want to pull that back in and we want to say George Bush and the moon and our text and generate requesting is true so far so good and let's see why this isn't working oh there we go there we go George Bush had always been fascinated by the moon he dreamed of the day he could stand on its surface and feel the power of its gravity lovely okay so the only thing that didn't work there is our HTML so let's go back into the prompt and let's say return the story as HTML as follows and I also realized over in our action here for display story we do not want to do plain text we want to do HTML Okay so Let's test this out again and see how it goes George Bush on the moon I think it's turned into a sheep oh why is that showing up there we go generate please yes there we go okay it's a sunny day on the moon when Bonnie discovered something peculiar okay so you guys can read that in your own time we got our red text and if we inspect these we have our H2 and it's just put in a paragraph with style color red so as you probably know cha gbt has been in the news a lot recently the two things that make it extremely powerful in my eyes are one its ability to understand language but two its ability to understand code I mean I did not get very specific there right I was very general I said return the story is HTML and then I just stuck into brackets a h2 tag and returned the story in between as red paragraph text so the fact that it got that right is incredible but anyways doc brings our tutorial to an end so for a quick recap we created a single page in webflow which acts as our front end we tagged each of these fields with a custom attribute whiz element W hyphen EO and then just a name that we can reference we did that for each of these fields giving them a different name we also put a custom attribute on the button so that we can use it in our action to run the request we made a little preloader here with a Lottie file we again gave this a custom attribute and we also put in a custom attribute for our story results back over in um whist we connected cha gbt as an app by putting in the base URL leaving out completions for the time being we created a data out request using the completions endpoint the post method executing it on the server we added in the two headers content type application Json authorization which is Bearer followed by our API key we entered our desired model our max number of tokens our temperature do not set it as two or Wiz or Chachi BT is going to go skitsanya which we do not want most of the time and our prompt is the dynamic part by typing out what we want by popping in our input fields which are mapped up in webflow we asked it to return it as HTML we gave the story a structure asked it to return it as H2 tags with red paragraph text that was it for the data out we then needed three actions one to generate the story so on click of this button perform a request which is the one we made previously the preloader is set to the preloader attribute the visibility is set as long as our request is actively requesting which is important with cha GPT because the requests can take up to 30 seconds and finally we have one to display our story if chat gbt returns success we make it visible otherwise if it fails it would you know make it visible with the the lorem ipsum paragraph text we want to set the text we want it to be HTML since we asked it to return it as HTML and we want the text to be the result of our API request and over here we have a lovely story about Michael Jackson teaching Bugs Bunny how to sing like him so that is all for this tutorial hope that this was of some use to you Chachi BT is a lot of fun so have fun with it hope you come up with some exciting app ideas that you can build using webflow wizzed and open API if you have any questions or suggestions for further videos please drop a comment below the video and if you're a business or agency that is interested in having a Chachi PT powered web app built for you with webflow please reach out to me at my agency email address which is also in the description and the end of the video thanks for watching and have fun with chat GPT webflow and Wiz

Channel: Ruairi McNicholas

Views: 8,275

Keywords:

Id: a8sUBE1Xg5U

Length: 27min 28sec (1648 seconds)

Published: Sat Feb 25 2023