⛓️ LangFlow: Build Chatbots without Writing Code - LangChain

Today I want to show you a platform where you can create powerful chatbots without writing a single line of code. These are just drag and drop components which you can connect them together to create chatbots. If you have been following my channel, I create a lot of contents using LangChain, but to make it work you need to write quite a bit of code in Python or JavaScript. So I wanted to look at platforms now that let you build applications on large language models without writing any code. I came across these two different options. The first one is called Flow Wise which is using Lang js. They build a pretty nice user interface on top of it. The second one is called langflow and it's using a very similar concept. So you have drag and drop drop components which, which you connect them together to create applications. Now, the interface of both langflow as well as Lang Wise looks very similar. So in this video I'll show you how to install one of them and we'll be specifically focusing on Lang Flow. In the subsequent video I might create a video for Flow Wise as well. I'll walk you through a step by step installation process and then I'll show you how you can create language different applications and we will look at some more complicated examples as well. Now in the background, both Flow Wise and Langflow, they are using LangChain and it's just a wrapper around it if you are not familiar with LangChain and or want to understand the basic concepts. So I would recommend you watching this video. Let's quickly look at the installation process. I am on Windows and but the installation is going to remain pretty consistent across different platforms. Unfortunately you still need Python in order to run these UI based platforms. So first I recommend to install Python as well as conda and create a new virtual environment for this specific project. So in order to create a virtual environment we're going to be using conda. So I'm going to say conda create then dash N. And now we need to give a name to our new virtual environment. So I already have a virtual environment called Flow, but you can give it any name that you want. Once you create your virtual environment, then you need to activate it. So we're going to use conda, Activate and then the virtual environment that I already have. So I'm going to call it langflow. Click Enter right? And you see that we are now inside our virtual environment. Okay. Next we will need to install the Langflow package. So we're going to be using PIP Install and then langflow. I have already installed it so you're going to see that it says the requirements satisfied. But if you're installing it for the first time, this step is going to take quite some time. Okay, next we just need to run this command which is python dash m lang flow or you can just type in langflow. Both of them should work. So let's see what happens. So it simply started web application on this specific IP address which is your local host and it's using 7860 as the port. Simply go to your browser and type in that address and you will see that the application is up and running. Now in the background you're going to see everything that is happening in here. So it's already throwing some error messages. We will look at this in a little bit why that is happening now, the basic structure. So it has some components. These are all the components that are available within LangChain. And as, as I mentioned before, it's using LangChain in the background. So you can come here and switch between the light and dark theme. I like the dark theme, so I'm going to keep this for the rest of the video. This is a very simple drag and drop drop interface. You simply drag different components, connect them together to create applications. So let's look at different components that are available. So there are a few agents, so CSV agents, JSON agent. Then in terms of chains, so these are the chains that are available within LangChain. So I think not all of them are available. But for example you can create a LLM chain or conversation chain. Right. Then for loading different types of documents, they have a pretty comprehensive list. For example, there's a PYPDF loader, there is a text loader if you want to interact with websites, there's a web based loader as well. We will look at a couple of examples just in a little bit. Right. Then in terms of embeddings, right now they only seem to be supporting OpenAI's embeddings, but this might actually change. They probably should include support for other ones in terms of LLMs. So there's a chat OpenAI hugging face hub llama CPP OpenAI. So this is good, that's a good start. Then there are modules for memory as well. So if you want to add memory to your chatbots, then in terms of prompts. So let's see what do they have? They have a prompt template, that's nice. And then zero shot prompt, a few short prompt template. This is good, it's useful. And then there is a character text splitter this is important for splitting your documents, especially if they are exceeding the context window of your large language model. Okay. So they have pretty nice set of tools that you can interact with. These tools are enough to start experimenting with large language models. So this is great for creating quick prototypes. So let's look at how we would do that. So for example, let's say I want to create a chatbot. So I'm going to using. I'm going to use the conversation chain. Let me make it a little bigger so it's visible. Okay. And then in order to connect this conversation change, we need a large language model. So to keep things very simple, we will start with the chat OpenAI. That's the basic chatbot from OpenAI. Okay, now if you see the conversation chain, so it expects two inputs, one is the memory and the other one is the LLM. That's the larger language model. The output is going to be a conversation chain, right? For this specific module, if you see it has just only one output, which is the Open Chat OpenAI. Right now you can simply connect these together. For some reason, the connection is not really visible, but there is a connection. Let me switch it to light mode. So you can see we simply connected these two points. Now they are connecting together to connect it together. Now, in order to experiment with this, they have provided this simple chat interface. So whatever workflow you create, and if it works, then you will be able to use this as a chat here. Right? And the good thing is they also have this code section. So it shows you, if you create a workflow, how you can use this on your own Python code if you want to integrate it as a part of an application. Right. So here is how it will work with the API. So right now our flow is called new flow. So it created a, it will create a JSON file for that. Right. If you want to directly use the Python version of langflow, so you simply load your JSON file and then you can ask a question. We'll look at this in more details in a little bit. So first let's look at here. For this Chat OpenAI, we have four different options, which is 3.5 Turbo, that's the ChatGPT, GPT4 and GPT32K. Right now I only have access to the Chat GPT version, so I'm going to be using that. Then you can set the temperature, so let's keep it to 0. And then you need to provide the OpenAI API key. You can get the OpenAI API key from your account. So I Went ahead, copied that. Let me paste it here. Right. And I think we should be all set. Now, if you notice this turned to green tick, which means that we are ready to use this workflow. Now, in order to use it, you need to simply go here. Right. And let's ask a question. So I'm going to say, what is the capital? Fusa. Okay. And this should get a response from ChatGPT. So it's processing it. You can actually look at the command line where you can see everything that is happening. Okay. So it came up with a response saying that the capital of US is Washington D.C. which is correct. And then it provided some more details because it's using ChatGPT. Right. And here is in the back end. So it's using a prompt template. And the prompt template is the following is a friendly conversation between a human and AI. The AI is talkative and provides lots of specific details from its context. Right. And then it's simply providing the prompt that we give it and the AI response. Once it's execute the prompt template, then it says finish chain. Right. So if you're familiar with LangChain prompts or prompt templates, this will look very familiar. Okay, so this is how you create a very basic chatbot. But let's add some memory to it because we want it to remember previous conversations. So we will go to memories. Then I can select this conversation buffer memory. Right. And this has a history key. So what's going to happen is it will provide the prompt as well as the history of the conversation back to our ChatGPT. Right. So we're going to connect this. Right. And let me just switch it again. Yes, it's connected. Right. So now this specific workflow should have memory included. Just make sure that you wait for this to turn green. Right. So it's now ready to use. So I'm going to go back to my chat interface and I'm going to remove the previous chat. Right. Just ask the same question again. What is the capital of usa? All right. And let's see what it comes up with. So again, it says the capital of the USA is Washington dc. This is great. All right, let's ask it, what is its population? Right, so now it should remember the context that we are talking about Washington DC. So this is pretty neat. You're able to inter create this workflow or the flow. But how do you use this in your own applications? So for that, if you go back to their GitHub page, they have provided an example how you can deploy this on Google Cloud. And also on Jina AI Cloud, I'm not familiar with this, but you can do that with them. Essentially all you need is just the JSON file of your workflow. Now let me show you how you can create that JSON file. So simply go to export right here you give a name. So let's say I'm going to call it Chatbot Basic, then you can give a description, right? If you want to store the API keys as a part of your flow, you can do that, but I'm not going to do that. And then simply click on Download flow. So here's the example JSON document that you created, right? And you can see that at the back end it's actually using LangChain for everything. So for example, if you look at here, this is what it's calling at the back end. So once you create a flow, you can integrate it as a part of your Python code or your application. So for example, if you want to use that specific flow that we just created, so you are going to use this code segment. Now let's say you created a flow, you saved it and you want to load it, to modify it for that you need to go click on import and then you have two options. You can look at a few examples or you can load local files. So we'll click on local files and then you can simply select the JSON file that you have already created. So that's we're going to open the same workflow in just another tab. So this is how you create, export and load workflows. It's a very great tool for quick experimentations and prototyping. But now let's look at some more complicated examples that they have. We're not going to be running those examples, but just look at the flows they are created. So we'll go to the examples and then you can see there are different options or examples that are available. So for example, here is a getting started Basic chat bot with prompt and history. That's what we created. Then you have a vector store PDF loader. So maybe we'll just first look at the vector store. So let's look at different components that are being using as this the part of this vector store flow. So first you have the web based loader. So it seems like it's loading web pages or the FAQ page from this specific website. Here's the website they're using in this example. Next they have a character splitter which simply divides this document into different chunks. In this case they are using a chunk size of thousand and with 200 tokens overlap followed by that is chroma vector db or a vector store. So it takes these chunks together along with the OpenAI embedding model and create embeddings for each of these documents. Right. And then it simply have another component which is the information related to the vector store. Now, if you have been following my videos, this whole workflow is very similar to what I have been showing. I actually had a example video on how to create a custom chatbot for your websites. So if you want to get a deeper understanding of all the components involved, so watch that video. Now back to the workflow again. Then they're connecting the vector DB as a part of a chain and in this case they are connecting that to a large language model, which is the DaVinci 003 model. Right. So that's going to be the large language model. The great thing about this tool is it lets you set up different options. So for example, you can choose a different LLM if you want to. So in order to run a flow like this, you will have to provide your OpenAI key put to the embeddings model as well as the LLM model. Okay, let's also look at a couple of more examples. Maybe we'll look at the PDF loader. Talking to PDFs. Right now it's kind of a hot topic. So the rest of the workflow is very similar to what we saw for the vectorstra. The only change is now they're using a PDF loader. Right. So you can simply select a PDF document and then it will go through the rest of the flow. So I'll be creating a lot more detailed videos on how to build applications and run those. I ran into a few issues here. I think there are some bugs still in the code, so I wasn't able to run like a PDF loader. But it might be on my end. I might have some issues in the installation. Overall, it's a great concept and if executed well, it's a great tool that lets you do very quick prototyping. Okay, Play around with it and see if this can be useful in your own workflows. I will be making videos on the flow wise as well and compare both these tools. If you have any questions or comments, please put them in the comment section below. If you like the video, consider liking and subscribing to the channel. Thanks for watching and see you in the next one.