AI Assistant Streaming with
HTML-код
- Опубликовано: 4 июл 2024
- In this community requested video we enhance a sample chat application in FlutterFlow to support Open AI Assistant Streaming directly from a #BuildShip workflow. Streaming is common in chat style applications which slowly returns content as its being delivered from external services. This is a familiar site in tools such as #chatgpt.
#FlutterFlow does not directly support streaming but with a little #lowcode and a helpful walkthrough video you will be up and running in no time. As always I provide a starter project which can be used in FlutterFlow to follow along in this video. Once complete you will be familiar on how to implement this type of functionality in your own applications.
Disclaimer: Streaming cannot only be tested using a local simulator or mobile device using Local Run. Please do not test this in the web browser as streaming is not supported. Also my BuildShip Foundation course is work in progress and will gradually be released in the NoCode Academy as each section is completed.
_____
Starter Project - app.flutterflow.io/project/ai...
Final Project - app.flutterflow.io/project/ai...
🔥 Looking for more content? Checkout the details below!
_____
Chapters
00:00 Introduction
00:44 Sample Application Demo
02:15 Steps for success
04:28 BuildShip Workflow creation
13:14 FlutterFlow Starter Project Overview
22:38 FlutterFlow customisation
36:00 Application Test
37:41 Summary + Outro
_____
🚀 The Digital Pro's NoCode Academy: www.thedigitalpro.co.uk
(Support the channel and go ad-free! 😉)
👍 Looking for premium content on RUclips? Join as a channel member: / @the_digitalpro
🔥 If you love my content why not consider buying me a coffee, it's really appreciated: www.thedigitalpro.co.uk/coffee
👍 Support the channel and grab yourself a free FlutterFlow account by clicking here: www.thedigitalpro.co.uk/flutt...
🎉 Your love is much appreciated ... A like to this video is like a High Five!!! Thank you all.
🔥Looking for more content, further content, and a helpful community? Why not consider joining The Digital Pro's #Nocode Academy at www.thedigitalpro.co.uk
You are a Legend. Almost everything I have leaned on Flutterflow is from your videos, Thank you so much. I have contributed the the success of my first app, appreciate all your videos mate.
Wow, thank you! I'm happy with the legend status! haha
You're amazing Steve 💯👌
Keep helping the community ❤️
You are the GOAT! Thank you for that tutorial!
Wow never been called a GOAT before but I'll take the Greatest of all time than a traditional 🐐. Thank you. 😊
I just signed up to the nocode academy, looking forward to learning more
Thank you Marlon. Great to have you as a member.
What is the advantage of using Buildship Vs. The built in Flutterflow APIs?
I am not a professional but from what I understand: one feature is more security (from what I've been hearing)? And if you need to adjust anything in the backend, you do not need update your complete app. Let me know if you find any other benefits...
Yes Eric is right. Additionally, by using BuildShip, you can take advantage of all the integration options to tailor the assistant response. The BuildShip team have done a number of example videos showcasing the power of adding additional nodes to their Assistant Node.
Thanks for the great video. Love it ❤
You are most welcome thanks for the comment 😀
The video have been waiting for ages ❤️❤️❤️ thanks digital pro
You are most welcome. Appreciate a like on the video if you don't mind ... ❤
@@the_digitalpro have Done that already sir
Nice Steve more of this
Thank you very much. I'll try my best 👌 👍
Could you please make a video on just this again (FlutterFlow and BuildShip) but using end user data from within Supabase to influence the responses from ChatGPT? In other words, an OpenAI assistant that is hooked up to user data in Supabase, all assembled in BuildShip for deployment to FlutterFlow.
Great job
Thank you very much 👍
Absolutely love your videos, and I can’t thank you enough for taking the time to make and share all of this information. Would you potentially be able to create a tutorial on how to create shared lists between users using flutter flow and Supabase? Using your goals tracking app as an example, this feature would allow to users to view and update each other’s goals. Thank you!
Thank you for this suggestion. Let me consider it. Thanks.
If I just want to get one response each time a bottom sheet is shown (not a back and forth chat experience), but I want the response to have instructions, what’s the best approach? Basic chat completion query with a system message for each call or have an assistant with the instructions?
Thank you for gteat work. Can you help? In my app (Ai-BuildShip-Stream-Assistant-Final) I can only get an answer to one question, after the second question I do not receive answers from the assistant.
Hmm. Have you checked if BuildShip is returning a response in the BuildShip logs? Also have you tried testing with the final project included in the description?
I would love to see also a video on how to make a history of these conversations available. I tried myself but it's harder than I thought to save the history somewhere and let users come back to their messages. If there's such video in the NoCode Academy... let me know I would gladly join just for this one wideo.
Funny enough the exact question was asked in the Academy yesterday about saving chat history. This is very achievable and I'll look to sort something out by way of an example. I'll let you if I can muster something up.
@@the_digitalpro Thanks! Have you seen the "FlutterFlow - OpenAI Assistant (Stream Response to Firestore)" node in Buildship? Can it be used to have the Assistant Stream with saving the conversation directly in firebase? Maybe it can be used for that?
@@the_digitalpro I'm interested as well!
I would love to see voice a assistant using OpenAI or 11 Labs tts streaming node and Openai streaming node in Buildship with frontend in FF. Waiting for LLM to finish the response and then for the TTS to finish takes so much time. It would be awesome to have a voice assistant with little.
That is legend. Can you please advise how can I send the images to the Assistant API?
When adding my URL and trying to test it via local run on phone. Im getting an error saying "streamresponse https", im adding in my buildship url as needed.
I have connected to the Firestore database and I can see the message I sent, but how can I view the incoming messages as a stream and how can I add the message as an updated document? I would be grateful if you could help.
I've watched this video 3 times and trying to go step by step even last time at 0.75 speed to see if I miss something. I got no errors on my flutterflow app, but when I run it, it does not work. The console says is a "TypeError: Cannot read properties of null (reading 'toString')"
I've tried using my API end point from buildship in the project Steve provides, and it works there, so no problem with my buildship. Did anybody else get this error?
If somebody knows how to fix it, I would appreciate it! Thanks
In FlutterFlow make sure your Component State Variable called threadId is a String and the Nullable checkbox is ticket. Make sure there is no value/or space in the threadId Initial Field Value. Please check this first. Oh also make sure threadId has a capital I
@@the_digitalpro I finally I was able to fix it. In the chat send button in the last argument for the custom action with name threadID in the default value I just placed an empty space, and it is finally working.
Awesome good work.
If I got buidhsip error: ClientException with SocketException: Failed host lookup: 'url' , is that a problem with my emulator? I am using visual studio code + android emulator. Or a problem with the code? - I just dont get responses when streaming
I replicated this project but I have a bug, the messages from the bot often start with a blank line. Like this:
„
Hello, I’m not familiar with this topic…
„
Thanks Steve for another super cool tutorial. I am keen to join The Digital Pro's but not sure if there are tutorials on Google Maps to track locations of users or properties and would appreciate your advice please.
Hello. No worries. I do not currently have any Google Maps content in the Academy at this time. Sorry about that.
thank you for your work! i have implemented this into my chat app,
but i got an issue, where is the concurrency? if i ask a question from 2 devices at the same time, only 1 of them is receiving an answer. how can i resolve that?
buildship does receive 2 requests at the same time and they are completed. but 1 of the devices never called onStreamCallback and after some delay went straight to onCompleteCallback. why?
The response from OpenAI sometimes is formatted so it has **Title** to bold text. It's not displayed correctly by FlutterFlow. Do you know how can I make it work? Is there a simple solution?
Have you tried strictly telling it to only return text and not formatting? Just a guess.
Hello my friend, my question is outside this video, my friend, can you teach me how to use Username in flutterflow ؟
Can you provide me with a little more context? Perhaps I can point you in the right direction to something that I may have already covered on my channel. Thanks.
@@the_digitalpro My friend, I mean, I am the one who makes a social networking application. I want to create a username for each person without the username being repeated.
the starter project file is not wokring for me to clone, any ideas?
Hello. I have corrected this. It was changed due to a most recent update to FlutterFlow but it is all working now. Sorry for any trouble.
I tried to clone the project but it says restricted. I also joined your academy but could not find it there. :(
Hello. I have corrected this. It was changed due to a most recent update to FlutterFlow but it is all working now. Sorry for any trouble.
Does it support Gpt 4o?
Yes absolutely. You just need to change the model in the setup of assistant within the OpenAI dashboard for the specific assistant.
@the_digitalpro thank you for the tutorial video but currently I am having the issue that it say invalid prompt any advice would be really appreciated
Thank you. My only immediate guess is that the prompt is not being passed in correctly. I am guessing the error coming back is from OpenAI itself.