How To Use Open-Source AI IDE for Beginners (aide by codestory)
Other Videos📅 2025-01-17
Transcript
[00:00] and we're getting changes I mean this is look at this this is the future y'all when it comes to Ai and our development process and today's video let's check out a an IDE that has AI in it we're going to go ahead and put this AI agent to the test to see if it's any good at coding helping us code and creating actual web apps or software so by the end of this video are we going to give Aid an A+ let's jump in today's video is sponsored by Aid they reached out to me they're like hey Corbin we got a pretty cool IDE we want you to check it out I'm like What's Up went ahead and checked it out and as we know when devel V in any
[00:30] type of code or software artificial intelligence is becoming basically non-negotiable yeah you could still code without AI but it's like doing a math problem without a calculator why put yourself through that so let's go to check it out I'll make sure to leave a link to this in the description Down Below download so in this video we're going to do a react based project just to show you how to even code in this kind of environment we're going to be checking out all of its cool features like the assistant over there but let's go and get started here and choose our theme you already know we got to go of dark modern why Corman because if it's one a.m. I don't want to see that in my
[01:01] screen it's just going to burn my eyes we're going to do dark modern so now that we have our theme here let's jump around eight a little and see what this user interface has for us first thing we need to go ahead and make sure we do is log in so we get access to all of its really cool AI features best part is this is free log in choose email or GitHub I'm going to do get with my nice little git profile here I'm going to say authorized Cod story AI we've been authenticated and we're logged in let's go ahead and get started here and see all of its capabilities I'm going to come down here to this little button I'm going to click these three ellipses and let's go to terminal first thing I want to do is let's go and store all of our
[01:33] code to a specific folder on our computer so we can start editing creating and seeing some cool UI therefore I'm going do mkd R cool UI once that's done we're going to go and just open this folder hit open make sure to select your relevant folder and then from here we're obviously going to trust this as we just created it so yes I trust the authors because I am the author now let's go ahead and initialize our react base app to do this we're going to go down the same little workflow here three ellipses open up that terminal notice that we are in cool UI that means we're in the relevant
[02:04] folder that you see right here in this IDE and then simply we'll put in the command MPX create react app. enter recreating a react based app and we're going to do some cool stuff with AI and this ad so once we do that we're going to see all these super cool files over here which we going to be able to learn more about using our nice little assistant here first off as I like to do in development let's just see what the heck this code even looks like to do that we can approach this in two separate ways first way is that you already know the command line the second way is we can just talk to this assistant so we're going to come over
[02:34] here to chat and we're going to give context here I'm simply going to say we have a react app I forgot how to run it to see it in Local Host 3000 and that's the specific use case of this chat feature this is like we're having conversation about what we're doing in the code here to help us out along the way now what I like about this is that back in the old days if you remember you'd have to scour through the internet look through Reddit forms stack Overflow oh no no no now we get it fast so where you you see right here is we got mpm start let's try it mpm start hit enter so far so good success so we set up our
[03:06] code environment here and notice that all that code that's been reflected in local 3000 can be found in our app.js but let's say we didn't know that I can hit new chat and we can start using another feature here by Aid which is our ability to add context in the chat which is pretty important in coding because a lot of times you don't want to start in a fresh Light you want to give code files or just more idea of what code we're even working with so if I come up here to edit you can see a couple options here what I like typically doing especially if you're new to development is just select everything so I'm going to open this this this this this this
[03:38] this this and this this could seem excessive if you've coded before but really if you are just approaching coding for the first time especially in the context of an AI IDE this is the best route you want to give as much information before you start talking to it so you get correct answers edit we're going to select all I'm going to hit okay now watch this we don't even need to use developer jargon we can simply just ask what the heck's going on when I do mpm start I notice it renders in Local Host 2000 how do I change the code shown here I see a moving image and text
[04:09] moving image and some text obviously if we read the text it tells us the answer but let's just assume we don't do that hit enter a is generating and there we go it gave us our answer here where it's defined in the app.js so now we know we make changes here so instead of saying and save to reload I just say coffee is amazing and hit save you'll see coffee is amazing so fundamentally that's one of the first major points of Aid and its ability to integrate AI in our workflow is we can just talk over code base get more context of what's even occurring
[04:39] here and ask very specific questions with this pin context feature so with that done I'm going to unselect these therefore when we're talking to a the next question you might be asking is like okay this is cool but Corbin what model are we even using if we come down here to our bottom right we can click cluts on it and this is what we have access to within Aid which is pretty cool gbt 40 3.5 code llama code llama deep SE coder CLA Sonic Hau I mean whichever one you like coding with based off your past go ahead and choose personally I typically like either gbt 4 or Claude I typically lean towards gbt
[05:11] more why just cuz I like gbt but for now we'll stick with Sonic and let me show you something really cool that I really like about Aid here is our ability just to select some code so for example let's say I select my return statement hit command K I can be you know what I want some code and we can do something like please code out a modern UI landing page for an article describing how amazing beef hashes with tobasco sauce that's a real statement that's is what I like to call facts and then what you'll notice is that we're going to get our nice little execution over here and we'll get all the relevant code show up right here now I'm a little zoomed in so I'm me
[05:41] going to do this real quick and we're getting changes I mean this is look at this this is the future y'all when it comes to Ai and our development process so looking at all this code here I can hit accept all with that done make sure you hit save in the JS save in the CSS and oh yeah we're cooking I mean that looks really good I kind of want toat eat that right now we got a nice little header image obviously this is very much a placeholder image that we could put the real corn beef hash here if I scroll down here it knew exactly what to do even as far as this nice little UI of quick recipe and all the relevant stuff
[06:12] to make the perfect corn beef hash we've said to Pasco SAS so far so good and what I really like that you just saw in that workflow right there is notice how we can either reject all accept all or save I think one thing that's kind of broken in the market when it comes to integrating AI in your coding workflow is sometimes it doesn't have that little insurance check where just like hey hey you actually want this change some platforms you just put in in a prompt like that and it just starts kicking kicking to the point where it's like whoa whoa whoa you just changed like 40% of what I just coded for the last two
[06:42] weeks so that's nice we're able to see exactly what's changed more context keep proceeding so you learn two major things about Aid here the ability to chat and the ability to execute so we were able to pin context to an entire chat we're also able just to add very specific files that we care about no not adding like adding me on X okay for at and then we can either put code or file so we'll do app.js now two things I want you to notice here the first thing is that we're going to be able to reference app.js which is going to be the entire code file that's cool but the second one and I did this on purpose is I'm asking
[07:14] for the UI to pop a little bit more when it comes to color and as we know that usually is done in the CSS what's cool is Aid here is contextually going to know that if there is an app. GSS and we're importing from the app.css therefore we need to make some changes to there I'm hit edit here and for more context here when I was saying chat or execution I meant like chat or edit edit being actually making changes to your repo while chat is more of just like what's even going on asking questions about your repo I say repo all those files over there so there we go it lasered in on the JS and it actually
[07:46] identified W you want to make the colors pop more but that's done in the CSS rather than the JS okay therefore let's do that we're going to do at app. CSS hit enter let's see what happens and with that simple request were able to get a nice little colourpop here like an orange Hue so there you go now you know how to create a react based app within Aid here able to chat with it understand it and even execute code using artificial intelligence when it comes to pricing we got two major tiers here so far we get the free one which we all like let's just see if we even like the product so you can completely install
[08:17] for free check it out in the description down below but then the second tier here which is $20 which is basically the cost of a Chad gbt subscription allows for infinite invocations that's important I think every other AI IDE on the market right now you're still capped on the amount of times you can talk to AI in your workflow so when they say infinite they mean infinite you know infinite and Beyond well they're going Beyond there we go that's everything we need to know about Aid as fast as possible I'll see you in the next video it's AI encoding AI coding to random videos that's my
[08:49] face I see you in the next video