Agentic AI Project in LangGraph | Build Lovable Clone

Key Takeaways

We are going to build AI software engineer today. You have heard about Devon AI and lovable where you just give a prompt and it will build a fully functional software application for you. In today's video, we will build this end to end agentic AI project where you just give a prompt such as create a calculator web application and it will generate that application for you along with all the code. You can say create a todo app and it will build the todo app for you. This project is going to look pretty solid on your resume if you are building agentic AI skills. I would like to thank Jet Brains for sponsoring this video. In Pycharm, they have released some amazing features such as AI playground, AI agentic debugger which is pretty useful when you're building agentic AI project. We will see them in action during our coding session. We are calling our project coder buddy and for text tech we are using langchain lang graph gpt open source model and crop cloud so that you can call llm for free and it will look something like lovable where you just give a prompt like this and it builds a fully functional app right so here if you look at this app it will allow you to you know create new projects uh it's like fully functional app and it gives you a code as well so ours is a learning project. So of course it it won't be as fancy as lovable. But this is one of the application that we created. So when you give a prompt create a to-do list, it will create this. You can mark to-do items as complete. You can delete uh the items. See you can modify the items and so on. If you say create a calculator web application, it will build a fully functional calculator where you can perform all these operations. So we are going to inject this prompt through a command line and it will generate this entire trace. We will look into the AI agent debugger as well and when that project is generated you know it will generate the entire codebase. So you have your HTML files, CSS files and everything else. Now folks we going to use lang graph. So in langraph we will generate some nodes. But before we discuss about the nodes, just think that when you are working on a software project, if you're a software engineer, if I ask you, okay, create a web application, what will you do? First, you will do planning, correct? So, first you are going to do planning. In the planning, you will list down all the features, correct? That okay, I need this XYZ feature, etc. Okay. So if uh I had to make it more concrete, you will have this planner node. So when you are creating a lang graph graph, it will have for planning, it will have a planner node. So you give your input here and it will do planning. It will uh come up with all the features. So for calculator web applications the features will be okay you need a clear and backspace functionality you need responsive design you need user-friendly interface with with basic operations so these are your Jiraa stories okay uh this is your task breakdown basically and if you're a software engineer you will understand what what I mean by Jira story so you do all of that you also in a planning phase you will figure out what is my text tech you want to use Python you want to use JavaScript etc and then description. You will also come up with rough file structure that okay I need index.html that should have HTML structure of the UI. You need style CSS where you should have the visual and look and feel of your calculator. Okay. App.js for JavaScript logic for handling input etc and so on. And after planning the next phase let's say you have planned everything you know if you're working on big project you will have this architect right so architect what they will do is let's say there are three features so architect uh and for these three features you have those files right index html whatever architect for those three features will give detailed guideline let's say you are working with a junior programmer This architect can be a senior programmer too. They will and let's say the third stage is coding right coding. So they will say okay index.html do this do that they will give the instructions for each of the files and coder will implement this code right. So they will actually write the code. So if you look at the lang graph graph that we have there will be a planner then there will be an architect and then there will be a coder who will do coding and then it will end. So this is going to be a simple graph in langraph and if I to show you more concrete details on architect they will take this file list okay this particular file list from a planner and they will add details. See here planner just said okay this is the UI but they will add more details such as as if you are spoon feeding a programmer who is sitting next to you usually it's not good but let's assume you're doing that you will say okay add this link the style set include the script at the end of the day you give all that details because here our programmer is AI you want to give a specific details to AI so that AI doesn't make mistake you know it doesn't go out of control and there is some kind of explanability you can trace you know what's going on. After architect comes the coder and coder will take these steps and convert it into actual code. So see here you are just giving instruction like okay do this do that but coder will write the actual index.html style dot CSS and so on. We will be using PyCharm as a code editor. You can install it for free. Just say install PyCharm and then download this version. It is a unified version which comes with 1 month of pro included. Now we are going to try some cool AI features including AI playground then AI agent debugger etc. So once you have installed PyCharm what you can do is you can go to settings and in the settings go to plugins and in plug-in type AI agents. So you see this AI agents debugger. I have already installed it but make sure you install it because this will help us in debugging and in building our code in a very smooth fashion. We will use gro cloud to call llm for free. So just go to console.gro.com and login using your Gmail ID etc. Then go to API keys and create a new API key. Note it down. This is the API key you will be using throughout the project. They offer variety of models. You can use any model actually. But we are going to use this GPT opensource model. To begin the project coding, I will create a folder for this project. I usually keep my code in C code directory. Here I'm creating a new folder called app builder. You can give it any name. And then I'm going to use UV as a Python package manager. Just Google install UV. You'll come here. This is a replacement for pip. Using UV, you can manage your project, install dependencies and so on. And it is super fast. Based on your operating system, you will pick a command. So I'm on Windows. So I will just copy this command. And on Windows, just launch Windows PowerShell. So I have launched PowerShell here. And here you can copy paste and install UV. Pretty straightforward process. Now go to your git bash. Okay. And here you can see that this folder is empty. I will run a command called uv in it which will do the basic UV initialization. So it has created main.py which is just a empty file you know with hello world program. And then you have pi project.comtoml. This is sort of like requirement.txt which will contain all the dependencies which Python version you are using and so on. Let's open this project in PyCharm. So I already have PyCharm open. So I will just open a new project called Code App Builder. Okay. Select a folder and I will open it in a new window. If you're launching PyCharm for the first time, it will show you that popup where you just select that particular project and here first thing you need to do is make sure your Python interpreter is correct. See here you see let me just show you uh read the tool tip Code app builder v environment script python.exe. Okay. So that is the interpreter that I want. Now I don't have v environment here. So for that let's uh first add the dependencies here and we're going to add the dependencies from our GitHub on GitHub I'm calling this project coder buddy you can call it anything and in pi project.comtoml see these are the dependencies so these are the python modules that you will use so control arr c and just copy paste that file and then run this command uv sync So what it will do is it will install all the dependencies which are mentioned in pi project.toml. So now if you look at our project it did two thing it created uv.loc which contains all the nested dependencies. So if you need grock a gro will also have further dependencies on like 10 other python modules. So u.lo lock is a aggregate like all the modules that it contains and then it also created this v environment and that is the interpreter you want to have in your project. Now let's say by default if you don't have that interpreter just say add new interpreter add local interpreter select existing and select that particular folder. So you will go to CC code app builder go to v environment scripts and select python okay and click on open. So that should be your default interpreter. For me it is selected that's why I'm just canceling out. But in your case you have to make sure that is your interpreter. See here my interpreter is so C code uh I think my interpreter is wrong it's auto auto builder actually no it's not wrong it's it is app builder v environment script python.exe exe okay and if you okay configure okay why is it saying this okay configure actually it should be okay somehow I I don't know why why it is doing this but let let me just select it so C code app builder v environment scripts and python this is the interpreter I want okay now it will take some time to update index and so on and then run it and see hello from app builder. So my basic project setup is done. I will also add env file because we need it for our API key. So just say env here and here you're going to specify your I have this key here. So let me just copy gro API key and here you will specify your key. Okay, this is like your password. So I'm assuming you have specified your key and just close this file. The way I'm going to structure my code is in main.py we will receive the user input on what kind of app they want to create and all the agent related code we will keep it in a directory called agent. So I have created that directory and let's create a file called graph. So remember we are using lang graph and the graph that we will create in lang graph will be maintained in this graph.py file and to begin with I will first test calling out llm. Let's see if the basic llm call works. So from langchain grog you will import chat grog and you will say llm is equal to chat gro and here you will specify your model which is your openi gpt oss 120 billion parameter model. This is an open source model from GPT and you can just simply say okay let's say llm dot invoke this is how you call llm and you can say who invented kria yoga answer in one sentence okay and you're getting a response and you can print the content of the response. Right click, run. Ah, see I need to do the uh loading of that API key. So I did not do that. So let's do this. So from uh dot environment import load environment. So I want to call this method. So what it will do is whatever keys are specified inv it will load it into the environment variable and see the beauty of PyCharm's AI assistant. When I imported the module immediately it is showing me this. So I just hit tab and it will call that method. Um using AI assistant you can boost up your productivity by 5x. Okay. So right click run this. See kria yoga was revealed by whatever right mahhat baba gi lahiri mahashai there's a famous book called autobiography of a yogi if you're interested in spirituality you should read it anyways so my basic wiring my basic llm call is working okay now let's assume I want to extract price and eps from Nvidia's quarterly report and I have just simple one line of report in this case I might want my output to be a dictionary or some kind of class you know like some properly formatted output which says EPS is 2.3 and price something like this you know I want this output to be in a structure format so that my downstream processing can consume it and can make good use of it okay so how do you do that because right now it's just printing this big text with with some content so in lang chain there is this method called structure ed output okay with structured output where you can specify your schema and if you specify this schema it will output it in this format so let's make use of that you will say llm with structured output okay with structured output and then dot invoke and here you are going to specify your schema okay so what is my schema the schema schema can be a class actually which you import from pientic base model. So schema is a class which is derived from pientic base model and it has these two elements price and eps both of them are float. Okay. And now let's see what is the output. So right click run. Now the output is structured. It is an object of this class. So you can right click debug it. That way you will see that the response is an object of class schema. See you see response is an object of class schema. It has a property called eps another property called price and so on. Now this way your output is in a well uh structure format. In our case, the user prompt is going to be like a okay create a simple calculator web application. This will be the user prompt. Okay. And what will happen is our first component will be planner. So planner will plan out the engineering project. So let's write a prompt for our planner. Okay. So our planner prompt is going to be this. You are the planner agent. Convert the user prompt into a complete engineering project plan. And user request is this. And then so you will have some kind of schema which you will call it a plan. Okay? And we are going to define this plan by the way. And that plan you will specify here. And here you will specify your prompt. Okay. Now what is going to be the structure of this plan? So for the structure I need to also import field and it will look something like this. So see here uh the plan contains the name of the app that we want to build. Then the description then the text tag which means which Python, JavaScript, React. Okay. what kind of text tag you want to use. Then the features, list of features. Okay, what are the features? User authentication, data visualization and so on. And a list of files to be created. Now, this file is another class that we have. So when you're writing code, right, in in your structure, you will have file and its purpose. So this is the file path and this is the purpose. Purpose of your file, your main application, front end, back end, what is it? Okay. So let's run it and then you will kind of get it. So we have specified plan and file and now I think I'm ready to run it but I'll just debug it so that you can see the class structure. So right click and debug. Okay. So let's debug it. Okay. So now look at the plan. Look at the response actually. So the response says that description. So response contains the the format in this which adhers to this schema right. So response name is a simple calculator description is a lightweight web application that provides basic calculator for performing addition subtraction look at this multiplication and so on and there are seven features. So you know when uh you are creating this kind of project you will create Jira stories. So these are individual programming task or Jiraa stories. First story is userfriendly UI with display screen whatever support for basic arithmetic operation at least in a calculator you want addition subtraction multiplication so on then clear and backspace functionality keyboard input and so on. See how beautifully it created all these features. Then the files. So in the files you want to have four files. The first file will be index html. See that is the path. So we specified path and purpose. So the path is index html. Purpose is main HTML structure. Then the second file is style. CSS which is for styling. You know if you have done web development you will know that you use this CSS for look and feel the colors and so on. And then there is the script which is core JavaScript logic which will handle button clicks and so on. And then there is a readme file for your Python whatever for your GitHub etc. And then your test file. See how beautiful this is. So this is the purpose of with structured output. Now folks, we have created this prompt for a planner uh just in graph.py file. But to write modularize code, let's create another file called prompts.py. Okay. And here we are going to keep that prompt. So that same prompt I'm going to keep it here so that you can take the user prompt which is build a calculator application as an input and using Python formatting string basically the same thing that we did here folks. Okay nothing different. So we are keeping it in prompt.py and then from graph we will import that thing whole thing from prompts we will import all the prompts you know we we going to write more prompts as well. So let's import it and then so we have imported that prompt here. So this prompt is going to be planner prompt and user prompt. Right? And I want to move all these classes into a separate file called states because these will be part of the langraph states. These are the schemas. So let's create another file called states.py and let's cut this out from here. Put them here. And you will have to import the modules as well. Okay, pretty straightforward stuff. And from state import this. So now this plan is already imported. See this plan is already imported. All right. So our the work for planner is almost complete. Now let me mention one important thing about model selection. We are using this free model from grock and that has some kind of token limit. When you are working on a industry grade aentki project you will be using some kind of paid model and many times your token limit will go very high and it will increase your bill. So at that point you might think okay I want to use some low cost model that way you can reduce your cost but then you might have concern what about accuracy you want to compare the accuracy of lowc cost model with your gold standard model such as GPD5 and to test that you can use AI playground so if you click on three dots you will get this AI playground option and you can just say create playground by the way here you can run local models with hola you and play with different models and so on. So I will just say create a playground and here you can add a model for comparison. Let's say GPD40 is my model and I can just type in you know who invented Priya Yoga and this will give you a response as if you know like chat GPT gives a response but you are interested in comparing the output with a different model. So for that you can say add model for comparison. Let's say 3.7. You want to compare GPT and enthropy cloud. Okay. Here you can specify your top P, your temperature. Higher temperature means higher creativity, your token limit and so on. Let's say you want to compare these two models for code writing. So you want to write a code to read a file and extract ticker and price. Now when you hit enter, it will call both the models simultaneously. You see? And you can compare the output. See this is pretty useful, right? So this way you can write sample prompt and compare the output from different models. You can also connect with a provider. Let's say you are connecting with Olama and and you can run Olama locally and taste that model as well. If you have OpenAI, of course, you have to provide the API key and so on. Now we are going to create a graph using langraph. And if you don't know the fundamentals of lang graph, I have this tutorial that you can follow. That way you will know the essential concepts. So here what we are going to do is we will create a graph which will uh take a state. Okay. So in a graph there is something called state and state will contain a user prompt. User prompt will be okay. Create a calculator application. Then we will have a node called planner. So the code for the planner is already ready. We are going to create another node in the future called architect. Okay, that will be the second node and the third node will be coder. So this will be a rough graph architecture and there will be like a loop because during coding you will go through multiple iterations and then there will be an end. Okay. So right now we will just create a simple graph with only planner node. Okay. So let's say you are taking a state with a user prompt. Okay. And then you have planner and that's it. This is your end. So we'll just create a simple graph with one node right now. And in order to do that I need to import some libraries which I'm going to import here. And then towards the bottom let's create a graph. So my graph is a state graph. And what is the structure of the state that we are passing? So state we can keep it very simple folks. We can keep it a dictionary. Okay. And once again if you don't know the state state graph etc. Watch that lang graph tutorial. and then graph dot add node. Okay, so the first node is planner and we will create a function called planner agent and that function will use some of the code that we have written before. Okay. And just to keep things simple, let me move this thing here so that way we get rid of one one variable. Okay. And planner agent is a function which will get state as an input. State is a dictionary and it will return dictionary as an output. And then you have this user prompt. So what is user prompt? User prompt is something you will get from the state. So whatever state we get, it's a dictionary folks. So dictionary will have user state. Okay. So it will look something like this. So state dictionary will look something like this. It will have user prompt. Then it will have plan. Okay. So plan will be the output of this thing. Correct? So this thing is simple. You are returning a plan which is your response. So when you pass state to planner agent, it has only user prompt. when it comes out of that node right see when it comes out of this here at this stage it will have state and plan both okay so this will have plan and later on we will add more keys to this particular state dictionary so I I hope you're getting it okay and then in a graph you need to set an entry point so your entry point will be a planner So my graph is I think kind of ready and you can say agent is equal to graph dot compile and let me move this here user prompt you can say agent do.invoke and in that you can pass this user prompt and this will be your result. You can print your result here. So right click run it and see you got your plan. So you got a dictionary with element called plan and that is your plan right? See if you look at this variable it's a complete plan that we saw before. The output of the planner should be in this format where it gives description text tag features which is a list of Jiraa stories and files. Now if you look at the output here in our debugger window it is exactly that. See we have description which is a simple web app based calculator that performs whatever. Then we have features. So these are the features. See 1 2 3 4 five actually. And it is kind of this. I mean it's a generative AI. So the exit features will be different but you get an idea that as a planner you made a plan on what task needs to be implemented. It's like your Jiraa stories right? So that is your features. Then you will have files where you will have okay file path. What is the purpose? So you have index html which is HTML structure for calculator UI and so on. Style dot CSS if you know web programming is used for visual look and feel and so on. So here if you look at files see that's what we getting. You have index.html whose purpose is HTML skeleton style. CSS styling script.js whatever. Okay. So now the next step is architect. So the idea that we have built this project around is the planner will give okay these are the task and these are the files and files purpose but now the architect will expand on this files purpose further and he will give you he or she will give you the implementation details. So architect will say okay for index.html HTML add dock type and whatever link the style state include see usually this is done by programmer but architect just just think about this programmer wants to do coding architect is giving you the exact steps that for this coding it's like spoon fitting okay you need to add dock type you need to link the stylesheet you need to include the script at the end of the body these are explicit steps and this will help just in case if our agent is failing misbehaving we have the exact thought process you know what is the thought process of writing this index html or style dot CSS or whatever code you're writing. So now let's add architect node in our state graph. Okay, so far we have this. Now we want to add this architect node in our graph and that should give all this task description. So we will stop this execution and then in the prompts.py Pi I will say I'm not going to write this long prompt in front of you. I have already written it previously. So I will just copy paste. It says you are architect agent given the project plan. So architect will get the project plan as an input. So see in this u lang graph what will happen is this is a state. So initially the state is having only user prompt where you are saying okay build a calculate application. Then once it goes to planner now the state has a plan and plans are all those features that we saw. Okay. So plan is nothing but all these features these features and the files. That's what we are saying given this project plan. Where is the project plan? well is python format string. So here we are going to supply project plan as an input to this function and based on that you need to create implementation task. So essentially the input is this. Okay, this is the input and you need to give create this as an output. It's like implementation task description. Okay, and you can read through it. I mean you can modify it as per your needs but I'm saying name of the variables should be defined mention how this task depends on whatever include integration details imports executive whatever you can fine-tune it as you experiment with this code and then in the states we will define so let's go to the states here I already defined the state so I will just write it here so see let's say each Jira story right each task has what it as file path and task description. Okay. So for that let's define this. This is implementation task for which file path is a string. Task description is a also a string. And then you have a list of them right? You don't have one task. You have multiple implementation steps. So you need to define the list another class which has so another class called task plan which has list of implementation task folks. It's as easy as that. Okay, it's essentially this particular table that you have modeled into your identic class and I will add one extra parameter here called model config and config dict we can import from here. And now you're like okay what what is model config? Well see when in pentic when you say config dict extra allow. See that's what we are saying right? Config dick extra allow. What this will do is it will allow additional element in the class although it's not defined in your class. So let's say task plan has implemented the steps right. So pentic is a model validation uh library. So if you create an object of task plan and let's say add for example if I create task plan and I can add implementation steps but if I say a.xyz XYZ it should fail. See if I don't have this this will fail actually it will not accept it. But when I do this I can add any extra element you know I can add any extra element. And why we are doing it I will show you in a minute. Just hold on. Okay just just wait for it. But the purpose of this is so that you can add extra elements into the object of this class. All right. Now this is done. Prompts is done. And we are going to now add another node called architect. So let's add architect node. Architect agent. And that will be a function that we will define here. See we will define this architect agent. And the signature is same right? It takes state as an input. See it takes state as an input and state as an output and that state is nothing but a dictionary. So now from this state dictionary you want to get this plan. See the previous nodes output is plan. So you want to get this plan. Okay. And if you want to define type in you can just say this is of type plan. And then you will say llm with structured output dot invoke architect prompt plan because this plan you need to give it to architect prompt and it will give you the detail enhance prompt. So that you get but what should be the schema of this output. Well the schema should be task plan and this is the response you are getting. And by the way, uh if response is none, you want to throw out an error. Okay, so uh this is the error for this. And here architect did not return a valid response. And then I want to return task plan. So this task plan is the response or task details. Now see just for maintaining the context. So if you have read the principles of context engineering, it is a good idea to maintain the whole context. So here the state will have only one element task plan. But I would like to keep the plan also the original plan which was the input. So the state will contain both input and output. So I will just say response. Now see now see I'm able to add this new element because here I have said model config is equal extra because response will be of type task plan. Okay. And since I have done this, I can add any element like I can add any element like XYZ, right? I can add for example XYZ any element I can add. So in plan I will have plan, right? Which was the input. So essentially in the dictionary you have the output and the output will have dot plan which is your your actual plan. All right. Now we have added the architect node. We need to add the age as well. So let's add the age between planner and architect. And now let's run this. Um I will debug it because it's easier to see the output in debug. So see now if you look at the result um result has a task plan which is implementation steps. So implementation steps are these. See so index.html HTML task description. Look at this. Create the root. Define this in the header. Look at this. Wonderful. It's giving you the exact details that in index.html you need to do this this this as if you are sitting with with with your junior programmer and as a senior programmer or architect you're explaining that when you write this code add this element add that element write this loop and so on. And you're doing it for index.html. Then style dot CSS. See style dot CSS. So this is the task description for style dot CSS. Then you're doing it for even read me file. See this is readme and readme. You're saying title and short description. See, so you are kind of expanding and creating this task plan. And then in the result which is a task plan. Now that you have your implementation steps, you are ready to add your third node which is your coder agent. I made a change where I created this main function and moved the main calling into the main function. Now when you run this code, it is printing this task plan which is good but one problem is you don't know what this agent is doing inside. It's like a black box for you. If you want to know the internal execution, the internal steps at each node right like at each node it is u having some state output and if you want to know what's going on inside then you can use this feature called AI agent debugger. Let me just open this and here when you run this code it will see waiting for events. It will capture all those events and it will show you the state live. See when the program was running it was actually showing the live internal state here the output for planner or let's say the input was create a simple calculator app right so that was the state and the output was a plan so now I can see the detailed plan here see how beautiful this is I can see all the steps basically all the features I can see the files see even after the execution is finished I am able to see all of that and then for architect the output of planner was an input. So see you have all the plan features everything and the output of the architect is the implementation steps. So here it is saying infoindex html create this it's kind of spoon feeding a programmer with the detailed instructions. You can also see a graph. So this is a lang graph. Okay. And in langraph you can see right now we have just the planner architect two nodes. We are going to add coder node here but this agent debugger is super super useful. Uh we will see in a bit when we add a coding agent we will have a lot of outputs and at that time agent debugger will be quite helpful in terms of looking at internally what's going on. We are also going to use these two functions set debug and set verbos which we have imported from lang chain globals. And when you set debug and verbos to be true this is what is going to happen in the output window also we will see some detailed traces. Okay. So these details traces can be helpful in terms of seeing you know what's what's happening inside your your token usage. uh it will show you a lot of details internal details which might be useful folks. Now it is the time to add coder agent. So here I will add graph dot add node coder and I will call coder agent. Okay. And let's create a function coder agent which will take state as an input. See every node in the graph takes state as an input and it will output state uh same state. Okay. Now here if you think about it if you look at our previous execution let me just show you in the previous execution the output of architect was implementation steps. Okay so output was task plan so task plan was part of the state correct. So here let me just write the code here. So state had task plan and that had see that had this variable implementation steps implementation steps and what coder agent is doing is it is performing all the implementation steps. These are like graph steps and based on each step it will write code. So based on this it will write code in index.html. Then based on these steps this task description it will write code in style dot CSS. Okay. So implementation steps is an array as you can see right now it's 11 elements and you need to run a for loop actually and for each step the coder agent will write code. So we will first implement the first step and we'll worry about for loop later on. Okay. So here I will define current step index and let's say it's zero. Okay. And these steps are stored here. So now in step current step index this will be your current task. So let's call it current task. Okay. So we are essentially taking the first task. That's it. Let's let's worry about other tasks later on. and that has file path and task description. So file path is basically you want to store your code in that file. Let's not worry about that too. Let's just take a task description and write code and output in our langraph state. So current task description will contain your actual task. All right. So I will say that my user prompt is this particular task. Okay. and the system prompt because see coder agent has a generic task. So I have already defined the prompt for it. So the system prompt for coder is you are a coder agent you are implementing a specific engine task. You are given task descripte code for it. So there is nothing like this python format string. Okay fix format and we are calling it a system prompt. I'll tell you why we define system and user prompt. Because see here we had just one common prompt, right? We did not have system and user prompt but here that that there is a reason you will see. So here I can just say system prompt is equal to coder system prompt and coder system prompt and user prompt we will just combine. Okay. So we will just say llm.invoke system pro prompt plus user prompt. So this way uh and this will be stored in a response right. So this way you get see what is this plus that right like these two what is it? So it is saying that you are coder agent implement a task and the task is this which is remember index dot this one index dot html and this is the task description. So imagine this coder prompt plus this particular task description. This whole task description that will be given to LLM. Okay. And we're not worrying about structured output etc. Let's keep things simple. And response.content will contain the actual code. So in a state I will just return a code and I will call it response.content. Why response.content? Because we are we are not using with structured output yet. We'll use it later on. Okay. And we are just returning it. And here we will add the coder node. And we will also add the age right from architect to coder age. And let's right click run it and let's see our agent debugger also. See you you see architect is in progress. So at each stage now coder is in progress. So coder is working on it. Okay. So here if you look at the output see in coder output we got this state and state is the complete code folks. See we got the complete code here and now what I will do is I will work on other steps and also I will store this in a file because we want to generate a file on a disk. Right now it's just outputting here but that's of no use. I want to store this code in a file. In order to save the code to a file, we need tools and for that I have this tools.py file. Now I'm not going to write all this code in front of you just to save time for this tutorial. But see it contains bunch of functions which helps you write content to a disk and also to read the content from the files on the disk. So if you look at write file, write file is nothing but you have path and content and you are just opening a file and just writing a content and there are some checks on the file directory etc. And what we want to do is we want to generate all our code in a folder called generated project. If uh the file is outside anywhere then we don't want to write it because you want to put some guardrails and control your agent. Therefore we are doing all these checks at the beginning where we are saying safe path for project means if the file is in generated project folder then only it is a safe path otherwise you are saying attempt to write outside project root. Okay. So you are raising the exception. We are going to give this code. You can look at it. It's pretty straightforward. Just Python file writing and reading functions. Okay. And therefore I don't want to write this in front of you otherwise this will become a very long tutorial. So we have tools and now we have imported all the tools in this file. Okay. How do you write this uh to your disk? So first of all I will create a variable called coder tools where I will mention all the functions. So in order for coder agent to write code it needs write file also to update the code it needs read file list files all these functions. So if you're a programmer just imagine if you're a programmer you need some way of reading a file writing a file seeing what files are present. See right now we are coding so we are able to see all the files list of files. So list of files we are able to read the file. So if I go to here say I'm able to read the file we should be able to write the file. See I'm writing the file. So all those tools you need to give it to your coder and then we are not going to simply call this llm.invoke. Instead of that we will use something called create react agent from lang chain. So this function so lang chain pre-build comes up with this functions where in this agent you can specify your llm and you can also specify your tools. So for example if you look at the detailed documentation in the create react agent you can give llms and you can also give your tools. So there should be a code here. See create react agent your model and your tools. So here let's create a react agent. Create react agent where you give lm and coder tools. Okay. And let's call this react agent. And then you can invoke the react agent. And the format for that is something like this. So we had system prompt and user prompt. We are just going to supply uh to that. And we are not uh returning code in in a state because we are writing right on a disk. So for now let's pass the empty state as an output and it will be writing the code here. It will create a generated code. It will create a generated code dictionary like this one generated code directory here in the current folder and it will write all the code to that and I'm going to now pass the path also. Right? So in the user prompt I will modify and I will give task as well as file path. Right? This is the file that you want to write to and you have to also modify your prompt. And in the prompt you will say you have access to tools to read and write file review all existing file whatever implement full file content. Okay. So you are telling it that you have access to tools which will help you read and write file. So make use of that. And then here uh the existing content is nothing but let's say you have current task right. So you have current task and whatever file path whatever file you have you provide that existing content to the coder. So that see we are going through implementation step. So there are five steps and in the second step it has return a file. In a third step it wants to modify the file. So it needs to read that file right. So for that you will give this read file access to it and you will say read file.run and it will take the file path and it will give you the current content of that file. Okay, I hope you're getting it. I'm going bit faster to just save your time. You are you will be given access to full code. So just read through it. You will understand it. It's not a rocket science. So let's now run the code. So we are running it and we can see it in agent debugger. See right now we are working on architect. Architect is done. So coder is doing the work. Coder is writing the code. See your agent is writing the code. Output will be blank of course. Let's see if it generated a code here. Ah look at this folks. Amazing. Generated project. And you got folks, isn't this beautiful? Your agent is writing code now. You got your index.html file. Amazing. So I'm going to just delete it. So we are done with the implementing the first step. But remember we have multiple steps. So now let's work on implementing those multiple steps. Now to implement all the steps we are going to have this kind of a loop in coder agent where the coder will maintain a state. Okay, it will be called coder state. So there will be a coder state which will have current task index. Right? So current task index initially it is zero. Then when you are done writing that file, this will increase to 1 2 3 and so on. And it will go all the way up till length of the steps. Length of the steps means which steps? Well, these steps, right? So in a coder, whatever input it got was the output of architect node. And these are the implementation steps. So whatever is the length, okay, this is generative AI. So every time you run, you will see different steps. Previously you were saying 11 but right now it's four. So length of implementation steps basically this this steps length of steps. Okay. So you will run this until it reaches the length of this step. So there will be some kind of conditional logic right you will say current state index is less than length of steps. And if you achieve that you will set the status as done. So when you say status done it will end it. Otherwise your state will be coder. So we will give some name to the state. It will be coder which means it will loop. Okay. So let me write the code so you get a better idea. So here I am going to see we will have to write this state. So the coder state will have task plan. So what is a task plan? Task plan is nothing but folks this one whatever it got as an input. Okay task plan. You see and then current step is what step you are in. Okay. So this coder see if you're a programmer right and you are writing code in three files you will have internal state. Okay I'm done writing first file I'm done writing second file. So that way current index will be updated and current file content is the content of the file which is currently being edited. Okay. So let's use that here. Okay. In the state that we get we will have coder state coder state and see initially in the first run it will be actually none right because see as a state what what do you receive as a state this one and in the previous one you just received a task plan correct see if you look at the state here coder agent received this as an input so in the state it has only task plan it doesn't have coder underscore rate. So it will be none. And when it is none, you set the very first coder stat will be see current step index will be zero, right? So let's remove it from here. We will set it in our class. And your task plan will be the state task plan. So now we are storing everything in the object of this particular class. We don't need to access our state now. Okay. Now by the way you can do this also but I will just use the class object. I will say this task plan dot implementation steps. Okay. And if coder stat current step index is greater than this see if it is greater than length of the steps it means we are done. So in that case what we will return in the state. See state is a lang graph state right you all know that state object there is a state object which is being passed from here here so here when you're done your state object will contain what coder state and status done right so it will contain it's a dictionary which will contain coder state is equal to something and status is equal to done. Okay. And this status done will help it exit the graph. So if it is done, we will go to end node. Okay. Let's set that. Here we are saying we are having a conditional age from coder to end. So see if the status is done then you move it to end. Okay. So we are kind of using this status. Okay. And let me just remove all this. So we are using this particular status. This status here we are using this state here. And we are saying conditional age. If this status is done then you move from coder to end. Otherwise you move to coder. Otherwise you move to coder. Right? So if you look at the else condition. So in the else condition you are saying coder which means you continue coding you go to the same node and continue your coding work. It's like you have a programmer it's like hey programmer is it done? Yes done okay go home. I'm talking about companies which will do micromanagement and if it is not done it's like you do coding. Okay so here that's what we wrote. So now here current step index everything you will get from coder state. So coder state current step index will give you the current task. Then existing content is same. All of this will remain same and we have to increase the step right. So coder step dot current step index is equal plus one. And you saw it autocomp completed it. It kind of it read my mind. This is the power of AI assistant in PyCharm. And at the end you will return whatever is the coder state you will return that. Okay. So let's run this code now. And folks, when you run this code, it is going to now take time because it will write many files. Uh and one more thing is if you're using grog, you might run out of tokens or you might uh run out of the limit number of calls you can make in a minute because this is agentic. Now see, it's just writing the code. See this coder and it will uh just take time. So if you want to finish the project and let's say if you are running into all these issues you have a couple of options you can use any model for which you have a paid plan. So let's say open AI or even Gemini you can use all those models right like here instead of lang gro you can say from lang chain chain gemini you know you you will import that gemini model or the other option is on gro you can opt for a paid plan and that paid plan will give you more tokens. Okay. So just be mindful that this is going to consume lot of tokens and you may run out of either the token or the sometimes you have enough tokens which are given by free plan of gro but you run out of the number of requests you can make in a minute. Okay. So they have various limits and if you hit that you have to opt for some kind of paid plan. It will not cost you much folks. I have a paid plan of gro and it hardly cost anything. So if you have to spend $1, $2 for learning, it's fine, right? Like don't complain. You're learning and you're building skills which will help you get a job or make a progress in your career. I was getting some error and I rer reran it and it worked. One change I made is in agent.invoke I set recursion limit because see you are running agent and it might just go in a loop and it might go in a recursion and that will be very bad, right? your LLM cost is going to go up and it might just go in the infinite loop. You want to prevent it. So you just have some kind of recursion limit here. When I rerun it, it worked. Okay. Uh and you can see ta ta generated project has all the files folks. See I have my all the files and when I click on it I get the calculator. Ta. Look at this b