How to create your own chatGPT in Flutterflow (updated version)

I made a video in the past showing you how to make an API call to openai and getting a ai response back.
Since I got requests asking me to show you how to store the user conversation, and doing a more complete tutorial, here I am.
In this video I show you how to use the latest chatGPT model, storing the conversation and building the chat view in flutterflow.
If you need any help or have any questions about anything, here is my personal email: leomcmillion@gmail.com
I got your back for life!
#software #ai #chatbot #flutterflow #developer #development #tutorial #walkthrough #setup #education #learning #creative #api #computerknowledge #webdevelopment #appdevelopment #datastructure

Пікірлер: 56

  • @MarlonVan
    @MarlonVan3 ай бұрын

    Hey Leo, thanks for the video, going to watch this now.

  • @tobiasadane
    @tobiasadaneАй бұрын

    thank you so much for this video!!

  • @jarimiranda
    @jarimiranda2 ай бұрын

    Good stuff!

  • @nordoow9988
    @nordoow99882 ай бұрын

    Great video! Thank you so much for creating it. I initially struggled to do it on my own, especially with the bug you found in the list, which could have prevented me from completing the API call.

  • @leomcmillion

    @leomcmillion

    2 ай бұрын

    Thank you. Glad to hear that you found it helpful!

  • @donmenya2761
    @donmenya27613 ай бұрын

    Leo, thanks for sharing this! This video has helped me greatly as I begin to get deeper into AI. Looking forward to more of your FlutterFlow videos!

  • @ashleyedgar2029
    @ashleyedgar2029Ай бұрын

    really great video! thanks so much! Could you do one on implementing stripe - to commercialise the app?

  • @leomcmillion

    @leomcmillion

    Ай бұрын

    Yeah, can record a video about it, in this or the following week.

  • @MarlonVan
    @MarlonVan3 ай бұрын

    Great video Leo! Love it and I have already started creating this. Will share soon. How can we save/store these response/massages to a specific page. For example you have the normal ai page that you use to generate responses, I'm assuming everytime you go back to the ai page it loads a new clean chat page. I would like to know how we can basically store every new chat session on a particular page like a chat history page?

  • @leomcmillion

    @leomcmillion

    3 ай бұрын

    In your database (supabase or firestore) just create a subcollection called "ai_session" or something and in there you could store data about the session such as: "date" and a string list containing the messages in the conversation called "conversation". Something like that would be great. In supabase you would do the same but use a foreign key inside the "ai_session" table to reference the correct user instead of having a subcollection. Hoped that answered your question.

  • @WilliamCoronel-pv8xk
    @WilliamCoronel-pv8xk29 күн бұрын

    Successfully followed along and made my own AI Thank you bro great video! One problem at the end though I asked AI what date is today and it gave me October 13,2021 Any help on how i can update it?

  • @leomcmillion

    @leomcmillion

    29 күн бұрын

    You will need to use a newer model for example gpt 3.5-turbo 0125. But the newer models are still only informed up to a specific date. Since the the llm don't have access to the internet or real time data such as the current date, they can't answer such questions if you do not include that in their context information. Which you then need to update very regularly in order to keep the info relevant. The chat bots are much better on giving information that is more static and does not change day to day.

  • @FitnFabulousLife
    @FitnFabulousLife3 ай бұрын

    It does not stream the response

  • @Dreysimmons
    @Dreysimmons3 ай бұрын

    Is saving the api in a variable like what you did safe for production apps? Wont it show in the payload when the app is running thereby exposing your api keys? If yes, then what is the best way to store api keys securely in flutterflow?

  • @leomcmillion

    @leomcmillion

    3 ай бұрын

    Great questions! For API calls that require a secret key, I just make the api call private (routing it via a cloud function) by pressing the "Make Private" switch in the Advanced Settings section in the call definition of the API call. In that way the entire API call (including the payload) is sent outside of the frontend. Hope that answers your question!

  • @Dreysimmons

    @Dreysimmons

    3 ай бұрын

    are you sure its the entire API call? I saw somewhere where the flutterflow team replied that it only hides the headers of the api, thats why i am asking. Im not a developer, maybe you are and you have tried and tested and seen that it hides the whole api call thats why I am asking. Also when I click the make private in the api call in flutterflow, My api calls dont seem to work in test mode, I am on the blaze plan in firebase. Can you help me with that as well please? @@leomcmillion

  • @EarlyGuard
    @EarlyGuardАй бұрын

    Thank you so much, I did exactly the same thing but there is no response. What could be the problem? And there are no errors

  • @leomcmillion

    @leomcmillion

    Ай бұрын

    Hard to say, but try and make the api calls in the "response & test" tab inside the api calls section to see they work as intended. If they do, then I recommend using the alert (informational dialog) action in the flutterflow logic flow where you ask the assistant a question (I am guessing you added this inside the send button) to get more information about what is going wrong when asking the AI something. Hope this helped.

  • @user-cd8to4ss7h
    @user-cd8to4ss7hАй бұрын

    Hi Leo is there any particular reason you store messages in pagestate? Can this method work if storing messages in Supabase? And if so, how can the messages in supabase be sent to the chatgpt API. I'm a no-coder and quite new to flutterflow. Thanks for your help

  • @leomcmillion

    @leomcmillion

    Ай бұрын

    I stored them in page state since I did not want to take up database storage for the messages, and just wanted them to be temporairly saved (session specific). Yes this method can absolutely work for supabase, just do the same as I showed in the vide0. But if you want store the messages in supabase then you can create a table called "messages" in supabase and store each conversation in it's own row, and then point that row to the owner (user row). In flutterflow you can then just make a query to supabase for all messages rows with the same user id (owner) as the current logged in user in the app. So you only show a users their own conversations. Hard to cover the entire setup in the comment section, but hope this helped you out somewhat.

  • @kani4037

    @kani4037

    Ай бұрын

    I really appreciate your reply. I just needed to know how to feed the stored messages in supabase back into Chatgpt. I don't have a clue whatsoever. Thanks for your help

  • @leomcmillion

    @leomcmillion

    Ай бұрын

    @@kani4037 You can do this by creating a custom function in flutterflow that takes in a list of supabase rows (your messages, thta you can get from a supabase query and then pass to this function) and transform them into the json format that should be passed to chatGPT. Can't give you the entire code in here, but you basically loop through each message row (from the supabase) and add a json to a list with the format {"role": "messgae.role, "content": message.content}. message.role and message.content might not work fo you since I don't know what you have named the fields in your messages table in supabase. Check out the documentation here to see how you should format the messages to send them to chatGPT: platform.openai.com/docs/guides/text-generation/chat-completions-api

  • @kani4037

    @kani4037

    Ай бұрын

    @@leomcmillion Thanks so much for your help.🙏

  • @yellowmellow5261
    @yellowmellow526114 күн бұрын

    Hello, amazing tutorial Ive copied everything but whenever I input a message I dont get an output from the API do you know what can I do?

  • @leomcmillion

    @leomcmillion

    14 күн бұрын

    You could check their official documentation in case they have changed anything since the video was made, Hope that helps: platform.openai.com/docs/api-reference/chat/create

  • @nclub976
    @nclub9763 ай бұрын

    Hello. Thank you for the video, it's great. Could you just help me if I want to send a picture to the model what should I change? Thank you

  • @leomcmillion

    @leomcmillion

    3 ай бұрын

    For that you will need to create a "Assistant" in your openai account (platform.openai.com/assistants). To upload a file/image to your ai you can read in their documentation here (platform.openai.com/docs/api-reference/files/create). And you can read more here on how to use your assistant via api (platform.openai.com/docs/api-reference/assistants). Can record a video about this in the future.

  • @nclub976

    @nclub976

    3 ай бұрын

    Thank you very much for the answer, I'm sorry I wasn't precise, I need to send a picture to chatgbt 4 turbo vision, is it possible to send both a picture and a question to the model? Thank you

  • @leomcmillion

    @leomcmillion

    3 ай бұрын

    ​@@nclub976 You can definitely achieve that. Here is their documentation on this: platform.openai.com/docs/guides/vision?lang=curl

  • @nclub976

    @nclub976

    3 ай бұрын

    Thank you very much for your reply.

  • @nclub976

    @nclub976

    2 ай бұрын

    I tried to work with the image, I converted the image to base 64 but I didn't succeed, I'm not sure how possible it is in the flutterflow environment. the problem is the instructions that must be in the "BODY" request, settings, URL..@@leomcmillion

  • @tncclaptyou29
    @tncclaptyou292 ай бұрын

    Just a question. If i choose not to publish my app. Do I still have to pay for the api keys etc?

  • @leomcmillion

    @leomcmillion

    2 ай бұрын

    The api key is charged by usage, so it does not depend if you published the app or not. I costs if you use tha api key, the more you use the AI the more it costs. But it is very very cheap when you are just testing yourself.

  • @SamuelNickolas-yf7wh
    @SamuelNickolas-yf7wh2 ай бұрын

    Hey @leomcmillion great tutorial by the way. Just one question, what should I do for the messages if the bot returns multiple messages (array of strings) How do I show it in the screen?

  • @leomcmillion

    @leomcmillion

    2 ай бұрын

    I have never encountered that the bot returns multiple strings. But it is not so different, you would basically just edit the response json path in the api call so you get the list of all the messages instead. Then you can use that list directly by looping over the messages in the UI. Or you can write a custom function for combining the messages into one longer string which you use. But depends on how you want to display them.

  • @SamuelNickolas-yf7wh

    @SamuelNickolas-yf7wh

    Ай бұрын

    @leomcmillion Thanks for the quick response. When I receive for example 3 strings in a list from the api, I want to display one string per row widget for the assistant. I'm not familiar what you mean about "using this list directly by looping over the messages in the UI"?

  • @leomcmillion

    @leomcmillion

    Ай бұрын

    @@SamuelNickolas-yf7wh I meant that you can use a column widget and then use the "generate chilrden" tab in the column. Then you can select the messages list as the list to loop over, to show each message on its own row. Follow this video but for a column (or a listview): www.loom.com/share/1a358df5ea254d8799b599fbf2dbece4?t=0

  • @SamuelNickolas-yf7wh

    @SamuelNickolas-yf7wh

    Ай бұрын

    @leomcmillion Thanks again, so do I set the content field from the "messages" data type to a list of strings? Or not? (To put the list of strings which are the bot's messages from the api)

  • @leomcmillion

    @leomcmillion

    Ай бұрын

    @@SamuelNickolas-yf7wh you can select either one. Both will work. But depending on what you select you will select different variables in the children to show. If you show a list of string you cna just show the children as they are. But if you show a list of messages you will need to show the childrens "text" or "content" field as the text to show.

  • @user-hs2ih7pk3b
    @user-hs2ih7pk3b2 ай бұрын

    Hey, Brother, Please make a video on stripe subscriptions, and how to add premium features, when you user pay then they can use the premium features. please make a video on stripe suscriptions, I have app ready but dont know how to add and hide my features.

  • @leomcmillion

    @leomcmillion

    Ай бұрын

    Sure, can record a video about this, during this or the following week.

  • @user-hs2ih7pk3b

    @user-hs2ih7pk3b

    Ай бұрын

    @@leomcmillion i will wait

  • @kani4037
    @kani403718 күн бұрын

    Hi Leo, Please I followed all your tutorials on chatgpt and finally was able to get it working but it only works when I publish the web link and test on my mobile phone but it doesn't seem to work on other phones with the same link. I set up an error message dialog and it confirms that its the chatgpt API request that is failing. The Question is why is it working on my ohone and not on any other phone? Please help

  • @leomcmillion

    @leomcmillion

    17 күн бұрын

    It could be that your phone or the other phones you are testing on have saved a specific version of your app in the cache. So before testing try and reset the cache in the browser where you are testing the app. It could also be valuable to read the most recent docs for chatGPT since this video was made a while ago and could be outdated from all their recent updates.

  • @kani4037

    @kani4037

    17 күн бұрын

    @@leomcmillion thank you for your quick response. Most of the other phones were being used to test for the first time when we experienced the issue. Please can you direct me to the section of the Chatgpt documentation that covers this. Thanks 🙏🏾

  • @leomcmillion

    @leomcmillion

    17 күн бұрын

    @@kani4037 platform.openai.com/docs/api-reference/chat/create

  • @kani4037

    @kani4037

    17 күн бұрын

    @@leomcmillion thank you very much.

  • @FitnFabulousLife
    @FitnFabulousLife3 ай бұрын

    Plz make a video on how to stream the response, its not a native feature of flutterflow

  • @leomcmillion

    @leomcmillion

    3 ай бұрын

    Absolutely, can try and record this video next week or the week after that.

  • @leomcmillion

    @leomcmillion

    2 ай бұрын

    I found one solution for this, but choose not to record a video for it. Have some other prioritized video I will release first. But here is the solution in case you want to start working on it yourself before that. The solution: 1. Create cloud function in flutterflow to send a message to the gpt model, and getting the stream like this platform.openai.com/docs/api-reference/streaming 2. Instead of using their process.stdout to return the "chunks" of the stream, you will need to update some field in a firestore document (doc ref need to be parameter to cloud func). 3. In the flutterflow view you can then use the document the stream will update to display the current text content in some chat view. So after asking the AI something via the cloud function, it will then continuesly update the firstore doc and it will be seen in the flutterflow view. Since streaming is not an native functionality fo the flutterflow action flow this was a more custome solution. Hope that helped!

  • @FitnFabulousLife

    @FitnFabulousLife

    19 күн бұрын

    Great suggestion man, but putting sata chunks in firestore will not give u streaming effect on the website but rather a very jerking type effect to the user. There are people who claim they have done it with custom code I will share the link but when I copied them it did not work out for me

  • @FitnFabulousLife

    @FitnFabulousLife

    19 күн бұрын

    I looked at your recent videos u did not post the streaming chatgpt response video yet

  • @leomcmillion

    @leomcmillion

    19 күн бұрын

    @@FitnFabulousLife ​Have been very occcupied the last 2 months so have not been able to record that much at all. But will get back on it when I can.

  • @gargidubey2991
    @gargidubey299122 күн бұрын

    Hey ive been trying to do it for last five hours All the steps are exact same But while testing My complete screen is showing blank white Can you pls help I have a presentation in 4 hours

  • @leomcmillion

    @leomcmillion

    22 күн бұрын

    Can try my best. Send me a video explaining your problem in more detail, to this email: leomcmillion@gmail.com