Transcription
I want to talk about GitHub co-pilot agent mode. This is a mind-blowingly amazing new piece of functionality in VS Code, and it's sort of like co-pilot, co-pilot chat, and co-pilot edits, like all jammed into one, but like even more.
And what I mean by that is, like, yeah, you can add new pieces of functionality, refactor code, you can build an entire application, like we're going to do today. And as it's generating code or iterating on code, it's looking for warnings and errors and ways to improve the code, and it's checking itself along the way. And it can do things like run terminal commands. So it can add NuGet packages, it could build your application, it can launch emulators and simulators, and a lot more.
So what I want to do today is build an entire application from scratch. And what I'm going to do is just simply use my voice and talk to VS Code and get a co-pilot and have it work on a real application to help me track my coffee consumption. It's going to use real things like a SQL database, MVVM, a bunch of NuGet packages, and a lot more. We're going to see what it can do, and we're going to iterate along with co-pilot agent mode. So let's do [Music] it all.
Right here, I am inside of VS Code Insider. So I get nightly builds here. I have a brand new .NET MAUI application. So here's my MAUI program. I just did file new. This is the application calling more copies that's going to help me drink more coffee and track my coffee consumption. And then I just have some standard extensions such as a C# DevKit, .NET MAUI here, GitHub co-pilot, and one of my favorites, which is VS Code Speech, which allows me to do speech to text.
So let's go ahead and let's say we wanted to add a new feature to this app, or in this case, actually start to build the application. So I'm going to go ahead and hit this little open chat button for GitHub. And I can go between chat, which obviously allows me to like talk and ask questions and it can write some code, but I'm also going to go over to co-pilot edits, which allows me to define a set of working files to make multiple file edits all at the same time and iterate on it as well.
Now, this has an edit mode, but also a new agent mode. And the cool part about agent mode is it's edits with co-pilot, but co-pilot can use multiple requests, pick files to edit, run terminal commands, iterate on errors, and a lot more. Here, I can go ahead and use different models, like I could use Claude, for example. I could upload an image here if I wanted to to give it context. So if I had a diagram or an image of what I wanted the UI to look like, I could do that. But I'm just going to do voice chat and tell it what I want it to build out basically.
Here, let's update this application to be an app that helps me track my coffee consumption. I want to update the main page so it's a grid. And on the top of the grid has a list, and specifically a collection view of all of my coffees that I'm consuming. Has the name and the number of ounces that I've drank. And below it, I want to have two rows. On the top, name entry. And on the bottom row, I want it to be on the left-hand side, uh, number of ounces that I want to enter and a button to add the coffee.
Now, when I add this coffee, I want it to also add into a SQLite database. And I would like for each of the files for the models and for the database to be in their own files in a separate folder.
All right, so I've gone and just given it a whole bunch of information, and it's going to try to parse it with the context of this application and break it down. So it's going to look to see what folders and files and models need to be created: uh, the coffee model, database service, main page UI, and it's going to kind of see what's in the codebase and what it needs to initialize as well. And then it's going to start doing stuff, and then I can iterate on it as well. And note down here that I can pause it, I could stop it and cancel that request.
But here, it's going to go and say, "Hey, let's install a NuGet package." And it's going to note that I actually need to do it on my .csproj. Just going to CD into it. So that's kind of cool. Uh, and I'm going to hit continue here. It's going to add that NuGet package, and then it should add a models and services folder and start to iterate on the application a little bit more. So let's see. Boom, there we go. Cool.
So we have name here, we have ounces, and we can see that here. I also like that it added a date added. That's nice. We have a coffee service. So here, now we have a full SQLite database. We have get coffee async, add coffee async. It's going to update the MAUI program. So here we have the coffee service that's kind of nice in there. And then now it should be hopefully updating the main page of the application. And again, it's checking, going through, and it's like taking a look at it. And then hopefully it's just going to kind of iterate on it as well, and hopefully delete all this content and then give me a nice UI based on my description.
So let's see. We do have a, uh, item template in here, collection view, data template, and then we have an entry and a button here, and another entry. So that looks good, right? Cool, cool, cool, cool. Looks good to me. And you can see the diff as well. So if you were iterating and adding a new piece of functionality, you could really see that what was going on here. And then hopefully, here's the code behind. And yeah, now it's doing some dependency injection here, the coffee service, loading stuff up, adding the coffees on here, and adding everything up on here too, which is cool.
Okay, cool. Uh, one thing I want to point out here is that it checked the XAML, right? And it says, "Oh, there's one problem found." And notice one error in the coffee.cs model or going null safety. So it's going to go through and it's going to try to iterate on here, and it's going to say, "Hey, this is what the agent does. It says, 'I looked at it, I see that there was a problem, and let me try to fix it,' right, by making it required in there as well." And here it says, "The data will persist now between app launches and it's stored here. Would you like me to make any adjustments to layout or functionality?"
So I know that I don't think this required works here as well. But on the coffee model, let's not use required. Let's make it a nullable string. So I'm kind of reviewing the work, and I'm noticing here, I don't really use required a lot, and I'm not sure if that actually works with SQLite.NET. I guess I could compile it and see, but, um, I'm, I'm just going to make it a nullable string and and go from there. That's how I would do it. Let's look at the code behind here. That looks pretty good. No problems found. Again, it's going to actually check it and see, right? So it's like, "Okay, the application will continue to work here."
Now, I'm going to hit the keep button, and we can parse it. So we have coffee added, adds a new coffee, add a coffee async, and it loads all the coffees. Looks like what it's doing is it's setting the coffee list item source equal to that, so whenever it calls it as well. So let's go in and let's just run the application and let's just see if it works. I have no idea at all, right?
Okay, so we've added SQLite, we've added here. Okay, cool. So we have coffee name. So I'll say Kenya and I'll say 10. I'll say add. Hey, we got 10 ounces. All right, cool. That looks good. But let me have it iterate on this a little bit too. So let me go ahead and, uh, close this. Can we add a little spacing on that main page with the entries and the button? Everything is really close together. Let's give everything some spacing in between the columns and rows.
So just like before, it has this working set, but it is kind of looking at the entire sort of application. So in this case, it should go through and hopefully figure out what it needs to change on this main page, and then it's going to iterate through and apply those changes. So here we can see the columns and rows and padding and spacing that's going on here, that should be hopefully a little bit better for all these all up. And again, it's going to verify these changes and see if there's any problems found here.
So here, looking, and it's saying, "Okay, like, actually, there's two problems found." But it, I'm assuming it's looking at these problems that are here too. So it's going to say, "I noticed an improvement of performance to add the X data type on the coffee model." So it's going to go through now and add these models, namespaces, and start to iterate on this too. So add all these in here too. So this is what it did. Boom, did do everything else. Cool. I think that's it. I think that's good. I think that's good.
And then let's go ahead and try to run it again and let's see what happens. I'm going to go back to my my program, hit run, and let's see if it does this. And I have noticed that sometimes when I'm working on my application, that these problems, especially in MAUI applications, don't seem to close out unless I run the application. So it might try to fix itself again and again. I might have to stop and then actually compile it again and and make it go away. So if you see that happening, hit the stop button, recompile, and go there.
Okay, so we have some spacing here. So this is good. Kenya and then say 10 and then hit add. Perfect. Okay, that looks really good. All right, awesome. So I like that. So let's do something else here too. Um, can we also add a little summary on this page that shows me the total ounces of coffee consumed? So now we're sort of iterating on the application, and what we want to see if we can do is, uh, see if it can iterate on it a little bit here too.
Okay, let's see. So it says "Run" in here. So let's go and rerun it. So perfect. So now we should hopefully get another row. Perfect. That's going to update it. Total ounces, bold inside here. That looks good. Then it's going to update the code behind, calculate and display the total. Cool. All right, this is great. Beautiful. So we get everything labeled here as well. So now again, no, no problem in our XAML. I like that. That looks good. Changes are good. All right, let's keep those and then let's go ahead and re-run it and let's see if we get some new functionality here on this.
All right, so here we get total coffee consumed, 20 oz. So I'm going to say Colombian and I would say 25, hit add coffee. Boom, everything updates in real time there as well. So looks good. Okay, now one thing I'm noticing is it's not using any MVVM or data binding. It just decided obviously to use data binding here, but it's not using any data binding here at all. And there's a lot of code behind in this main page. So let's, let's abstract this out. Can we use MVVM and add a view model here for this main page? And specifically for the MVVM, I want to use the .NET Community Toolkit MVVM that has all the nice source generators on it and nice implementations.
So hopefully now we're going to start to refactor our code, right? And we say we want to use MVVM, we want to use the .NET Community Toolkit, and and see if it can do it. So let's run that command and see if it can use this new context of this MVVM stuff that I want.
All right, cool. So we're going to add the NuGet package. Let's continue here. Perfect. So now it's going to go and generate an entire new view model for me. It has an observable properties, relay commands, and then, yeah, we're now going to register the main page view model, everything on here. What we should also be doing hopefully is removing all that code behind, um, in that that it doesn't need anymore.
All right, cool. Again, oh, it's going to update the UI, of course, because there's some new data binding going on here. And then, yeah, we get the code behind updates here, and this hopefully removes a whole bunch of stuff. So that's great. And again, it's going to go and check. So this is, this is that agent part, right? It's able to add the NuGet packages, it's able to now check for problems in that code that it generated, and then apply those edits. So the null safety warnings that that were there, so it's initializing strings, uh, in the constructor for us automatically, cleaning itself up, which is cool. Now those problems go away, and we are totally good to go. Let's see if it needs anything else. Nope, that looks good to me.
I'm going to go ahead and try to run the application now. I'm curious. I said I'm going to go and try to run the application. It's going to give me a command to run the application now. It's going to let me run it. So perfect. Let me go and keep those changes. And I don't know if I need to necessarily always be changing and keeping them the entire time, but at least for me, it makes it easier to read, uh, which I think is is nice. So now let's go ahead and let it auto-compile up.
All right, so we have all of our coffee on here. So let's do a, uh, Costa Rican coffee. I'll say 25, add coffee. Boom, there we go. Now we get our coffees, and they're all totally good to go. All right, let's try something else though, because now we do have this total coffee consumed, um, but maybe we want to, I don't know, add another page in here. Can we add another page that is the one that's showing us the total amount of coffee consumed, and it's a big number in the middle of the screen?
So this is a little bit different now, right? Before, we just had it doing functionality and MVVM work, which is pretty impressive that it refactored all that code out. That it generated, of course, it was code that I already had, it would refactor that as well. But now what it's going to do is take a look and say, "Okay, well, we're already using a view model. We, um, need a new XAML page. We need to update the app shell to include it." So it's created a whole new view model. What I like about this is it has the context of the application now. Remember, I started without using anything in this application. So now it knows, "Okay, this is what I'm going to need to do to generate all of this coffee along the way, right?" So that's what we're going to need to do. Here's our app shell. So now we have our app shell going on here, and this adds a new statistics page. That's fascinating. That's cool. I like that. And we have a statistics view model. And I think from that, let's see if it needs anything else. Now, register our main MAUI program. Okay, cool. Let's doing that.
And what's fascinating about this is that it has now reorganized the page too. It has these little comments of all the little things that's added. So that's cute. I like that. Again, it's in that agent mode, so now it's checking, making sure that the code is clean, it's doing everything for us, and it's even going to say, "You can access it through the flyout menu," right, that little hamburger button, which will show you both coffee log and statistics as you navigate through them. So let's keep that. Let's go ahead and run the application again. Let's see if we get this new page.
Now I can prompt it. I can be very specific. So if I wanted to name it something very specific, I could tell that as well. But it's gone ahead and named it statistics, which I think is totally fine. Okay, so there's our coffees here. If I go into the flyout menu, I now have statistics. Total coffee consumed, 70. If I go here, I go back here. Let's do another Kenya coffee. Let's do 10. Now this should update to 80. Let's go back over here. Ah, so here it looks like it didn't update when I came back to it.
Let's stop this and let it know, right? When I navigated back to the statistics page, it didn't refresh the data. Can we refresh that data when that is appearing? So as we're using the application, we may run into bugs, just because this is a just usage of app, right? There's no code here that it could necessarily analyze when it was writing it to know that it wanted to be refreshed every single time, right? So here it's going to refresh it when "OnNavigatedTo" is here. So it's going to load the statistics up for us, um, here. Oh, it's going to implement and I navigated it to implementation. Oh, this is really fancy. Okay, so, uh, it is looking like it is going to implement "OnNavigatedTo." What's it doing here? I'm very fascinated. On appearing. We need to call "OnAppearing" from the stats when this is called. Okay, "OnAppearing," "OnAppearing." Okay, so it injected the view model, overrode "OnAppearing," and then did it. So that looks good to me, and that should totally make our code work, which let's just run it and double-check to really confirm it here, to really see if it is is doing what I want it to do.
Okay, so we're at 80. Let's go to statistics, 80. Let's go back. All right, let's go to coffee name, Kenya again. Apparently I drink a lot of Kenyan coffee. Say add coffee, 90. Go back over here. Boom, 90. Good to go. All right, one thing I noticed too is that as I was doing this coffee, it has a date added. So what if we were to group them by the days added, and I had a way of selecting the date that I drank the coffee on? So let's go ahead and I don't know, do that.
All right, let's also group the coffees by the date that they were consumed, and let's also have a way of selecting the date when I go to add the coffee. Next to the name, I know I just kind of gave it generic thing. I would say I don't know if I really named that correctly. I think that's kind of the cool part to see what it parses off and gave it enough information. One thing is, remember, I'm, I'm hitting that little like keep button. I could also undo. So for example, if it made a bunch of edits and it kind of went too far down a rabbit hole, I could back it out basically and say, "Okay, let's start that over," as well. And I want to point out here on the top right, there's also like undo buttons and last redo as well. So you can kind of go back and forth here as well if you are navigating around trying to add new pieces of functionality here too.
So we'll see, but it looks like, yeah, we, we're grouping items, we're getting a coffee group, it's going to sort those all out for us and add those here. So we have a selected date. So that's the date time today. That looks good. Um, that's cool. And then hopefully it is going to group those. Groupings can be very tedious, I should say. So, you know, I'm, I'm curious how far it will go down the grouping and the styling of it altogether.
Okay, let's take a look at that main page. Pretty fascinated about that. So we have a new item source, it's grouped, and yeah, we have some padding here. We actually have a background color now. Okay, I'm focused. I'm curious about what it's doing. It has a primary in here and some opacity in the grid. All right, interested to see what it's doing. Uh, we'll see. We have the date display, ounces. Oh, that must be the, the coffee group header. Okay, gotcha. Oh, nice. Interesting. Oh, the total ounces for that day. Wow, that's fascinating. Uh, okay, let's see what this does here. We have some entries here, date picker. All right, cool. Let's keep it and do it. Let's see what happens here. I'm pretty fascinated.
So let me go back over to my my program. Let's run this. Let's see what happens. Okay, so now, now we have, yeah, we have our coffee group. So we can see 90 ounces here. Here we have a date picker. So I could again say Kenya and I'll say 10 ounces, and I'm going to pick a date. So let me pick here the 20th. I'm going to hit add coffee. And boom, sure enough, now we have the two string. We have Kenya here, and everything's here as well. So that's really neat. And there's statistics here as well for total coffee, totally consumed.
Okay, so up to this point, this has been raw, and it's been exactly what I did is what you see. And all I did was maybe speed up a little bit of some of the compilation steps. But at this point, I wanted to do one more really cool thing, which was add a new bar chart to the application. So I started first. I never done this before, and I gave it a prompt to basically say, "Add a new bar chart." And it went and tried to add a bunch of different NuGet packages. I tried different ones that were compatible, and it worked and didn't work. So I edited this part a little bit, and I just went back to the last snapshot where I was. I hit the add undo button, and I said, "Okay, let's add a bar chart with Syncfusion, and let's see what we can do." So it was kind of a little bit more specific about it, and this thing worked brilliant. So let's go ahead and check that final piece of this video out. Got our application up and running with full charts and graphs.
Okay, let's do one more thing and see if this works. This would be a little bit crazy. Let's go ahead and add a bar chart to the statistics page showing the coffee drank each day. Let's use the Syncfusion toolkit and make sure that everything is registered in the MAUI program as well. So here I'd probably have to do a bunch of research like how the data has to be organized and what I needed to do. But hopefully, ideally, it's going to go through and start to integrate some stuff in it as well.
So it's going to add a, uh, package here. So let's do that now. It's going to go through and it's going to register the Syncfusion core here. So that's good too. Let's see what else it needs to do. Now, there are a few different Syncfusion packages. So this might be the one that needs a license key in it. We'll see. There's a free community toolkit out there as well that was released, uh, with .NET 9. So I don't think it's using that one, but it might be using it. We'll see if it's using it or not. Let's see here. It's adding a new statistics view model inside of here. We have some grouping that's going on, a coffee data that's being added onto here as well. So we have a display date of month date. That's kind of nice. And then, yeah, we get the statistics view models. Hopefully this adds in all the Syncfusion stuff that we need.
Coco, cool. That looks good. Saying a Cartesian chart. So last seven days consumed. All right, interesting. Date, ounces, column series. Okay, so we have a fill color here. That's cool. So I think the column series is going to work. We're going to see what that looks like. And I just picked a primary color out of there. So no problems found. And let's see. So again, it's checking all the work that it's done and hopefully will do anything. So let's see if this runs.
So let's go ahead and hit keep my program, hit run, and let's see if we get a bar chart. I'll be really excited to see if this works in general. All right, so we have all of our coffees on here. Let's go back and say statistics. All right, so this is the one that uses the Syncfusion license. I'm just going to okay here, but boom, there we go. We have 90. We have last 7 days consumed, we have 60 there. Let's go back home. Let's add another coffee, uh, Colombian, and let's say 10. So hopefully now we get another one here of 160. Go back over here. Boom, 160. Very cool. And we have our full application with bar chart, graph, everything like that. So I can start to track my coffee consumption in a full database.
Okay, that is GitHub co-pilot agent mode. It is blowing my mind. Now, here we're starting with a new fresh application, but obviously you can add new pieces of functionality, refactor your code, and that's what I've been using in my applications every single day.
Now, what I want to point out here is something really cool that we saw is that we started with a new fresh application, like just file new project. It started writing code in the code behind of my XAML pages. We then told it to refactor the code with MVVM and a specific .NET package, and then as we added more functionality to the app, it continued to use those practices that we were using in the application already. So it's building upon the application in the code style that we wanted, and this is unbelievably cool. And I've been using this side by side, GitHub co-pilot chat, the inline ghost text that comes up, and of course, co-pilot edits as well, in both the edit and the agent mode. I love giving all of this a try everywhere where I'm coding now.
If you've been giving the agent mode a try, let me know in the comments below. I would love to know how it's been going for you. Is there a specific model that you like? I've been kind of playing between them. I've been doing the undo and the redo and just seeing the different results that each model gives based on what my coding preferences are. Let me know in the comments below. Love to see it.
What I'm also going to do is add the code that we generated and put that on GitHub as well, so you can give it a try. And I'm also going to be doing some live streams here, continuing to use the GitHub co-pilot agent and build out this application even more. Anyways, I hope that you enjoyed this video. I hope that you give agent mode a try. It's blowing my mind, and let me know what you have to say in the comments below. If you enjoyed this at all, give it a thumbs up, smash that subscribe button, as I put out videos here on my YouTube channel nearly every single week. Thank you so much for going on this agent cool adventure with me, and I hope to see you in the next one. [Music]