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.
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?
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.
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?
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!
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
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.
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.
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.
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
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
nice video. but after i try the test response i got "insufficient quota", how can i solve that problem? should i have a billing account? can u please make a tutorial on how to setup this error😣
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?
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.
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
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!
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
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
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.
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
@@knowpal-quiz 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
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
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.
@@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 🙏🏾
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?
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.
@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"?
@@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
@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)
@@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.
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.
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
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.
Thank you. Glad to hear that you found it helpful!
you are a life saver Leo, appreciate your efforts buddy, keep it up
Hey Leo, thanks for the video, going to watch this now.
Good stuff!
Excellent Video Leo
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!
Any plans on making a short video to show how to fine tune the system role?
amazinggg tutorial!!!!!!
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?
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.
thank you so much for this video!!
It does not stream the response
At minute 20:40, "action outputs" does not appear for me. What could it be? I followed the tutorial exactly.
At minute 19:30, Action 2, we can see “Action Output Variable Name” apiResult. After fill here, “action output” appears.
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?
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!
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
really great video! thanks so much! Could you do one on implementing stripe - to commercialise the app?
Yeah, can record a video about it, in this or the following week.
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
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.
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.
Sure, can record a video about this, during this or the following week.
@@leomcmillion i will wait
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
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.
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
@@nclub976 You can definitely achieve that. Here is their documentation on this: platform.openai.com/docs/guides/vision?lang=curl
Thank you very much for your reply.
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
nice video. but after i try the test response i got "insufficient quota", how can i solve that problem? should i have a billing account? can u please make a tutorial on how to setup this error😣
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?
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.
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?
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
Plz make a video on how to stream the response, its not a native feature of flutterflow
Absolutely, can try and record this video next week or the week after that.
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!
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
I looked at your recent videos u did not post the streaming chatgpt response video yet
@@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.
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
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.
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
@@knowpal-quiz 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
@@leomcmillion Thanks so much for your help.🙏
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
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.
@@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 🙏🏾
@@knowpal-quiz platform.openai.com/docs/api-reference/chat/create
@@leomcmillion thank you very much.
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?
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.
@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"?
@@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
@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)
@@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.
Just a question. If i choose not to publish my app. Do I still have to pay for the api keys etc?
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.
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
Can try my best. Send me a video explaining your problem in more detail, to this email: leomcmillion@gmail.com
11:33
11:55