Build an AI chatbot VISUALLY with Langflow and GPT4 in minutes!

hello everybody I'm David Jones gelardi developer relations engineer now I'd like to give you a brief overview of langlow so langlow is a no code uh solution that allows you to visually chain together gen workflows think things like chat Bots or rag applications AI assistants agents whatever you can dream up really all right let's go ahead and take a look at a very basic example okay so once you have langlow installed and you are running it you'll see an interface that looks something like this uh notice the start here link I'm going to click that and boom I have a blink canvas now take a look in the left hand side you'll see all these components now there are an absolute ton here in Lang flow so what I'm going to do is instead of trying to go through every single one and explain them let's go ahead and take a look at the ones we need specifically for just a basic chatbot right so we're going to build a basic chatbot right now like in a minute okay so first thing I'm going to go to inputs I'm going to grab a chat input why because I want some way that I can interact with my chat bot and I can talk to it um so I need to have some mechanism so I can enter in a user generated message right so that'll be the chat input now I want to set some context with the llm I want to tell it like what is its job what is it doing right so I'm going to create a prompt now in this I have a prompt template I'm just going to pop one in here and I'm saying answer the user as if you were a pirate right and so I'm telling it this is your job right and this is the user input now notice here here the curly brace user input curly brace right so what we're doing with those curly braces is we're telling Lane flow I want you to create a user input variable to expose in the component you'll see where that comes in in just a moment okay great so we're going to answer the user if we're a pirate we have our user input and then we have an answer I'll say check and save now take a look at what just happened here the component updated and it's using the variable we just set in our prompt in those curly braces right user input so this allows me really quick and easy way to just wire these things up once we get going okay great we have our input we have our prompt now I want to feed that into a large language model um that I can use to start having a conversation with now langlow has support for all sorts of models right so today I'm just going to use open AI happen I already have an account with them and a key so I'm just going to use that but it is agnostic to the various models you can actually switch these up as as as you see fit right so if you want to use a different model experiment with a different model all sorts of things you can just drag in the one that you want and then finally I need some way for the model to talk back to me so I'm going to create a chat output let's zoom out a little bit give a little room spread things out a little bit okay make this look nice okay wonderful so I have the basic structure of a chatbot right I have an input I'm setting my prompt with some context what is LM going to do which llm am I using I'm using open AI in this case and then some output Okay so so let's wire these together now um so first thing I want to do is I want to take the output of my chat input because this is how I'm going to talk to it right I'm going to take the output I'm going to wire it up to the prompt remember this is going to set our user input now I'm going to take the output of the prompt that's done the text here I'm going to wire that up to the input of our llm and then I'm going to take the output of our llm and I'm going to wire that up to the chat output so I can have this full end to end capability now once I've done this and you'll see the little play buttons If I click a play button um then it will go through and kind of build each of these and let me know if anything's wrong and oops I forgot a key right so it looks like I need an open AI key for open AI so I'm going to go ahead and grab one of those and now I'll paste that in now a really cool feature by the way of Lang flow is the ability to store Global variables and it can also store secure credentials so right now I'm storing this just raw um thankfully you know a nice feature of L flows that will automatic obscure the text um but that's really not a good practice right so I can click on this little Global icon say add new variable come in here give it some name and then the type here so if I store it as a credential it's going to store it securely right it won't allow it to just store out in the open um and then I can paste the value now what's super cool about this is when I save that variable it will then store a global variable that is available to all of my flows right so I can have one key that I can share across so it's a really nice feature all right but for right now I'm just going to I'm just going to keep it raw all right so let's go ahead and recheck that now that I have a key and let's see ah yes so I resolved the issue let's go ahead and finish this one off so this is really nice ways you want to get through you want to make sure you get those green check marks and then I'm going to go to the playground to go ahead and test it out so I'm gonna say hi and oh here we go so it's talking to me like a pirate and I like some rum okay what pirate wouldn't like rum right and you hear the you be speaking me language mate here right you're yeah I think you get the idea you know we're talking we're talking to the pirate llm at this point so it's just a super basic chatbot um but you can see we have this full interaction now Lane flow goes one step further though great we have this gen workflow wired up but I want to embed this in my application right I want to be able to execute it from my application so if you go down to API here I say API and you see I have a curl with HTTP or I could use a python API I can embed a you know chat widget all sorts of things that I could use to then expose this flow in a no code fashion into my applications and there you have it that's just a basic gen workflow that we very quickly implemented with llow

Channel: Langflow

Views: 1,658

Keywords:

Id: nEx0ELgE2NY

Length: 5min 41sec (341 seconds)

Published: Fri May 24 2024