How to Build a ChatGPT Wrapper with No-Code | Template Overview

in March of this year we announced aigen and released a few new templates to help you integrate AI into your application in this video I'm going to recap our chat gbt template and showcase a template example this will serve as helpful context for next week's video showcasing how you can use open as new API model turbo0613 to generate a Json output that we can use in our flutterfold application by using the new function calling capability let's Dive Right In by cloning our chat GPT template on our Marketplace I've included the link right below let's go ahead and break down this template first let's start off by showing you how you can set up your API so open AI has a number of AI models having varying capabilities the model that we're going to use here is GPT 3.5 Turbo now we've already set up the chat completion API already by defining our API Group and creating a post API call we've set up a header here and we've defined the Json body to pass in the model and messages in the correct format we've also set up the API key as a string and the prompt as a Json object in order to properly communicate with the API since it's been set up let's go ahead and test our API key so step one you'll need to create an open AI key on openai's platform I've already set one up here but before you do that also remember that you'll need to set up your payment in order to actually be able to use this API so don't forget to do that once we've done that we can go ahead and remove this API key that's present in the template and paste in our own and for the prompt we have to make sure that we're sending in a Json format in order to test this response as well so I'm going to go ahead and copy this Json prompt format and now let's go ahead and click test API call and there you go we have a success for calling this chat completion API now we have all the recommended Json pass that appear here that we can use and select as variables this template has already selected a few that will review in our template so let's dive into it now before we call our API within the app you need to set up the UI which has already been done for you and also a few variables to store the data because we want to retain the chat GPT responses for each session kind of like a chat history so we have to set up two variables which have already been done in the template the first local page State variable is the input content which is a string and the second one is the chat history which is set up as a Json object and we also have two simple custom functions one for saving to the chat history and the other for converting to the correct message format while sending a prompt the savechat history function essentially adds a new chat to a Json list and returns a new chat this custom function takes two arguments as variables new chat and chat history are both Json objects the convert to Json literally takes our string prompt provided by our user and turns it into the Json format that will allow us to communicate with the API which is why the only argument it takes is a string so now let's look at what's happening when we actually call our API so we've set this up on our icon button and the template contains a list of actions that are initiated when the user selects the send button so what's going on here so first off we're updating our chat history page State variable using our save chat history function essentially this will take the First new chat that the user creates and add it to our chat history as the first item then action 2 we're actually calling our back end using our API key variables and our prompt variables so for our API key make sure to actually input your API key whenever you're using this template and before testing and for our prompt we're sending in our chat history page State variable which contains all the information that we've sent so far and our user's input and the action returned by this backend call is the chat GPT response now if chat GPT response has succeeded then we'll execute a few actions go ahead and update our widget State variable for chat history once again to add in chat gbt's response into our chat history and then we'll clear the text fields and finally we'll wait 800 seconds and then we'll scroll to the bottom of the page this is going to be helpful especially if the text response to chat gbt provides us is extremely massive and we want our user to be able to view the entire output and obviously if it's false nothing happens there's a weight and there's a scroll to action next let's talk about how we visualize chat gpt's responses into this list view so in order to visualize the responses we've set our list view to dynamically generate children based on our chat history and the text fields are essentially set from variable and set from the Json path for Content which if you remember originally is how we communicate with the API and lastly to show the correct chat bubble based on whether message is from the user or from chat gbt we'll use conditional visibility now in the template we've set this on a row and we set up conditional visibility based on a code expression this code expression is using the modulus operator which Returns the remainder after one number is divided by another in this template we're saying that if the remainder of this index is not zero then we assume that it is chat gpt's assistant role likewise we conditionally showcase the user's input only if the modulus remainder is equal to zero essentially when the index is completely divisible by two in the blog we have these conditional visibility set up by checking the roll field inside the Json message so there's multiple ways to do this and now let's test it out see what chatgpt says ah okay and it looks like our cha gbt wrapper is working so now you can imagine that you can take this template and actually integrate it into whatever application that you'd like to create in flutter flow so let me show you an example here's a template created by our head of design it allows you to feed a forms input into chat gbt directly this template has two pages gbd flow is a themed version of the first template that we discussed and the start page is a form page in this forum we can have the user select how they want a marketing plan created and send over the information of Chachi BT to get a response all we're doing here is combining the text and contacts that we want chat GPT to have and the user's input by using flutterflow's form fields so on the generate plan button I'm going to set an action to navigate to GPT flow and pass the parameter of our first message the first message will take the context we want chat GBC to have plus our user's input which we're able to set in flutter flow it's important to note here that you can easily change this form to take the input fields that you want your users to submit and change the form to have the context that you want chat GPT to have as well once again in order to set up this template you just have to add your own API key that you can get from openai's website as an example once we finish inputting the fields on this form we're able to pass the parameter to chat gpt's flow page and as you can see our first message is a combination of the context we've provided as well as our users input and now when we click Send we're able to send this information to chatgpt and we can copy the information if we want to use in other parts for our application that's it for the template recap once again you can find all of our templates in the marketplace and I'll leave a link down below join me next week for part two of the series where we use the latest model gbt 3.5 turbo 0613 to generate a Json output that we can use in our flutter flow application

Channel: FlutterFlow

Views: 15,989

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

Id: 6Lbp3MQ1k84

Length: 7min 53sec (473 seconds)

Published: Fri Jun 16 2023