ChatGPT-4 and VS Code

hello now that chatgpt has reached its fourth iteration and taken over the world I wanted to take a look at what's possible if you fuse it with vs code and this video will install an extension that allows us to tap into chat gbt4 use it to try and understand some code and maybe then write some new features into this uh this little text editor that I'm working on so let's go I'm in vs code here and I'm going to just look at extensions type in job GPT to begin with and we'll see that there are tons of these extensions of course already the hype is high there are some ones with tens or hundreds of thousands of installs but I want to skip down a little bit lower down to the one that mentions chat gpt4 if we look at what that allows it's a free no session key or open AI key required and it does support gpt4 and says that Generations are relevant to your code base with JavaScript and Python and typescript natively supported so this is easy code AI now it says it's all all secure Securities uh Top Notch but uh but but always good to be a bit wary about security issues here but I'll install this and let's see what it can do so you can ask the code base what does this application do uh-huh you can do things like R squares user authentication handled what changes are needed to do X okay and so you can use it to understand the big picture perfect and then you can go down and understand the specifics so right click at a piece of code and ask GPT for open-ended questions or kind of these pre-figured questions such as what does this do so then it'll explain in detail what the code is doing how is this method used it gives a nice description of the method how's this entire file used and then get code suggestions so if you've got co-pilot from GitHub already similar to that and then for book hunting analyze stack Trace errors to figure out clauses all right is 10 GPT Forge for you to use okay free to use during Alpha so this might get paid later on okay so let's install that let's see we want is needed make sure you can already use the find all references feature in this code [Music] I should be uh should be doable find all references yes and then index code base upon installation you will see the option to index the code base it's an important step that helps AI provide answers that are relevant to your specific situation choir to use the ask code based feature make sure to index a folder that contains most of the logic right Okay so we've got that we've got it installed chat gpt4 here on the left side here we see a whole panel for that so let's add context yes and let's uh index the code base so we have our folder it's going to index that I've logged in already but that was a simple process to just sign up and log in Okay so yes what we've got here is a simple text editing app to look at code wise so it's got writing basic formatting um color modes full screen trying to keep it really minimal so that's what this code here is doing and uh let's see what Chachi BT can do I should also mention that here in the settings of the chatubity option we can choose between 3.5 turbo and four I've switched it to four so how is this file used okay can I use it here how do I understand what the whole thing is doing how is this file used okay oh is this full used what's the whole whole broader context okay well how is the editor js6 great yep well it's not an HTML document if I click the right thing let's try this yes code above is a JavaScript implementation of a rich text editor called pen flow provides functionality such as initializing the editor correct loading and saving the editor State yes updating the text formatting options bold italic quote and URL as we saw Yes counting the number of words window resizing great so that's a nice nice summary okay so if we're in the editor.js can we understand it better there's a lot a lot going on a few hundred lines of code um let's pick a message here we have options what does this do how does this method used how is this file used what does this do defines an init function so it's a variable writing to false yes called the bind elements function which is not defined and then again given but is likely responsible for connecting HTML server elements aha pretty clever so it uh even though it's defined a little bit lower down it makes a guess a good guess at what's happening because it creating bent bindings okay so how do I get it to understand everything ask a high level question how does the UI work sure beautiful initializes with the init uses bind elements absolutely event listeners yep are triggered when the user interacts with the UI elements aha Save State load State functions yes to update word count uh-huh great anything else sure default editor and UI obvious enough yes okay it's a simple project but it's a what we can know so default well this is good information it's used when there is no save content in the local storage when the user loads the page for the first time brilliant and correctly it says that editor contains the core functionality of the text editor the UI handles user interface components okay so this is beautiful helps me understand my old code nicely um let's zoom in a little bit so is there anything that's particularly complex or perplexing about this code here get boned inclined rectangle a click oh it kind of seems clear enough composition start okay what is what is this method oh yeah nope I want to say what is this composition start event is triggered yes so I can dive in a bit deeper into something specific okay so composition start is a document object model event that is triggered when a user begins composing text using an input method editor so it's really inbuilt into the Dom great and good and fine um what else can we do a few more questions so we could uh write unit tests well let's try that Attain not that I'm a beginner test writer but uh does this just not uh remove the boring bits of coding really nicely yes Target is your input URL class contains your inputs and should not qualify nodes Okay so all right comprehensive by the looks of it okay so I think we have a grasp of how nice this is in terms of understanding the big picture of a code base and then being able to zoom into individual methods and ask follow-up questions really lovely and it does seem to understand the context pretty nicely when you allow it to index the folder at least at this level of complexity so the next step would be to actually do something useful and add some new feature to the code I'm thinking that in our text editor we have a couple of these options bold italicized quote would be nice to have strikethrough as an option if you're editing stuff and wanting to show show that it's no longer relevant so strikethrough option toggle here so it's adding to existing functionality but uh basically an entirely new thing so can I just ask a question here it's too complex a question how do I add strike through as an editor feature great so we'll add a strike through button to the text options and the bind elements function that makes sense we have our bold button metallic button let's have it here so oop why are you not letting me uh select that exactly so we had a strike button query selector for strike and a what happens when you click it okay so we're adding that button to that little menu and binding it um we need to have that function in the editor JS it's lovely that tells us where this is going so if we have those clicks elsewhere create event bindings save state only talk like I was just looking for these places where things go so if we've got on Bold click and on italic click then we should have on strike click two I think is up with my copy pasting well I can write it foreign update box states to handle the active state of the structure button so it knows there so again we have bold metallic block code URL so we will want to have basically the same that's all good and then we say record stroke give it a class name it's a straight jacket and then the quote button it's not quote button is the stroke button yes we are finished with the editor file yes and then we need to actually add that button in our HTML to those options yes that makes sense so where we have our div here that shows these UI inputs we should have one called uh right I wanted it here to Reynolds and okay slightly different it's got its title whereas these don't and it's got a box by metallic whereas this is Strike icon maybe just make it much we'll we'll link it here okay and then we need CSS for the strike through button um yeah okay so it doesn't actually tell us in the CSS what the strikethrough means okay so how do you know if I don't know the csfs by heart I can use the text decoration property correct with the value line through that's exactly right so now it's telling me what that would be text option strike um let's open let's open the CSS what does it do for quote block quote here oh it is there like options italic okay so we find a place here so text options be here now it's saying strike through it's saying strikethrough because what's up [Music] foreign any class that has that should have then the text decoration um property with uh line true line through as the value so if I've got that so this is the the property that needs to be applied and that's what should be happening strike through metallic bold yeah strike through though foreign did not tell me that I do need to add it to the components of the editor at the top here um of course needs to be initialized and telling me that concept properties of null is trying to set the strike button on the click because it's not been through yes be consistent okay so now if I um run that I have a space here but it does the strikethrough thank you GPT what's missing is the the icon exactly so let's try and get that going um if we look at how the other icons are done they're just svgs I have added a strikethrough SVG so we should just point to it properly and there's an icon CSS file and just type that [Applause] appropriately let's see what happens coming through let's just call that strike through uh strike strike itself is a bit too short for me um okay so what was the issue was it was referring to strike through a strike but once we've done that when we get this new icon there as well pretty great so now we're able to strike through text we added a totally new feature to our text editor basically with a very correct set of suggestions from chat jpt4 having understood the context of the code base picking through multiple files broadly correct missing out on just a bit in terms of needing to add that variable um for the button and the CSV was CSS stuff was uh left a bit big and I I've been tweaked it to uh let me strike through but other than that it's it's working it's working beautiful okay I don't mind using this a whole lot more let's see if uh open AI can keep up but I'm really enjoying the capacity to just sort of dive deeper into an understanding of things so I can maybe ask ask something much more uh specific and keep delving into a deeper understanding of the concepts and terminology right here without ever leaving vs code and no doubt this ecosystem will continue to develop but Breakneck Pace with new extensions new options plugins things happening fast for the coming months so it's going to be pretty exciting and I would suggest and suppose that before long it's just all going to be so woven in to the software we use that is going to be like an invisible layer on top of everything with all the thrill and danger that that can provide so yeah have a go open vs code take a look at the extensions I didn't need an open AI account for this I didn't need to pay anything so uh at least at the moment so um have fun give it a go see what you think and have a great day [Music] foreign [Music]

Channel: Mikael Codes

Views: 8,799

Keywords:

Id: 2pzk4KJDc3c

Length: 23min 25sec (1405 seconds)

Published: Sat Mar 25 2023

Reddit Comments

[u/Kuroodo]

Based on the reviews, you need to pay money to actually be able to use this with GPT 4? Like, it's not with your GPT plus account and neither can you use your own API key if you already have.

Therefore a heads up before anyone spends their money: Copilot X will do everything this extension does. So hold on to your money until its released