Build a simple A.I. App with Webflow, Make and OpenAI API

Hello friends and welcome in this video I'm going to show you how you can quickly connect any of your webflow website to open ai's API in order to build a simple little app like this artist statement generator that I built here so to give you a quick demo I'm asking for my users their name location what's their main field how the statement should sound and then a few keywords that they can add then once they generate the new statement it will prompt openai's API and return the result inside of this input field so that the user can actually tweak the text and modify it a little bit before copying it and using it elsewhere so the way this is built follows four main steps the first one is that we're going to collect user details with the form inputs once we have those we'll build our prompt that we're then going to send in the background to open ai's API and once we have the response from that call we'll display it on the same page without having to refresh the page or create any CMS item so first we're going to go through the project to see how it's built and then we'll check out the JavaScript code in the make scenarios that are needed to make this work the project will be a clonable so you can clone it for free on webflow by following the link in the description below if you want to get started quicker so here we have two main elements we have the form where we collect the inputs from our user and then we'll have a second form where we'll have the input field in which we'll display the results so first in the form where we collect the inputs we have our input fields and I gave them all a unique ID that I'm going to use in my JavaScript to get the value for those inputs then we have our submit button and under that we have a second form in which we'll display the results and you might be wondering why a second form and the reason is that I wanted to use that input field so that user can modify the text and that is only possible inside of a form so this is why we have that second form that is hidden for now but I'll just make it visible and here I also added a little loader so that my user would know that something's processing in the background they should wait a little bit but if we hide that loader we can see that underneath we just have a simple field with an ID of statement text that we'll use and and populate our results in so now we can jump into the code but before I just want to show you quickly the make scenario and we'll rebuild it together afterwards but the way it works is that I basically created a web hook inside of make so that's a unique URL that we'll be able to send data to and we are going to send the prompt to this webhook then make is going to store my API keys and I'm going to prompt open ai's API to get the result that will then send back as a webhook response to our website now how does the code work is the most important part so here if I open my page settings and scroll down so the first thing we're doing is that we're getting each of the four elements that we're going to need to interact with and storing them into variables so we have the form with all our inputs then we have the result wrap containing the result loader and the field in which we'll populate the text so once we have that we're ready to build our function for what happens when the user clicks on submit so we're going to add an event listener to our form and we're going to be watching for the submit event and the first thing we want to do is we want to prevent the default Behavior because we do not want webflow to send the data back to their backend we're going to process it ourselves so we're going to prevent defaults now once that's done we need to give a little visual feedback to our users so that they know that something's happening and they're not waiting for nothing so we're going to display the result wrapper and then we're going to make sure that the result loader is visible as well so it should be set to flex we're also going to scroll down to the bottom part of the page where the results will be displayed now once that's done we can start building our prompt so to build my prompt I'm first of all getting all the value of each of the input field inside of my form so I'm getting the name the location the field the tone and the keywords assigning them to variables that I'm going to use to build my prompt and to do so I'm using the backtick literals which are a very convenient way to build a string based on both text and JavaScript variables so here as you can see my prompt will be generate an order statement of around 100 words for an artist named the variable name who is based in location and works mostly with Fields the statement should sound tone and include the following keywords and then I'm just putting the keywords variable end of the back to clitoral now that's going to give me the prompt that we need to send to open ai's API through makes webhook and to do that we're going to use a fetch call and so the fetch call will let us send a request to an external service and then also process the response coming from that external service so the main argument is going to be obviously the URL of the external service we want to send the request to in our case this is going to be our make webhook and you might be wondering why don't we just query the open ai's API directly from the fetch call and the reason is that to do that we would have to expose our API keys inside of the public code and we don't want to do that so make is basically going to act as the middlemen which is going to keep our API Keys safe so we send the request to make make sense the request to open Ai and then it's going to send us back whatever open AI sends back to make so first we're going to specify the webhook URL where we're sending the request and then we can also add some pair meters as an object so in this case I'm going to specify that the method is post the content type is going to be Json and the body of our call will be made of two elements our prompt which is coming from this variable here prompt and we also need to set the max tokens which is a number that will limit the length of the output that openai will give you so one token I think is about four characters and the default value is set to 12 or 16 tokens so that would be barely one or two sentences and in our case we want around 100 words so you need to make sure that you have a number that will be greater to the output that you expect so that you don't have a truncated answer so when the user clicks on submit it's going to send a request to this URL with these parameters and whenever we get a response from that external service we're going to process that response so it's going to come back as an object which we need to track the text from so we're going to apply the method.txt to it we're going to do response dot text then that resulting bear text we're just going to set as the value of the input field that we have ready to show the results and we just need to hide the loader that was preventing the user from seeing that input field so now we're going to jump into the make scenario and we're actually going to rebuild it from scratch so you can see how to build such scenario so here I have a new make scenario and the first thing we're going to do is we're going to search for web hooks I'm going to go here custom web hook make sure you don't pick the mail hook because this is for email which is totally different and now we're going to add a new web hook that I'll call tutorial demo and we're going to save this so now that we have a webhook created it's listening to some simple data to know what kind of data structure to expect so I'm just going to copy this address here we're going to go back to my project and inside of the code I'm actually going to use this second page which is just a clone of the home page inside of this second page I'm going to change the web hook value and paste the web hook that we just created inside of make I'm just going to press save we're going to publish great and now we need to train that webhook again it's listening for some sample data so we're just going to fill the form one submitted just so it knows what to expect for the data structure and now you notice we haven't accepted which is the default response to a web hook it's not what we want we're going to correct that later so if I go back to my scenario we can now see that the structure was successfully determined and we can keep going so after that we need to plug into openai's API so I'm just going to search here for openai module select it and what we want to do is we want to create a completion now if it's your first time you'll need to create your openai connection this is where you're going to put your API keys to connect to your own account for me it was already done so then we're going to select the method and we want to create a prompt completion and then we have to pick a model so I'm not going to go in depth into the differences between each model and what they're good for and not good for you can find plenty of information about that on the openai's documentation website but for this demo the model that was the most suited was text DaVinci 3 so I'm going to select that model this is what's going to give you very similar result to chat GPT if you want to get some simple text output and then it's asking for the prompt and you can see here that when I open this field it's giving me the variables that are coming from my webhook the the values that are coming from my web hook and we're going to use the prompt here now we still need to specify the max tokens otherwise the result will be too short and for that we're going to select advanced settings and we're not going to talk much about temperature top P again I encourage you to check openai's documentation if you want to learn more about that we're just going to specify the max token here by putting the value coming from our web hook and that's it now we're set and if we do a run once I'm just going to save if we run this scenario once go back to my previous page here and I'm just going to resubmit with the same value it's still accepted because we haven't set the response yet but if I go back to my scenario here you can see that as the output of the openai module we now have our text right there so that's what we need to send back to our website as a webhook response so I'm going to add a third module here and I'll search for web hooks again and here we're going to select webhook response so when the status is equal to 200 meaning that everything went well we are going to send back the text inside the choices like so and now that we have that the code is already ready it's going to grab whatever comes back as a webhook response and it's going to display it inside of our input field so now we can do save run once again or actually I'm going to activate it perfect so now we have our second scenario that's live and if I go back to this page and click on generate once again this time we should get our results there we go and once again it's in an input field so I could correct it if I don't want those two first words and then copy it and use it elsewhere so that's it this is how you can quickly connect to any of your webflow website to open ai's API using a simple fetch call I'll put the link in the description below for the cloneable of this project and if you're new to webflow or make feel free to use my affiliate links again in the description below that really helps me out build more content like this and if this was useful feel free to leave a thumbs up or to subscribe for the next videos wishing you all the best and have a great day

Channel: Pierre de Montalte

Views: 5,185

Keywords:

Id: ox8x6O0qZyA

Length: 12min 3sec (723 seconds)

Published: Mon Apr 03 2023