Build with the Copilot CLI - Mona Mayhem

So Ayan, welcome. Hi, so excited to be with you all. I'm Ayan and I'm really excited about this workshop because I think it's such a great starting project to understand all the cool possibilities that C-Pilot can unlock for you as a developer as you start to try to get into agentic development. So specifically today, we're going to be on this project called Mona Mayhem. We're going to be building a retro arcade game because who doesn't like retro? It's always cool. And we're going to be building a competition or a workflow where we're going to be able to take in two GitHub handles and run a competition or a race of some sorts and there will be a winner, the one who has had the most contributions in the past year. So I believe we have this link and it is going to pop up on the screen for you. Feel free to follow along if you would like but we will move a little fast since we have 45 minutes. Uh so I also suggest to go back in your free time. Go through all the steps, read all the cool tips and tricks that are included in this workshop. There is a lot to be extracted as practical tools and uh things to add to your tool belt that you can eventually start utilizing in your own workflows. So, let's go ahead and get started with the CLI workshop. Uh, one more thing, there is also a VS Code track. Uh, you can toggle to it over here in the top. We're going to be sticking sticking with the CLI, but once again, depending on where you're most comfortable with, how you like to work, uh, both options are there for you. Before you begin, there are some prerequisites. having a GitHub copilot subscription enabled on your account, Node.js installed, Git installed, so on and so forth. Um, some of those basic criteria. What we hope to be able to cover today is context engineering, teaching Copilot about the codebase, instructions, references, and clear constraints. And this is really cool and interesting because this is ultimately what helps your agents work better for you, help them learn more about your project. We're going to be writing plans before implementation and then we're going to be using agents to reference those plans to get hopefully some pretty cool results out of the door with minimal back and forth. And then finally, um some iterative design, some some banter with Copilot, uh if I might say, and we're just going to try to make our app a little bit cooler. And finally, if we have time, a little bit of a bonus, we'll go into some parallel workflows. I know Matt when he was kicking off the live stream he was talking about fleet mode. So I really hope we get there. One of my favorite features about Copilot. Um so let's go ahead and dive in. We will there is a repo which we can start with. So once you open that up, click on use this template. Create a new repository and uh choose yourself as the owner. And I believe uh they suggested you name it like my Mona Mayhem. Uh I've already and yeah, perhaps with better spelling. I've already done this over here. And what we'll do now is clone this locally so we have something to work with. So there we go. Oh, I've cloned it. Let's open up my shell. Get clone. And let me do a bit of a split screen so you're able to see both sides of the world. Um, like I mentioned earlier, you do need uh Node installed and GitHub Copilot CLI. You can use npm install to install it. We're going to be going past this, but again, all of this is here for reference if you would like to run through it later. Let's go ahead and uh launch up our application, at least the scaffolding to make sure that uh everything is running as it should. And there is Oh, yeah. I need to actually uh go into my my project. That would be helpful, wouldn't it? So, I am what I did really quick here while you were talking is I actually created a short link um just so I had it. It's gh.io-mhem and that'll bring us to what you're going after right now so you can actually follow along with with everything. Thanks, Matt. Yes, please do follow along. You'll you'll be able to read all the different commands, copy paste them, uh do whatever you need to do. It is a great way to get hands-on and learn a lot more. At least I learn a lot better when I'm hands-on and actively involved with a workshop or with any specific task. And that is gh.io ma-m give us some mayhem. Awesome. So, we have our application up and running. It's a very simple scaffolding, but our goal is to make this into something really cool and interesting. So, we're going to leave this running so we can hopefully see changes in real time as we make them. I'm going to open up another terminal. And in this one, I'm going to actually open up Copilot in interactive mode. And there should be a cool little graphic popup which tells us that Copilot is ready to work. And hopefully it does that. There we go. And uh if you are if you are logging um opening co-pilot for the first time, you will need to log in and authenticate um just so you know your subscript your subscription is active and you're ready to go. So now into the context part, we're now moving into the world where AI usage and tracking AI usage has become a big deal and the cost of using AI can quickly add up over time. So the goal is to create artifacts, create instructions that AI is able to reference so it doesn't have to reinvent the wheel over and over again. And one way to do that is to generate some initial workspace instructions. And these initial workspace instructions are a great place where Copilot is automatically able to put in important information which it can use to generate files, to run your program, whatever it needs to do. But you can also add other things in there. For example, you can create instructions for a design schema or if there are certain things that co-pilot should always do or certain things that co-pilot should never do. Um, all of this becomes like a grounding document which is co-pilot's instruction booklet on how to work alongside you and how to work alongside your repo in the best possible manner to avoid those unintended consequences that um sometimes famously make it onto the news nowadays. So really really important that you create good documentation along the way. So um it has it is currently creating the instructions uh for us and we can actually also go ahead and open it up and take a look at what it generated. Copilot instructions. Let's make it look pretty. So we can see some a general architecture layout, some conventions, real basic boilerplate stuff. Um nothing too out of this world yet, but again this is something that you can keep adding on to as we go on. Uh in addition, you have access to tons and tons of models. Um, if you're on the free plan or just getting started, you can have you'll have access to H HighQu, uh, GPT54 mini or I believe GPT5 mini, one of those two. Um, those are also great places to get started. For the sake of this um, lab, this workshop, I'm going to be using Sonnet 45 just so that way we can keep things moving along uh, for the sake of time. And I will I will also enable yolo mode uh because it's a workshop. We don't want to be sitting enter sitting down and pressing enter every few seconds to give it permission. But of course, if you're in a actual production environment, proceed with caution. Uh those permissions are really important again to avoid those newsworthy mistakes that sometimes pop up. Big fan of YOLO mode. I know. I love it. Before yolo mode, I was like losing my mind. and I was like, I'd rather just do it myself. All right, so now we can really start to dive into this project. We can ask questions such as give an overview of this project or one of my favorite things once again when we talk about token optimization. Our goal is to be as specific as possible. We can actually reference specific pages or we can even copy and paste images into the CLI directly as we're talking with Copilot, which is one of my favorite things to do because at least when we're dealing with the UI, and perhaps we'll see that a little bit later today. Um, if something just looks off, I just snipping tool it, paste it in, and I'm like, "Hey, Copilot, let's fix this." Um, but yeah, I think we are ready to go forward. Um, Matt, any comments, any questions, anything that you think is worth highlighting here? No, I mean, I really like what we're what we're up to. Um, one of the things that I think was really valuable is when we generated the um, overall instructions for the for the repo and that it's done with the slash command of innit which you ran a bit ago and that kind of just sets the stage overall of what we need or what the I was talking about that when I was mentioning awesome copilot before and there's a whole bunch of u various instruction files for that but just scans the repo and kind of makes it overall very tied to the repo as well. So yeah, that's actually a very powerful thing and something that you might want to do when you're first starting out with a brand new repo is kind of say, you know what, Copilot, take a look at this. And then it's going to generate that copilot-instructions.m MD and make it um its responses tailored for what you're dealing with. So that was a very long answer to what I found interesting. Well, I'm glad actually you said that because it reminded me of one more thing I wanted to mention which is uh there's instructions and then there's um oh I'm I'm forgetting the word not custom agents uh skills. There it is. Um so there's a difference between instructions and skills where instructions are always referenced whereas skills are pulled dynamically. So for example, you might have a skill specifically for running unit tests or you might have a skill for accessibility which goes through your application and makes sure that the specific accessible requirements are being followed. Um so that's another thing I don't think we'll get to it in this workshop but it's another method of creating documentation creating artifacts uh which help co-pilot which help your agents work in a better manner for you. Mhm. All right. So, let's now move ahead to planning and scaffolding. One of the most powerful tools we have with us now is the ability to create plans. And the reason I say that is because AI is really good at getting things done, but it's also really good at being creative. So if you give it just a two sentence description of hey do this it'll probably do it but it may not be in the way that you really wanted it to manifest in. So plan mode is really powerful. Um it will essentially develop an engineering document that can be passed along to co-pilot so you can have more of an expected outcome and and when there are ambiguities co-pilot comes back to us to ask us questions. So in this case we have uh what caching strategy would you prefer? Uh let's just say no caching. Let's keep it simple. Um and once it Okay. And what timeout should we use for the API fetch request? 30 seconds. It really doesn't matter at this point. Um how should the API response be formatted? Uh, we'll return it as is. We're going to keep it simple. We're not going to add anything fancy yet. And I believe that may have been the last question. So now it's going to generate that plan for us. Um, and the original prompt, I should probably review that. Uh, it was to I need to build a serverside API proxy that fetches GitHub contribution data for any username. Um, we pass it the endpoint and it what does it return? It returns a JSON. We need to bypass some restrictions. Copilot, can you help us plan the implementation including the route structure, error handling, and caching strategy. Okay, so here is our plan. It created an artifact for the sake of time. We're not going to open it up, but you can access the artifact. You can work with Copilot to make changes to the plan itself. And what we're going to do, we're going to say it looks all great once again in production. spend some more time on this, but looks all great. And we're going to build on autopilot. Oops. We're going to build on autopilot. And autopilot's really cool because I can take a step out of the room, go get a snack, grab some lunch, and usually by the time I come back, it'll be done. Autopilot is different from yolo mode. YOLO mode works specifically in the context of one conversation whereas autopilot works a lot more like a developer iterating through a task running tests verifying the results. Um so it is a lot more powerful but at the same time again use it responsibly. Um that is one recurring theme you'll probably hear me say a million times and perhaps you've you've already heard throughout uh dev days is use all these tools responsibly. Um very very powerful but a lot can come along with it. I think one of the things that for autopilot too that we have to be careful of is that it will chew up your tokens because it's going to go through and spin until it figures out what it thinks is the best end state. So, you do kind of want to watch it as well to I mean, if you're on a smaller model, if you're on one of the many models, I mean, that's that's probably cool, but you know, pay pay some attention to it if you're cost if you're cost constrained so it doesn't, you know, eat everything up. Uh, so yeah, but it's cool. I love autopilot and I love myself some YOLO mode because I just let it let it go. So yellow mode approves all the tool calls for you. Like so if you want to hit if so if it needs to hit the terminal for any reason. So if autopilot needs to go out and call the terminal for some reason YOLO mode allows that. So you don't have to actually say yeah it's cool you can do that. Um yeah absolutely. So as this thing spins along you can see that it is going through. Oh, one other thing is when you transition from plan mode, it did also change the bottom color as well. When you say, "Hey, I'm going to go to autopilot mode," it changed that. So, it actually lets you know that the mode overall has changed too. Yes. Yeah. And then for plan mode, for instance, it was um blue and then for autopilot green. So, yeah. Yeah. many many signals to send to to communicate to you what's going on. Um, and you can always use the slash commands. So for plan mode for instance, you can use slash plan or you can use shift tab to toggle through the modes. So uh they both do exactly the same thing. Just really whatever method rocks your boat. Um, so we can see it finished running. We have task complete. We have implementation highlights. Um, it also ran some tests to verify, but we're going to test ourselves as well. Um, so the cool thing about uh being in the interactive mode is if you use an exclamation point, you can then interact directly with the shell without having to exit or open a new terminal. Um, so in this case, we do see that uh this curl command worked. We're able to uh pull data and everything looks to be a okay so far. So let's go back to plan mode. And now we are going to focus on pulling some more of the functionality together. Specifically, uh we're asking co-pilot now. Now I need the main page plan a battle page for Mona Mayhem. GitHub contribution battle arena. Wow, that sounds so cool. You know, I'd prefer this any day to any kind of sports match or football or the Super Bowl if I'm honest. And uh we pass in two username inputs. Uh there's a battle button, a results area. We're telling it to keep the UI simple. Um don't overengineer the layout. And this is really important because this workshop was created a few months back and we have seen AI has become that much more of a go-getter. So it's become a lot more common for AI to progress ahead and do things which it thinks are right. And sometimes they they work out pretty well, but sometimes you might actually end up backtracking. So again, uh looking at token usage, efficiency, uh those are all things that matter. So how should the battle winner be determined? Total contributions, who has more overall? So that was an ambiguity that we needed to answer for co-pilot. What should the results area display after each battle? side-by-side comparison with contribution graphs. Yeah. Yeah, that sounds great. So, it's going to think through where should the battle logic execute client side, server side, progressive enhancement. Uh, we're going to say client side. Keep it simple. And the thing about this is I've done this workshop a few dozen times now. Every time it's slightly different. Again, it's just one of those things. Depending on the model you're using, depending on the nuances beforehand, it does do slightly different things. So, I'm in this with you. I actually do not know what's going to come out the other end. Um, but again, I think that's one of the things about AI which makes it just that much more fun. It's almost like solving a puzzle. It's um it's just interesting. And actually that's one of the reasons why um human in the middle or HITM you might see that abbreviated sometimes is so important because these models are non-deterministic and so the output from them is completely different every single time and like some of and that's why maybe the rubber duck feature too is so good because you have one model evaluating the output of another model that kind of narrow it down as well and why so like the co-pilot instructions And the skills are handy as well because they're now more or less giving um the AI whatever model co-pilot is running more tailored um kind of guard rails on the output that it can generate. But still it's going to be different every single time no matter how much you um still kind of fine-tune it and narrow it down. And so that human in the middle, you are still responsible for what it outputs, right? Um, if I'm your manager, Ian, and you come out with something that's iffy, you can't blame the AI for it. You know, you you took responsibility for it, you know, and that's where a lot of people are talking about taste these days as well. I mean, what's good, what's not good, and yeah, so I mean, it's fun. It definitely is fun to see what it comes up with. But yeah, we're still we're in charge ultimately. Yeah. And I really like the rubber duck feature and and you know, sometimes I find myself hopping between models and I think the power of being able to have one model review another model's work has become really powerful because each one comes in with a slightly different approach, a different lens almost as if it was a different person. It almost is a different person if I may say so. So I think it's a really important uh resource to actually be able to switch models very easily and retain that context as well. Um so don't don't get stuck to one model. I know when AI first came out, I was in college and there was really no concept of models. Um, but it's really really powerful to be able to switch between models in your workflows, have different models uh, bounce around and and actually if you use auto um, the auto model, you'll actually get a 10% discount and um, it'll it'll pick the right model depending on the task. It'll use lighter weight models for maybe planning and heavier weight models for debugging um, so on and so forth. Okay, so it finished implementing the plan. or nope, it finished implementing. Now it's testing. But perhaps if we go ahead and navigate over, we see there is a simple UI. Uh so I can put in my git user name octoat battle. Um and yeah, the it looks like the functionality is working. We didn't actually tell it to wire up the the battle button. Uh but again this is one of those places where the agents go above and beyond and they are able to infer what we may want um and with pretty good accuracy most of the time. So uh everything looks good according to the lab. You should now see the game title two username input fields a battle button. The battle won't work yet it works. You know it no complaints. So let's continue to wiring up our project. Uh so some of the more specific implementation details so when the battle button gets clicked both usernames from the inputs um gets both usernames from the inputs. So that's working validating that both are filled and so some basic error handling. So uh let's do that. Okay. So it's not very helpful but it is saying that there is an error with player one and maybe if I leave it empty. Okay. So it it doesn't even let me press the battle button. So I think that's some some that's an area we could improve. Um fetches the contribution data in parallel does great. Um, one interesting thing is in the plan, it actually asked us what it should display and we had chosen that we wanted to uh visualize the contribution graphs, but it seems like there's an issue because when we do run the battle, we everything seems to be working, but the contribution graph, I mean, there's a label, but it doesn't seem to be rendering properly. So, that's something that we'll have to go back to to figure out and debug. Um so let's actually now go back to our copilot and tell it um the contribution graph is not showing up and we are going to take a screenshot to pass along. Let's do a better job of not cutting off content. And we're just going to Ctrl +V paste it in right there. And we should hopefully see Copilot start to debug that issue a little bit. Um yeah, but but it's it's become one of those things where it's become very easy to go back and forth. But again, uh depending on how much budget you have, how token conscious you are, this might be one of those things where you actually open up the code in an IDE yourself and debug it. um and and and really just get hands-on to solve the issue. Sometimes it is quicker. It will be cheaper um than having AI try to do it. Okay. Yeah. And then we can see I see the issue. It found the issue. Um so it's going to go through and try to resolve it. If you all are watching online, feel free to drop questions in the chat. um we're happy to answer them. It's AI is one of those things it's moving at 100 miles an hour. It feels like every two weeks there's something new um going on. So it is really important to get those questions answered. I learn a lot from my own team members, my own colleagues by asking questions, by always remaining curious. It's just the nature of the time, place, and circumstance we live in and we just have to always remain curious. Um, and one thing I just love doing nowadays is actually using AI to learn about AI. Okay, so let's jump back. Let's see if it's done anything. Ah, there we go. So there there are definitely some UI issues, but we can see that it is loading a lot. It it is loading the contribution graph now. Um, there's a winner. We can Oh, perhaps there is someone with that username. So, yeah. So, if it's empty, doesn't work. Matt, what's your GitHub handle? It is C O D E M I L L M A T Code Mill. Matt, Matt. Oh, not even close. I have some catching up to do. Awesome. So I we I I I would call it a success. I would say much of the game, much of the UI is uh working the way it's intended. Um of course there are some issues, but that is where the iteration comes in where we can say uh add a tool tip or the loading state needs a pulse animation. This is my This is always the part I love to spend the most time on because it's literally like the world is your oyster things that earlier I would have to go up and like look up documentation for in terms of features or animations or just cool tidbits here and there. I can just write a sentence or two and 30 seconds later I I I have it essentially. Okay, part four. We're moving along at a good pace. I'm I'm very excited and and hopeful that we get to the uh delegate and the fleet tasks which are some of the coolest in my opinion. Nice. Um so we have this prompt. I want to transform this page into a full retro arcade experience. Um so right now it's pretty basic. It's it's pretty boiler p plate. Maybe it looks like a project from a high school, you know, class project, but we're going to take it up a notch. plan a comprehensive visual overhaul uh with a CRT scan line effect, neon glow, shimmers, float and animations. Wow, really the works. Uh so let's go ahead and get a plan. And one thing you'll see here is we're also passing in specific hex codes for the colors we want copilot to use. We have even given it a specific font from Google fonts. Um, so this is specifically in this in the context of this plan, but if you're working on a larger application, for example, this would all be great stuff to put into your instructions document or perhaps into a skill if you wanted to do like a a design review at the end of each new development cycle to make sure that everything stays, you know, the same according to your design design principles at your organization or whatever you're working on. Um, all right. Should the CRT scan line effect be subtle? Matt, what do you want? Do you want it to be subtle or pronounced? Pronounced. Let's make it pronounced. And then we should get the detailed plan. When should the VS versus badge appear with animated gradient color shifts? During the battle, after the battle? Let's just say we want it during both. And okay. And what pace should the animations have? Slow and smooth, medium pace, fast and energetic. Let's do fast and energetic. Why not? Feeling it. I really enjoyed this back and forth now with the co-pilot plan mode. Um, before co-pilot would make or have to make a lot more assumptions or it would manually have to ask for that feedback, but with this specifically built into the workflows now, it feels a lot more seamless. And in general, I've personally observed that the outcomes are a lot more predictable. Um, of course, there are those nuances like you know, we just saw we wanted the contribution grid, but it actually didn't correctly implement it on the first try. Um, but it it is a really powerful tool and I cannot emphasize enough how important it is to plan and then execute. Um, I think that is the single greatest skill or perhaps that's a bit of an o overstatement, but it is one of the greatest skills that any developer can have in today's day and age is the ability to use AI to develop thoughtfully designed plans such that AI has the intended effects. And uh you've probably seen throughout dev days today that oftent times it's not just one agent working, you have multiple agents working at the same time. And so having those detailed plans allows those agents to work to a deeper extent uh without having to come back and wait for input from you. Um so we'll go ahead and accept plan and build on autopilot. Uh once again check it outside of the scope of a workshop. Um but this is pretty low stakes so we won't worry too much about it. Matt, anything I missed? Anything else you want to call out specifically? No, I'm just trying to reproduce everything on my machine right now. I am back on step building the game. I'm just trying to get everything to work on building the game. So, I'm iterating right now with Copilot. And kind of like you did, I'm asking it to do different things. Um, I didn't My prompt when it didn't come out right was this doesn't work. And let's see what it what it comes through. It says task complete now. And I'm going to refresh. And let's see if it works at all. Kind of. Sort of. So, it's working a little bit better. Um, yeah. So, yeah. So, I'm just kind of going back and forth right now with it on autopilot mode and just letting it um Yeah, sometimes the game is just patience. Yeah. And that's where you mentioned before where you kind of want to be super specific and maybe even what I like to do sometimes is actually write down a plan in a document in a markdown file and hand it to co-pilot that way. So, it's almost like me coming up with a plan first and like kind of like how co-pilot comes up with a plan out of plan mode. I come up with my own. I send that in the plan mode. That way I can be super specific. You know, I can think this over and be, you know, make sure I'm thorough in it. And sometimes I even run that plan through like co-pilot um in teams. So, not GitHub copilot, even though you could run it through GitHub copilot, but I, you know, I run it through a different AI and just say, "Hey, is this thorough? Does this make sense?" And I kind of back and forth it that way. And uh and then I just say, "Hey, um co-pilot back in GitHub copilot, read this thoroughly. Read the whole thing, understand it, ask if you have any questions, and then create a plan for it." So then, um that way I don't have to type everything out right away and I have this document that I can work off of. You know, a lot of people call it a PRD, um product requirement, definition, or specs file and so on. So, that's a way that I kind of like to uh at least approach it in the beginning of of of of this rather than trying to just fire off a prompt right into the into the co-pilot text box. And I and I really like how you emphasized some of the instructions to co-pilot. Um sometimes things that we assume we have to be explicit, like at the beginning we told it to do like just the scaffolding or not do anything too complicated. So even emphasizing read my plan carefully and suggest XYZ and being repetitive sometimes in your instructions to co-pilot can go a long way. I've personally noticed in my own use to keep it within the bounds because as AI gets better. Um they are trying to make it better at predicting what you want and I would say eight out of 10 times it does a pretty good job. Um but again the specificity is key like you mentioned. So yeah. Yeah. With that said here I'm just saying it's not working. Graph isn't showing up. So being uh seeing what happens. So sometimes it's it's fun. And also I'm using a very I'm using haiku a very uh fast model just so it can iterate quickly. Yes. All right. So I believe our retro theming has completed. So, let's go back and open up our game here. There's a weird bug. We have two curly braces in the top left corner, but I guess that's fine. All right, let's run the battle. Okay. Ooh. All right, I win. 192 contributions. So, we can see that there are some responsiveness issues um with the grid going off the page and um right now like enter doesn't work for battle for instance. Um but again, they're all very simple fixes either to do yourself or just tell copilot directly. Um so we can actually tell copilot um hey copilot can you check the responsiveness of the application uh the contribution grid is currently oops currently rolling off the player card um and surface slashsolve any other responsiveness issues is so the design process of developing with AI has more or less stayed the same. Right? We first developed the plan. We got the um we got the data fetch working. Uh we got a basic scaffolding up and running. We have now the v1 of our design up and running. Now we're working on responsiveness. Um so more or less it's all stayed the same. It's just the speed at which you're able to iterate with AI. And again, this is a great place where having those skills can really help because they can be dynamically pulled in um and and used to preemptively uh or proactively solve issues which you may have noticed happen otherwise with AI on a recurring basis. And as a developer, you'll start to pick up on patterns like, oh, this model specifically always tends to not add a scroll bar or not make it responsive or there's this issue or that issue. So again, skills are a great way to mitigate some of that uh by handing AI quite literally a new skill uh to pull from in its toolbox. Um and I think uh Matt, you were talking about awesome co-pilot essentially for that reason. It has a bunch of skills that you can pull from. Exact. Yep. Exactly. It has a ton of skills there. It's actually it's actually built in to um GitHub copilot. So Ian open up a new tab in your terminal. Uh just run copilot and then one day you'll get a new computer. I I yeah I swear to you you'll get a new computer one day. All right. Here we go. So do slashmarketplace uh list and you'll see that oh what is it? Oh plugin I'm sorry plug-in marketplace marketplace and we can see that awesome co-pilot should be in there. Yeah, there it is. Yep. And so what you can do from there is you can start adding plugins from awesome copilot and what plugins are essentially are there uh useful bundles of of things. So whether they're instructions or skills or whatnot. So there should probably be a bundle for like maybe web development or something like that. I don't know if there is without looking but um yeah and if it's not there make it yourself and contribute it. Exactly. Yeah, exactly. Awesome co-pilot is community community based. So, okay. Awesome. So, yeah, it it went through it went through the responsiveness issues. We can try it again. Hopefully, it looks better this time. I really love that versus animation. So, yeah, it's Yeah, that's cool. It's a little better. It's It's still a little odd with the scroll bar, but we'll call it a win for now. Good enough. Um, so now let's continue on with the workshop. Uh, implement retro theme. Yeah, these are these are all essentially things that would be great to do on your own time. Fine-tune the vibes. We all love great vibes. Fine-tune them. Make it what you want. Um, yeah. Awesome. So, now let's go to polish and parallel work. And uh speaking of which, my computer's at 7%. So, let's try to get through that quick. That's I think we're on power saver. Yeah. Or perhaps maybe I should grab my charger. What do you say, Matt? Yeah, 7%. You might want to in the meantime, if we can transition to my machine and I can just show what I came up with as far as my look. Is that my machine? Wow, everybody's fast. All right. Is everybody ready for the big reveal? Look at this thing. What I've been doing over here, this is amazing. Look at that. It is. Let's battle. Let's battle between me and Ian. And it is could use a little bit of uh some CSS here, but I'm I am totally digging this. The spinner and everything. Let's see who else's name. Oh, I remember Bruno on my team. We'll battle it out. Bruno is going to beat me. Yeah, Bruno has 7,000 contributions. So, but yeah, totally cool to uh load something like this up. And let's see. Do I have this open? So, what I'm going to do here is close this. Open up projects Mona Mayhem open. So we're back. I'm back into VS Code for the time being and I'm going to open a browser. View my browser. I'm going to bring in Mona Mayhem into this. And I was kind of talking about this during my session. And I'm going to add the web browser to the agent. And with all the colors, you really can't tell, but there it's, trust me, it is highlighted. And what I can do here is I can add a specific element to the chat. So, let's add this marquee. And I'm just going to say make the marquee animate slower. And because it has it knows exactly what I'm talking about now because it has it in there and it should be able to do it pretty pretty quick and it does animate a little bit slower. Super web 1.0 battle zone going going fast and so I'm glad it still tells us that we're uh under construction here. So yeah. So that that's actually pretty cool with uh one thing you can do with VS Code is that you can add specific elements to the chat even though it is a little bit hard to see when it's this colorful and awesome. So cool. Um let's see what else are we looking at as far as the next steps of the game. So, design first theming, that's where I was. Implement the theme, fine-tune the vibes. I totally fine-tune those vibes. Uh, update the instructions. Polish and parallel work. Amount of color you had. Like, isn't it probably the best you've ever seen in I mean, are you wearing your sunglasses, Ian? I think I need to like That's so Did Did it Did it do that out of the box or did you have to go back and forth with it to get it to do that? I told it to make it maximum geocities. Do you do you even know what geio cities is? No. Okay. I know geometry dash. Yeah. Yeah. It's not that. All right. You may continue. Awesome. Thanks. Yeah. Um, so yeah, we're we're we're to the final step now, which is fleet. And the cool thing about fleet is uh you can essentially spin up multiple agents to work on multiple tasks concurrently. So, the way you'd run fleet is there's a fleet slash command. I'm going to go ahead and copy this and send it off and then we'll keep talking a little bit about it. Um, so in this case, we're asking it to improve the app in parallel. There's three different tasks. Improve uh add responsive CSS media query so the comparison collapses into one column. Uh, improve keyboard accessibility and focus visibility. improve the error experience with stronger validation feedback and arcade style neon error states. So, one of the cool things about fleet or something that intuitively you might think could happen is you might run into race conditions where you have multiple agents trying to edit the same file or there's conflicts. Uh, but it's really cool because there's some of that intelligence already built in. So if co-pilot realizes or sees that there is a potential for a race condition or that multiple agents need to access the same files, it will go ahead and press the brakes on one agent or another agent and wait for um whatever needs to happen to happen before passing over uh to another agent which again is really powerful and really important. uh that orchestration is perhaps one of the most powerful tools uh when it does come to working with fleets of agents. And as you as you as a developer start to work with more agents, there's there's orchestration at the level of a specific folder or different a specific project. Uh but you also have to start thinking like an orchestrator as you work with multiple agents. How do you break up tasks into smaller segments that are um you know containered uh such that you can essentially expand your productivity and and again these are all things that as developers we have already been doing but I find it to be a good reminder to remind myself sometimes that not much has changed other than the speed at which we're able to work at we still have to have that same design thinking hat um of how do we approach this problem in small incremental steps Um, and now there's just that little other additional nuance of um, how do we make sure that those steps don't compete with each other essentially? Uh, Matt, do you have any any suggestions, any experiences you have from working with multiple agents at the same time? Any tips, any tricks? Um, I I when you're working with multiple agents at the same time, I really find that what what what's difficult is really just kind of keeping everything straight, right? And it the context and is um almost uh overwhelming, right, when you're when you start dealing with with everything. So, yeah. So, I don't know if it's necessarily any tips. It's really just kind of you I guess it's okay to go slow when you have a bunch of different agents going and it's okay, I guess, to feel a little bit like, holy man, these things are going fast and they're doing a lot of work, but you still have to be in the middle like we talked about before, you know, you still are approving and you still are reviewing it and the agents don't get tired. So yeah, it's I guess it's okay to feel a little bit overwhelmed by the amount of work that they can push out, but you still have to uh be in the middle of it. So you still have to be I mean that's where it's going to help you when you're more explicit and very specific with your instructions to it. Absolutely. And and we can see our multiple agents are working here. If you run slashtasks, you can see all the sub aents that are working and you can actually um navigate through them and and enter into different sub aents specifically. Um you can you know steer it if required or whatever. Um but again uh it's a very cool thing. We are uh coming to the end of our time. So I did also want to talk about delegate. So there is a slash delegate command. Um what delegate does it's really cool. it will create a cloud coding agent that will run on github.com. Um, so essentially this is the equivalent of me saying, "Hey Matt, I've created this issue. Can you work on it?" But instead of Matt working on it, we have a co-pilot coding agent working on it. Um, and sometimes what I've done is as I'm leaving work, I will delegate a few different tasks and by the time I reach home, I have PRs uh ready for my review uh waiting to be just merged into the main branch. Um, so another nifty tool for your toolkit is the delegate. Um, this is, I guess, your homework, if I may say. Try it out on your own. Uh, tell us what you think about it. Uh, one of my favorite tools personally. Um, but yeah, there there we have it. We have our Mona Mayhem application. Honestly, I prefer Matt's version to mine. Um, but it works. It does the job. I don't know. Ian, Ian, yours is pretty good, but can we bring my screen up just just for a sec, please? And because there's a special thing that I forgot to do before, and so everybody get ready. Get ready for this. There's sound to this thing. Let's see if we can hear it. Ah, you hear that? Yeah. It's not good, but it's there. Wow. It's like a little buzzer going off. Yeah, right. Great proof of concept. Yeah, I know it works. All right, though. Thank you, Ian. That was great. Um, Mona Mayhem, gh.io-mah, you'll get the instructions that Ian was going over. Give it a try. I mean, like we said, it's different. Um, the what what you get every time is different. And so, you're going to have to play with it. The more specific that you can be with the instructions that you give it, the better.