How to Use Open AI's GPT-4o in FlutterFlow - Part 1

in this video series I'm going to show you how to use open ai's newest model GPT 4 Omega in flutter flow in this first video we'll do three things first we'll import open ai's API Library second we'll configure our API calls and third we'll model the data that's returned from open aai so it's type safe and easy to work with in the second video we'll talk about how to structure your data in the back end design the page and then implement the logic okay let's let's jump into flutter flow so first let's import the API library from open Ai and you do that right here with this button because flutter flow supports importing Swagger or open API specs so that you don't have to individually import each call now open aai gives us their whole API Library if you go to this link so here we are and what you want is this open api. yaml file and then you can just come down to this download raw file button great let's jump back into flutter flow now you can just import that file here beautiful so it's imported those apis as a group here and you can see there's a lot of them so let's move to our next step configuring these the first step is to set your API key so let's go jump over to open aai at this URL to get our API key let's come over here to API keys and create a new secret key give it a name and we'll keep all the rest of the defaults now this will be the only time that you see this key so make sure you keep it it somewhere secure if you do lose it you can just delete that key and generate a new one okay let's go jump over to flutter flow now the way that open AI has structure their API Library when you import it is they put the authorization headers on each individual call now if you're only using one call that's fine but if you're using multiple it's better to put it in the header section of the group so if you have to change it you don't have to repeat it in a bunch of locations so we can put it here beautiful and save it and now that'll be propagated down to all of the headers whenever you use any of these calls next step in our configuration of these calls let's go into the one that we're going to use in this demo the create chat completion endpoint this is the main endpoint that you're going to use when you send a prompt to open AI to get a response now we're not using this authorization header because we just added it to the group so we can delete that next let's come over to our variables right here and it had added an API key and we already added that so we can just delete that variable great now let's come over to our body now open aai Imports every property that's available to you and we don't need a lot of these so you're going to want to come in here and clean up and just use the properties that you're going to need and of course if you're looking for what are the necessary properties you can jump over to the documentation here so let's go take a look at that so we're in the API reference right here and we're looking at the chat endpoint and they've got some great documentation here and you can see that any property that is required is tagged with this red required field they also give you really nice examples of the different types of calls that you're going to be doing so it looks like here all we need for a simple successful call is this array of messages and the model we want to use that would be like GPT 3.5 or 4 or for this video 4.0 all right so let's clean up our call so we know we need this messages array we know we need the model right here but everything else we can get rid of for this demo great that's all we need let's give it a format all right great now we're not using this model here so let's go look at what's the exact Syntax for this new model so here's this model property and you can see the endpoint compatibility table right here next you can come over here to GPT 40 and you can see these are the models right here now at the time of this recording this is the one you want to use so let's copy this and paste it into flutter flow okay so let's replace this GPT 4 Turbo with this new model beautiful and let's save those changes next let's deal with this messages array right here so first let's look at what the API is expecting so this messages array will be where you're sending your prompts but it's more than that because it's a list of the messages comprising the conversation so far because when you're using these models these are back and forth conversations so there's a history to it so each subsequent question or comment that you make should be added to this array and sent off to chat GPT and you can see the structure of this over here in this example so you've got your messages array and this is ordered sequentially so this is the first message in the conversation and this is the second one so the first one is your indication to chat GPT about what role it should take you're telling the system of chat GPT and you're telling it you are a helpful assistant and of course you want to adapt this for your business use case so if you're designing an app for an autoshop you would want to indicate that here like you are an assistant for an autoshop giving it that context will help guide the model in the response in both the content and the form of communication so using the right words for the content the next message in here would be the first message that you send off so this is whatever the user first writes then after you get a response from chat jpt you would add this to this array as the third item in this array and so on and so forth so let's get back into flutter flow and see how we're going to construct this array so because this will be dynamic data we want to Define a variable for this so let's add a variable and we'll call it messages and this will just be a Json object that is when we actually get to building this we will have to construct that array in the process of our conversation then we will pass that array of objects in here so we can just delete this right here because we'll be constructing it ourselves and drop it in beautiful all right so let's save this and test it out all right so before we test this call we need to add in our messages value right here so let's just go back to the documentation and use the example from there so I'll just grab this aray right here and copy that and then we can paste this in here make sure that this is clicked on here which will make sure that this variable will be included in the body of the request or wherever your variable is used all right so let's test this API call beautiful and there's our response and we can see in the response here down in this messages is we get the actual substance of our response right here in this content and it says hi there how can I assist you today that's great okay this step is done next step is to model our data well what does that mean well we get this response and we want to make sure that this response is easy to use and we can do that by creating a custom data type based on this response and it's real easy to do so we're just going to Commander contr a to copy this then come over to our data types over here and use this option so that we can just import that response and flutter flow will automatically create data types based on that response so we'll just call this GPT response and we'll paste it in here then create and look at that just like with our response we have all of the fields mapping to that response so down here we have choices which is where the actual response we're expecting comes in but the fascinating thing is flutter flow has done something cool so it's not only made data types for that response but whenever it needs a nested data type so here in our choices and we need that because when we come in here and we test it you can see that we've got this choices and this choices also has an array of objects so we need more data types in here and so it's created that for us so here's our get response right here then that's a list of choices down here and inside we've got our messages which is of type message which come down the here and there's our role in our content beautiful so we've imported the library we've configured it and we've modeled our data coming back from open aai in the next video we'll structure our backend to receive this data design the UI and implement the logic let us know if you have any questions on this and we'll see you in that video celop and redefine flood flow the visual way to cold building ABS no sweat no [Music] overload [Music] the let flow the visual way to Cold Build

Channel: FlutterFlow

Views: 13,403

Keywords: Flutter, FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, Google Flutter, Dart, No Code App, FlutterFlow App Builder, No Code App Builder, open ai, gpt-4o, llm, chatbot, omni

Id: oUzQNTKe6Ek

Length: 9min 31sec (571 seconds)

Published: Fri May 17 2024