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

[@adeterminedpolarbear]

This is good; however, as I mentioned previously, you shouldn't hardcode your API key in the front end. I also feel you should show people how to limit message lengths to prevent token overflow and create new chats. It is cool you can do this from within FF but its a major security risk. I know FF launched Cloud Functions not too long ago but theres really no videos on it which I think would be cool to see if they can make some. Nonetheless the structure is the same whether you use an API call or a cloud function youd be passing in the old messages to chatgpt.

[@dogstank]

Can you show the correct way to do it? Thank you.

[@adeterminedpolarbear]

@@dogstank I'm making a free course on youtube I will make sure it'll be in there

[@janmolski]

Great tutorial! Thanks! I would appreciate an addition of image input and chat history.

[@SolanaBoardGames]

kzbin.info/www/bejne/eKDEqXeKityKrtk

[@SolanaBoardGames]

This is actually better

[@francomuoio]

Merci pour cette vidéo ! Je suis justement entrain de créer un Chat OpenAI spécialisé pour les développeurs flutter dans ma Formation. Hâte d'avoir le mode stream directement intégré dans FlutterFlow !

[@bedirhano.2269]

Nice tutorial. How do you have the chat history? Aren't you passing the text field message in the prompt?

[@kodekhronicles]

where the prompt variable come from and why is it a list?

[@scrolify7]

It’s a great video, do continue with web app UI like chat GPT & titles and showing multiple chats + animations

[@walinaimi786]

This is great, what the best use of this chat? is the audio possible to not type just ask questions?

[@alexanderbjerkvik]

Hard to follow, since various premade components and templates are used, and only briefly explained. Whenever such videos are made, one should assume the viewer does not have such things.

[@sdschroeder13]

It would be great to get the code snippet for the custom function (or the prompt) so we don't have to watch the video and re-type it.

[@MagicMaax]

please more tutorial about the topic! Thanks!!!

[@amazingvideos4824]

Please add the image option to upload the image and ask question from gpt4o

[@koen.mortier_fitchen]

Project link? Thanks in advance

[@vishalkumar-yi4uw]

where did the "prompt" came from at 15:38? didn't we set it as a variable "messages" in the part 1? can someone please help!

[@NoCodeWorker]

I have the same problem. The only variable that appears is the “message” variable. Can someone help us?

[@mujtabaim]

In "Deifne API call" variable section; you can either change the variable name to from "message" to "prompt" or keep the variable name same (message) and just select the "Is List" as true

[@vishalkumar-yi4uw]

@@mujtabaim thanks man

[@vishalkumar-yi4uw]

@@mujtabaim but if we set the list "true", the test api call will not work. figured out the hard way

[@markfrancisco1997]

@@vishalkumar-yi4uw yeah, in Part 2, it was set to List JSON. So when I changed it, the test is not working. But the action appears to be working.

[@mcolemanxc16]

I'm using a component to store my gpt chat messages and cannot access Page State variables from the component level, even though the component is nested under the chat_ai_page where I defined the Page State variables that you created around 7:00 I love FF but it's been an absolute disaster trying to create a functional gpt bot. The premade flows are different that these tutorial videos, the API setup is confusing, the bot can't handle UTC encoding even those I pass UTC-8 encoding in the content header of the API call, and due to the problem above, I can't get the bot to remember the chat history. Ya'll should look at Poe AI to see how they handle bot creation. The FF UI should look a lot more like Poe's to enable rapid development of chat bots. Honestly, I'd rather just build this bot in python - it seems easier that way.

[@WoWHimanshu]

Hey team flutter flow can you make a complete video on eCommerce application with Admin panel this is very useful for everyone who use flutter flow specially for beginners 😉

[@broadwall5456]

Thanks for this video I’ve been waiting for the 2nd part.🎉🎉

[@sejalkathed4870]

Is there any app which is in use now(means on playstore it will be) which is created by flutterflow

[@Jonnypenthouse]

where are you getting this prompt variable????? mine shows up as messages i followed everything from the video

[@jgilbertomty]

Same here...

[@markfrancisco1997]

@@jgilbertomty from the part 1 of the video. Tho i think he named it "messages" on the part 1. Also, i noticed in the part 1 API setting that the list was set to false. While in Part 2, he used List JSON. So im also a bit confused

[@Vince.TheLegend]

Please build it out more

[@ibrahimabarry1725]

Hello. I'm working on this projet but as shown at 21:05 when I select "As Data Type" I can't see the "Available Options" field, it's doesn't appear. And I've already created the Data Type as in the part 1 video. Can someone help.

[@thomastabani8793]

i know right, same here, did you manage to resolve it

[@andotech7248]

Go back into your API Define Call for createChatCompletion and in the Response & Test, update the Response Type to the gptResponse data type created in Part 1. (I assume they forgot to go back to it in the video) Also there are a lot more things to work thru after the 'as Data Type' choice is made.

[@Salaheddinecherif]

yessssssssssssss please more features

[@Anon-eu6sg]

Can you please create a video on how to create a paywall (in-app purchases) wherein premium content or features are accessible only to paid users. Couldn’t find any good tutorial on it.

[@senzz97]

I have the problem that when I write a message it shows up, but the openAI content response doesn't show as a message. I see in the debugging tester that I get a response, but it's "empty" in NewChatAllMessages. I'm unsure if even the "NewChatAssistantDoc" provides the data in to the backend or chatRef. Have anyone solved this problem?

[@PrinceSingh-z9v4i]

Finally, after a month❤❤❤

[@NoCodeWorker]

Help, please!!!! At minute 15:30, when you set the variable in the API Call, it adds a field that is the “prompt”. I don't know where this variable comes from. The only variable that appears to me is “message”. Can someone help me?

[@mujtabaim]

i am facing the same issue

[@mujtabaim]

this worked for me -> In "Deifne API call" variable section; you can either change the variable name to from "message" to "prompt" or keep the variable name same (message) and just select the "Is List" as true

[@NoCodeWorker]

@@mujtabaim Thank you very much for your help!!!!!!

[@ihormolchanov-bb1yx]

Add a voice message function, please

[@uniquejewelry3174]

Hello. I want to show the marker as a price on the map like a airbnb. please add a new options or make a video showing how it's done

[@DavidZafra]

Please would love to let users upload images. How to do that?

[@David_tommy]

I wish I could do dis😭😭 But am having trouble paying for the API credits in my country 😭

[@adeterminedpolarbear]

why don't you guys put the template? its very hard to follow along with the code.

[@PA20243]

FF Team can you start working on bugs? Development starts to be really hard because of how everything works. Less cool new features, more focus on bugs fixes pls.

[@FlutterFlow]

This is one of the things we're focusing on in the next couple months. Thanks for the feedback.

[@putinninovacuna8976]

Why don’t you show us how to properly upload images into Firebase Storage? There isn’t even an easy way to achieve this without hardcoding. Why can’t we choose the bucket path where we want to upload our generated images? We cant do this in the flow editor action...

[@user-uikl7e]

*Code pasted by instructor at **17:55* messages ??= []; // Reverse the list final reversedMessages = messages.reversed.toList(); final List jsonList = reversedMessages.map((message) { return { 'role': message.role.toString().split('.').last, 'content': message.content, }; }).toList(); return jsonList;

[@ivonicolas18]

Hi im stuck at 20:58 please help 😢

[@ivonicolas18]

The options are not in there in my project and it says current variable is not valid

[@FlutterFlow]

If you don't see it it's probably because you need to provide a name for the action output variable

[@andresgordillo4414]

@@FlutterFlow Can you explain better how to solve the problem, I am facing the same problem but I can't find a way to solve it and I don't understand where to provide a name for the action output variable since it is a custom function and does not allow passing values

[@andresgordillo4414]

@@FlutterFlow I have watched the video multiple times to see what step I didn't do but I can't find it.

[@Victor-st3bd]

@@FlutterFlow the problem is that the connection with the API that you show in the first video doesn't match with the second video, in the first video you define a variable called "messages", but in the second is called "prompts" and apparently has a different structure, but you didn't show that change, can you explain that please

[@davhad]

Steaming needs to be made no-code-level easy to implement with FF given that users expect that level of responsiveness from any app (otherwise they'll use chatgpt directly)

[@FlutterFlow]

Coming very soon...

[@davhad]

@@FlutterFlow that would be a beautiful surprise :)

[@hasymiller]

FINALLY!!!! THANKS!!!!!!

[@MichaelCantorna-h9r]

can you make a weather app? :D thanks

[@Phantom_Drille]

You can but the feature is not built with flutterflow If I might are you trying to build something like that?

[@MichaelCantorna-h9r]

@@Phantom_Drille yes, i want to make a weather app for my community.

[@user-uikl7e]

*WARNING* This tutorial does not work. It is a waste of time (and the creator knows it). Do not waste your time with this tutorial. Large sections are skipped or simply do not work. *DO NOT WASTE YOUR TIME*

[@Viju489]

Please improve your support ticket system. Replies to queries take far too long, seeing the consultant is online and ignoring your query is not a good look. Once a consultant engages you, they shouldn’t take another 24 hours to get back to you again.

[@nicolasrada1325]

This caused me to cancel my subscription and switch to normal code.

[@FlutterFlowAR]

❤🎉

[@broadwall5456]

Okay I’m kinda stuck at 9:31 it mentions something about authenticated users, I don’t have this parameter set. How do I add it?

[@FlutterFlow]

Here are the instructions for setting that up: kzbin.info/www/bejne/q6PMkICtpcSYd7s

[@broadwall5456]

@@FlutterFlow thanks for getting back me I actually found that very same video, although I’m having issues when running the new chat response, I did it exactly the same as you but nothing. I’ll be honest and admit I know very little about how api calls are made so I’ll spend a day just understanding and conceptualizing what exactly is happening here. But thanks again for the video and the reply! 👍🏿👍🏿👍🏿