Learn to Build You Own AI CODING TOOL | Frontend Projects | GeeksforGeeks

Key Takeaways

e okay guys we are live so let's begin so hey everyone I'm her Jen your Mentor at Geeks for geeks and guys in this video we are going to build a simple AI project and we are going to build a coding tool which would give us suggestions basically it would be like a k code explainer okay so it's like you provide a piece of code or you provide your huge file code file it would give you explanation what actually happened in the code okay so for that we're going to use the gini API okay which would would actually give us responses different responses and you can Implement G API pretty much anywhere I have used it in my previous projects so we're going to use this one for this project okay so basically what we're going to do is we're going to use the free apis okay JY API is free free apis of Germany into our project okay we're going to provide the code to it then it would give us the complete response as explanation of the code okay this is the simple step which we're going to follow so guys let's simply uh draw it okay so yeah here what I wanted to say is you can just say that uh our platform is coding or code explainer that would be better I'm just going to name it as code explainer so it's self explanatory the name okay code explainer so here guys what we are going to Simply do is we are simply going to provide this code explainer some of our code any code okay okay any programming based code okay and it is basically going to give us response okay it is going to give us response what response the explanation e exb l a any okay so yeah this is it this is the pretty much the task for today what we are going to do today okay so now guys I think now we can start okay so first of all what we're going to do is we're going to create a simple vs code folder okay we just going to open this now uh here guys what I'm going to do is I'm just going to create a fresh next JS application or react JS application whatever it is you can make okay some is going to make a next JS application because yeah nowadays it's trending so we're going to use it so npx create next app atate latest okay so guys it's asking for the latest version yes we are going to use the latest version Let let's just name the project as code gen okay and yeah we'll just add typescript although we are not going to use that much typescript but still and we're going to use es lint no Tailwind the default SRC default router and then I don't want to import anything else okay so you can see that guys it's trying to create a fresh nexj application it's basically a empty nextjs application so we're going to to write our code here okay okay I think now some people have join so basically guys what we are going to build is we are going to build a code generator application okay so for the front end we're using nextjs but you can use reactjs also or PL HTML also that's also fine okay whatever you are comfortable at I'm just using nextjs because yeah right now I'm just working on it so yeah it's habitual okay so uh definitely it's going to take a few more minutes to actually set up and complete and yeah it's here okay Arch base hi hi Arch base so what I'm going to do is I'm going to first of all create a g repository also so that in future at the end of this video you get the source code also okay so what I'm going to do is I'm just going to bring up a get repository guys just wait for a minute C gen gfg okay and yes okay guys uh so whenever we end this video I'll upload the final source code so to get the final source code what you need to do is just go to the repositories of my GAA profile here you would find code J gfg okay if you don't find this you can you can just search the name here you would find this repository okay that's it so yeah what you need to do is just go to my GitHub profile github.com /v aj14 and in the repositories you would find code gen gfg okay so here I'll be uploading the source code uh right now you can just give your complete focus on understanding the code okay later on you can just copy the code or write the code from my GitHub repository okay fine so now guys here what we're going to do is we're going to create a basic UI okay so I'm just going to open this in live integrated terminal okay and here guys I'm just going to type the command npm start I'm I'm sorry it's npm Rand okay yeah so it has started the nextjs application for us and uh guys I'm just going to Simply open this next CH application here that's it so you can see that yeah it has started and looks like this so I'm just going to make this empty first so I just go to app. page. TSX okay and guys here you can see we have this basic empty page I'm just going to remove this part okay and here guys for now I'm just going to create a simple division okay simple division and here I'm just going to say my project okay let's see yeah you can see that it works but yeah it's taking default CSS so we are put politely going to remove those things okay and also default there would be no margin so m0 okay and there would be no padding so p z so guys here you would see that yeah this is the empty page right this is the empty page now here what we're going to plan is for the UI part we are going to keep things simple okay so as the code explainer is so what we're going to build is we are going to create two sections this would be the left section okay and guys this would be the right section okay this would be the right section so here guys we're going to provide our code and we're going to submit and in the right section we're going to get the explanation okay pretty much it is okay so we're going to do that here so for that what we what we going to do is we are just going to say that in page. TSX we are going to uh come back and here you can see okay here we are just going to import use client because we're going to use different Hooks and different kind of things okay fine so now guys I'm just going to say that let's say let's say we are having F code okay set code okay equals use State okay so initially your code would be empty there would be no code provided right so what we're going to do is in our application we're going to provide the code so we're just going to say that we have a division let's call it main okay and then guys inside this we're going to call this container like this okay and let's just close this okay and again guys we are going to have a button okay we're going to have a button so I'm just going to give this button button class and let's close it okay so I'm just going to say that explain okay explain okay right so yeah explain button and this button would simply be calling some kind of function let me just call this function is as con explain this code okay and let's close it fine easy now here guys whenever I click on this button I'm just going to call this function explain this code so on click explain this code easy right so now guys here in this code basically what we going to do is we are going to first of all say uh let's generate a training prompt okay let's create a training prompt okay so how we are creating the training prompt like how we do how how are we deciding we are creating a training problem yeah it's very easy uh what we're going to do is we're just going to search for Gemini okay just go to gemin right you can see that now uh I I'll just simply give it first from now I want you want you to act as a code expl cleaner if I ask anything related if I if I give you okay if I give you you a piece of code then you have to explain me okay this is kind of a training prompt which we are giving explain me that that code in a response in a single response okay in a single response and just give me the explanation don't give anything else okay don't give anything else okay so I've just given a simple prompt you can see that now the bot simply understood fine now guys what we're going to do is we are just going to provide it a piece of code okay so I'm just going to go to Google and I'm just going to say sample HTML code okay simple code and uh what we're going to do is we are going to Simply uh go to our own example okay geek for geeks example and here guys um structure example and and suppose this I want explanation of this code okay so I'm just going to provide this code and if I provide this code you can see that the bot is trying to explain this so you can see that b simply explained this is a basic HTML code that creates a web page with a heading welcome to gfg a block of perforated text okay like this okay now I'm going to uh do one more thing who is PM of India suppose I'm asking unnecessary question okay right now it's not able to answer it for the politics uh what is capital of MP okay something like this okay I live in madha Pradesh so right now you can see I have asked unnecessary question and it's giving me answer from next from next time key keep in mind that you don't have to answer noncoding related questions like what is capital of MP okay so now you can see that this is it now let's try with some more examples so I'm just going to say what's Cal of I think this might work but this might not work also but I'm just testing okay capital of up so I have asked the different question you can see okay it's still giving me okay anyways it needs more precise training prompts maybe I'm not able to give it more precise training prompt so yeah it would be done in the training prompt ER itself so you can see it's kind of a chat okay it's kind of a chat which which I did this is a previous chat pre-existing chat main chat main focus is basically on this one so we're going to give this kind of prompt okay we're going to give this kind of prompt okay so I'm just going to say that this would be the training prompt and here I'm just going to say PS this okay we're just going to give it as Parts okay uh in Parts what we're going to do is yes Parts okay and inside this this is the default format of gy actually that's why I'm giving it like this you can just search on documentation or you can just follow my steps as it is okay so I'm just giving it kind of you can see that kind of I am just giving it prompt okay okay but we need to give it like this so that it understands okay so I provided the font font that's it okay I provided it the U sorry I provided the training prompt and I have to define the role also so I'm just going to say that role is suppose user okay role is suppose user now you can write a better prompt also now you can see after writing this the model actually understood this okay so model would just say okay or understood whatever it is so whatever response you want to get from model you're just going to like get it like this whatever whatever request you're going to send from user whatever prompt you're going to send from user you're going to write it like this so the role is user and the role is model perfect okay that's it guys now guys what we're going to do is we're going to call this training prompt into our function okay into this function so first of all guys we need the URL of JY so again guys to get the URL what you can do is you can just go to gini API just search for this okay build with gini API you can just see that this is the website okay just go to API key okay so just to get the API key you're going to go to this page okay sir you looking very confident and looking cute thanks for the compliment man uh okay let's continue so basically you can see that this is the website of gini and here we are going to Simply click on create API key okay create API key and here guys we're going to create API key for our existing project so you can see any of the projects would be visible here okay if you don't have any project it would create a project for you and so on okay once you create the API Keys it would be visible you can just copy that or after that you would see the API key here so I'll just copy this okay I'll just copy this that's it okay I have copied my API key and I'll just delete this later okay I'll just delete this later I haven't deleted my old keys but yeah I have to delete this later because if I send it to you you can easily use it okay and it's obviously exposed so I have to delete it later okay so I'll just delete after ending this session okay so you can see that guys basically I have the API key perfect okay I have the API key so I'm just going to hide the API key in my EnV file so that it's safe okay so here guys we're going to create the EnV file env. Lop right env. local and here guys we are going to say uh let's create a variable which would be storing this value okay so I'm just going to call my variable as next public gmany API okay this would be my variable fine that's it okay so this variable is going to store my API key and we're going to call this variable anywhere okay uh okay yeah I did one mistake it's actually e n and V is missing yeah en EnV local right now you can see that it's proper okay so now you can see that what we need to do is we are simply going to import our API key somewhere at the top wherever you like okay I've to imported the API key Here and Now guys I'm just going to create a single line of URL okay like this this URL okay this URL now how how did I get this URL so it's very easy just going to go to documentation and here guys uh you just need to click on get started or maybe somewhere else so you can see kind of you are going to get the URL somewhere here or anywhere you like okay so it's kind of similar to R1 also okay the URL might change in future but yeah at the end you have to provide it like this HT https the URL and the key and the API key don't worry you'll get the source code so you would get the exact URL if I go to text generation and uh here guys if I just scroll down maybe I would find it okay just go to Quick Start uh I actually forgot it previously just go to Quick Start and just go to web part and here guys you can just uh come here and you would find different different cases okay you would find the web case you would find the nodejs case I think in the web case they might have provided the URL or somewhere but I think they they have changed the method Now the default method which we usually get I think maybe okay I think it's maybe it's not available in the documentation here right now they have changed the documentation or some something what you can do is whatever code I am going to provide you from there you can get this URL okay from there you can get this URL okay in documentation also this URL might be somewhere so you can just check out that later so basically you can see that we have created a simple URL okay now I'm just going to say that uh this would be a simple message to send okay whatever message you're going to send okay whatever is the first of all training prompt you're going to provide the training prompt okay then after this what you're going to do is you are going to provide your code okay very easy okay first of all the previous chat hidden chat would be there then you're going to just provide your code right away then it's going to Simply okay I'm just going to say that it's having a hook uh let's call this hook as set is sending as true or something like that so that it's going to show us a loading animation so I'm just going to call this hook as set is sending okay isend sending and I'm just going to make it false initially it's false but whenever I'm trying to send a message it must show a loading animation so for that I'm just going to make it set is sending as true okay set is sending as true here perfect now guys you can see set is sending is true and what we're going to do is we are just going to say let re s equals a waight okay a wait and I'm just going to fetch fetch what fetch the URL and inside the URL along with the URL I'm going to provide a few things what things I'm going to provide the method as post okay why it's showing me error because this is not a async method just make it async now you can see that it's not showing me the error and the body you are going to provide the content and inside the content you are going to provide the message to send array okay that's it so now we have made a request whatever is the response would come in Json format convert that to normal Json format okay it would be in string format actually so convert it to Json format and then I'm just going to make send in sending as for that means loading animation would stop okay now from the response I'm going to print the response for now so console. log re Json okay later on we're going to focus on this one so this would be the part which I'm going to provide okay so first of all we are going to complete the remaining area Okay so it would be like here you're going to create in the container part you're going to do some stuff so you're going to create a text area okay you're going to create a text area let's close this okay let's close this now you have this okay now you have this text area in this text area you're going to say that suppose the Styles is style equals uh Styles okay I'm sorry class name equals styles do input okay I'm just going to provide some class name as input okay this is my class name and what else I'm going to do is I'm just going to give a placeholder here placeholder as what write your code here okay that's it and what else you're going to provide you are going to say that the value would be what the code hook which we created okay basically it's going to store a sentence or a string for us of code okay then whenever I make a change on change okay on change I'm just going to say e and then guys I am just going to say set code e. target. value okay that's it so now guys let's see our UI so we're going to go here and you can see that we created a simple UI okay I'm just going to write something here okay I'm just going to provide some piece of code here actually I'll just copy this I'll just copy this whole code and I'm going to paste this code here okay so you can see that yeah I have pasted the code here maybe now it's more visible okay we'll adjust the stles later and if I click on explain let's see if it works or not so we are just going to go to our console and here guys you can see that yeah basically we got a response from Germany right you got this response let's go to candidates the zero candidate the content the parts the Zero part and here you can see that you got this code okay so basically guys what we're going to do is we are just going to print the specific part of this Json response okay so I'm just going to say let response message is what let response message is basically the specific part which we are looking I'm going to say re message response message message okay so let's try again now this time again I'm going to provide it some code okay send this code explain and you can see that's it's giving me some kind of response and uh basically yeah it's it's giving me response according to this code okay so this is it and now you can just add provide it different code also so I'll just click on this copy okay and let's you can write a more better prompt also to get a proper response so that it works properly okay so you can see this HTML code displays a text on website including nor one so it's giving me kind of explanation of the code okay so now guys once you get the explanation what we're going to do is we're going to say that uh const e XV l a n n a t i o n set e XV a n a d i o n okay you got the explanation it's going to say you state and here guys I'm just going to say that initially the explanation is empty okay then after this guys we're just going to provide that response message to our explanation hook so set explanation re response message to our hook okay we have provided it okay once you have have this so here guys you're just going to say that along with this you're just going to say explanation dot length is greater than zero in that case in that case what you are going to show you're going to show A P tag okay and uh I want this P tag to be of fixed size okay to be a fixed size we're going to later on Define this okay in the CSS part and uh in the sty else part we are going to provide explanation text okay that's it now in the lse case what you can do is you can just say not fixed and prompt is empty okay so I given this class as not fixed okay basically what we're going to do is we're going to Simply show prompt is empty initially but when you have some kind of code here okay suppose you have this code here and now if I click on explain so you can see that now you got the response okay so you have this now one more thing guys um you want to show a loading animation so uh either you can just say that if loading is true I can show a loading animation or here itself you're going to say You're simply going to say set is sending if it's true if it's false okay if it's true just going to say sending okay and do nothing if okay if it's sending okay sending okay I'm sorry is sending is to that's it if it's if it's sending then just going to chose the sending Button as just going to show this explain button okay so if I click on explain you can see that now I got sending okay let's wait for a few seconds now you got this code and again you are getting this okay so now this is it now let's go to the page do module. CSS actually let's go to first of all the global CSS and here we add one more step style border box sizing box sizing as border box so that there is no extra margin or WID taken okay sir please listen to me takes only two second okay you can ask your doubt whatever doubt you have please ask that in the live chat directly okay I'll be answering your doubts so after this after this part you are going to go to this page. module. CSS right and here guys I'm just going to say my main would be having display Flex everything would be in center it's going to take minimum height of 100 100% height and then with 100% And Flex direction is column so you can see now it looks like this inside that we are going to have the container okay so inside the container class I'm going to say that width is 100% display Flex that means items would be in row okay height would be 90 VH and some Gap would be there some padding would be there so you can see now it looks like this okay I'll just refresh this one so you can see now it looks like this okay perfect now if I talk about the fixed part if I talk about the fixed part I'm just going to say that it's having color black background color as this some border okay you can just change the border to uh light gray or whatever you like okay light gray would be better and then border radius width and height okay so you can just uh say that okay initially The Prompt is empty so fixed is not working so we have to style the not fixed also okay so let's target the not not fixed part also so not fix part is almost same it's like yeah you're showing something else okay so maybe again you can give some kind of color like this so you can see that not fix is looking like this okay there is no promt right now okay now you can see that it's not taking even space so what you can actually do is you can just say that input would also be taking uh maximum space available so it's going to take 50/50 okay it's going to take 50/50 so now after this guys what we're going to do is we're going to able to see something like this okay so you can see here we're going to provide our code so we're just going to say let's copy this and let's paste it here okay and I'm going to click on explain you can see right now it's explaining it's sending and then you can see that yeah now you can see that it's giving me explanation easy and at the end guys we have a button so I'm just going to say that let's create this button let's give this color let's give this color let's give this style so you can see that yeah this is the explain button okay fine so you can see finally the code is completed what you can actually do is you can just uh say that the minimum WID you can assign this minimum WID to make it more responsive later on you can add responsiveness also okay so that's it guys now if I write anything here if I provide any code here uh suppose if I provide some blockchain sample code something like this okay some blockchain sample code and uh I'll just go to this website okay credit to free boot camp or okay I think it's not available here maybe gigs for gigs also has this right yeah gigs for gigs has everything okay so if I just copy this can see kind of this is the blockchain code so let me just uh provide this blockchain code and I'm going to click on explain now you can see that it's sending and it's trying to get the response and you can see that code implements a blockchain which is Temple proof digital Ledger consisting of blocks you can just add add more details if you want explain each line in depth you can add that also into the prompt so that it's going to explain every line in depth okay into this response okay so that would be something else right so guys I hope you enjoyed this session this was a small session for creating a simple code explainer and you can use this basically into some other tasks not just simple UI you can use it inside plug-in as a plugin in your application okay you can add it to your application you can make a chatbot also you can do a lot of things with the help of AI okay this is a sample example which I have given you a simple tutorial very easy tutorial for beginners right so we have basically created this UI and we are using the API of Germany and you can get the API from the place which I have shared you now talking about the source code what you need to do is you just need to go to my GitHub profile so just type github.com SLV AJ 014 okay and guys in the repositories you would simply find code J gfg okay if you don't find this repository just search the name here you would find this repository okay so inside this I'm going to upload the source code okay so now guys I have uploaded the source code you can just check out my G repository it's available here and here you can see we have SRC app inside this you can see we have page. ESX which has the complete code available right whatever we have provided okay so you can just check out this one and right now I have removed the env. loal file I guess yes you can see it's not here so you have to create the env. loal file whenever you download the code for downloading the code either you can clone the repository or you can download the zip right so that's it guys I think okay okay so that's it guys now I think we can end the session this project is completed very simple and easy project just for demonstration of how how code explainer can be created okay so that's it for today I will see in the