New ChatGPT API in Bubble.io (Complete tutorial for beginners)

what's going on guys this is Dean of Black Box no code and in this video I'm going to show you guys how to integrate open ai's new chat GPT API into bubble completely without writing any code or even understanding it so um so yeah for those of you that don't know I think over the past few days open AI released their new chat gbt API they also released the whisper API which I'm not going to get into in this video but I haven't seen anyone integrating this online I know I couldn't find anything when I tried looking it up so I just figured out myself and it's pretty straightforward compared to the uh you know the other models the gpt3 models they had but it is slightly different I'm sure by now a lot of you guys have already used chat GPT obviously if you're viewing this video it's really great for chat bot applications you can see some of the use cases they have on their website whereas gpt3 you know it you can be fine-tuned to um you know I guess a wider range of tasks if you will um and one thing to mention and GPT 3.5 turbo that is the official model of the chat GPT product and you can even see that the price per tokens it's priced at a tenth of what gpt3 would cost which is just crazy um Crazy Cheap so yeah let's actually uh get into building it so if we come into their documentation I've already gone ahead and created an open AI account but you can you can read a little bit more about um the completions they give you some examples I definitely recommend you guys try it out in their playground but you can see kind of these sample requests that we make as well as the response that they give us but essentially for those of you that have used gpt3 again it's very similar to how we create a request except that you can see that in our messages here we're actually given an array right um and you can see that we kind of have rules associated with it so again I'm not going to get into the kind of finer details of all this I really recommend you guys come and read through this but essentially it's you know as I mentioned before it's great for chat bot applications and it can even include conversation history with which I'm sure a lot of you guys are familiar with um so again let's get into actually building this with bubble right so once we're in our bubble editor you're going to want to come here to create an app and then we're not going to start it from a template we'll just call this um chat gbt demo YouTube that's available we'll just go ahead and create it and so once we're in our bubble editor the first thing that we're actually going to do is set up the API aspect of it so come into the plugins here it's kind of hard to see behind this play button there but come into the ad plugins install the API connector click add another API we'll just call this open AI we're going to add shared headers so this is essentially how we're going to authenticate that we hey you know we're actually allowed to request what we're trying to hit right we're actually allowed to make requests open Ai and get a response back so if we come back to the documentation and then we scroll down a little bit into the um chat in the API reference section you can see in the example requests they give us we can see the headers associated with that so let's actually just go ahead and copy that over first one is going to be the content type which is just going to be Json format and then the actual authorization which is going to be a bear token and to get that value um you just want to come to your openai account into the view API keys and then just create a new secret key and then paste it back in there and make sure when you're pasting it back in there make sure you put a space between the word Bearer and then you can just paste it over like that yeah once we have that added we can actually come into the specific API call we'll just call this chat completion and then make sure this is a post request use it as an action which you'll see why here in a sec and then the actual end point we're going to hit is if we come back to the documentation chat the example request is chat completions endpoint right here and then let's just look at highlight parameters let's paste that here um and then so right actually guys right now if we go ahead and make a requests it should return us some type of value so we're going to initialize it here and if we look in the Raw data in the choices messages content we can see that we're actually getting a response which is pretty cool but obviously we're going to want to make this Dynamic right we want to make it Dynamic so the user types in ultimately what they want so we'll just call this prompt here and you can see we've given the role as the user the end user the person using your application and you just want to make sure you uncheck private here so we can actually test it with whatever input we want so we can say how do I get started with no code and then if we reinitialize it we should get a response there we go if we come back oh wow it actually wrote us a pretty long response um but yeah so you can obviously see this is what we're going to want to use except rather than us typing this we're going to want to have the user type this from the front end so let's actually get to building that I'm going to keep this a very simple UI so we'll just do a few things we'll change the background color to kind of a dark gray and then um we'll see ask chat GPT let's make this a heading um Center the text let's change that font God I hate that color cool and then um we will just add a simple kind of input field Center that um I guess we can make it just fixed width and height for now let's change the colors really quick on that cool cool and then let's just add a simple button and we'll just say ask for now um Center that add a bit of a margin on the top let's do 20 for now let's also change that color to kind of a greenish we'll just do that for now so yeah if we preview it cool um already and then the actual text part of this which is where the response will go we'll just call this generated response we'll Center this again um and then we'll also add a state so once we get the response then we will fill this in so we'll call it generated response text so um now let's get into the actual workflow so if once the user clicks ask we essentially need to take the input that's here and send it to the back end back to open AI so if we click Start edit workflow let's search up our API except rather than the prompt we don't want to hard code it we want to insert a dynamic element and from our input A's value I believe that's what we called it obviously yeah so the next action we're going to want to add is setting these states um setting a state of an element so if you guys remember that text kind of field that we had called generated response we want to you know set whatever value we get from openai into this field so but what value do we want to set so the result of Step ones choices and then scroll down until you see each items message content and then for now we'll just do the first item so it's if you guys remember when we initialize that call it gave us quite a big object but obviously we're not going to want everything from there we're only going to want the actual content to display to the user as you guys see here so that's essentially what we're doing kind of parsing all that data and then last step is if you come into the design we don't want to just display edit mean we want to insert a dynamic element and we're going to display the generated responses um yeah the generated response so now we're actually ready to test it so but before we do that I do want to change the font color from that kind of ugly blue just to a really white visible white color that we can test so we can actually ask it anything and again please excuse this terrible UI but um we can ask what's the best way to learn how to code and if you click enter or click ask it should give us the response and it may take a while because we didn't have the max token set so it could give us a pretty big response but I guess we'll see yeah so there we go um you can see it's pretty similar to what uh chat GPT would provide us if you guys asked something like this um obviously we could be more descriptive or even tweak with the end points or kind of trigger the parameters of the API but you can see just in a few minutes guys we can we already have a workable product which is pretty cool um and you can ask it obviously any question whatever inputs you want or you can even add more inputs or multi-line input to uh kind of fine tune it I guess to your user so yeah guys hope you guys enjoyed this I hope this was informative a little bit but thank you

Channel: Cerum AI

Views: 13,241

Keywords: Bubble.io, ChatGPT, Bubble openAI, Bubble ChatGPT, API

Id: GLt5H5W00ck

Length: 13min 6sec (786 seconds)

Published: Tue Mar 07 2023