How To Use AI Agents to Code with CodeLLM
Other Videos📅 2025-02-15
Transcript
[00:00] we have successfully used AI agents to create a tic tac toe game that we can start playing around with on our computer can we use AI agents to help us code out software abicus AI has released a new IDE called code llm and we're going to check it out today the objective is very simple does it work is it good let's find out welcome back y today's video is sponsored by Abus Ai and they hit me up and they were like Corbin we got a cool new IDE we want you to check it out I like okay what's it about and this is code llm what's really cool about this is that we can integrate the AI chatbot work flow within our
[00:30] coding environment so if you are a developer that likes to have your AI and IDE integrated in the same workflow today is the video for you so let's go and get started I want you to think of abicus AI as an entire ecosystem so they already have a ton of stuff going on on the website itself so I'll make sure I leave that in the description down below but in today's video we're just going to be focusing on code llm but as you see above me obviously we can do stuff like chat with their chat Bots code out stuff here draw a dragon draw a dragon Corbin yes quite literally draw a dragon pretty cool for now let's just download so I'm
[01:01] going to hit code llm here are the options which are nice we can either download from Mac Linux or Windows I'm going to download from Mac and get going here so once we download and we open we get this nice little walkr so let's go and go through it real quick I'm going to log in to my Abacus account here hit login and there we go we're good there and then it's going to go over all the really cool stuff that it can do within its platform this one's pretty cool here as this is kind of like when you're doing a Google search essentially whatever you're typing we can hit Tab and it will autocomplete a suggestion and one of the big selling points here is our ability to actually chat the code get real answers and apply that to our
[01:32] code and what I personally really love is the ability to actually upload an image and then get front-end code so we're going to see that feature in today's video as well we're going to mark this done let's get going let's go and try this out see if this code editor is any good let's start off by opening up a terminal window as today we are going to be creating a react base app get that nice little react front end we always love with the objective of creating a very very well-known game what game Corbin we're talking about Tick Tac to the toe tic teac toe let's see if this can code it out assuming I
[02:03] have no experience how to code this is the first major advantage of using the code llm I can come up here to chat and I can choose which model I like so we have options between 03 mini High which is one of the newest models that's really cool deep seek I know there's been a lot of love there we can also use their AI model of code llm let's check it out I'm simply going to ask okay I want to create a new folder so I can start my react app how do I do this in terminal hit enter the chat feature is very much like another software engineer on your team ready to go asking a question what's really cool here is that it's giving me the command line of mkdir
[02:35] my react app and then we're going to navigate to it and then we're going to go ahead and create a react app but let's say I don't like the name my react app as it's a little too basic I'm not basic okay let's go ahead and rename this to like Tic Tac awesome and to do that it's actually very simple we just simply ask right we let's rename this folder to Tic Tac awesome hit enter again this kind of ask and answer flow is fundamental to any form of education but is also very extremely helpful in the context of coding so here we go we got mkdir Tic Tac awesome if you're like what does that mean what are we doing
[03:05] that's just creating a new folder it's like the same as going on your desktop hitting right click new folder I know you're just like why why do developers make everything so complex don't worry once you do it once you'll do it once so I'm going to do that mkd R Tic Tac awesome I'm going to hit enter here and that will create the folder now we actually have to navigate into that folder so we can actually push some code into there so I'm going to just follow what code llm told me which is just copy this say CD and then the folder name now we're inside it and then the Next Step here so we can kind of see it right here within the IDE is we're going to open this folder from our little command list
[03:35] here we're just going to hit command o simply find the exact folder we just created it's going to be that name and then we're going to get this it's going to ask me do I trust the author that created this folder well I created the folder and I do trust myself so I'm going to say trust the author yes I trust the author to know whether or not we're actually in that folder come up here to the top left and you should see the folder name what you'll also notice which is really helpful is that it will start categorizing different chats we have with code LM now specifically this idea of creating a new folder I can click this and go back into that chat so because I wasn't done yet and this is
[04:06] teaching me how to create this react app let's come back up here and do the next line so we're in our folder here nice I'm going to exit out of this welcome I'm going to reopen my terminal window here click this terminal and it looks like the next line we want to do is going to be MPX create react app I'm going to copy this okay paste it and notice that we are inside Tic Tac awesome as this is where we're going to want to build our react app here all provided by code LM here hit enter let's do it once it's done installing you'll notice all these relevant files up here pretty nice what's really cool is that
[04:38] let's say you get to this point and you're just like what the heck even is a react app we can still leverage this chat feature here and just simply ask that by simply putting in what is a react app what did I just create hit enter here this is where that flow really incurs so scrolling down here we can get everything right so what is the public folder what is going on there contains static files like the HTML file and the fave icon like the little web browsing fave icon what's the source contains your react component Styles and other source files if I scroll up here it just gives me a real brief definition of what's going on a react app is a web
[05:09] application using the react Library which is a JavaScript library for building user interfaces if you don't know how to user interfac is that's literally what you're watching Youtube on this is all UI UI UI UI UI IO I know you know that song react allows you to create reusable UI components and manage state of your application organized in efficient way let's see some coding let's see if C LM excels in this context before we do that let's go ahead and render this react app so we can see this in a live web browser to do that we're going to Simply do npm start which Cod LM pointed out early on npm start enter
[05:42] so once we do that we got an error and I'm actually glad we got an error because we're going to be able to leverage our chat here to help us out so I'm going to create a new chat let me show you the workflow when dealing with an IDE with an AI integrated into it so we got our err here for some reason I can't find something or like I don't know what any of this means Corbin don't don't worry all you need to do is simply copy all this copy all of it all of it all of it with our chat here I'm going to Simply paste it so we'll go ahead and say when I do mpm start paste the entire AR code how do I fix hit enter so first is telling me to go to my relevant
[06:13] directory but as we already know when we're in an IDE like this all we need to do is simply hit new terminal and then once we're in a new terminal and you see your project name here you're good to go now the specific situation ran into was there was a specific dependency that wasn't installed your next question might be is Corbin what the heck is a dependency well one we could ask the chat but in theory just think of a dependency as different features that we can have within a web application SL software really good example of this is if you're familiar with stripe stripe would be a dependency that we would install in our web app for now though
[06:44] we're going to Simply copy do exactly what it tells us and we're going to paste I'm going to hit enter so far so good let's see if it works and there we go if you run it to sors we can leverage code lm's chat feature to help solve them as I'm pretty sure you and me can agree when code we are almost 100% going to run into airs basically the odds of running into an air while coding is the same as the Sunrise and the sunset it's going to happen but maybe like won't happen in billions of years from now but we don't talk about that let's write some code so we're going to come over here to app.js what is the app.js this is where we
[07:16] render live environments for the front end that's why you see edit source app.js and save to reload here and you also see it right here it's very simple idea being coffee as that's what I'm drinking right now command save C Cy so now that we have this though and now we understand the implementation of rendering in the actual underlying code let's use the agent with the agent selected here we can actually leverage a nice little Shand that code LM has by command a you will notice if we hit command I here we can just ask directly what we want to change on the code so as
[07:48] you already know by the project name we're doing Tic Tac awesome so let's make a tic tac toe game I'm going to Simply say I want to change all of this please make a Tic Tac toil game that can be played one human one bot output all code go we H enter there it's going to create a bunch of code here as you can see and then the first major thing for you to identify is that all the code that's in red this is being deleted a this in or probably just Tusk because this is gone the green is the new code coming in and the red again as I said is just byebye code so because I like this
[08:18] I'm playing tic tac to I'm going to hit accept I'm going to save so as I just showed right there that's one way of approaching coding within Cod LM but here's another way let's just ask for the entire output of these files we're going to say give me the new app.js and app.css want to play tic tac toe output the entire code file enter this agent feature is very much the feature you want to use for bigger code changes so as you'll notice it went ahead and updated my CSS here let's check it out here we go not bad this only took a couple seconds here and we're able to render an entire tic tac toe game for example click here x
[08:49] o x o x o okay X wins so as of now we'll just do human vers human as we always love that so I'll play against myself I know that sounds a little sad but I'll play against myself okay it's kind of like uh those people you see in the park playing chess against himself I'm going to do that against myself okay but here is another cool thing as you'll notice with this UI well first off it's just awesome that we got it this fast and it was able to understand what a winner is in Tic Tac Toe where it's a complete straight reset game but let's go ahead and take this one step further here and
[09:21] leverage that attached image feature and I really like doing this in front end development so what I mean by this is we're going to go ahead and we're going to go ahead and attach an image image to reference we want the new UI to look like so I'm going create a new chat here and we're going to use this image upload find a website you really like when it comes to user interface and this is how we're going to do it so I'm in stripe here and let's just say we really like this color Hue and the color palette here I'm going to Simply screenshot this coming back over to our chat here I'm going to upload I'm simply going to say for app.css can we make our UI look more
[09:52] like the attached image hit enter and just for crossing our te's and dotting our eyes I'll provide the code as well so we get that entire output and we're looking good here now with the code output being done there we're going to paste to our CSS okay here we go pasted it over there we go notice how it took like the purple Hue from stripe UI and overall this looks very much more like a stripe type of situation pretty nice pretty nice now once we have this code all put out here we can just go ahead and show off one more feature here use the chat feature this is your education this is like the software engineer
[10:23] that's just kind of sitting there yo yo what's going on here ask it the agent's more of like let's produce and get some code cooking so let's try this again what we can do here is now I can select specific parts of the code and simply do that same workflow of command I this makes it so that if we don't necessarily want to change an entire code file and maybe certain sectors of it it's a lot easier so if I go to the return here grab this mandai I could be like I'm going say let's make this tic teac toe game bigger let's do it so to win I need four in a row enter then we got our changes here we can always reject if we
[10:54] don't like it hit accept save and there we go we got our 4x4 game I did have to change one little thing here just because now we're dealing with four rows instead of three added the four there but we are good to go now we can play tic teoe four in a row let's see if we can get it okay maybe not this game okay try this there we go made it so it happened we have successfully used AI agents to create a tic tac toe game that we can start playing around with on our computer that concludes today's video if you felt like you learned
[11:24] something make sure to leave a like for all the likes I'll see you in the next video code llm two random videos that's my face I'll see you in the next video