Creating Your First Chat Flow
Now that we've set up Flow-wise, we can finally go ahead and create our first chat flow. We can create a new chat flow by clicking on "Add New" from the dashboard.
The first thing I recommend we do is to save this chat flow and let's give it a name. I'll just call mine "My First Chat Flow" and let's save this.
Exploring API Endpoint Options
After saving the chat flow, you would have noticed that we now have two additional options available. Let's have a look at this API endpoint button. On this popup, we can see all the different ways in which we can integrate our Flow-wise chat flow to external applications.
Within this embed function, we can see this example piece of code that we can use to add this chat flow to a website. And let me show you an example of what that looks like on an actual website. After adding that piece of code to your website, you will notice this little chat bubble show up and users can then interact with our Flow-wise application. We will have a look at this embedding function in detail in this series.
We can also see example Python code for calling this chat flow as well as on JavaScript code. And under curl, we can see the API endpoint for calling this chat flow. Under authorization, we can also set an API key to protect this API endpoint. And under configuration, we can also set things like the rate limit and a message that will be displayed once the limit is reached.
Navigating Settings and Canvas Controls
Then we can also see this settings button. And from settings, we can view the past conversations that we had with our application. We can duplicate this chat flow. We can load an existing chat flow from a file. We can also export our chat flow. And we can delete our chat flow. And very important is we can analyze our chat flow by integrating tools like Langsmith.
Then on the canvas, we can see this button to add nodes. And we can also see this chat button, which we can use to interact with this chat flow. And at the bottom of the screen, we have buttons to zoom into the canvas, zoom out, fit all the nodes into view. And we can also lock the nodes in place so that we can't accidentally move nodes around.
Adding the LLM Chain Node
Now where do we get started? The first step is to add a node to the canvas. But which nodes should we add? As a rule of thumb, all chat flows should contain at least one agent or one chain. Agents are a bit more advanced and we will have a look at those in the next few videos. But let's start off by adding a chain to our canvas.
And in this list, you will notice a few different types of chains. Let's add the most simplest chain to our canvas and that's called the LLM chain. And this stands for Large Language Model Chain. So on this chain node, we can see all the inputs that it expects on the left hand side of the node and the inputs with this little red star indicate that these inputs are mandatory. So in this example, we need to provide a language model as well as a prompt. And the output parser and input moderation is optional. We can also give our chain a name. And finally, we can also see the output that this node will produce. We can simply leave it on LLM chain, but we will have a look at the output prediction in this video.
You will also notice that when we hover over the nodes, a little pop-up might show up on the right hand side of the node. Here you can duplicate this node, you can delete this node, or you can click on Info to see some more information about this node. And here we can see that we can use this node to run queries against large language models.
Configuring the OpenAI Node and Credentials
Now let's go ahead and add a large language model to this chain. So let's click on Add Nodes. Then we can see a list of all the large language models in this section over here. And let's simply scroll down to OpenAI and let's add the OpenAI node to the canvas. We can now connect this OpenAI node to our chain by dragging from this output into the large language input on the chain, like so.
Now this OpenAI node requires the credentials to connect to OpenAI. So in order to create this credential, click on this dropdown and then click on Create New. To give our credential a name, I'll just call mine Flow-wise Tutorial and now we need to enter our OpenAI API key. So in order to get this key, we need to go to platform.openai.com/api-keys and then click on Create New Secret Key. We can give our key a name, again I'll just call it Flow-wise Tutorial and then click on Create Secret Key. Go ahead and copy this key value and paste it into this field on Flow-wise and then click on Add.
I do want to point out that you can view all of your credentials by going back to the Flow-wise dashboard. In fact, let's have a look at that now. Let's save this chat flow so that we don't lose our changes. Let's go back to the dashboard, then go to Credentials and here you can view that credential that you just created. What's great about this is that you can now reuse this credential in all your different chat flows so you don't have to specify the API key for each and every flow.
Setting Model Parameters
Let's go back to our chat flow by clicking on Chat Flows and then let's click on our chat flow. Right, now we can change the AI model that we want to use in this node by clicking on this drop-down and for the OpenAI node, we have access to three different models. All of these offer different benchmarks in terms of performance and intelligence and I will show you how to get access to the more intelligent GPT 3.5 and GPT 4 models as well.
We can also set a temperature and the temperature is a value between 0 and 1. 0 means that the responses should be accurate and factual and 1 means that the model will have full creative control. So it's always advisable to set a value between 0 and 1 and I want my responses to be slightly creative. We can also set additional parameters like the maximum amount of tokens that we would like to spend and some other parameters as well.
Using a Static Prompt Template
Now let's add the last node to get this chain to work and that is the prompt. Let's click on Add Nodes, then let's open up the Prompts menu and let's add a prompt template to our canvas and let's connect this prompt template to our chain like so.
We can use prompt templates to effectively tell our AI application how to behave. So in other words, we can tell our application what type of inputs it will receive and what the kind of output should be that we expect from the model. Let's demonstrate this by adding a prompt template. We can click on this Expand button to open up a bigger prompt window and let's enter something like "tell me a joke about horses" and let's leave it like that. Let's save this prompt and then let's save our chat flow and always remember to save your chat flow before testing it as your changes won't take effect until you save the chat flow.
Now let's test this chain by clicking on this chat bubble and now we get this friendly message saying "Hi there, how can I help you?" We can now enter a message here or we can expand this chat by clicking on the Expand button. We can say anything at this point, let's just type "hello" and let's save this and we do get a response back from our model which means that everything is working and at this point it doesn't matter what we say to this model, it will always return a joke about horses. Let's say "How are you?" Let's send this and I instantly get a joke back about horses. So at this stage it doesn't matter what we say to the model, it always returns a joke about horses.
Creating an Interactive Dynamic Prompt
But let's say that we actually want to provide the subject of the joke in this chat window and the model should write a joke about our subject. So let's have a look at how we can inject our input text into this prompt template. Let's open up this prompt again and let's replace horses with opening and closing curly braces and within these braces let's input something like subject. These curly braces represent a dynamic value or a variable that we can inject into the text dynamically. Let's save this and let's now map the input from the chat window to this subject variable.
We can do that by clicking on format prompt values and here you will see that variable that we just created called subject and we can click on this little green edit button and in this field we can now specify the value of that subject. We can either hardcode this to something like dog and this will now always give us jokes about dogs or we can map this value from another node or the input box by clicking on this field and you should see this pop up and at the moment I'm able to select the users question or the chat history. Let's map this to the user question. This is the users question from the chat box and let's close this pop up.
Now we can go ahead and save this chat flow and let's test this in the chat. Let's expand this and let's now enter the subject of the joke. Let's enter cat and now we get a joke about cats. Let's change this to dog and indeed we now get a joke about a dog.
