FlutterFlow AI Assistant Chat App Template with BuildShip
Вставка
- Опубліковано 9 чер 2024
- Learn how you can build a complete AI Assistant Chat App in FlutterFlow using BuildShip. Connected your knowledge repo, docs, database, and tools.
BuildShip is a low-code Visual Backend and AI Workflow Builder and it works really well with FlutterFlow. Infact BuildShip is the best backend builder for FlutterFlow as you can visually create backend on any stack.
Get started for free 👇
BuildShip Remix Template: buildship.app/remix?template=...
FlutterFlow Cloneable: marketplace.flutterflow.io/it...
Useful links mentioned in the video:
Getting an Assistant ID from Open AI: • Creating AI Assistant ...
Chapters 📚
00:00 Introduction to AI Assistants
01:06 Setting Up the Chat Template in FlutterFlow
02:08 Exploring BuildShip's Assistant AI Template
02:37 Integrating BuildShip with FlutterFlow
06:34 Testing the Chat App
07:20 Wrapping Up and Next Steps
Let's connect 🤗
Chat: / discord
Tweets: / buildshipapp
LinkedIn: / buildship
#aiworkflow #nocode #backend #apibuilder #lowcode #cronjob #scheduledtask #backgroundjob #openai #ai #googlecloud - Розваги
It would be cool if you would make a tutorial on how to manage storage of these messages so that I can have a history of conversations in my app
That's a fantastic suggestion! In the interest of keeping the tutorial straightforward, I chose not to include database storage this time. I wanted to ensure that cloning FlutterFlow templates remains as simple as possible for users. However, I see the value in having a history of conversations within an app, and I'll certainly consider creating a tutorial on managing message storage for future content.
Amazing tutorial, thanks! Could you make one about the same thing but with streaming of the responses? OpenAI is now supporting streaming for the Assistant API and the waiting is killing me. That would be awesome!!!
Love your wonderful content. Can BuildShip's conversation streaming be integrated with the assistants and FlutterFlow?
Thank you. I would also, as others have mentioned, appreciate a video on how to add streaming to this assistants workflow.
I'm thrilled to hear you enjoyed the video! You've touched on a key point: BuildShip is indeed equipped to handle streaming from APIs like OpenAI, but when it comes to FlutterFlow, the process is not as straightforward due to the lack of native streaming support. To integrate streaming, custom code is necessary, which does require a deeper dive into coding beyond the usual low-code scope of FlutterFlow.
For those who are up for the challenge, there are tutorials available that can walk you through the necessary steps. I'm also keeping an eye on FlutterFlow's updates, and like you, I'm hopeful that they will introduce native streaming capabilities in the future. If that happens, or if I find a more streamlined solution, I'll be sure to share it with all of you. Thanks for bringing this up, and let's keep our fingers crossed for that update!
@@sgardoll Thank you for that clarification. Can you point me to the tutorials available that you mention? Also, do you work closely with any other platforms other than Flutterflow that perhaps does have this built in? I need to demo to a large customer and it would need to be streaming to seem even close to competitive to other offerings they are being presented with.
Is there a reason your website is having issues being available in Africa? Had to use a VPN to try to create a new project and that was when it worked after many trials without VPN. I was shocked.
One little thing I’ve wrestled with in the ChatGPT FF template is forcing the user to hit the send button rather than, on web at least, simply hitting enter to send (and importantly not sending if shift-enter, so that the user can create multi-paragraph inputs. I fiddled with the template, adding actions to a form wrapper on the input field, but no joy. Gets confused with the way the template handles the button event.
So now I’m trying to use a template that functions properly and has a nicer UI, but it’s for multi-user chats. My approach is to redesign it to treat ChatGPT as just another user, so that I can reuse the components for both user-to-user sessions and gpt sessions.
That said, I’d love to know if you have a tip on getting the enter/send and button actions to work as above.
If you want to "submit" the message on hitting Enter, you simply need to copy the entire action chain from the Send button's "On Tap" action to the TextField's "On Submit" action. Flutterflow will then say you have 3 errors that need fixing, so go to those nodes and ensure you're taking the values from the "assistantAICopy" version of the API call.
I'll update the template this coming week.
As for Shift-Enter... that's trickier and would involve some custom code.
Right on. That was my initial thought, too. I did that, copying the button action chain over to on send in the textfield, and I fixed the errors. But sadly it still failed and created stability issues with the button itself, as I recall. What did work was wrapping the textfile in a form, though I was pretty new to FF when I tried that, and there was something hinky about it, so I reverted and gave up. Yeah, never found a way to handle the standard shift-enter in FF. Straightforward in React/etc in raw code.
@@sgardoll I'd love to see a cookbook for that shit-enter custom code. Folks using chatgpt and other platforms have become used to that, so it's definitely becoming table stakes. I'll noodle with it myself, but am always grateful for finding a cookbook that saves me time to work on other things.
@sgardoll
Some of these templates available on the marketplace are no longer working. I also noticed a bunch of issues with some of my bots. Notably, files couldn't be accessed via APIs and middleware while working fine in playground. I think it may have to do with Assistant V! to V2 and outlined in opeAI's documentation / migrations puide.
Hope this is helpful.
why did your variables change from the first time u showed the api group to the second
Great observation! 🧐
I adjusted the "prompt" variable to align with FlutterFlow's original template, aiming for consistency and to minimize confusion. It seems there might still be some clarity needed, and I appreciate your comment pointing this out. If you use the templates from the FlutterFlow Marketplace and the BuildShip workflow, you'll find that everything matches up perfectly. Thanks for your keen eye, and please keep the feedback coming!
@@sgardoll thanks, I appreciate it!