Connect Flowise to Google Sheets using webhooks and monitor with LangSmith

we can ask chat gbt what is a hook in a YouTube video and get the answer a hook in a YouTube video refers to the opening part that captures the viewer's attention and so forth then we can add chat GPT to store the answer as a note chat GPT uses function calling to structure the answer and add a row to a table in our Google Sheets to connect flowwise to Google Sheets we use webhooks in this tutorial we utilize a service called make. com which offers web Hooks and other solution to integrate apps together additionally we use langsmith to monitor the connection and observe the arguments passed in the function calling to better understand what's going on under the hood we need to cover many topics so let's Dive In first things first we start with creating a Google sheet so we navigate to our Google Drve create a folder and change to the new folder from inside the folder we right click and create a Google Sheets file and give it a name like flowwise Dash webhook it's not mandatory but just for clarity we can rename sheet 1 to nodes next we add the column headers like node category and action and adjust the column size we can add a test entry like this node is directly entered in Google Sheets as category we enter setup and as action we enter ignore having set up our table in Google Sheets we are prepared to structure our data for both the web hook and flowwise Custom Tool in this tutorial we use make. com to connect flowwise to Google Sheets make.

com not only integrates apps together but also can be used to refine data and Implement some business logic in the workflows for example based on the input you can send notification store the data or even send emails when you take a look at the apps and services you can find many useful apps to connect to depending on your Tech stack the chances are high that you or your customer already use one or more of these services if not in many cases you can register for free and start using the services required to build your project the same is true with make. com to follow along with this tutorial you can register at make. com and use the free plan and scale it as you grow after registration log into make.

com to create a scenario you can create a scenario from scratch or use a template there are many templates to speed up your integration and you can scroll down and browse the list of templates to get some inspiration and ideas how to expand your app and connect it to other services there are many solutions from Simple Solutions to connect your app to one service like notion or Whatsapp or more complex Solutions where you have conditions and routings and so forth the possibilities are endless so we search for web hooks which is the focus of this tutorial and choose a simple scenario which includes a web hook and Google Sheets we can use the guided setup to create our scenario easily first we create a web hook and give it a name like flowwise webhook Dash tool for this tutorial we do not need IP restriction and click save next we need to set up the data structure for the webhook the structure has to match our table in Google Sheets to simplify the process we can use a tool like Postman to send a post request to the webhook so we copy the webhook link and go to postman in Postman we paste the link and create a post request we set body to raw and the format to Json and paste a Json formatted structure like this when we send the post request we get the response accepted back to our web hook we see the structure is successfully determined and we can continue I already connected make. com to my Google account you have to add your own Connection by using Google sign in next we have to choose our spreadsheet first we select a folder make Dash com then our Google sheet flowwise Dash webhook after selecting the file you can select the sheet in our case we rename it to nodes next we drag and drop the elements from the web hook to the corresponding fields of our table in Google Sheets the name of the fields do not have to match here they differ only in the uppercase and lowercase Additionally you have many possibilities to manipulating the data while assigning them to the fields but in our case we simply want to store the data without any manipulation or cleanup we continue and the scenario is created as you can see there are a lot of options to control and refine the scenario to test the scenario we click run once and go back to postman and send the post request again back to make. com you can check the logs and finally look at Google Sheets and check if the new row is inserted and if the data is assigned to the right columns if everything is fine if we change the description of the scenario and save it we turn it on and can proceed to the next part next step is to set up flow wise with langsmith we navigate to the repository of flowwise and GitHub and copy the link in our project folder we cloned the repository to the folder flowwise webhook we change to the new directory and start Visual Studio code from inside the project folder in Visual Studio code we go to packages server and copy the dot nf.

example and paste and rename it to dot ends in the dot end file we uncomment the long chain variables and set the project name to flowwise dash webhook dash make we navigate to langsmith and create an API key and copy the key back in Visual Studio code we paste it in the right position save and close the dot end files you can open a terminal in Visual Studio code or use the command prompt to type yarn install in the root of the project and hit enter depending on the speed of your machine this will take some while and when the installation is done and the prompt comes back we can clear the screen and go to the next step next we type yarn build and hit enter this takes some time too and when the build process is done the prompt comes back and we can clear the screen now we can start flow wise with npx flow wise start and flow wise starts and listens to Port 3000 when we navigate to localhost Port 3000 we see flowwise UI and can navigate to The Marketplace in Marketplace we select open AI agent and click on use template now we can adjust the position of the components on the canvas and remove the default tools next we search for Custom Tool and drag and drop it to the canvas now we can create a new tool and give it a name like save a note and a description a tool to save a node with optionally the category of the node and an action related to the note next we need three properties corresponding to our columns in our Google Sheets table so we add note as string with the description the text of the note and make it as required next we add another property with the name category a string and description optionally the category of the node like research or Finance next we add our last property action a string with the description optionally and action related to the node like read later or research more or create YouTube video note that the properties are set we can add our JavaScript function for the function we can navigate to flowwise documentation and go to use cases and webhook tools here you can read how to connect flow wise to Discord using make. com with only one parameter message if you scroll down you get to the JavaScript function which we will use as our starting point so we copy the code but before pasting it in our Custom Tool we paste it in Visual Studio code to modify the code easier and have some syntax highlighting first we must adjust the body to our data structure and the properties of our Custom Tool so we replace it with our structure next we need to update a webhook URL to our link so we navigate to make. com and get it from our scenario in the webhook part and click copy address to clipboard or we can go to the web hook section and copy the URL from there in either case we get the same URL and go back to visual studio code and assign it to webhook URL our JavaScript is ready so we select all and copy the code and paste it in the Custom Tool in the JavaScript function area notice that our properties proceeded with a dollar sign in the JavaScript code we click add to save our Custom Tool now it's time to configure the flow we add our openai API key to chat open AI next we connect the dots and do some adjustments I save the flow and give it a name like flowwise webhook Dash make and save it we need to change the model to gpt-3.

5-turbo-0613 and Save now we are ready to test the flow we open and expand the chat box and ask a question like what is a webhook and get some information about web Hooks and how they work and where they are used to save the answer we can write save the answer as a node in the category research with action create YouTube video chatgpt uses the Custom Tool and save the answer as a node and confirms the action then we ask our second question what is CI CD chat GPT answers back with a lot of information about continuous integration and continuous deployment or delivery and we have no time to read it so we write save the answer as a node in the category research with action read later again chatgpt uses our Custom Tool and saves the answer as a node finally we ask a question in a different category like what is the thicker symbol of Apple sure enough we get the answer AAPL and this time we ask chat GPT to save the information as a node in the category Finance and chat GPT confirms the third action too if you go to our Google Sheets we see indeed chat GPT has used the custom function and the data is stored in the right columns in our table to see what happened in the background we turn over to langsmith our project use 4452 tokens when we expand our project we see the runs if you click on a run we can see more information about that run for example which prompts are sent and how many tokens each component used we can even see which arguments are passed in our function call to wrap it up you can use services like make.