we can use flowwise API endpoints to integrate our chatbots into pretty much any type of application and in this video we will have a look at integrating a flowwise chat flow into a custom web application this video is slightly more technical than the previous videos in this series and the basic understanding of JavaScript will be beneficial this project consists of two parts the first part is the flowwise chat flow itself for this demo we will create a conversational agent that has access to the internet we can use this chatbot to ask questions about recent events or we can ask it to perform research for us we will use the JavaScript API example in order to call this chat flow from our own node application and we will also secure this endpoint using an API key in the second part of this tutorial we will build a simple web application that will integrate our flowwise chat flow let's have a quick look at how this works in the prompt field we can ask our chat flow a question like what is flowwise after clicking send our node application will call the flowwise endpoint and it will write a response to the screen as an added bonus I will also show you how we can deploy our node application to a production server on render so let's get started first let's create our chat flow for this demo I will be using an instance of flow wise that was deployed to rain there if you would like to learn how to deploy flowwise applications to render then please check out my tutorial over here let's create our chat flow first let's click on add new then let's save our chat flow and let's call it something like research chatbot let's add an agent to our project so under agents select the conversational agent then for this agent we need to assign a memory node an llm as well as the tools that it should have access to let's first add the memory node so under nodes let's go to memory and let's select the buffer memory node and let's connect our memory node to the agent we can leave these values on the default values then let's add our model so under chat models let's select chat open Ai and let's connect the chat open AI node to the agent on the chat openai node change the temperature to something like 0. 4 and let's assign credentials to this node so under credentials click on this drop down then click on create new let's give it a name like openai API and let's then add our openai API key and let's save this next let's assign a tool which the agent can use to add access the internet under nodes go to tools and under Tools grab the serp API node and add that to the canvas let's add this Knight to the allowed tools list for credentials click on the drop down and then click on create new let's give this credential a name I'll just call it serp API and let's then add our serp API API key like so and let's click on ADD there is one more change that I would like to make to this chat openai node let's click on additional parameters and let's change the max token size to 2000. this will allow the chatbot to respond with longer answers let's save this chat flow and let's test it out by clicking on chat and let's ask it a question something like what is flow wise and we can see that we do get a response back from the bot now that we have a working chatbot let's have a look at how we can call this chatbot using the flowwise apis let's click on the API endpoint button and then let's click on the JavaScript tab if you are using other Technologies like python or any other coding language you can just follow the examples provided in those tabs but in this video we will build a node application so let's have a look at the JavaScript example on this screen we can notice a few things first we can see the API endpoint for calling this chatbot we can also see that the type of method is a post method and for the headers we have to specify the content type as application slash Json do take note that if your chatbot uses a document loader the content type will look slightly different as it will require form data to be passed to it instead but for this demo we will simply have a look at a simple question and answer type chatbot for the structure of the body we need to pass in a prop called question followed by the actual questions text lastly we can also set authorization for the endpoint by default authorization is set to no authorization which means that anyone with this endpoint can call your chatbot but in order to protect this chatbot we can change the authorization to use the default API key or we can add a new key let's have a look at protecting this chatbot using authorization let's close this pop-up then let's click on back then click on API Keys we can find the value of the default key on the screen but we can also create new keys by clicking on create key we can give our key and name I'll call it flowwise API tutorial and or click on ADD let's go back to our chat flows let's click on our chat flow let's go back to API endpoint and let's click on JavaScript again now let's change the authorization from no authorization to flowwise API tutorial and we can now see an update to this sample code where we need to pass an authorization property to the header which includes this better token we should now be able to securely call this endpoint from our applications to demonstrate this let's call our endpoint from Postman in Postman let's create a new request let's change the type of request from get to post as a reminder the service expects the method to be set to post let's also grab the API endpoint and let's add it to postman then let's set our headers first we know that we need to set the authorization header which will use a better token so we can simply copy this API key then in Postman let's click on the authorization tab let's change this from no forth to better token and let's paste in that API key then let's click on headers we need to set the content type to application slash Json so for the key let's type content type and for the value let's set this equal to application slash Json lastly let's click on the body tag and let's click on Raw ensure that the type is set to Json in the body let's add a property called question and let's enter the prompt for this chatbot something like what is flow wise and let's send this request and after a second we do get this response back from our flowwise chat flow let's move on to the second part of this tutorial where we will create a custom node application with a web interface for interacting with our chat flow to speed things up I have already prepared a web interface for you so in the description of this video you will find the link to this GitHub repo to copy this guide to your machine click on code then either click on download zip and extract the contents to your drive but what I will do instead is to clone this repo so I will copy this link then on my drive I will run command I will then type git clone and then paste in the link to the repo you can then go ahead and open the folder in a code editor of your choice I will be using vs code we now need to install the necessary packages so in the terminal execute npm install let's have a look at this project structure the index.
js file is the starting point for our application and in this file I simply created a very simple express application this express application will look at the public folder for any static files and the public folder will contain the files needed for our web application we have also created an API endpoint for this application which we can access by calling API flowwise and this endpoint we'll call this function which we will have a look at in a second the reason we are using an express application is because we need the ability to call the flowwise chat flow from the server remember that when we call the chat flow we need to pass it this better token and this token needs to be a secret this is not something that we want to make visible to the front end so therefore this API endpoint will run on the server only and only this endpoint will have a view of the flowwise API key so we are therefore detaching the back end logic from our HTML front end let's now have a look at the code for this API endpoint this create prediction function is coming from the controllers file which we can access in the controller's directory and within flow wise here I simply created a function called create prediction and I'm exporting this function so that we can call it from the index file this function takes in the request payload as well as the response from the request body we are expecting to extract a property called message this will be the value that our front end scenes to the chatbot in this try catch block we want to format the message into a structure which flow wise expects if we go back to the API example in this example we can see that flowwise expects a property called question followed by the message from the user therefore I'm creating a new object with a property question followed by the message from the user in this video we will implement the fetch Logic for calling the flowwise API endpoint and we will add it round about here call the flowwise endpoint once the endpoint has been called we will return a response with the status 200 which means successful and this response will contain a property for message with the response from the chatbot currently the response is hard coded as well but we will change this in this video let's have a look at the public folder within public we can see all the files relevant for our website this simply contains an index. html file with a very basic structure and some styling using telwyn CSS this is not an HTML course so please don't worry if you do not understand all of this but in a nutshell this structure will give us some heading with text flowwise API demo followed by a forum with a simple input field as well as a submit button then at the bottom of the page we have a paragraph which we will use to display the chatbots response within this folder we also have a Javascript file called app. js at the top of this guide we are binding the HTML elements to JavaScript variables for example we are binding the form as well as the message input field as well as the paragraph which stores the response from the bot and the submit button on the form element I've added an event listener on submit so when the form is submitted we will prevent the default Behavior which will prevent the page from refreshing I'm simply logging the value from the field just for testing and then setting the disabled attribute on the button to true and I'm changing the text of the button descending this will simply prevent the user from clicking the button while we are calling our API endpoint in this try block I'm now calling this application's endpoint and then passing in the message from the user this is not to be confused with the flowwise endpoint itself that endpoint will be called from our controller we are then getting the response back from our API and in writing that to the paragraph on this HTML page then finally I'm setting disabled to files changing the inner text of the button to send and then clearing the value of the input field we can test this application by opening up our terminal and then running npm run Dev this will now start our project on Port 3000 and if I open localhost 3000 we are getting the following page I'm actually going to put this screen next to the code editor right right so let's test this out if I now enter a message like hello and then click on send we are simply getting a response back of demo response and that is because if we open the flowwise file we've hard-coded this API response to demo response it's now called our flowwise API and we will go through this step by step first let's create a variable called response and let's call await and fetch we now need to add the API endpoint for our flowwise application so back in flow wise let's grab this API endpoint and then add that to our code like so this value here represents the unique ID of the chat flow if we go back to flow wise for a second and if we look at our chat flow we can see that ID in the address bar this is the ID that corresponds to this specific chat flow if you add more than one chat flow and you wanted to dynamically call these flows from your application you could create a list of some sort in your application and then dynamically call the chat flows by changing the chat flow ID I'm actually going to move this value to an environment variable so that we can change it using environment variables if we wanted to I'm going to cut this value then in our project files let's open up the dot env.
example file let's rename this file like so and let's simply call it dot EnV within this file there's a couple of variables what we are interested in is the flowwise URL the flowwise API key as well as the flow ID I'm going to paste in the flow ID into this field but let's also add the flowwise URL and API key for the flowwise URL I will simply go back to my flowwise application and then copy the first part of this URL and let's add it into this variable please take note to remove this trailing slash for the flowwise API key I will just grab that from the API endpoint sample code and it's everything after this better token like so let's add that to the environment variables as well in order for the environment variables to take effect we need to restart our Dev server so I'm just going to stop this using Ctrl C and let's run the server again you will now notice that the application is now running on Fourth 5000 instead of three thousand so in the browser I'll just change that from 3000 to 5000 we can now dynamically call this URL as well as the chat Flow by passing in the environment variables let's change this to a template string by using these little backdicks then and at the end of the string let's pause in the chat flow from the environment variables so we'll pass in a variable and the value will be process dot EnV dot flow ID this needs to match the value in the dot EnV file then I'm going to copy this flowwise URL value and then let's replace this URL part of the string with the value from the environment variables like so the fetch function also takes in an object as input and we will set the method to post as a reminder if we look at our flow wise example flowwise expects the method to be of type post we also need to set the headers so I will add a property called headers and within headers we need to set the content type to application Json and we also need to pass in the API key so I will add another property called authorization the value will be a string that starts with the word Bearer followed by the API key which we can get from process. env Dot and I'll just copy the value from the EnV file like so and let's add it to our code lastly we need to pause in the body of this request by adding another property called body for body we can call Json Dot stringify and for the value we will pass in flowwise data which is the structure over here containing the question property this should be everything that we need to call the flowwise API we can now extract the data from this response by creating a new variable called data and let's call a write response dot Json let's also write the value of data to the console like so let's test this out let's go back to our application I'm just going to refresh this in the prompt field let's just enter something like hello and in the terminal we can see the response coming back from the bot as hello how can I assist you today therefore let's simply pass back data instead of this hard-coded demo response like so let's refresh this application let's try it again let's type in hello and we are now getting the response from the bot on this screen let's try a few more examples let's do something like what is Lang chain and we do get a response back let's try something like what is the difference between flow wise and Lang flow and we are getting response back from the bot let's have a look at deploying this custom web application to production but before we move on I do want to show you something that is covered in the documentation and if we look at the documentation on the flowwise website we can see this over white config object which we can pause into the request as well I have been playing around with this but at the time of recording it seems to be a little bit unreliable so I will create a follow-up video to go through this override config once it's stable enough additionally if you are planning to upload files using document loaders you can also see an example from the documentation on which values need to be passed to your Bot please let me know in the comments if this is something that you would like me to cover in a future tutorial right now let's have a look at deploying this custom application to reindeer to do this go over to reindeer. com and click on dashboard at the moment I only have flowwise ai running on render and we will now create a new instance for our front end application let's click on new then web service and at this point we need to select a repository for or flowwise front end I'm not going to cover it in this video but you need to deploy this project to GitHub but it's easy enough to do from vs code by clicking on source code control then enter a name for this initial deploy click on Commit and that will deploy this project to GitHub after selecting your repository give it a name I will call it flowwise web app select your region select the branch as Master leave the root directory blank under runtime select node for the build command change it to npm install then for the start command type node index.
