hello guys, welcome back. In this video, let's talk about Lang graph studio. In my earlier video, I showed you what Lang graph is and how to create agents with Langra. So, in this particular video, I will show you how you can install Langra studio on your machine. And just to point out already now that as of August 16, it only works for Apple silicon Macs. So, in the future, maybe there will be support for other machines also. So, yeah, by the end of the video, you will see something like this on the screen because I will be taking the same example. On the left side, you can see the flow of the agents, and on the right side, you can see the output of that in the UI itself. Let's get started. Okay, first thing first, what is Langra Studio? As I said, it's the IDE, but what is the main purpose of that? Langra studio provides a specialized agent ID for visualizing, as you can see here, we can visualize it interacting with and debugging complex agentic applications. So, I will provide the link here you can

just go through here, and there are other basic information. Okay, what is Lang graph? When was it introduced? And so on. And here is the main part of this Lang graph Studio. You can go through this. And by the way, we also need to have the account of Lang Smith, and we need to also have a Docker. I will show you how to do those things. And then you can see this is how it shows. There is a GitHub repo. Here are some of the videos that they have uploaded already in the blog post also. So yeah, now let's go into the main Langra Studio GitHub repository. And here, this is just the information that I just mentioned to you before, and it is in the beta phase, right? And what we need to do is first we need to have the Lang Smith account in order to use this. So it is verified from the Lang Smith. So if I click this Lang, if you don't have the L Smith account, you need to sign up for this, right? First, I will right-click this, open in a new tab, so it will be opening.

here. I already have the account, so maybe I will first log in. Okay, now as you can see on the screen, I'm already logged in, and there are three different Pro projects. You just need to first log in into Lang Smith so when we start our Lang graph Studio, it will authorize from there. So that is one step. Let me go back, and then here it says download. So here is the link to download. There is the DMG, so you can just click this, and then it will download, and it's just normal downloading as in a normal computer. So you can just click this. Before that, it says here Langra Studio requires Docker compose version 2.20 Plus higher, so you need to install Docker first. Here is the link also being provided. You can go through this, but yeah, just go to the Docker website and to download the Docker. Then we will have the Docker compose already there, right? Just to show you, let's see the Docker compose version. So I have here version 2.29, right? So we are good to go, and yeah, I

have already installed Docker, and then on the top, you can see here is Docker already running. So, you need to, of course, run the Docker. And what is the next step we need to do is to use Graph Studio. Make sure you have a project with the Lang graph app. That is one requirement. Also, you cannot just open Lang graph studio and then create an application on top of it. But as of now, you need to have a project with the Lang graph app already, and then you can import that. So, that is how it works, and we will be taking this example. It is mentioning here, right? We can click into this example now, and it takes us to the Lang graph example. So, I will be replicating this into our local Lang graph studio. And by the way, here are different steps how you can go through it. The Lang graph cloud is also something that is there, but we are not going to go through there. But I will just follow or walk you through this project in the local machine. First thing first, you need to clone this L graph.

example. So, if I go here, I have already done this Lang graph example. I will go inside the Lang graph example just to clone what you can do is click here https or if you have SSS set up with your GitHub account, you can just copy this and then go to your terminal and here you can do get clone and then just paste the thing that copied. So, now it says Lang graph example, right? I will open this in the VS code and by the way, you can open it in any IDE you want. So, now let me first open this so it's easier for you to explain. So, here the first thing that you need to do because this in this example what we are going to do is we are going to go through the web search. We are going to do the web search and then providing us the answer, right? For that, there are some API keys that we need but here is some API key we need to do and by default there is this anthropic Tav and open API key. We are going to use the open AI and I'm not

going to use the anthropic API key. What we can do is, if you go to the T, or you can do already from the ID. Also, if you are, if you prefer ID, or you can just copy this file or rename it to EnV. You can do any of this copy or rename, right? So, what I have done here is, I have created EnV. Also, if you go to the terminal, you can just go here and do move. EnV and EnV. It will rename that file Tov. Or, if you want to copy, the command is, of course, I hope you know, it's copy, do EnV, and do example, example, and do EnV, right? You can do any of this, whatever you want. So, what is inside this? I have just here, if you go inside andb, I have this API keys. I'm showing you this because I'm going to revoke this. But then, I have now, I need to provide the API keys, right? First, let's go and provide the API key, so it's easier for you also to understand what.

things we need to do. So, I will go here in the API key part. First, I will go with the Tav AI. So, I need to first sign in, right? I will first sign in and get back to you, okay? So, this is where, after you log in or sign in, this is the page where we can get into, and this is the API key. I can just copy this API key and go back to our tabil API key, and I will just go here and paste it, just go here, Ctrl V, controls. And now, I need to go to the open AI API key also. For that, I will provide the link, by the way, all the links there. Open AI API key account, of course, you need to have an account for this. And one thing just to point out here, there was before, we can just create the API Keys. Now, also, we can create it, but then it says here, Use Legacy API Keys. We can create here already, or it says the Project Specific API keys. So, this is the new way to isolate the API Keys based on your

project here. I have the default project. You can just go here, create a new project, and create the API key just for that project also. So, I will just go and create here for now. So, this is just for L graph. I will go in the default project one, and I will say, by the way, there is also the restricted one, read one, if you want to. If you go to read one, it just says read one. If you go to restricted, you can restrict some of the endpoints here, right? But I will go for all and create the API key. Once this is done, I will copy this. I will go back to the VS Code, and here I will replace this with the newly created API key. I will save this now, right? So, the environment variable part is now completed. There is this JSON file also where we can see, okay, dependencies is my agent, and graph agent is pointing to this my agent agent.py. You can see here agent.py and the graph. So, inside this, we have this agent.py, right? And if you scroll down, you can see

There is the graph, so it is just pointing to the different dependencies, and the environment is Dov, right? But I can now close this and open the Lang graph Studio because I have already installed that. So I will just go here and say Lang graph studio. If I open this, it didn't open, so I will go here. Okay, it's opening here now. You can see here there is this Lang graph studio, and this is the example that I have already used, but I will close this for now just to show you. And here in this settings, you can see I have already logged in into the Lang Smith. So for you, you can just log out, or in the beginning, it will not be logged in, right? If I let's show you that also. So now it says here when you start, it says reason you need to choose which reason. For me, it is EU, so I choose the EU part. And there is the Lang graph log to the Lang Smith to continue. I will click the log to Lang Smith, so you can see it points.

to the EU Smith Lang chain.com, and I will log in and then get back to you. Once you go through the process, you can just go here, and now it says log out from Lang Smith, meaning that we are already logged in. And now what you can do is just click to select or drag and drop the folder. So we can go here, and I will take this Lang graph example, and I will just open it. So now it will be just opening that particular project. And now you can see I have Docker installed. If you don't have Docker installed, then it will be throwing you some error. You need to install Docker because all the things that you can see here, it is pulling the images, right? And all the different things is being done because we have Docker installed. And now when this is doing the things, if I go to Docker, let me open Docker, and I will show you because all the things are here now. L graph example, right? So this is 5 days ago, and so on, and here in the

volumes. You can see there is an L graph in the image. See, there are the L graphs 3 seconds ago, created 4 seconds ago. So, it means that what we are doing here, it is doing under the hood into the docker, and then that is being reflected here. So, yeah, you can see here, this is the same example I showed you. I have taken from the git Hub repository provided by Lang chain, right? So, here, there is the start, there is the agent, we ask something, this is the if, if it needs to go to this action, then it will go through this one, and then it will go back, and then this is the end. So, I have explained this in my previous video also, how we can create these nodes and edges. Just for as a reference, this is a node, and these lines are the edges in the graph. So, yeah, this is just the UI, as you can see here, and this is reflecting the code that is being shown before, right? But it's a simple example. If you want to go also

you can open in VS Code. You can click this one, and it will open this in VS Code. So, whatever we now change here will be reflected there. I have already provided this ENV, all right, and then there is this requirements, there is this agent. So, this is the main file where we need to be going and doing things right here. You can see I have uncommented with anthropic and the OpenAI, but if you want to provide different models, you can just go here and provide models. And by the way, you need to have the API key also. For now, I have just provided the OpenAI. I will go back to the agent here. The UI is quite simple. Here is you can provide the, let's say, ask a question from here. So, if you go here, you can ask from here. I can say hi, and then I can submit it. And before that, if you go to this configurable, if I click this, you can see here the model name, right? I have chosen just the OpenAI for this demonstration purpose, but here if you

had other models also. You can choose which model you want to run. For example, you might ask different questions and test with different models. Also, that is also one option here optional. I can even choose this. It's the same thing because there is just one model under the hood. Now I can say hi, and now you can see the flow right here. It goes here, and then it completes because here we don't need to go through the tools because hi, and you can see it also. If I go here, it shows here, here. It just goes to the agent, and then it ends. Hello, how can I assist you today? And we are using this API key, meaning that we can search into the internet also, right? So what we will be doing now is I will go here, and I will be asking what is the weather of Hink Key, right? It needs to find the weather of Helsinki, meaning that the LLM does not have the latest information of Helsinki. It needs to go through the tab API, and it needs to search for the weather and provide us.

the answer right. Let's see what happens when we do this. I will just Summit here. So now, as you can see, here it goes through the agent. Now it goes to the Tav shorts API. It says query current weather of Helsinki a name this one. It goes through this weather ai.com. And here you can see the current last update 248 830. You can just find all the information from that API. And it goes here location Finland Helsinki sou all the information there. And here it provides the if you go here for example if I go what is the weather that is the start and there is the AI right. And if I go here you can see it goes through the action part. And if I scroll little bit down and this one it goes back to the agent and it goes to the end and then we get the answer. So the temperature is there this it's sunny and so on so is there anything you would like to know. So this is the simple flow that we want right. Okay now let's go and

see the interruption part also, so here is called the interrupts, right? So what you can do also is, instead of the answer flowing into the different agents, for example, let's say that you are creating an agent with, let's say, 20 tools, right? And you want to interrupt in some particular tools so that you can verify the answer, and you can go and see, okay, continue, right? Just for this example, you can go to these interrupts and choose all of them to interrupt, or you can just go to this, and there is ADD interrupt, right? And there is ADD interrupt. I will say here, and let's say that I want to interrupt in the action part. Let's see what happens, right? So I will say here, okay, go here, add message. I can just say here, what is the weather of SF? Let's say San Francisco, and I will submit it. So now it says, what is the weather? And now you can see here, it goes through the tab SS results, and it says continue. So I can say here, okay, continue, and then it goes there. So it says again, I need to go

and do the next thing right. I will say continue, and then it goes now back to the agents, and it provides the answer. So, you can see the flow, how we can, let's say, control based on these interrupts. And when you add the interrupts here, also, you can remove it from here, or you can just go on top and then do this or for clear and so on. Now, you are doing some prototyping here, and let's say that what is the weather of SF. You want to change already here instead of going back and forth, right? I will just go here. I will say SF. Instead of SF, let's say I want to go with Kathmandu. That's it. And then what I can do, fork this, so you can see that I'm seeing here what is the weather of Kathmandu. It goes through this, and it provides the answer. Before, we had these interruptions or interrupts here, but now we don't have the interrupts, and it just goes through it and finds the weather of Kathmandu. It is

28.1 right so here you can just go through this rerun it just reruns it. This is the edit as I showed you before also, and here you can see view output at the checkpoint also. So it says here okay values here high and all the different things. So this is also one good part right. And then here is this open run in the Lang Smith. So I let's say that you want to visualize this into the Lang Smith. How to do that also, and here is already mentioned okay how many were there 592 promp tokens, zero completion tokens, and time to first token is 887 milliseconds and so on. So now let's see that what are the other things before going to the Lang Smith. You can just go here on the right, you can view this in a Json also, or then pretty, or you can even go here and say the new thread. So it opens in a new thread. You can go to this thread here, and you can see we have the previous thread here, and you can see I have

tested many things before also, and I can go to this thread, and I can go here and start exploring again from here. Okay, then now let's go and see the traces of this into the Lang Smith, right? So here, there is this open run in the Lang Smith. Let me click this one. So now, okay, it says that it cannot go pretty not found, or maybe I don't know the link, maybe it's not showing there. But let me open from the Lang Smith itself, because there should be the traces, because we configured that into the Lang Smith, right? I will close this one. I will go to the previous one. So this is the one where we configured, right? I will go to this project section. Here, there are two projects, and here, there is this default one, and there is this Lang graph tutorial, right? Let me see from which one I provided. I forgot the one that I provided. Probably it goes into the default. Let me see J 168 168. Yeah, so this is the one. So it is going to the latest one, and now you can see here the

current weather. All the things can be seen in the Lang Smith. So, I said hi. How can I assist you? What is the weather of Hin Key? It goes through this API, and on the left side, also you can see which steps it went through and what is this, how much time it took, and all the different things. You can see this is the output, this is the start time, this is the data set, and if I scroll to the right, also you can see that now what is the tokens and how much does it cost in order to run that particular thing is also mentioned here, and what is the first time token, and so on, and also the metadata. It says graph ID. If I scroll it a bit down, and if I click here, you can see all the different things. If you go to the metadata here, you can see all the different things being shown here. So, yeah, that is how we can view it into the Lang Smith. Also, this is a simple example, right? But I hope now you get the idea how to go through this and

also project settings, and there are also the logs. If you want to see all the different logs, what is going on under the hood, you can also go from here. And this is also the project settings. You can just go here and say, Okay, which version of Python do you want to use? Python 3.12 or 3.11. Dependencies, it's shown there. It is taken from this particular code, and it is pointing to the environment variables. Okay, you can save and restart, or then you can just close. So yeah, I hope you get the idea of how it works, and I think there is still something to fix here. For some reason, this open drawn in the language Smith is not pointing directly to the configured language Smith. We need to go to the website itself and then look into it. But yeah, this is just in the early beta phase. So yeah, that's all for this video. Thank you for watching, and see you in the next one.

Installing and Using LangGraph Studio | First Agent IDE

Hi, I am one of the data enthusiast like you ! On this channel, I teach data science as well as recent AI trend (LLM)  stuffs in the most simplest manner possible.

Currently, video is one of the most important and go-to content type online. I aim to make Data Science Basics a go to Youtube Channel for videos surrounding data science stuffs in a practical way.

If you find the content helpful then consider subscribing.

For business inquiries email at: basicsdatascience@gmail.com
💼 Consulting: https://topmate.io/sudarshan_koirala


Installing and Using LangGraph Studio | First Agent IDE

Installing and Using LangGraph Studio | First Agent IDE

Scripts