Flowise AI Tutorial #11- Custom Tools, OpenAI Functions and Webhooks

custom tools make it easy to add custom functionality to our flywise chatbots flowwise already offers a wide range of tools out of the box and we had a look at a few of these in this series like the serp API tool which allowed our bot to perform Google searches but you might want to create your very own tools for truly unique experiences using flowwise's tools feature we can easily create our very own custom tools there is quite a bit to cover here so I'm going to split this video into two parts first we will have a look at creating a custom tool which will add items to a to-do list we will ask the chatbot to add an item to a to-do list and the bottle automatically add the item to a Google spreadsheet in this part of the video you will learn how to call Api endpoints like web hooks in the second part of this video we will create a custom tool that uses node dependencies enough talk let's get started open flow wise and create a new chat flow let's save this chat flow and give it a name I'll call mine Custom Tool demo let's go to nodes then click on agents and let's add the openai function agent to the canvas then go back to nodes then go to chat models and let's add the chat openai model to the canvas let's connect our model to the agent like so then go ahead and select your credentials we can leave the model as GPT 3. 5 turbo and for the temperature I'll set a value of 0. 7 next let's go ahead and add memory to our canvas let's go to nodes then go to memory and let's simply add the buffer memory node to the canvas and let's connect our memory node to the agent as well great now let's go ahead and add the custom tools node to the canvas let's go to nodes then go to tools and then add the Custom Tool Knight to the canvas and let's connect our Custom Tool to the agent as well please take note that you are able to add multiple custom tools to your project all you have to do is drag another Custom Tool Knight to the canvas and simply hook this up to the tools input on the agent but for this demo we'll simply use a single tool we can now create a tool in one of two ways you can simply click on create new and that will take you to the tools tab or we can save our project click on back and from the flowwise dashboard we can click on tools and under Tools we can then click on create either approach will take you to this pop-up let's create the tool which will add to do items to our to-do list first we need to give the tool a name I will call mine add to do tool names need to follow a specific naming convention typically this involves lowercase character others with underscores separating words let's go ahead and add a description for the tool the description is extremely important as this will tell the agent what the tool does and when to use it so I will add a description like use this tool when adding an item to the to-do list if you want you can also provide an icon for this tool I will skip this step let's have a look at the output schema the output schema lists the properties for the code in other words the input parameters that the code expects to receive let's add a new property by clicking on add new let's give this property a name like to do text this property name follows the same naming convention with lowercase characters and words separated by underscores then for the type I'll select string the description is important as this will tell the AI model how this information should be extracted affected from the conversation by entering something like the to do item description the model will try to extract the to-do items description from the conversation and then pass that into this property lastly we can specify whether this property is required or optional because this field is required I will check this box then scrolling down we can now go ahead and write the logic for this function for this we will write some JavaScript code don't worry if you're not too familiar with JavaScript I will try to keep this as simple as possible also note you can see an example implementation by clicking on see example for now I'm going to remove the sample code and let's walk through this step by step we can add all sorts of logic to this function but at the end of processing we simply need to return a value back to the chatbot we can return a value by typing the return keyword and in single quotes we can return a string value for example item added successfully JavaScript statements need to end with the semicolon like so let's go ahead and save this function by clicking on ADD let's go back to our chat flow in the Custom Tool node go ahead and click on the drop down then select the add to do tool let's save our chat flow let's open up our chat first let's ensure that the chatbot is working I'll just say hello and yes we are getting a response let's try to add an item to our to-do by typing something like add buy milk to the to-do list and let's run this and we are getting a response back from the bot saying that buy milk was added to the to-do list and take note that the bot was able to extract buy milk from The Prompt as the to do text let's also have a look at the console initially we can see the first plant which was just hello and we can then see the response from the bot saying hi there how can I assist you today then we sent the prompt add buy milk to the to-do list and then scrolling down we can see a step that is called Agent action and in agent action we can see that a tool was used and specifically the add to do tool and the input into this tool was the to do property with the value by MOG this indicates that our Custom Tool was selected by the agent and the property was successfully populated and in scrolling down towards the end of that action we can see that the response that came back from the tool was item added successfully fantastic let's make another change to our tool let's go back to the flowwise dashboard is click on tools then let's click on add to do tool let's go down to the code and this this time let's try a negative test guys let's replace this text with something that indicates that the item could not be added something like could not add item to the to-do list and let's save this let's go back to our chat flow like so and let's run the test again I'll just pass in the same prompt again like so but we can see an issue here we are getting the same response back saying that buy milk was added to the to-do list successfully and if we have a look at the response from the latest call we can see the text item added successfully coming back again please take note of this because this is something that tripped me up initially it's recommended to restart flowwise after making changes to the tools so I'm just going to stop flowwise or clear the console and let's start flowwise again let's refresh this page and in the chat let's ask it again to add buy milk to the to-do list and this time we are seeing negative response so please ensure to restart flow wise whenever you make changes to the tool let's continue with our logic to add these two do items to a Google spreadsheet first let's create our Google spreadsheet after logging into Google spreadsheets create a new spreadsheet and then give it a name I'll just call mine to-do list and let's go ahead and create the title for this column like so let's also go ahead and make this title bold when asking our chatbot to add items to this list we will see them added to this column and that is all we have to do for the spreadsheet now in order to make this process as simple as possible we will be making use of a service called mike.

com mike. com is similar to services like zapier and makes it easy for chatbots to automate business processes Mike provides access to hundreds of third-party applications and complex flows for this tutorial we will simply need the ability to add entries to a Google sheet go over to make. com and create your free account after logging in we need to create a new scenario we can do that by clicking on scenarios and then we can go ahead and click on create new scenario but to speed things up will actually make use of templates so click on templates within the templates page we can find all sorts of integration templates that we can use what we are interested in is a web hook that we can call to add items to Google spreadsheets so in the search box type in webworks in the list of results look for web hooks to Google Sheets integration you will then be presented with this pop-up let's click on ADD we can then give our web hooker name I will call mine flowwise Ai and then click on save you will now see an API endpoint that we need to call and at the moment make.

com has is waiting for us to perform an initial call to this endpoint first let's copy this endpoint for the initial call we will use Postman in Postman let's open up a new tab and let's paste in that endpoint we also need to change the method from get to post click on the body tab select raw and ensure that the type is set to Json the starter structure of by using curly braces then for the property value I will simply call it to do text colon and then any sample value I'll just enter text let's go ahead and run this by clicking send in the response I'm getting accepted and if we go back to make. com we get this message saying successfully determined let's click on continue in the second step we need to select the Google spreadsheet which we want to use initially you might have to create a connection to your your Google account so just click on ADD but I'll skip that step as I've already done that then I can go ahead and select the spreadsheet that I'd like to use so in the drop down I simply search for my to do spreadsheet then within the spreadsheet we can select a specific sheet that we'd like to use I'll just select sheet 1. now we need to map the values from the API endpoint to the column in the spreadsheet our spreadsheet only has one column called to do description we can then click on the input for this field and this will show us the property value that we passed in through the webhook we could just drag and drop this value into the input field for the description if you created more than one column in your spreadsheet you can simply map the values from your Postman call to these columns after doing this mapping we can simply click on continue and that is it let's go ahead and rename this scenario to flow wise demo then also let's toggle this switch from off to on let's save this we can actually check that this is working by going back to postman and let's run this again and if we go back to our Google sheet we can see that that value was added successfully great now that our Google sheet and our make scenario is working we can finalize the code in flowwise let's go back to flow wise to keep things neat I'm going to clear this chat then let's go back to the dashboard let's open up tools and let's select our add to do tool let's scroll down to the code to simplify things I'm actually going to remove this code and let's click on see example because we will be doing something very similar to this I'll clean this up by deleting these commands and we will replace the URL with the URL of our make.

com webhook you can copy that inpoint from mike.