Add AI COMPLETION To Your FlutterFlow Project | FLUTTERFLOW CUSTOM ACTION TUTORIAL

my name is Will hobik and today I'm going to be showing you how to integrate open ai's gpt3 into your flutterflow project so for example I could type something like this as a question click generate and the open AIS automatically going to return the answer for me this is great for making your project stand out and you can actually add a lot of differentiation within your project for example you could ask openai gpt3 to automatically write an email on your behalf based on some information that you feed into the system we can even ask it to translate sentences with this example I could just write my question click generate and within a few seconds it will return the translations for me or I could go even further and ask it to create a list of questions for me just type those in Click generate and again it quickly returns an answer so once again a great opportunity to make your project stand out and it's super cheap and easy to integrate into your flutter flow project with that said let's go ahead and jump into how to actually integrate this into your project okay so you can see I've gone ahead and jumped into the flutter flow editor and I have a basic page put together here we have the input with the text field which accept accepts some text we have a button here to click to actually generate the output and then we have the output from a text field I also went ahead and put some example scripts if you'd like to use these two just to get a feel for what the project looks like all you have to do is add a custom action to actually add this functionality to your flutter flow project so if I go to the custom code section and I go to custom actions you can see I've already created the action here this action is already actually in the flutter flow Marketplace so you can also find it from there you'll go ahead and click create and I will just show you actually what to include within that custom action so here we're going to go ahead and put the name so you can put get gpt3 completion then you'll want to toggle on the return value and change that to a string make sure that is list and Noble are also unchecked from there we'll Define the first argument which is prompt this is going to be a string and it's not going to be a list and it will not be nullable the second argument will be Max tokens this will be an integer and again will not be a list and will not be nullable the third argument is going to be temperature that's going to be a double not a list but will be nullable The Prompt is actually what is fed into the open AI so this is going to be whatever text the text field Etc that you actually want to be plugged into openai the max tokens goes into actually how much is returned from the AI if you want more information on that I've gone ahead and put a link in the description so you can read more about it the same goes for temperature temperature defines essentially how creative the AI is with its output again I've put a link in the descriptions you can read more about that if you'd like to change it typically we can leave these the same though Max tokens will be 256 and the temperature will be 0.7 from there you can just go ahead and paste the code I've already placed into the description via the link and everything should be good to go here the one thing you will need to do is actually sign up for open AI because we'll need to grab an API key to replace the set API key here that way you can actually call open ai's API to get a response so I'm going to go ahead and jump over to open AI to show you how to do that okay so you can see I've gone ahead and logged in to open AI the website is beta.openai.com again that link will also be in the description it should be free for a trial so you can go ahead and sign up there and then you'll want to navigate to your account and go to API keys all you need to do is Click create new API key it'll appear here you can copy that and go into your flutter flow project so we'll jump right back into flutter flow okay so we're back in flutter flow so I'm just gonna go ahead and replace the API key here with the one we just created and then I will click save okay so that's all you need to do to actually get the custom action created you can take this from here and go into your project and connect this to whatever you want so I'd recommend connecting it maybe to a button or an on-chage action after a couple seconds so here if I wanted to I could connect the generate button to the action which I've already done and the prompt that I feed in is actually the is actually the input here so I would select the inputs being widget state and type something Max tokens needs to be 256. you can see I adjusted it so some of the the prompts are wrong here um but if I go ahead and remove this type something and make it oh I need to make it a specific value this will be 256. and the temperature like I said needs to be 0.7 okay so when that's all set up then you might want to add a output variable name to it so I just put output and then you can see for the text here I just set that variable to a action output and selected that here and added a default variable then you just need to run your project and test it it's super easy obviously it will compile the custom action to make sure there's nothing wrong but hopefully there shouldn't be in this case and you can go on your way again there's a ton of use cases here such as generating example emails providing specific prompts or feedback whatever it may be and there's tons of examples you can search online I've also gone ahead and provided some example scripts just to give you some inspiration for the project too hopefully this helped if you have any problems check out the links in the description first otherwise feel free to comment and stick along for other tutorials thanks

Channel: Will @ FlutterFlow

Views: 11,147

Keywords: flutterflow, flutter, firebase, fluttergo, flutter tutorials, flutterflow tutorial, dart tutorial, flutter custom functions, no code tools, no code tutorial, no code alternative, flutterflow no code, how to use flutterflow, flutterflow templates, flutterflow components, flutterflow custom functions, flutterflow custom actions, flutterflow custom widgets, OpenAI, OpenAI GPT3, AI Integration, GPT3 Integration, OpenAI API, GPT3 API, FlutterFlow AI Integration

Id: PpoQGV8dk8w

Length: 6min 46sec (406 seconds)

Published: Wed Nov 16 2022