What Is Flowise AI?
Hello and welcome back. In this video, we will have a look at Flowise. Flowise is an open-source tool that makes it easy to prototype LangChain applications using an easy-to-use user interface.
In our LangChain JS series, we had a look at how we can build our own AI applications using LangChain and Node.js. But in this series, we will have a look at how we can create AI applications without any coding experience.
Flowise is free to use and can run locally on your own machine. It can also be deployed to a web server for online access. Flowise allows us to create AI applications using a very simple drag-and-drop user interface and can be a useful tool for prototyping LangChain applications before writing a single line of code. We can also use Flowise to expose API endpoints for interacting with our Flowise flows directly from our applications.
In this video, we will have a look at how we can set up Flowise to run locally on our own machines and we'll also have a look at some of the examples that come bundled with Flowise.
Prerequisites and Installation
So let's talk about what you need in order to follow along with this video. First, you do not need any coding experience to follow along with this video. You will need Node.js to be installed on your machine. So go over to nodejs.org and download and install the LTS version of Node.js. Then open up the command prompt and enter the following command: npm install -g flowise.
Go ahead and run this command. This will go ahead and install Flowise on your machine.
Starting Flowise and Installation Alternatives
While Flowise is installing, I do want to mention that there are alternative ways of installing Flowise, and you can see these options by going to the Flowise GitHub repo and then scrolling down to the quick start section. For this demo, we are simply installing Flowise globally on our machine. But there are alternatives. If you want to use Docker, there is an option for that, and under the developer section, we can set up our own project folder and then simply clone the repository and install the dependencies. But for this demo, we'll simply stick to the global installation.
Once installation is complete, we can start up Flowise by typing npx flowwise start. If everything was set up and installed correctly, you should see a message like this saying that Flowise server is listening at Port 3000.
UI Walkthrough: The Chat Flow Canvas
So in order to access Flowise, we can now go to the address bar and type in localhost:3000 and you will now see this dashboard for Flowise. From this dashboard, we now have a few options. We can now create a new chat flow by clicking on 'Add New' and this will give us this blank canvas where we can create our AI application. To the left of the screen, we've got this button for adding nodes, and after clicking this button, we can see all the components that are available in LangChain, like agents, chains, chat models, document loaders, and more.
We can also use the search nodes input box to find components. For instance, when I type in OpenAI, I can see the chat models offered by OpenAI as well as some other OpenAI components. On the right-hand side of the screen, we have a button to save our chat flow, as well as a settings button that will change depending on the content within our flow. We also have this chat button which we can use to interact with our application. We can enlarge this pop-up by clicking on this expand chat button. We can clear the chat history with the clear chat history button and we can close this chat window by clicking on this button.
Dashboard Features and The Marketplace
Let's go back to the main dashboard. From the main dashboard, we can show and hide these items by clicking on this burger menu button. On the right-hand side, we can change between dark mode and light mode with this toggle. Next to that, we have a settings button where we can load existing chat flows or export our current chat flows. Within the menu, we've also got Marketplace as well as API Keys.
We'll get back to Marketplace in a second, but let's first chat about API Keys. One very cool feature of Flowise is that we can expose our models or our chat flows to external applications using our API keys, and we will cover this in this tutorial series.
If we have a look at Marketplace, we can see pre-built examples of chat flows created within Flowise and there are quite a few examples here.
Deconstructing a Marketplace Template
As an example, let's look at the translator example. So we can click on this template and it will show us the chat flow for this AI application. Please don't worry if these components do not make sense to you yet, as we will be going into detail on what these components are and how to use them in our project.
But basically, what we have here is an instance of our OpenAI model, and just below that, we have a definition of a prompt template. The prompt template is used to prime the AI model with the system message, and in this example, we are telling the AI that it is a helpful assistant that translates some text from an input language to an output language. For the human message, we are simply grabbing the input or the text that is parsed within this chat window as input into the model. And for the variable list, we are defining the input language as English and the output language as French.
We are then using a chain to link the OpenAI model to the prompt template, and that will give us a result. If we want to go ahead and make changes to this Marketplace model, we can simply click on 'Use Template' and this will create a new chat flow for us. So the first thing we need to do is to save this chat flow and give it a name, something like 'Translation Chatbot', and I'll save this.
Configuring the OpenAI Node
In order to use the OpenAI models, we need to provide an OpenAI API key. In order to get an OpenAI API key, you need to go to platform.openai.com and create a free account. Once you've logged in, you need to generate an OpenAI API key. You can do this by clicking on 'personal' then click on 'View API Keys', then click on 'Create new secret key'. Give it a name like 'Flowise AI' and then click on 'Create secret key'. You can now go ahead and copy this key and store it in a safe place. I will be deleting this key after the recording, so please ensure that you use your own key for this.
We can then go back to our chat flow and paste in the API key in this field. Optionally, we can change the OpenAI model that we want to use. By default it's set to GPT 3.5 turbo, but if you do have access to GPT-4, you can change this to GPT-4 instead. But I will stick to GPT 3.5 Turbo as it is a much cheaper model to use than GPT-4.
What we can also do is to change the temperature on this model, and this needs to be a value between 0 and 1. 0 simply means that the AI will be factual and will not be creative, where a value of 1 means that the model has free reign to be as creative as it wants to be. I'll just set the value to something like 0.7 to give the AI plenty of room to be creative but still factual. We can also click on 'Additional Parameters' to change other attributes like changing the maximum tokens that we are willing to spend for each API call.
For the prompt template, I will simply use the values that they provided, but basically the system message is telling the AI that it needs to translate some text from an input language to an output language. The curly brackets indicate that the input language and the output language are variables that we will set down here. So, input language in this string will be replaced with English, and the output language will be replaced with French. For the human message, the value that we enter in the chat box will replace the variable of 'input' again because of the curly braces, this becomes a variable field.
Testing, Iterating, and the Importance of Saving
Before we can test this, we need to save our changes by clicking on 'Save'. I've fallen for this trick so many times you just won't believe. If you do not save your changes, the chat will not work correctly. So if you run into any issues or inconsistencies, please ensure that you've saved your chat flow.
This passing, 'I love programming,' and let's send this message. And after a second, we get the response back from OpenAI which is now translated 'I love programming' into French. If we wanted to change the output language, we can simply change it in our prompt variables. For example, let's change the output language to Afrikaans. If we run this chat now and let's pass in 'I love programming' again, you will notice that we are getting French back as the output language. And that is because we haven't saved our changes. Let's go ahead and save these changes. Let's run the chat again passing in 'I love programming,' and this time we are getting the response back in Afrikaans. So like I said earlier, please ensure that you save your changes before testing the chat.
Managing and Exposing Your Flow as an API
We now have our first AI application up and running. What we can do now is click on 'Settings' and if we wanted to we can delete this chat flow if we no longer want it. We can create a copy of this chat flow and we can also export this flow. If we wanted to expose this model to the outside world or some third-party applications we can simply click on 'API Endpoint' and this will give us the code to embed this chatbot using a JavaScript import, or we can see the Python code as well as the JavaScript logic, and we also have a curl example for no-code frameworks like Webflow. If we go back to the dashboard, we can see all of our created chat flows right over here.
Bonus: Creating a Startup Script
As an added bonus, I'm going to show you how you can quickly start up a Flowise server and open it in the browser automatically. Typically when you want to use Flowise, you have to open up the command prompt and then type npx flowwise start. Note, because we've already installed Flowise, it's not necessary to run the install flowwise command again. All we have to do is execute npx flowwise start. This will now start up the development server, but then we still have to go to the browser and then open up localhost:3000.
So what we can do instead, in order to run everything automatically, is we can open up notepad and then in this file you can just paste in the following text, and you can find this text in the description of this video. Then we need to save this file. And you can go to your desktop, then for the file name type in something like 'flowwise', but because I already have a file with this name I'll just call it 'flowwise temp' for now, .bat. And as Save as type, ensure that you've selected 'All files'. Go ahead and save this file. After saving this, you can now simply double-click on this file and this will automatically open the command prompt to start Flowise and it will automatically open up your Flowise session in the browser.
Conclusion and What's Next
In the next video, we will have a look at creating our very first chat flows from scratch. Thank you for following along. If you enjoy this content, please consider subscribing to my channel, and let me know in the comments if there are specific components in Flowise that you would like me to cover in a future video. I'll see you in the next one. Bye.
