Augment Code: Developer AI for Real World Work

--- type: transcript date: 2025-02-03 youtube_id: 1WpVivkDKxA --- # Transcript: Augment Code: Developer AI for Real World Work all right in this video I'm going to be showing you augment code which is an AI IDE extension that's designed for real world work in this I'm going to have it go head-to-head with cursor with the new deep seek R1 model that everyone's been talking about and I'm going to put it up head-to-head to augment code to see how well it does we're going to try out a number of different tests on a repo that I've been working on which is essentially a clone of anthropics CLA artifacts feature in this video I'm going to quickly go over augment themselves I'm going to try and attempt to solve one tricky bug that I've been having a problem with and I'm going to go ahead and try and add in a small little feature that I'm looking at adding in as well then I'll also focus on some of the features within augment itself just to get you familiar with the platform right off the bat let's just touch on Ogman I've been using augmen since about December or so off and on and where they're different is they're really build and leaning into the part of the market that's designed for quote unquote real world work now what do I mean by that so if you've seen my channel I've really reviewed a lot of these AI code idees and generally speaking what I do is I'll go and I'll create a project completely from scratch one of the common criticisms with a lot of these Ai idees and code editors is they're very good for some zero to one work but when you get in a large production codebase that could be thousands or potentially even tens of thousands of files that's where some of these don't actually perform as well with trying to retrieve retrieve the relevant files or go ahead and make particular updates where augment is different is they've really focused on having an IDE that's up to-date and indexed with all of the different changes that you make within your repository there's a few different things going on as soon as you put in a code base it's going to go ahead and index that code base in a particular way they have a proprietary way where you can go and like I said have a code base that's tens of thousands of files potentially and they're going to break up that code base in a way that makes sense for coding specific Tas from what I understand under the hood it's definitely more sophisticated with how they're actually storing and then retrieving that information it's better to dive into the editor to just show you around a little bit they do have both a vs code as well as a jet brains extension once you go through the installation steps it's really easy to get started now if it's the first time that you're using a repository it's going to go ahead and index that repository if it's a particularly large repository it might just take a handful of seconds to go through and actually index everything but once it's indexed it's going to stay up to date as you make changes so the first thing that I want to do is I want to add in a new feature within this project I'm just going to say I want a react component and what my plan with this is within here we see that we now have these thinking tags we see think and then we have it stream out we have the component here we have the code but the feature that I want to add is I want this to be filtered out to the user I don't want the user to ever actually see either of these XML thinking tags the first thing that I'm going to say is I'm going to say within the panel on the left hand side I do not ever want to see the XML tag think or think similar to how I am filtering out the developing tag I want to do that as well I already do have some functionality within there where I am parsing out certain XML tags as soon as I send it in we'll get a response coming back very quickly we'll see I'll help you modify the code to filter out the think tag look at the client chat dashboard file we need to update the render content function where the filtering happens within here we can see all of the different tags here I have developing and digesting and now it's also added in this thinking tag as well remove any think tags and their content that's a key piece that I actually don't want I'm going to say instead of filtering out the thinking content want that portion to be wrapped in a span with a Tailwind class to make it italic let's go ahead and we'll send that through and then once this comes back if it comes back with a good generation I'll go ahead and apply it and show you what that looks like so here is where I love AI I do not like rejax at all I like using it but I do not like figuring out how to actually write it so here we see the reject statement where it's filtering out the tag but within here we're also going to be adding it within this span here now if I go ahead and apply this it will go ahead and it will find the relevant information within the file now the other thing with this that I like is in my opinion it's really built in a way for intentional changes within your codebase and it encourages you to actually read through what you're applying because with some of these agentic idees the one problem that I see with this is if you set it free on potentially a gigantic that that could potentially have some serious repercussions if you're editing files that you shouldn't be editing and what have you what's different with this is it really forces you to see all of the pieces of the code base that you're changing if you follow the patterns that in my opinion it encourages what we're going to do is we're going to go ahead and we're going to save this out here I'm just going to say create a hello world component all right we see that it came back but the span is actually rendering in line and we still had the thinking tag as it was streaming out let's go back to the drawing board here and I'm going to say I want to not show the think tags well it is streaming and for the solution above it still showed the span within the markdown renderer we'll go ahead we'll send that through we need to handle the think tags differently for streaming content and modify how we handle it in the markdown rendering let's just go ahead and apply this and see what what it did here here's our proposed solution so if it isn't streaming it's proposing to use the markdown italic syntax and for when it is streaming remove the think tags completely let's go ahead and let's accept this and then we also have this edit here as well which I'll also accept we'll go ahead and I'll save this out and try and render this again so I'm going to say create a hello world component we'll send that through now we have another issue but we're starting to get within the vicinity of potentially where we want to go it looked like it was delayed because when it was coming in everything within that thought process was being hidden now we're going to try it again and I'm going to say I want to instead show everything within the think XML tags while it is streaming now a lot of these tools and that's the thing with AI is it's going to be an iterative process it's like your co-pilot in thinking through the different solutions let's go ahead and apply this so during the streaming extract the only contents within the think tags and then we also have a little bit of conditional logic here so let's go ahead let's save this out let's go back here and I'm going to say create a hello world component I'll go ahead and I'll send that through and we see all right the user asked me to create a hello world component I need to figure out how this works we have the thought process between these underscores here I I want to instead have this section of the markdown indented as it is streaming we basically have what we want now we're just at the point where we just want to change some of the Dom elements of How It's actually streaming in and structured it's going to modify our code here we'll go ahead and apply this here in this case you can also just use the key bindings as well if I command enter that will accept all those changes I can go ahead and command s the other thing that's great with apply is as soon as you click it even if you don't have the file open it will just go ahead and do the same process it will go through line by line block by block of the changes that is proposed and you can go ahead and accept them or reject them now I'm going to say create a hollow World react component I'll send that through and there we go so we have it all indicated within this coding section here of the thought process so we see okay I'll create a simple Hollow World react component since this is a self-contained react component it can be reused and then I can go from there can create a header and footer create a linear gradient background and there we go so it looks great we have our thinking process that is broken out here and then we also have our functioning react components now that we've used it for a little bit and you get a sense on how it works you go through the process you ask for the code it's all indexed it can do gigantic repositories that are pretty complicated and it will give you relevant suggestions that sort of push you in the direction of what you want to do now let's fire up cursor now I have the same workspace open within cursor here I have it set to deep seek which they just released hours before I recorded this next I want to try and resolve a bug right now there is some form of infinite Loop issue with the streaming within the artifacts panel there we see that we have this maximum depth updated and it's repeatedly calling the set State inside the component Etc so on and so forth here we see that it's an issue on this hook that I'm calling to set the artifacts this is an issue that comes up in particular when I have multiple artifacts that are being rendered in so let's copy this error and I'm going to go with incursor and I'm going to say I have an issue when there are multiple artifacts being rendered and streamed out the application will crash and show this error I'll make sure I have deep SE our one selected and then you have the option where you can submit this or you can submit it with the code base let's go and submit it with the codebase chat option what it did here is it performed some sort of search algorithm where it ranked the different components within my project here based on what looks like the confidence the relevance or something to that effect then from here it's getting the final codebase contact it's going through certain files that I have I have some some very large files within here you can see within here it's grabbing different pieces and we have the context within here we have the thinking tag this is similar to what we just solved with the R1 issue within our application and now we see okay let's try and figure out what the user is getting with the maximum update depth exceeded error looking at the code here we have this pretty big block of the thoughts that the R1 model had within cursor and then once it finishes it says okay the error occurs in the stream artifact content function where where the artifacts are being added one by one causing infinite rerenders here's how to fix that we have the start line we have the end line and we have the key changes and what have you and then it's also telling us to use the effect dependency array for the correct artifact State Management let's go ahead and apply this so you can accept it similar to agmen now the apply is a little bit different so that looks to be all the Chang here let's go back let's try this again I'm going to say I want five distinct visual react artifacts we'll go ahead let's send this in and let's see if it resolved that issue so here we go we have the thought process and now our application just completely crashed this is something that I haven't quite seen within here it looks like it potentially introduced a bug here so let's just circle back on some of the changes that it made here now if we take a closer look on why this crash and we look at the code here we see that within here it's actually removing quite a bit of functionality that is required for the application let's just go ahead and put a pin in this and hop back over to augment and try the exact same question I'll go within vs code here I'll scroll back to the bottom and I'll paste in this exact same message here I have the issue where there are multiple artifacts rendering there we go the issue is likely caused by multiple State updates triggering rerenders in a Lo let's modify the artifact streaming logic to be more efficient and prevent infinite Loops I just want to pause for a second and actually just review the two side by side here within augment we got the response pretty quickly but if I go over to cursor there was actually a completely different process that it took on how it retrieved the information and I think this is really the key point on something to highlight within augment that's different than some of these AI idees because what augment does is they really focus on indexing and keeping a live index of your codebase where it will go ahead and perform that retrieval augmented generation where it will search relevant pieces of code where it's able to successfully find the relevant context of what you're asking for with natural language within your code base and that's something that's different is it's not actually performing this search algorithm that cursor is doing under the hoods I'm not entirely sure what this is so it does seem to rank the files but if I'm just thinking about it in the context of a codebase that's like tens of thousands of lines of code I'm not sure exactly how this search functionality would work that's the claim with augment is if you have something with thousands of files or tens of thousands of files it potentially is a better approach than some of these steps that are with incursor rang let's go back and take a look here the issue is likely caused by multiple State updates triggering reenders in a loop let's modify the artifact streaming logic to be more efficient and prevent infinite Loops here we go it went right in to find that relevant piece and we have this full code block here so let's apply this let's see what the diff looks like in this case let's go ahead and accept this we can go ahead and accept them one by one or alternatively you can just command enter at any point and save them out just like that I'm going to say create five visual artifacts I'll go ahead and I'll submit that and within here we see that it's stream out all right so now let's hop back to augment I'm going to put in this exact same piece of code here and we see the error occurs because there's a circular dependency in the State updates looking at the code I can see that the issue is in the Stream artifact content function where multiple State updates are triggering rerenders that cause more State updates here we see that it's giving us the block of code and if we take a look at the code here we see the diffs of some of the changes that it made and in terms of what it's looking to edit is the tweaks are actually a little bit more subtle than what we had previously seen it's not removing Big Blocks of code and we actually have also some other functionality here where it's batching some of the State updates as well I'll just go ahead and let's take a look at what this looks like so I'm going to say create five visual react components within here we see it's rendering all of those out and it actually look like it potentially solved our issue so let's just test this a couple times here let's say create five SAS landing pages in HTML here we go it's thinking through the process we're going through it's streaming all of that out we have our HTML file next I'm going to say create a diverse set of visual artifacts I'll submit that it goes through the thought process we're going through it's creating a number of different components here and it didn't crash on any of them would actually solve that like I am genuinely impressed cuz this is a non-trivial application this took me some time now these are just silly little diagrams and stuff here but just the fact that it was able to solve that in effectively one shot right like cursor is something that I use all the time and nothing to knock cursor like it's a great option for particular use cases but honestly augment is very interesting with their approach on how they're building out their IDE extension cuz being able to index your repository in a lot of ways is if you do that well and if you really focus on that portion you could potentially have a very effective tool across a giant Enterprise application another thing that I want to highlight is within here is the QA process is because there is that effect of retrieval within this I could ask something like what type of components are supported within the artifacts functionality I'll go ahead and I'll send that through it's generating the response and almost instantly it gives us this breakdown the code artifacts we have this ant artifacts within here it can render markdown it can render HTML within here it can also render svgs it can render mermaid it can render react and it even gives examples here it shows the tokens that stream in we have the developing here and then we have the identifiers which is effectively how the cloud interface also works where you have these XML tags as well as these attrib indicating different aspects about the artifact like the title and the language and what have you let's test it within cursor and see what it says the user is thinking about XYZ it's going through and it will take a moment to give its inner monologue there if we just break this down within the list we have mermaid diagrams we have code blocks which there are code blocks but it didn't indicate what type there is streaming artifacts which is interesting because it's actually not following the same pattern here we have Interactive components so copy to clipboard expand clap sections we have the specialized input component and so on and so forth but if we go back to augment with the exact same question we have based on the provided code and the system message here are the supported artifact types and their specifications we have code artifacts we have documents markdown HTML svgs mermaid diagrams and react components this is the right answer here this is what I have set up within the application it can support svgs mermaid diagrams react components and it gives me even the exact example whereas with in cursor and deep seek it didn't quite do that let's pivot and let's use Claude 3.5 sonup which is arguably probably one of the more preferred models for developers especially within cursor so we have mermaid we have code blocks we have markdown content so even here so we have mermaid code blocks and markdown content let's try it in a completely new chat here and let's just go ahead and let's send it through here what type of components are supported within the artifacts functionality within here we have HTML we have SVG we have react mermaid code blocks markdown and here it's giving us the breakdown so when I switch to CLA 3.5 Sonet and I clear the conversation it does give me a little bit of a better response here we have the HTML content we have the SVG graphic and then we have some comments describing for react mermaid as well as the code blocks and mark down here and then within here we have the switch statement that it did grab correctly so overall I definitely encourage you to check out augment especially if you're working within a team setting or a large codebase now the other great thing with this is you can try it out completely for free if you're interested in these types of tools you will be able to try this out and see if you like it this is going to be more expensive than something like cursor or or wind surf or these idees but if you are working in a large code base or if you just want that type of coding where it's very specific maybe you're a solo preneur or something like that and you have a relatively large application and you want something with some really good underlying techniques on how you can leverage AI within an IDE it's a very thought out process I do encourage you to check it out otherwise that's pretty much it for this video if you found this video useful please like comment share and subscribe otherwise until the next one