FlutterFlow AI Assistant Chat App Template with BuildShip

hey Builders got something truly exciting lined up for you today we're going to take the standard flutter flow chat template and give it superpowers thanks to build ship's backend Brawn forget the basic API call to chat GPT that's baked into the template we're going to trigger a build ship workflow that empowers your very own custom AI assistant to engage with users in a whole new way the real game changer here is the versatility your assistant isn't just smart it's connected with access to any node or integration that build chip supports your AI can pull in data and insights to make conversations richer and more informative imagine an assistant that doesn't just chat it Taps into your documents crunches your data and interacts with your entire digital ecosystem to deliver responses that are not just relevant but incredibly personalized to you and your use case I've dubbed these two the low code power couple in the past and I absolutely stand by that statement so let's explore the endless possibility is when the Simplicity and convenience of flutter flow meets the boundless potential of build you to get started click the marketplace tab here in flutter flow that will bring up the flutter flow Marketplace if you scroll down to the popular items you'll see this chat GPT template this is a great starting point but it also forms a fantastic base if we wanted to extend it and instead of calling chat GPT alone calling a build ship workflow instead and having return the results click add now sign in and in flut tolow you're ready to go all right we'll need to get our heads around how this template works if we come over here to the icon button we can see there are six actions in our action flow editor we can see that when the user hits the send button it saves the chat history to a page State variable it calls open ai's chat GPT and if successful it updates the page state with the chat history again so that works great and it's broadly the same process that we're going to want to do with our assistant AI in build chip so let's jump across to build ship and decide what sort of assistant we want to be chatting with there's a huge range of templates in this section you can chat with your database a Google sheet analyze data or even act as a tour advisor but the template we're use in this example is the website q& template with this assistant the user gives it a URL and what it wants to find out from that URL the assistant goes away scrapes the website analyzes the data and brings back the result all you need to do is get the assistant ID from platform. open.com I'll link to our getting started video in the description which gives a detailed overview of how to get an assistant ID then simply ship your workflow and hit the export API button this is a great shortcut for getting your build chip end points into flutter flow hit the export yl button and then back in flutter flow we go to the API section click on the upload button in the top left and and upload our yl file this automatically creates an API Group and inside it is our API call this is a great segue to talk about how an assistant Ai call Works think of your thread ID as your conversation chat history for your entire conversation in this instance it's going to be your conversation about the particular website that you're asking your assistant to give you information on a thread ID is created the very first time you initi iate a conversation with your assistant and including it in subsequent calls means that you don't have to resend your entire conversation history it's already stored for you at openai but to facilitate this in our API call we're going to need to create a variable so we go here to our variable screen and create a thread ID it's a string and we make sure it's included in the Body Hit save and now we'll swap out the existing API call for our new build ship workflow we'll come down here and we'll create a new page State variable called red ID now it's important that we click nullable because this variable will start out null and hit confirm again we'll come down here to the icon button open the action flow editor and we want to amend this API call so we'll swap this out for our build ship call and we'll add in our thread ID now remember we only get a thread ID after we initiate a conversation for the first time so we'll include some conditional formatting here and we'll say if our page State variable called thread ID is set and not empty well we'll send it otherwise we'll send an empty string and Bop will know exactly what to do with that last but very much not least we actually need to send what question the user is sending over to our API endpoint so we'll come in here and make sure we include that in our API call and we'll include it in the body as content we'll need to create a new variable a string great now when the user asks a question it'll send the content across which comes from our widget State we'll get back our thread ID and start the conversation all over again okay time to test it out we're going to ask our app about the trigger nodes that's described on docs. build.com now remember you have to include a web URL in your first request there we have it a summary of the trigger nodes on docop build chip.com you can even copy that to the clipboard now we're going to ask about the Integrations note that we don't put a website or anything really our assistant remembers that we're talking about build chip and brings back the response accordingly I hope you're as excited as we are about the potential of Bild Chip's AI assistant Builder let us know what you're building in the comments join us on Discord and happy Builders shipping

Channel: BuildShip

Views: 3,246

Keywords: API builder, no-code backend, low-code backend, automation builder, AI powered workflow builder, visual backend, backend builder, no code google cloud, low code google cloud, no code AI workflows

Id: 8Ltk-r-mxIA

Length: 7min 0sec (420 seconds)

Published: Wed Apr 17 2024