I Cannot Believe How Good This VS Code AI Coding Assistant Is!

today I'm going to check out an AI coding assistant called Cody now I know your first question is going to be how is this different from co-pilot well I think the main differentiator is that it's much more context aware it knows your entire code base so when you ask it help with something it looks at other files and it makes recommendations based on your specific context which makes it more helpful but let's Jump Right In and check it out all right here is the web page let's meet Cody it uh knows your entire code base can answer technical questions write code directly in your IDE using your code graph for context and accuracy all right uh looks like it has the basic AI assistant autocomplete that we're used to let's see what else uh AI powered chat for your codes we can ask it questions about our code base we can run custom and pre-built commands so explain code or entire repositories generate unit tests that's pretty nice describe code smells for best practices and Define your own custom commands all right pretty cool we'll jump into those in a bit and check it out and what's really nice is there's a free tier with a generous rate limit which you don't get everywhere so let's go ahead and log in I'll use GitHub and I'll go ahead and authorize this and it looks like it works with a few different idees I'm going to use it in VSS code cool I'll go ahead and install this and I'll go ahead and sign in with [Music] GitHub authorize cool so now it looks like we have on in our sidebar commands so we can chat create documentation that's really cool edit explain smell test and custom command and we have our chat we can start a new chat let's load up a repo and start asking questions I have this repository here that I've been checking out a course Builder from Joel hooks so let's ask some questions about this uh go over to Cody let's create a new chat looks like we can choose from different AIS to chat with Claud 2.0 2.1 instant GPT 3.5 and four right it looks like in here we can use the at symbol to include a specific file that we want to talk about or ask questions about or hash for the type of symbol okay that's cool so we can specify specific pieces of code we can use a SL command for all the different built-in commands uh I'm just going to start out by saying explain this repo to me let's see what it does pretty cool okay so let's see it looks like it it looked at one file it looked at the readme all right so it got all of its context from the readme um it says that this is a proof of concept for building an online course creation tool a synchronous event driven workflows mono repost structure uh includes this in the text stack that's nice and and let's see we got some example of events Youtube upload transcript summary so I can see this being extremely helpful when you're going into a brand new project you have no idea what's going on U just start asking questions and Cody will answer them so to get a better sense of what Cody is actually capable of I want to see if it can help me build an app I have this idea to build an elevated uh gamified to-do app so instead of U mundane tasks like um getting groceries it could be gathering the Kingdom's Provisions or instead of studying it could be mastering the ancient Scrolls so transforming everyday tasks into exciting quests so let's see if we can get Cody to help us build that all right so I have a basic nextjs app I just ran create next app and this is the default page. TSX file and I have it running over here on the right side so let's open up Cody and let's start a new chat I guess so I asked it to help help me create this app and I explained what the app is epicd is a dynamic gamified to-do application that combines task management with ventage fanty Adventure theme yada yada and this is what it came up with here's some suggestions the Tex stack so it knows that we're using xjs uh it knows we're going to need some hooks um it's suggesting a CMS I'm not sure that I need that at this point uh versel will be used to deploy says we need a homepage with hero section example quests uh call to action uh dashboard Quest details profile features would be authentication Dynamic Quest data Quest status retro pixel art theme nice uh ideas for gamification animation sound effects Mobile app all right so nice suggestions let's see how can we get started so let's just see what happens if I say help me implement the changes to the p page. TSX file okay so it looks like it is wanting us to use some imports here fetch quests from utils quests Quest Card okay import page module then we have our quests and all right let's just add this in see what it does so we can copy this code or we can insert it directly okay so obviously we're going to have some issues because we don't have these uh util files and components so let's work through fixing that so we'll need uh to fetch some requests utils quests let's go over here and let's create a utils folder and a quest all right so let's say um implement the utils SL quests. TSX file to only return wa to return some dummy data for now okay so let's go ahead and Implement that so we are recoring and function fetch Quest and looks like we've got some dummy quests in here with ID name description and whether they are complete or not so pretty cool let's save that go back here okay and it's still I put under app okay so I have to change this uh let's use the at and then app that should do it all right so now let's create the quest cards so components Quest Card let's go ahead and create that we'll go to app create a new file components and then Quest card. TSX all right now let's go and ask Cody to implement the quest card code let's see what that does okay so it gave us um Quest Card module. CSS as well as the Quest Card TSX let's Implement that and then let's also add the Quest Card module CSS so let's add that over there it looks like we're looking for name description and completed uh so that might be different than well let's go ahead and and do the same thing here let's at app this and then we're using this Quest card and where are we all right so we have our name so we need an ID a name and a description and so come over here we've got name description and completed and then what do we have here again ID name description completed okay so we need to also send this completed and then why are we getting squigglys here all right let's see if Cody can help us fix this first we need to get our Quest data and let's see if we can get a quick fix on this nice so Cody helped us to implement an interface I might want to put the interface up here though looks like all of that is good let's go to our card let's do a quick fix and ask Cody to fix that okay so now it has helped us to Def find these it looks like we don't have any other errors so let's go back over here and we're having some issues here because of use effect so let's go back because we are using a use effect here and we've got some State and we've got some local handling stuff we do need to make this a client component so we'll say use client and save that then let's go back and I think we have some uh existing Styles here let's just go ahead and delete these Styles and this is what Cody gave us so far I mean pretty good start uh my epic quests slay the evil dragon rescue the princess hunt for Treasure pretty cool we need we need to make some iterations on this obviously we need to be able to complete them and do other things so let's go to uh the quest card and let's make some changes here so I'm going to select this and then control shift p there's probably something in here for Cody uh Cody commands looks like um alt C on Windows might be option C probably on Mac all right so let's do this um alt C okay now we got my slash commands ask doc edit all right yeah let's do edit and then let's say um add a way to check a quest t as completed okay so it looks like it added a span here um and checkbox check to complete on change okay let's see all right let's apply that save so now we' got some check boxes is all right not complete not complete complete all right now let's work on the Styles a bit so let's say um edit okay Cody just applied a whole bunch of Styles um kind of made it a little better let's go back to the chat and let's implement the quest card um module CSS based [Music] on Quest Card create these styles for that okay all right so let's uh let's copy that and enter that there let's see what it looks like looks looks great it does okay let's um all right so let's highlight the whole thing here and let's edit and say make the text uh black nice all right that's much better okay so we have uh slay the dragon rescue the princess hunt for Treasures this one is complete these are not um I can't check them so we have to add that functionality we also need functionality to add another one so let's go back here to page um let's see where should we put this we'll put it here between the header and the other stuff and let's say edit add a an input to add more quests I like the animations the it's just like going all over the place checking things out out and boom all right so we are implementing some stuff here all right we've got new Quest use State blank and then we are adding a new Quest da da nice set Quest adding that and then we have an input here on change set new Quest pretty nice all right let's save that let's go and style it what is this squiggly here must have labels okay let's do a quick fix on that all right let's style this up let's go here let's say add Styles I don't know let's just see what it comes up with okay so it added some Styles here that we need to add into the module so we've got label input and button okay so let's go over to our page module and I'm going to go back to my chat this this time and I'm going to say uh suggest styles for the new Quest input section of page let's see what it does there let's check this out let's copy it and put it into here we'll just doesn't matter where all right let's just put it here save and yeah that looks amazing H he we got a nice hover there oh and the functionality actually works it's not checking uh new Quest description not complete not complete oh so let's try this test it actually it works straight away um all right let's just do one more thing let's um do this edit and add padding between input and button okay so it added ping all right let's save that and see all right that looks much better um one other thing I just want to do real quick where is the H1 uh let's just highlight the whole thing I'm not sure I don't want to find where it's at I'm just going to say add padding below the I think it's an H1 let's say H1 I'm not sure if it actually is or not I don't remember nice that worked it found it it figured out where to put it and it added the padding pretty cool so I didn't have to go look for it okay let's go back to um the ability to complete a quest so completed is here so we need to be able to complete it from uh from the card okay so obviously we need a call here and it probably needs to boil up to we're getting our name description we probably need to pull it into here I mean this is just like I'm not trying to make this perfect so uh let's go to page let's Implement functionality all right let's do this we're going to just highlight the whole thing here and we're going to say Implement functionality to complete a quest and pass that to the quest uh what's it called Quest Card Quest Card QUEST card so let's see what Cody comes up with Okay so let's see where are here's the edits so we have a complete Quest function here which is going to set the quest and find it and set it to complete that's cool and then and then on complete call the complete Quest and pass the quest ID quest ID okay so this is not exactly I guess this is what I asked Cody to do but this is not what I meant Cody to do so complete Quest is what I meant to just pass this function so complete Quest should equal and then not a function just pass it complete Quest and then in QUEST card we need to pull in complete Quest and also we're not pulling the ID so let's say retrieve the ID and complete Quest function call the function when the quest is marked as complete wow okay this is pretty cool all right so we have the ID and then we have ID string yep and then onchange complete Quest passing the ID pretty cool um nice let's save that we go back now we also need to pass in the ID um and so let's go ahead and do that that's pretty quick I don't need Cody to help me with that I think I can handle it um what uh what else we have got something going on here there's a quest ID okay what is this implicit any on quest ID okay so let's see if we can get Cody to help us fix this okay what did Cody do quest ID string okay so seems like this should work now let's see if we can complete we can complete oh we can't uncomplete we can complete but we can't uncomplete well that's all right all right that's fair I didn't ask Cody to help me uncomplete I just said help me complete so pretty funny so I'm pretty happy with what I was able to accomplish in such a short period of time and I didn't get a chance to look at the unit test generation the code smells and documentation that's that's pretty key being able to create documentation on the fly as you go and let AI help you you create that that's pretty cool Cody is generally available as of today December the 14th so go give it a try at sourcegraph docomo I'm going to keep iterating on this app and use Cody along the way so look out for more videos

Channel: codeSTACKr

Views: 200,687

Keywords: artificial intelligence, ai tools, github copilot, github copilot x, software developer tools, dev tools, learn to code, programming tools, developer tools, vs code, visual studio code, vscode, vscode ai extension, vscode ai copilot, vscode ai plugin, vscode ai code, ai coding, ai coder, ai programming, ai programmer, open ai chat gpt, ai coding for beginners, software developer, vs code free ai, sourcegraph cody, sourcegraph cody ai, sourcegraph cody vs copilot

Id: TALwI3J4asY

Length: 20min 3sec (1203 seconds)

Published: Thu Dec 14 2023