LangChain JavaScript Tutorial: Complete Guide to LLM Development

[00:00:00]hello and welcome to this link chain Jazz course after this course you'll be able to use JavaScript with link chain to develop complex applications with large language models so-called llms and use them for your own purpose we would start with a simple introduction to working with llms first without link chain and then we look at why Lane chain makes your job so much easier after that we get into the topic of templates and response schemas look at so-called chains and output passes that we can use to customize the output of llms to our needs after these Basics we take a look at more complex chains so-called sequential chains next we move on to indexes and look how you can access your own knowledge bases and use Vector databases to extract data via similarity searches and send it as context to an llm then we take a look at the concept of memory with memory llms can take into account the context of a conversational history and not always just respond to one direct question after this we take a look at an quite Advanced concept the so-called agents which are able to autonomously perform tasks and use tools to do so this course is pretty similar to my python link chain course so which one should you use if you are really interested in Ai and llms I would recommend my python course since python is just the language in data science in AI if you are more interested in web development or front-end in general but you also like Ai and maybe want users to be able to click on your web application then go for the languaging course in JavaScript or maybe just do both whatever you want okay now let's start with coding ok I'm currently in vs code and as you can see on the left I've got many files which includes some JavaScript code this is the code we will use in a course and I would definitely recommend that you will just check out my git repository and follow along and of course play also a little bit with the code but don't write everything from scratch to make this code work you need an open AI account and you need an open AI API key which you have to paste here in the dot end file and because this is Javascript you also need node to be installed on your computer you can do this with node minus minus version and as you can see I've got version 18 you should have a similar version not older than version 16 I would recommend okay let's take a look at the package.json file first as you can see we've got four dependencies here dot nth because we've got our DOT and file and we load the key by loading our environment file then we install files node this is the vector store Library we will use then of course link chain and openai to make the requests of my eye and actually use the link chain package and then very important that you keep the type here to module because otherwise you cannot use import statements in node.js but have to use require and the documentation in link chain is almost always with import statements so keep it like this so now let's run npm install to install our dependencies here and create our node modules folder and then we can just start coding okay now let's go to the first file the zero zero Basics file and what we're going to do now is first we import the config from Dot enf and then we run the config function and this will load the API key in our environment and we can use it and then we import configuration object and the openai object from open AI after this we create a new configuration object and we pass in as API key the process.nf and then this is the open API key from our other end file and this is the way we can access it so now we have a configuration object with our API key and now we can make a request to open my eye so what we're going to do now is we instantiate the open AI API class from openai pass in the configuration to the Constructor and then we get our open AI instance okay now we will create a little helper function called chat and this will get a single input which will be a string and this is very important this is the messages we will send to open AI it has to follow this data structure we have to send an array of messages and in the array they have to be objects and the key first has to be roll and if we want to make a request with the user we call it here user and the content has to be a stringed besides user the most important role is assistant and this is the role which is responsible for the response from openai so we've got the conversation always user and then AI user Nai so this is the whole conversation stored inside this messages array and then we send this messages array to open my eye we have to do it with the create chat completion class we have to pass in here the model we want to use so in this case it's GPT 3.5 turbo quite powerful and very cheap then we pass in the messages and then the temperature the temperature is a value from 0 to 1 and 1 means it's very dynamic in its output so maybe a more creative chatbot and zero means it's very robust deterministic and you can play a little bit with the values what you want depends on your use case the response which we get back here from OPM AI is a complex object and we actually have to retrieve the correct information so we have to retrieve a data property and then the choice property which is a list we have to extract the first element then again the message property and then the content property from that object and this actually returns only the text which we get back from open my eye okay now let's use the function and first we will create a question what is the capital of runs and the llm should be able to answer this so we will pass in the question here to the chat function and since this is an async function we will have to resolve the promise which we'll get back and then just console log the response otherwise if that doesn't work we will catch the error so now let's run node00basic.js and of course save it here and then we get back the capital of France is Paris okay that was the most basic use case normally when you use an L M for your own use case you give it some kind of identity and to do it you'll normally give it a kind of system prompt and I will show you how to do this for example this is the prompt template and this is some kind of variable here so what we want now is be very funny when answering questions and then you have got here the question and the variable here will be replaced by the actual question yeah you could also use a dollar sign here to actually have some real variable but this is the way link chain does it and we're gonna use it this way too so now we can replace here the question just by a string replacement and actually pass in the correct question and then we run the chat function again and then the bot or the llm should now behave differently okay as you can see the answer is now the capital of front is obviously France just kidding it's Paris okay as you can see this works but length chain makes this process which we've done on here manually even easier and we will now take a look at the first chains okay I'm here at the first chains.js file and we also will just import the config from dot info and run this config function and then we will import the openai class but now we don't import it from openai but we will import it from Lang chains llms and then hear from the openai module and then we will also import The Prompt template from link chain prompts and then also the llm chain from link chain chains to use it we have to instantiate the open AI class we Auto Parts in a temperature here and then we've got our model instance and then we create a template this is the same template we created before as you can see we have to use these curly braces inside the template and to use the length chain we have to create a new instance of prompt template pass in the template here's argument and then also the input variables and then as you can see we've got question as input variable and this name here has to match the name inside the curly braces and this will automatically create the complete template at the end and then we create a new llm chain we pass in the llm which is the model here and then we also pass it the prompt now we've got a chain object and to the chain object we just run the call function here and we pass in the question as object what is the capital of France and this should already behave in a funny way we can just run it node and then first chains.js okay again we get back some kind of joke but as you can see we don't have to pass in these kind of message object with role and content and so on we just have to pass in the question as object and this makes it very easy to work with openai and Link Chain this is the most simple chain we can have we have one input variable and we pass everything to the llm and get a single output we could also pass the output from this call here to another llm chain and to do so we can use a simple sequential chain if we have multiple input variables we have to use the normal sequential chain I will first show you how to use the simple sequential chain so again first we make the inputs and we import besides the normal llm chain the simple sequential chain and we of course also import openai and the prompt template so now we create an LM just instantiated with the open AI class again and then we create the First Response template URL helper bot that creates a thank you response text and then we create another template you are an assistant bot your job is to make the customer feel heard and understood we've got a single input variable here for both templates called input and now we will create a prompt template so we will instantiate The Prompt template class and we do this for the second template tool now we have got two review prompt templates and we will first then create a review chain for the first template and then we will create another llm chain for the second template so what we can do now is we combine the Rayville chain one and the revl chain two to a single chain and we do this by instantiating a simple sequential chain we have to pass in the chains in the order we want to call them so first we want to call the arrival chain one and pass the output then to radial chain two and this is just to see a little bit more information what's going on this overall chain instance now has got a run method and since this is async we have to await it and then we will get a result back so we make one single input I ordered pizza salami it was awful but it will make two llm calls under the hood first the regular chain one and then the review chain two so and then we get a final result and we will just lock the final result let's run it here simple sequences chain and here is the first prompt we're entering the llm chain and then we see the second prompt and we can see this is the final output I understand that it has been an inconvenience to you it's anything else I can help you with so that's the final answer from the bot and as you can see you can chain as many llm chains as you want as long as you've got a single input variable for them if you've got multiple input variables that does not work and to solve this there are sequential chains which make use of output keys I will show you how to do this first we'll of course input every class again then we instantiate our model the llm and then we will create our first template here you see the template has got two variables you ordered this name and your experience was for example awful please write a review so this is the first template it has got two input variables and now we create a prompt template for this and we've got as before here we can see our two input variables and we also have to pass in here two input variables in the array then we've got our first chain we pass in the llm pass in the prompt and now we pass in an output key so this is important for the llm to know to which chain in it should pass the output created from the first chain here so now we create a second follow-up template as you can see the output key matches the input variable from the second chain so here we've got our output key and it matches again the input variable so this is our second chain okay then we've got the second chain and then we will create a third template again this will be with the review variable so we will pass in the output here to this template too and we will create a third chain and the output here is summary so what we're going to do now is we create our last chain and we want to pass the output from the summary chain to this template here so we want to adjust to translate it to German and then we will create a last chain so we've got four chains now with different output keys and different input variables the name's different and also the amount of input variables are different so what we're going to do now here is we create with the sequential chain um an overall chain and we pass in the chains as array the review chain the comments chain summary chain and translation chain we have to name the input variables and these are just from the very first template dish name and experience so no other input variables like review or for example summary only from the very first template and the output variables as you can see these are review comment summary and German translation these match the output Keys here from our chain and this is our complete chain and now we will call again the call method here and we pass in the dish name we pass it here as an object pizzas alarmy and experience it was all full and then we will lock the result so let's run node and then sequence.js okay that works as you can see with sequential chains you can even chain chains with different input variables and pass them around with output keys llms normally only respond with text sometimes this is not what you want for example if you want a review and you want to see if the review was positive negative or neutral maybe you want some kind of object which you can just copy and pass in for example to mongodb this is not possible as text and you need some kind of Json format and to do so you need an output parser and some special kind of prompt to achieve this we can use response schemas and output passwords I will show you how to do this in this file and again we import openai and prompt template and now we will need another class called structured output parser and this allows us to parse text to some kind of dictionary or object so from the structured output parser we call a class method called from names and descriptions and pass in an object called answer and then we want this value answer to the user's question so this is what the behavior we want from our llm and then we call the get format instructions method of the parser and get back some kind of text here I will show you how it looks like we just run node and then the passes file and of course we don't want the response here but we want the format instructions so let's run that again as you can see here the structural output parser tells the llm it should respond with some special kind of Json object form here and with type and some kind of properties and this already comes from the bank chain and helps us or tells the llm that it should not respond with normal text but it should respond in a Json format which is easily to convert to some kind of object in JavaScript we can take these format instructions and pass it to our prompt template we can do it like this where we will instantiate The Prompt template and pass informat instructions as variable we also pass in questions and now we've got two variables we've got the input variables here which is just a single input but we have to pass in an array of variables and then we've got partial variables this is only necessary when we pass in these format instruction so we do it like this we pass it as an object and then we will create a new model instance with calling new openai after instantiating this we will run the prompt.format method here and create an input variable and we pass in the variables inside the normal input variables we will not pass in the partial variables and then we call it here and then we've got this input object and we pass in the input object to the call method of the model and we will await the response which is just a string it is not a JavaScript object we have to call the parts method of the parser to convert that string which looks like a dictionary or a JavaScript object to a real JavaScript object then we'll just save it and run it so let's try that I have to again to delete it here okay now we can see what is the capital of France and as we can see here this is just a string but our parser is able to parse this string here to a real JavaScript object and we could now take this object for example and pass it to mongodb okay so far we only use knowledge which was already trained in the model training but in many cases you want a chatbot to use your internal knowledge base for example you've got some kind of database and you want to retrieve data from the database and use the retrieve data and convert it to some kind of human like text output you could query the whole database and pass in the whole output to The Prompt but the problem is that could be quite expensive because you pay per tokens and you could reach the maximum tokens for example the older models like GPD 3.5 turbo has got 4 000 tokens Max the newer models have got 32k but still it's limited it if you've got a large knowledge base these input limits are still a problem for you and have to be overcome so I want to show you how to overcome this in a kind of easy example and we've got this restaurant.txt where we've got some answers and questions so this might be use case for a typical q a bot where a user asks some questions to the bot and we want to extract the knowledge which answers the user's question by actually making a similarity search on the text and giving back the correct answer for this question the llm and let the llm take the text and actually make a real good and useful answer from this output so we cannot just take the whole text and store it inside some kind of database we have to store bit by bit because this has different meaning than this and this has got a different meaning than this so we have to store this and this and to do this we actually have to split this text element this text file in multiple chunks and this could be a chunk this could be a chunk and this could be a chunk length chain offers a standardized way and we actually will create no chunks from this and B can also not just put the chunks in the vector database we first have to convert the chunks to so-called embeddings and what embeddings are is kind of easily explained by the openai website here's the website and as we can see here we've got a text and this text will be passed to any so-called embedding model the embedding model is responsible for converting the text to a vector a vector is just a representation of text as yeah numbers as a list of numbers and now you can store this list of numbers this is a code Vector inside a vector store and for example this looks like this there's even a better explanation down there so we've got similar vectors stored in similar places in the database for example vectors which belong to animals are stored in this space and vectors which belong to athletes are stored here and then we make a query to the database and the query gets also embedded and now we make a similarity search for example we want to get the top five similar vectors in the vector database and we also know which vectors belong to which text so we can take the top five texts and pass the text as context to the llm okay now let's do it in code and first we will go to the indexes.js and we first will of course import here the config and then the correct classes and what we're going to import here are a text loader and a character text splitter we need the text loader to actually load our text file and save it in memory and then we will create some kind of chunks with it with the character texter after this we have to create the embeddings and we will use the open AI embeddings class for this and we will store the embeddings in the file store this is the vector store from Facebook and so we import the file store here from the files module so these are all our Imports and we can now create a new text loader instance a loader and we will pass in the path here to our file so this is the current directory and the file is called restaurant.txt so this is the loader and now we can load it so we load it from the file system in memory and store it in the variable Docs and now we will create a splitter this is a text splitter and we will create the chunk size the chunk size is the amount of tokens so normally 75 words a hundred tokens so you can guess this is around 150 words and we also use some chunk overlap to actually not use the whole context if we split one sentence directly in the middle so this is very helpful even though it will make our API call a little bit more expensive but AI embeddings are quite cheap so now we can use the splitter and split the documents with the split documents method of the splitter and await this and now we've got our documents so the documents have to be converted to the embeddings and we'll just instantiate the open air embeddings class so now we have to call the from documents method here from five store and pass in the split documents and also pass the embeddings and this will create our Vector store and we can save the vector store on our disk with the save method of the vector store instance so we just gonna call this now so node in exist.js as you can see here our our documents this is a class with a property called page content and these are many many splitted documents you know and these are all stored now in the vector store and as you can see we've got our doc store.json file and our files.index file so this is our Vector store and we can now use the vector store to run a similarity search so we convert a question to a vector and run a simulate research to the database and we retrieve the most similar documents from the vector store how to do this we will learn at the U Store JS file so inside this file we of course have to import the config function again then we have to import the open AI embeddings class 5 store and open Ai and in addition to this we will load another chain class here the retriever q a chain perfectly fine for retrieving data from a vector store and we also import here the load q a stuff chain this is a helper function here we also have to use for the retrieval q a chain we also have to instantiate that the openai embeddings class because we will convert the new query from the user to a vector tool and then we'll run a similarity search with this created Vector against the vector store so then we will load the file store with the five store load method here and we also will need the embeddings instance here to actually create the embedding for our question okay then we of course need a model tool and then we will instantiate our new chain the retriever q a chain we have to pass in an object here a combine documents chain and this is where our helper function comes in handy we have to use the load q a stuff chain and pass in the modulus argument here and then we also need a retriever this is the vector store and the vector store can be converted to retriever which makes it easier to retrieve documents from the vector store and then we also want to return the source documents here and now we will run the call method with the query when does the restaurant open on Friday so this is something which was not trained in the llm so the model has retrieved that information from the vector store and now we will store the result here in this result variable and we will just lock the text of this result so let's run it so we get back the restaurant opens at 11 A.M on Friday if we take a look at the restaurant.txt 11 pm as we can see our restaurant is open from 11 am from Monday to Saturday so this Vector was retrieved by the query here and converted to the correct answer by the llm and again to summarize that's the workflow you take a question run a similarity search against a very large database retrieve the correct embeddings and the documents from the store and take in the most similar documents and take them as input so as prompt input to the llm and then the llm will create a final answer so now let's take a look at memory so why do we actually need memory let's say for example you talk to a friend and you ask him how his holiday was you ask how was your holiday in Paris he answers it was very nice great food and so on and then you ask again can you recommend a restaurant there if your friend had no memory at all the there wouldn't make any sense to him and if you don't provide memory to an llm this is exactly the case too the llm would now lose the context of the whole conversation and only be able to respond to one single question and normally if you've got a chatbot you don't want that you want to remember the history and not lose the whole context of the conversation that's why we use memory okay now let's have a look at the chat.js file we import the config function and then we import a new chain the conversation chain this is a chain perfectly suited for holding a whole conversation with memory and then we import the chat open my iclass also a class perfectly suited for a chatbot so now we also import some helper functions these are not too important just some kind of new prompt templates the more important stuff is here the buffer memory class and the buffer memory class is able to hold the memory of the conversation with a in combination with a chain so now let's use it we create an instance of the chat open AI class okay now we will create a prompt for the chat instance here and we will use the class method from prompt messages here and we will set a system message this is the identity of the bot and now we will also create a new placeholder and this is the this is the history this is needed for the buffer memory and we also create a human message prompt template with just a single input variable because we will just input text there and then the buffer memory will store the whole conversation in memory so let's try it we will create a new chain with the conversation chain class and we pass in an object here memory which will be an instance of buffer memory and we will set the memory key to history so this memory key matches this placeholder variable then we've passed in our prompt and the prompt will be just this chat prompt and dllm will be the chat open AI chat instant here so this is our llm we pass it here now we've got our chain and we can just call the chain so what is the capital of France and we want the response for this and then we want to make a follow-up call what is a great place to see there and there only makes any sense if the llm knows that we talked about France before so let's console lock here the response to see if that actually worked and now let's wait for the final answer we make two requests with the API that might take a bit there are many great places to see in Paris so the llm knows that we just asked what is the capital of France and the answer was stored because Paris is true and there actually relates to Paris so as you can see this works and this buffer memory takes care of tracking the whole conversation and you actually as user only have to run the call method with a new input it's a very easy to build memory inside your own chatbot with link chain okay let's look at the last concept and this is a very powerful concept and this is the concept of Agents agents are LM chords which work like a recursive function so a function that calls itself over and over again until it gets to a final answer so we're going to show you first how this works and the llm uses a special react framework under the hood so this has nothing to do with the react framework in JavaScript it stands for reason and act and as you can see the input of a user is split into thoughts and actions so the llm is forced to think about an optimal strategy to solve that problem and for example if one of the tools is a calculator it will use the tool to get the correct answer there are many Tools in link chain already built in many of them you many of them require an API key so we will use the calculate example and I will show you that in code now okay first we import the config again then we import the chat opener iclass this will also be used for an agent and then we use the initialize agent executor with options function to create an agent and then we also import some kind of tool here and we import the calculator we also have to set an environment variable here called Lang chain Handler and we will set it to link chain and now we will create an instance of the chat open AI class as we used to do so and we will also instantiate the calculator we store that in an array the instance of the calculator because the agent expects an array of tools now we can call the initialize agent executed with options function pass in the toolsis argument and also pass in the model we pass in the chat conversational react description and this agent type makes use of this react framework I just showed you okay now we can run the executor we will ask what is the capital of France so nothing math related and then we will just call the call method of the executor and pass in the input here and then we get back a result so so before actually running the code we will just create another input here what is 100 divided by 25 so this is something we should be able to solve with the tool and this should be solved without a tool then we can just call the call method again and pass in the input and then we will just lock the result okay now let's run it and we can see the agent in action so let's try it as you can see here is the prompt template from the agent and it works its way through we get a lot of output here much more than in in Python and okay pretty hard to see but at the end we can see here the result of 100 divided by 25 is 4. so it got it correct and I'm pretty sure it used the right tool to achieve that goal okay that's it from this introduction to link chain if you liked the video feel free to subscribe to my channel and give the video a thumb up to actually help me with the algorithm thank you very much bye bye