Langchain Javascript Coding Tutorial | Getting Started | Node.js Quickstart

hey everyone welcome to Star morph where we talk about artificial intelligence and web development today we are going to go into a coding tutorial getting started in Lane chain JavaScript so I'm going to start out the video by showing you some awesome stuff that you can build with Lang Chan and talking about what it is as a framework then we'll go into the documentation and see why you want to use linkchan because of all the amazing tools that are available in the library and then we'll get started on running and building a script that uses Lane chain to interact with the openai API and generate some code for us and I'm going to show how that script creates the output first and then I'm going to provide you with a GitHub template that has the script ready to go you just have to start it up and it will run the lane chain script and then we'll go into how to actually build that script from that template from scratch in case you don't want to use the template but instead want to integrate lanechain into your own node.js application so let's go started all right so I've been playing with Lane chain a lot and one of the awesome things it can do is you can create a gpt4 bot that is given documents and you can create an embedding from the documents and have it get more specific knowledge and be able to reference um specific you know areas that you want it to be an expert in so here's four examples of bots that I've been building this one here is a code assistant uh like a senior developer and I've actually been talking to this bot a lot I probably talked to it for like two or three hours yesterday because I've been giving it documentation and information about how I build websites and what tools I use and how to use those tools and now it's able to give me really helpful advice on how to help code and I've been learning it's been like my pair programmer where I write some code and there's a bug and I'll say hey why is this not working in my next JS app or you know how do I how do I do a link chain Vector storage in Pine Cone or in chroma and you know it's a really good learning tool and it's amazing what you can teach these Bots to do um through these embeddings in and loading the documents in and so that's one example of what you can do um you're welcome to use this bot if you want to talk to it about Lane chain stuff and another great resource is there's a Discord bot and the lane chain Discord and that Discord bot can also it reference like Lane chain documents and it gives really helpful responses for debugging as well so that's another option so let's go over to the link chain docs and take a look at what's available in this framework and I believe they just made a huge update to these docs today and I think I see like a lot of new stuff in here so I have to dive in and I'm excited to see how this framework is building because it's been updating like really quickly on Twitter I see them constantly coming out with new releases I feel like this ecosystem is blowing up right now and for good reason because working with large language models um in into web applications is just such a cool crossover and it's giving us all of these new abilities and so Lane chain is a toolkit to to do that and so let's go into some of the examples of things we can do here so one important thing is there's a concept of a document and that's how we're going to load in a part of how we're going to load in you know the company specific documents so in the case of code chat that might be documentation or instructions on how to write code um this one I'm trying to learn more about software law so I gave it some like research papers and philosophies over software law and so I can say hey Cato tell me about different licensing agreements for software I actually gave it githubs like GitHub has an official site for software licensing agreements and I gave it that website um so it has information on the different the pros and cons of each or the like affordances of each software licensing so I want to I need to format this a little bit better but you can see here that it's starting to give out some licensing examples and talking in detail more about them so point being that you can give it information and then have it learn more about that information by loading in the documents okay so in order to do this in order to load in the documents you want to create an embedding and this is a wrapper around the open AI API that creates an embedding we also have some tools to work with different large language models on open AI on hugging face on Co here so people ask like why would you use Lane chain can't you just use the openai API and it's like yeah you can but link chain also has a lot of other tools to work with large language models and it's great to have those tools and the flexibility to really you know have a whole ecosystem of of different tools um so that's some of the llms then we have a concept of a prompt template which is really cool I'm really optimistic on the field of prompts becoming more developed and more tool kits coming out for prompting and actually have an idea for a library that I want to build that maybe I'll like open source and let people use this like an npm package or something to kind of work with prompts um but prompt templates allow you to like set almost like a const where if you want to use the same format of a prompt in multiple places you know you're doing multiple calls and you always want the prompt to be similar then you can use the prompt template and then load that into the chat Vector storage is another toolkit that is needed for creating the embeddings and then storing um the documents so that's another toolkit we have available here linkchain also has some abilities for memory that can give the Bots a better experience because they can reference past messages and start to learn um you know how to interact with the current user better based on their past messages and then there's also a concept of change chains which is like a sequence of events um that can use large language models and then there's a concept of Agents and agents I'm still wrapping my head around a little bit but basically I think I believe they perform like a specific task using large language models and there's a lot of toolkits um are we on a different docs now yeah there's a lot of toolkits that and different tools that these agents can use so for example one of the tools we used in another video was an agent that interacts with the zapier um natural language API that just came out and so these are getting updated really quickly I mean you can see here there's a chat GPT plugins and that came out like a week ago so there's already Tools in link chain to work with chat GPT plugins so that's pretty awesome anyway we could go through this for like an hour so let me jump over to getting started on doing a script all right so we're going to go into this repo here we go we're going to go into this quick start Reaper Lane chain JS quick start and this is going to be available on GitHub I'm going to put this in the description and this is the quick start here so just to show you the full process you we would go to this URL and then I'm going to clone this repo down go into the repo we run npm run or npm install an npm run Dev oh I made a mistake okay we do have to do something before that we have to create our environment variable file so I'm going to go into one of my other projects and I'm going to bring that environment file into our lane chain quick start and the environment file that's where you store your open AI keys so you don't have to publicly expose it in the app all right so now that we have the environment file in there we can run these commands okay now it's going to run this Lane chain script that we have okay so we just ran that script and as you can see it says file save successfully and we got this response import react from react so this right here is a basic react component that returns an H1 tag as you can see there's a lot of formatting in here that's not ideal because we're kind of closer to like the prompt uh layer I believe they call it closer to the actual raw output from uh GPT so there's included in the script I'm about to show you I wrote a little script that cleans this all up and then turns it into a regular react component okay so that's what the script does that's how you would run it on your machine if you want to like start with this you go to that repo and then run that command we just did now let's go into like what's happening in the script and how to code it and then we can set up the environment and do it all from scratch so let's go in here and I also followed a blog post to help me set up the environment and I'm putting a link to that in the GitHub readme um and I've just kind of Consolidated some of the blog post commands here into a readme that has the steps and these steps are only needed if you want to like actually integrate this into your own project this template already has completed these steps so as we just did all you need to do is this step here if you want to just run this template all right so let's go into the main script here this is the main script that we just ran that generated that code component and the first thing we do is we import the dependencies we need then we import this dependency um these I believe came from the lane chain documentation they have examples and I tried a few examples and I decided this one was a good basic template and so they provide the Imports that you'll need depending on what you want to do in Lane chain if you're trying to you know create an agent see they just updated this whole documentation so I still have to learn it but here's like an example so they provide the Imports and then they provide a lot of the functionality you know you need to do a lot of different things with link chain so going back to the code we're going to take we're going to use open Ai and we're going to use a prompt template in this example and then we're also going to use a structured output parser and that allows us to structure how the output is going to come back and I wanted to create a code snippet so I wanted it to be a specific format and the parsing helps with removing a lot of the stuff that you don't want in the response okay so we import our dependencies and then next we I imported my I chose to use this this is a library.nv that allows you to load in your environment variables from another file so that's what I'm using to feed this my openai key okay and then this is kind of badly formatted this should be you know up here but um chat openai is another thing that we're bringing in from langchain and also from the lane chain schema Library we're bringing human chat message and not using system chat message okay so now we have an A sync function and we have a prompt here give me a next JS component that renders an H1 tag with the text star morph so that's what the output we got was now here I made a script that takes the response from this open Ai call and saves it to a file named response.txt okay because I wanted to just save you know okay so this is a script here to remove some escaped characters I was playing around with like how to get a cleaner format back from removing yeah all the stuff we don't need in the response and let's see this function here okay so this is actually after we save the file this is another function that runs and it cleans up the file so it calls this remove Escape characters and that's what takes this kind of not ideal output format and you know with these characters and turns it into just the the correct um react component so that's that then we call the process file and then we just call this async function that goes to the open AI API so as you can see this is a really basic uh call to the openai API we just kind of initiated a new chat um you know you could put more parameters in here I believe like your model that you want to use and a token limit uh like a Max token and you know all the settings that are in the open AI API or rather are in yes I believe this is the format of the open AI API um not the link chain and so yeah it's a pretty basic call we're just saying you know here's the prompt um please use GPT to do this and then we'll save the file and then I'll just show you that in the directory here we have this output.txt file and response.text file so I believe it's the output.text file that's the clean version so there we go we have a little react component here and you can imagine you could make this prompt a lot more descriptive and generate some pretty cool code and that's pretty awesome so that is why we're using Lane chain and I hope this was insightful as to like how to get started with a line chain app um I know a lot of people who are more on like the front end developer side might not be as comfortable setting up a node project um rather than just running in the browser and so that's why I'm providing this template to get started with the node um but then this is also the yes exactly how this template was built so if you wanted to you know learn a little more about building the node environment and practice doing that then you could go on the template and follow these instructions and this is how the template was created setting up the node project with typescript yeah I also again want to mention that I got this node environment from setup from this blog post here so thank you to whoever wrote this blog post because it's really helpful and they actually have I think this is like a whole community but there's definitely I've seen a few other lane chain um articles on here so shout out to these guys and um yeah I think that's a good place to stop for this video and I could go more into like setting up the note environment or in future videos I know you guys are really interested in making the Bots um and training the or sorry not training but uh creating the embeddings and giving the the documents context on the Bots uh so I wanted to start with a basic tutorial on how to create the environment and create a basic template that has Lane chin working and then in the next part I'll expand and we'll build something even cooler um you know working on from the template uh that we have here today if you have any questions about you know any of this um I try to respond to every single comment and I really you know I like I like talking to you guys and also I just want to say like the past few weeks if I've been stuttering in this college because I haven't been sleeping because these past few weeks um one of my videos went really it did really well and so many people have been reaching out to me and it's honestly been like life-changing and um I've just been having so much fun like meeting all of these new people who are interested in Ai and keeping up with all of the stuff that's happened in the past week I mean like you guys know like all of the tools that have come in up so thank you guys for watching and for um you know connecting and it's been awesome building with you guys and um yeah thanks for watching if you want to reach out to Star morph if you need help with doing this stuff then please reach out to Star morph because we are working with these framework and um building websites that are utilizing llms in websites for clients and specifically in this bot I have a lot of features that I'm working on integrating to create products with this and improve different ux and different you know functionalities in here so I'm really excited about the updates that are coming to the Bots that I'm working on and some of the projects that I'm working on in Star morph and also the projects that everyone else in the lane chain and just in the web dev Community right now is just so awesome seeing all this amazing stuff coming out um and what else like there's just so much awesome stuff research new projects new models so um yeah it's been really fun and again thank you for watching and I will see you in the next video

Channel: StarMorph AI

Views: 17,605

Keywords: langchain javascript, langchain tutorial, langchain js, langchain coding tutorial, langchain ai, node.js tutorial, gpt-4, large language models tutorial, openai api, openai api tutorial, write code with gpt, how to use langchain, langchain introduction, gpt-4 coding tutorial, embeddings, chroma, pinecone, vectorstorage, prompt engineering

Id: zAnf6PPnvLg

Length: 18min 9sec (1089 seconds)

Published: Wed Mar 29 2023