Beyond Vibe-Coding with GitHub Copilot

Hello everyone and thanks for joining today's code along. We will kick off today's session in five minutes. Uh we're just waiting so everyone has a chance to join. In the meantime, we love to hear from you. So let us know in the chat where you're joining from this code along. You can check out the resource to talk which is uh pin comment on the chat. And please note that this session is being recorded and the recording will be sent to you uh to everyone that was registered for the event. So if you haven't already, you can go ahead and do it. So we can set the recording resources for you. Down. Hey, hey. Hey, down. doo. Moo. Uh we'll kick off today's session in less than a minute. Um we're just waiting so everyone has a chance to join. In the meanwhile, we love to hear from you. So let us know in the chat where you joining from well this code along you can check out the resources doc which is pinned on the chat and please note that this session is being recorded and the recording will be sent to everyone that has registered for the event. So if you haven't already you can go ahead and do it so we can send the recording and resources to you. And that's everything for me. Now I'll hand you over to your host for today's event Richie Richie. Please take it away. This be Captain Richie. Gather around the helm for another co-pilot voyage. Now, I hope you've been learning well

without me these last few sessions. I'm very glad to be back. I am likely stuck with this eye patch for the next few months. So, that means you're stuck with me making pirate jokes for the rest of that time. But, I'm very excited for today's session. So, so far this week, uh, you've been looking at how to roll out C-pilot across your organization, how to use C-pilot with Excel, and today we're going to get technical. We've been looking at how to use GitHub Copilot for software development. So, GitHub Copilot was the tool that really launched the AI assisted coding boom. It was like a little over three years ago now. And I'm very keen to see what's new. So, our guest today is Ari Lavini, who is a senior learning advocate at GitHub. We're going straight to the source. Welcome Ari. — Thank you Richie. Appreciate it. Thanks for having me. — Yeah, great to have you here. So Ari is responsible for designing and delivering learning pathways and GitHub skills for both the GitHub community and the Microsoft community. He's a very prolific content creator uh both on Substack and the GitHub blog. So we cover his topics such as GitHub actions, GitHub platform, GitHub copilot and all sorts of AI powered uh software development. Beyond this, he also maintains the continuous G33K YouTube channel. Also uh the GitHub learn on uh React on Microsoft React uh playlist. So if you enjoy this session, please do check out the rest of his content. Uh I'm sure we'll provide links for you later. All right. So uh with that uh Ari, please take it away. Great. Thank you so much, Richie. Uh once again, I'm Ari Levigny. I'm a senior learning advocate with GitHub. Um we're here to talk about all things GitHub Copilot. as Richie kind of gave a great introduction of where Copilot kind of started and where we're headed now and a lot of what I want to cover in this is about moving from that, you know, peer uh coding and review of what you're writing on a one-on-one basis as a you know, a pair programmer, but more of how we can maybe delegate tasks to agents and how we do that. Um, as Richie mentioned too, I help uh develop and uh create GitHub skills exercises which are nice uh self-paced uh exercises that you can learn GitHub within GitHub. So they're all maintaining GitHub and those links have been shared with you. Um I'm going to get into very few amount of slides because I really want to get into the coding that's why we're here. But really to give some background on agent orchestration and what its advantages are, uh how to design your agents to kind of work together in that kind of team um or like a fleet, which is one of our uh if you're familiar with the GitHub copilot um CLI uh slashfleet should be something that should be familiar to you, or slashdellate. Um but we'll get into a little bit. I honestly at this point do all of my development even though I'm in the IDE. I do it through the CLI. With that said, let's get into the agent orchestration, build your AI team. Um, kind of when, like I said before, when we were, you know, pure programming, you know, we're kind of the human bottleneck here of like we're using the AI to work alongside of us, but how do we work even faster by maybe delegating some tasks? And that's where we get into this more of this hive of this orchestration or fleet of agents. And you may have a master agent in this case maybe an orchestrator and then you have maybe sub agents that have different tasks and um also maybe different models. Uh so here you know I've designed a very simple exercise that kind of gets into these four areas or four agents. The orchestrator kind of you know delegating work to the other appropriate agents for the planner for the coder and the designer. um as I'm you'll see too um I use different models uh for what um for the different tasks just because of their specialties and what I've come to uh learn about using these different agents uh and sorry these different models um with the agents and so I used clo opus for the orchestrator and planner highly agentic with uh relentless energy you know it gives you a lot of depth and research um and also the ability and that's why we wanted for the planner and also kind of coordinating with the other agents. I find that the GPT models especially I've been using 55 a lot recently and I have that in this exercise as the coder um and really precise syntax very gets to the point and I feel like for coding like that's what we're trying to do. We're not trying to get uh too verbose but really just get to the core of what we want to accomplish as efficiently as possible. And then I use Gemini Pro for my designer, my front end, my UI, UX design. Um, I actually use it all the time for videos and images outside of using it with Copilot. Um, so I've come to, you know, I think it's important to understand the models that you're using and how you're using them. Uh, and these are how our agents will get set up. The

other thing too is you notice you start to use tokens obviously when we're doing all of these uh e you know these tasks that we're delegating to agents or we're using co-pilot in general. Um and with this kind of mechanism of using a fleet of agents and co and certain you know sub a main agent and sub agents we tend to utilize be more efficient in how we're using our token. So this kind of a little note on that on scaling that and saving on your token. So then obviously that saves on cost and I'm sure everyone's in your personal life but also in your you know your organizations and your enterprises I'm sure that comes up a lot as well when it comes to AI um budgeting and things of that sort. Um the last one slide I want to show is this is kind of the overall view of what the dev team in team is and you become kind of that architect really delegating you know as if you had a team of developers someone for the front end designing someone you know you're kind of working with maybe a PM or an orchestrator um someone's written a product plan um for you or you know a uh yeah a um a process document and and uh and what the project entails and then a coder a GPT kind of getting to the point and you're kind of architecting using these different um you know folks. So with that said I'm going to get into um the first I'm going to start with just the CLI. Um this is an exercise that was shared with you. Um the links have been set out sent out um on creating a very basic calculator uh application using the CLI, installing it, getting it set up um some of the slash commands that you can use. Very basic. We're actually going to have a follow-up GitHub skills exercise probably early next month if not by the end of this month that kind of goes into more detail and more depth with the CLI. Um, but what I did was to like these exercises are great because basically when you copy it to your handle. Um, so if I was to actually take this exercise um, and the same will be for the one that we go through with the agents. Um, obviously I already have one created, but I could create a new one. So I could say uh, data camp for example, and that name obviously is available. Uh I don't need to recreate this but at that point it would then create that repository from this template for you uh in your namespace. I've done that here as you could see my handle at the top and the name it has this skills dash in front of the main exercise just so it kind of separates it from the main repo that this is um being cloned from and that's the template. Uh but then we have a set of steps that we step through. Uh, and part of this is also I like to we like to use code spaces just because we can design the development environment and the exercise environment for people to use. Um, and it's consistent across so it's not you don't run into this doesn't work on my machine kind of situation. Um, and then we do some installs and things like that. Um, I'm not going to step through this. I want to if people have questions about this at the end then maybe I'll kind of spend more time on this. But this is very basic to install and use some features with the exercises. Um I have that code space up set up here. Um so if we wanted to install that um you we could just do the uh in the terminal just copy this command. Um always it comes up to pop so popup so you can uh use your clipboard. That's just standard uh at least in Chrome anyway. That's what I use as my browser. Um, so now it's going to go off and install Copilot. There's a number of other ways I think to install Copilot, but this is the one that I'm used to. Uh, what's great about it too, now we have automatic updates if you want to enable that. Um, also if you wanted to, uh, it lets you know that there is a new update in case you're doing manually and you're ready to update. Uh, you could do that at that time. Uh, you know, and we could just run, you know, we could run a version command, but let's just run this just um to start the CLI. Um, and then I'm going to jump over to the agentic um the agent orchestration. Nice little graphic, ASKY graphic there with uh there's actually a whole blog about that if anyone wants to look that up on GitHub uh blog. So you'll find uh the story behind uh this little images that were created at startup. Um but you know typical like slashhelp you know you can see all the commands that are available. Um they add commands. Their updates are daily, multiple times a day for this uh for the CLI. Very powerful. Um allow all is what I usually use because I don't want to be asked every single time. But obviously depending on what how you'd like to work, you can have it so that you're being asked if to use certain tools or execute certain commands. Um a lot of stuff around

session renaming, re resuming sessions or sharing them. Um, you could also do slash remote, which is a new feature. Um, slash remote is pretty amazing that you could basically do slash remote. It gives you a link and then you could actually um continue to work on your um your project through the CLI from your phone or your web browser if you so choose. So, that's pretty cool feature that we've added. Generating instructions. There's some cool experimental things as well. Um really they've they've gone crazy with a lot of the slash commands. You can do chronicle of what all the history and the tools and the insights that you've used in that session. Um I like the share one sometimes to use like if I want to share a gist, I could create a file or a gist. Um and I want to share that with a co-orker, it's really easy to do that. Um and so on and so forth. So that kind of gets to the CLI. We can also spend more time on that after, but I really don't want to hesitate on why we're really here. Um so this is the exercise uh which you've also been shared. Uh the org might be a little different and moved over but that's okay. That link will still work and send you to the right location here. Um and this is how we also copy the exercise here. Um I've already done that. So I actually have um you'll notice too what happens when you start an exercise and you clone it to your handle. You'll notice that an action will run in the background and the text that you see here changes from this basic like copying it this template is that now it's actually changed the read me on the main um in the main route of the repository and then you can just go to your exercise and it's a nice issue that guides you through the set the all the steps. Um this is what our GitHub skills platform is based on. Um and it's really useful. It's simple to use and it's very consistent. Um, and obviously you can file issues if you find um, obviously that we're always iterating and trying to fix if there's any bugs or add features if there's especially if there's an update to copilot and so on. Um, and or any agent stuff as well. Um, so then it leaves you with some commands to use. Um, we're we'll get into this now. Um, what we're already started up in this um, code space. I'm actually already started. Um I have the repository. I'm ready to go. I didn't want us to have to wait on that. So I had already started my code space. If you were doing this um and I want to point this out, you would go um right click on this is how I usually do it. And then you can create a code space or resume code space or create a new one. And that actually will create the environment um in your uh from that repository right here. As you see here, um, we have our, you know, our traditional co-pilot chat panel. But what I actually did and and I recommend this, um, I use terminal and editor now, um, in my VS Code local or a code space just because it's like really consistent and useful. I enjoy using the CLI. Um, obviously everyone's different. Maybe uh, you want to use the chat panel for some of these things. Perfectly welcome to do it there as well. Um, you know, obviously we're going to talk about the agents that I've already that I've created for us to use today. Um, but as you could see, the same agents that we're going to talk about in the CLI are here in the panel because they're in our repository undergents, which we can see all the same names that I showed you in the slide are here in our repository. So, you can kind of see the match there on what we're going to be doing in this exercise. So, um, I'll move that over to the side because I really want to do most of my work in the CLI. Very powerful. Um, yeah. So, let's get into the first. And what we're doing here in the first activity is we're asking po Copilot um with the uh the base agent here to inspect um uh you know, what's what agents we have available and update and replace a text for us. And that's more just kind of to get to know what our agents are about um and what their jobs are, what their roles, personas are. Um and we're going to take a look at that, too. So, let me um copy this. Um everything's should be available to copy in the exercise so you're not typing anything. Uh makes it a lot easier and obviously uh avoids uh human error as we all make mistakes when we're typing. Um I am as guilty as the next person. Um actually if you type uh copilot um now I believe it will it might install uh I believe automatically it will go out and install. I think that's in a VS code IDE or code or a code space uh by

default but good question. Yeah, if you type copilot on the command line, you'll know if it's installed, too. It'll tell you. Um, so great. So, we first wanted the summary here that comes back here in the CLI. It tells us number one, all of our agents. It's updated this doc that was already there when we started up this code space. You'll see that when you run through the exercise. I mean, that's the best part of this is you guys can take this and run this after this um this webinar uh and go back to it and play around with it. Um there may be bugs in there. We'll find out. Um I think it's pretty I've run through it several times, but obviously uh with generative AI, you never know what kind of changes can happen. So keep that in mind. And we try to narrow those down so that we have a more deterministic outcome from Copilot and the different agents that we're using. Um so we have our plan our orchestrator which coordinates the work for the specialists. These are the specialists the planner. Again you can see the models we're using. Um and if we go to the document itself um oh let me go here and where is my doc? There it is. Um we'll open that in a preview. Might be a little bit. Yeah. So um gives you a nice summary of each um agent and what its jobs are, what models it's using, the definition for the file in the repo as well. Um I think one of the best things uh as we all use copilot is for documentation and tests and the ability to automate that. Uh obviously I always take the uh mentality um why do I use for the coding? Um, I've had a lot of success with uh GPT55 recently when it came out. Honestly, I was using the other models before for coding the 54 53. I did use 53 codecs for a little bit as well. Um, but um that worked well for me. Um, I like the codeex models too. Um, but I tend to gravitate and this is my preference obviously. the codeex models are great for coding um is that uh I like the newer models because it has more it's been trained on more uh information and more recent information. So I tend to gravitate towards that. Maybe that's not the way to go but um yeah I'm on GitHub code spaces uh which is the same as via if you're running VS Code ID locally this should look exactly the same for you. I am in the insiders edition. Um so that may be a little bit different but other than that it should be pretty uh much the same. Um gives us about the uh about coordinating through the CLI and so on. So I think we're happy with that. We have a good explanation of the agents and what they're doing. Um, and I could obviously do these commands myself, um, and run them, but I'll probably just tell Copilot what I wanted to do, um, to stage that doc, commit it, and merge and push and commit. Obviously, we're merging and committing uh, and pushing to main, but normally you probably don't want to do that. You want to create a branch, do a pull request, and that sort of thing. But I think uh, this exercise isn't focused in on that kind of workflow. Um, just because, uh, we like to keep our exercises kind of under an hour. And I think as you start to add more stuff in it um takes a little bit longer. We do have several exercises that do walk through that. What do you think about sonnet rather than opus? Sonnet is a good choice too. Honestly, I'll be honest. I did have um when I first uh initially wrote this exercise, I had 53 codeex for the coder and I had o I had sonnet for the um orchestrator and the planner. So, not a bad choice either. Um I I guess I'm a little bit spoiled. I have access to a lot of the models. Uh but using those models are fine. I would expect uh similar outcomes as well. Uh maybe there might be some variability or things that don't um aren't consistent, but uh those models are great to use too. Obviously, the codeex ones are designed for coding. So I think I don't think you lose out by switching one of those out. I just stuck with these for these exercises. Um I may switch them again like when we do updates. Sometimes I do update the models. So we did um the cool thing is the action runs in the background and we um we get kind of a check of all the things that we did to make sure they were done properly. Um and then we're ready to get another step and more activities to walk through which is awesome. Um, so as you could see here, we are now going to get into we're going to use a slash command and that's slash agent. And I'm going to hit agent and let's take a look at this for a second. So default is just what you know the the copilot coding agent um or sorry the

uh the copilot uh it's just the agent that's built in. Um or you could obviously delegate to that agent if you wanted to. Um, in this case, I have options obviously that I've created in my repository to use. I could also create a new agent if I wanted to start, you know, help with work with co-pilot, which that's actually what I do when I create my agent skills or my agents or instructions is I actually work with co-pilot to generate them so they're accurate. Um, use the copilot in a chat window as a plugin for Pyron. I think I'm missing some prerex setup to follow along quickly here. Unfortunately, that's okay. Um, like I said, this exercise is available afterwards and you could get you have the development environment in there and it's configured so you don't have to worry about those things. So, when you get a chance to uh take it offline after this session, you know, follow you can run through it and I'm sure you'll figure out what's going on there. Um, but we could create a new agent if we wanted to. But in this case, I'm going to choose the orchestrator because that is my master agent that's going to figure out how we're going to develop this project, this project pulse, which is a um, and we're going to kind of generate like a uh, identify uh, pieces of the project, the people that own them, and we're going to create kind of like a mini dashboard. uh if you have the links available just go to the repo and then um copy that exercise to your handle your GitHub handle you need a GitHub account you need some level of a co-pilot license um even for you know free uh there would be some limitations on which models you can use so if you have to make adjustments there you can do that accordingly um yeah we I want to keep things around like Oh, wait. What is it? Process and bad handoffs between multi- aent hierarchies like the planner and coder. Um I mean at that point I think you could have the orchestrator help you debug and then would go to that agent to then um help you debug the situation. That's how I would face it. Um you could go directly to that agent and work with it directly too as well. Um I think you have a plethora of choices there. Um so we're in the orchestrator agent. So now we're going to say ask the planner to create an implementation plan. We want to save the plan to this docs. Um we want to include uh these files uh for the application that we're creating. Um the include the designer and coder in responsibilities include any dependencies that we need. Um yeah um if we don't we'll leave time for questions at the end too. So don't worry. I think we still have plenty of time. um we in it it'll include parallel work decisions where it can make those. So that's something that I'm telling the orchestrator and that's its job to do that um and include validation um expectations and I didn't spend a lot of time but let's take a quick look at the orchestrator. It tells you what agents it's kind of going to be working with the specialist in those areas. uh the execution model, you know, of who's going to be doing the plan, coding, parallel work, um you know, give it a specific scope. Um these are the jobs of that um agent and giving it that kind of persona um of running this project. Um you know, it coordinates everything. um kind of like maybe a project manager for a project or a program manager, product, you know, you name it, of who's kind of organizing that said project. Um that's uh what this is kind of acting as. Um and then planner has certain roles of and certain tools that it will use as well. Um it's not going to be editing anything. So you won't see edit here, but if we went to the designer, we would see edit as because we're going to be making changes to the codebase. Same for the coder here. And you could see you can configure tools and add tools by just clicking this button here um and searching through if you want to add. But there are some of the tools that are listed. Um and this is kind of the anatomy of a custom agent that's already been created. Um obviously all in markdown. So again working with Copilot to generate those is really uh great and easy to use and you can have that back and forth to kind of keep iterating to make it you know make that agent exactly what you want. Um, you know, agent skills is similar but has no persona. It's really just designed to do tasks. Um, so that kind of walks through some of the agents. Um, our designer also we're using 31. Also, I appreciate the questions on the different models and using what. Um, seems like everyone I didn't hear any feedback or I would say any change on the designer using Gemini. So

the on the designer using Gemini. So, I'm assuming that everyone kind of agrees with that one. or and possibly the version as well. Um, okay. So, we have that set to go. Uh, we're going to feed this to the orchestrator. And as you can see, it tells us that we're in the orchestrator. Um, when there's many lines, you'll see get this little bracketed and but it will print it out for you. Um, and give you like a nice little window once it's uh submitted so you can see what you copy and pasted. We'll let it it's going to now talk to the planner create the the project pulse implementation plan um you know which would be on any project um experience to do this exercise. No, you don't need no you don't actually you don't need coding experience to do this per se. Um we're using copilot for a lot of the commands to do everything. Uh we are also markdown is basically natural language with just some syntax highlighting around it like for those agents. If you noticed we had like these this little preamble um this front matter uh here and then we have like these little head these are headings and this is a heading too and some bulleted lists. So obviously if when we look at this like in a markdown if you're not familiar with it kind of looks really nice and pretty like this when you um take that syntax and put into this. Copilot is great at generating it. You don't even have to know what the syntax is anymore. That used to be a barrier or friction for entry VS code to CLI because I use the VS code example when creating agents and adding tools. Yeah, you can use that. Um, it should be the same. I don't know why it's actually slashed out. Um, I don't know if that's something maybe I need to specify or add it. Um, I for this exercise it doesn't really matter, but um I think I could have on I don't know why that's like uh struck through on that on the memory part, but that's a good question. Um, all right. So, that's doing its thing. uh you know these are the things that we want to see in the plan to just kind of again exercise tries to explain um obviously not that you're just you know copy and pasting commands but what's happening there um and obviously then you can check with what's in the code in the repository and make sure that that's consistent for you. Um, just going to take a little sip of water seltzer. Um, at the end of it, we're going to use copilot again. So again, if you don't know how to use git commands of like staging or vs how to do it in VS Code, you can have copilot do it for you, whether it was the chat panel or the CLI. Still doing work here. We should start to create the plan. it's working on that and that also seems like that plan needs to be created before that plan is then the coder and the designer will work in parallel to then go execute on that. So kind of the orchestrator has all the information told the planner to go create that but is holding and waiting for that to be complete before then handing that off to the coder. That's the whole idea of the orchestration piece. Asian mode can autonomously plan the work needed determine the relevant files and the context. It then makes edits to your Yep, that is 100% true. This particular architecture you chose any other alternate architecture to look into or play around with. Um, yeah. I mean, you may have other features of an app and have may have another agent or maybe you're taking the approach of your agents are different types of personas like maybe like from a you could say like we're I'm working on a um agent for and like an educator. So maybe from that persona of being a teacher or something or professor and giving it some background on that. Um that may be other decisions if I'm creating an app maybe for the education um you know uh a school or a university or something like that. So I might take that kind of um change to my plan. Um I mean I guess you could also maybe have the planner you could remove the orchestrator in a way and make it a orchestrator planner too. um it could maybe have both roles. I did this for more obviously I think it's better to separate them and show you know the uh more granular possibilities of more agents involved. Um but yeah join we are building a team of agents. Um so now uh let's see where we're at. So the plan has created um the file just got created and we'll see it pop up here. Um and then I'm going to show it but I just want to wait so that we see what the orchestrator does next. So the

plan is complete and now it also notifies us like what parallel work can happen and the orchestrator is kind of telling you what it's going to do, which agents it's going to call um you know edge cases and things like that. like it's looking at everything um and then handing off the work and letting agents know when they could run in parallel or run sequentially. Um so we have the se sequential steps um through refinement and optimization um the file assignments uh dependencies you know what's in the stack that we're using and um obviously we want to test things um the plan is now ready so uh we're done with that piece so let's open that up um which it added right to our docs for us so if we open that up this is a project pulse dashboard implementation plan. Um, the target user is Mona. Obviously, if everyone knows GitHub, Mona is kind of our mascot. Um, the octoat is called Mona. So, uh, that should sound familiar. So, we took it from that persona. Um, quickly assess multiple projects at a glance, view project status. So, these this is what we want this dashboard to have. Um, and use a dashboard as a daily operational tool. Obviously, what I developed here is very basic. This could even have more added to it um and go beyond like just showing a daily like status. It could you maybe like double click into certain things to get more detail of the different projects or different um pieces of the project. Uh yeah, some of the structure um and the steps uh design ownerships of who owns what um you know the design um and this is what the coder and it shows us the steps of each one of those will own um what we're creating the files any dependencies that are necessary the parallel work the sequential work um and we can use that and even want to iterate with the orchestrator on that plan or maybe go directly to the planner agent and kind of just iterate on that plan directly with that agent. We have the option to do that. Um edge cases to handle uh functional validation, visual validation, response validation. So good stuff. Um obviously we could probably keep iterating and dig even deeper if we wanted to, but obviously for the sake of time this is a good plan I think to start with a basic app that we're developing for this project pulse. So, we're good there. We're now ready to toil co-pilot to, you know, stage and commit, push to main. Um, and then we're hopefully we'll our lovely issue, our self-paced issue here will have the next step waiting for us. Um, once that's successful, um, we could also see the code. Um, you know, if you go look at, uh, the code tab, you'll see that we've made these, uh, pushes and commits here. So the plan's been committed. Um I did do this with the orchestrator agent, but that should be fine. Um there shouldn't be any problem with that. If you wanted to switch back to the agent to the default agent, you could do that, but um I don't think you really need to do that. Let's see. Oh, and looks like we're already going to get our feedback. Awesome. So check that our plan is there. check for the pulse, you know, the plan details, the app file assignments, things that we wanted to know were like we're validating what we've put in there using the agents. Um, and then now we're ready to build a project pulse dashboard itself using our orchestrator agent. So, if you are not already in the CLI, which I am, and I added this at the beginning of every step just so people know where they need to be. Um and uh this is very lengthy. Um but let's take a quick look through it. So we're using the plan that's been created. Um we're delegating uh visual and accessibility decision uh decisions to the designer. Um build the project the dashboard with these files so you know what the UI is going to have of part of it. Um the different sty the stylesheet and what we want in there as well of this kind of project card. uh make the UI polish border. Um you could you can go crazy with these. The other thing that I added in here too and if you use VS Code, it's probably the best way to run your applications within VS Code is I added this. VS Code um just like we have GitHub or other like kind of private directories in a repository that stores its config files or certain setups. Um, we have a VSS code launch which will be a run and debug and I'll show what that looks like when we get there. Um, and then we'll launch it. Uh, we'll see how the website comes up. Uh, this for this dashboard um, and make it friendly or sorry, make the launch

configuration open the dashboard front end um, not a directory listing. So, when I first started to iterate on this, I added that because I was just getting like the basic directory and very boring. That's not what we want. we want to show the dashboard that um at least shows some project uh information. So um with that said uh let's take what's here. Um have you actually planned any of this plan to agents? I'm delegating the plan to to agents. I I let the agent run with this. The agents run with this. What about the illustrator context window? Write directly Um, no. So those um the orchestrator may get some of the context from the other ones, but um the context windows um that's the other part too. Um I don't know if I had that in my slide, but basically uh those context windows are separate. So they're not getting like what we like to call sometimes context rot of like too much information and the agent then doesn't know what to do or which to choose. So by doing this agent architecture too right we're separating um those contexts for the most part the orchestrator obviously understands like the overall project um but those agents themselves support incidents but oh boy um so what um what we do with those agents their context windows are focused on what they um what they want um and uh therefore they don't get muddied or get confused or hallucinate as you may have heard that term as well. So um let's keep rolling through. I'm going to paste. We're should let's just check to right that we're in the right agent which we should be. As you can see the default one um the that would deselect the current agent but we're going to stay with the orchestrator again. Um and I'm going to paste those lines and we'll see them pop up which is exactly what we copied. Um the next is kind of like if you saw here was the checklist of what we want to make sure happens. This is what our validation also does too. Um and we're going to run this dashboard as well. So it's doing phase one. You can see it's going to do these in parallel for the designer and the coder. Um when completes and we're ready for phase two. Sweet. Um, and as you can see that orchestrator is breaking things down, assigning the tasks, but then also keeping us up to date on the different phases. I think that's what I like about the CLI. Obviously, you can get the same thing in the chat panel, but um I I like this and I'll say this too. Um, I know I use VS Code um, and as an IDE, but other people use like PyCharm or Jet Brains in general as the overall IDE or Eclipse or uh, Xcode, like a number of different IDEs or Visual Studio, right? So, um, what I like about the CLI is that always is consistent. So, the interface is exactly the same. And then so if I was to go to another IDE or I was go to just to my terminal the um the this command center which you know is the CLI the copilot CLI becomes exactly the same and it's one pane that looks the same. Obviously they're updating it so you'll get newer slash commands or maybe the way they visually show something will evolve over time but that's in any UI that's not um particular to the Copilot CLI. All right, let's see. Um, so we're already creating some files here. Um, this is kind of our little dummy data that we populated so that we can show this little dashboard. Um, and you can see the different this is what we're going to show visually. So, give you some background on that while that's working. Um, again, we could use um in the uh in the chat panel as well. Um, for those that are familiar with uh GitHub and use GitHub a lot, we have a co-pilot app that's out there now too. Um, that's in uh I believe is public preview or yeah, I believe it's public preview. Um, and we're obviously iterating on that. Uh the one thing about GitHub that I love is that we ship to learn. So we try to um you know put

something out there, get the feedback and then iterate on it or you know as we're using it ourselves we see things that we can um uh do better and we report those issues back to our um our engineering team and they get fixed or I would say at least updated or you know obviously there's some feedback from customers too that get early access to some of our um our tech. We love to get the feedback from them as well. So we're still uh so it's for and now it's just rating on the designer. Again, that's like the role of the orchestrator, right? To kind of coordinate, keep track of what this agent's doing, that agent's doing, waiting for maybe feedback from an agent. So that context is coming back into that orchestrator agent so it knows um what the status is. But it's definitely I would say the information that's coming back pertains to the orchestrator and what they need to know. There's probably more context in that planner agent or that coder agent that it knows, but it doesn't need to share all of that. And I think that's the efficiency here too of kind of developing a group of agents to work together. Obviously, I called mine orchestrator. It doesn't have to be called that. Um, you know, it just made sense to me. it's orchestrating the work. Um, but you could call it whatever you want. Um, and even in the exercise, right? Like we're giving kind of prescribed way. Um, it doesn't mean that's the only way to do it. It's just to show a use case or a set of use cases that may work in your environment or you can also um, you know, you could iterate on yourself and um, you could take this repository. it's there for you to own in your handle and you could fork it, make your own version or um you know do uh or make updates to it that you would like to see or maybe you're just going to modify it to work for a project that you're already working on. That's also great. Um we love when people take our GitHub skills and do their own thing with it. Obviously, we're trying to keep ours consistent. That's why they're templates. But um we are totally always open um for people kind of in their own uh name in their own handles and usernames to uh to make modifications to do what they want with their own exercise. Um now we got a we have now the designer is giving us our index file, our HTML file. Um Ser's working hard, I guess. Um so while that's doing that um we're also going to do obviously stage the files and commit and push to the branch to the main branch. Um while that's going too I can switch back to the CLI. Um obviously you know you want to log into in the CLI which will uh bring up like a code to log into your um sorry your username and GitHub. So it will pop up a little window where you put in your code and you log in um you know information about the session the context uh how much usage. So this is good like if you're worried about how many tokens you're using and you want to understand the usage will give you that information. So if we were to do that at here like um I haven't really probably used a lot in this session. Um those agents are available in the repo. So when you copy that exercise, that skill exercise, you'll see in. github/agents all of the agents that I've created here. Here's a nice visual too. Obviously I haven't used many. Um like if I wanted to tell me more about slash usage command. Um that's the other great thing about the CLI too. You it is very obviously informed of itself. So it if you ask questions about it that you're not sure what a slash command does or you want more of an explanation, you can get that as well. Um you know it tells you exactly what you get from this tool and what it calls. Yeah, the cost and the quota. Um, obviously everyone has probably seen, you know, we're we've gone to a usagebased billing model besides the licensing. Um, but you know, sorry. Um, that being said, uh, you know, we're constantly making updates so you can get more information about how much usage the metric and metrics on that as well. So there's dashboards for those. I'm not going to get into that here because we could probably spend a whole session just on that. Um, right now this is probably just a static one. Um, but obviously just to show a basic example, I could make it so like if I wanted to add things to it like some switches or things like that, I could do that. Um, okay. So, we started it running. Um, interesting. But what I want to show is we created that launch. json JSON um file here as part of um what we're doing. Uh and this is what

VS Code then when you come to this panel it has a list. Uh otherwise until we created that file this did not exist and then we can hit play if we want to run the dashboard. I think it's because it was already started. Let's see. Uh we can go to our ports and probably Yeah. Boom. Um yeah, it I guess part of my agent there started it on its own, so I didn't have to click the run button. Um but uh we could kill it and then do that. It might be a modification to this exercise that I probably don't want to since I want to show you guys how to run it through VS Code. Um, but if it runs on its own, you may prefer that, so you don't have to, um, worry about starting it either. Um, but it gives you like information that we asked for. Um, there is nothing clickable. Like you said, it's kind of static, but we could add to that and iterate and say, well, now we want like if we flip this, you know, get details on these different projects. um uh you know the different aspects of the project um security audit our analytics Q4 you know different parts that we want to plan out our API documentation stuff that's completed in progress just basic it's just to show an example of that um and we are still running here now we're updating the code uh in the background we should let's see what files we have now so we got our VSS code JSON uh launch JSON file which um has uh what we need uh to launch the app. We have uh our UI or designer part completed. Um the coder probably generated the JSON file. I'm pretty sure it said that. Um and then the visuals is the two um the index and the style uh cascading stylesheet. And let's see. But yeah, that's a great thing like if you wanted to iterate on this and add um you know we could continue on with this not even modifying anything and ask the orchestrator to implement more of a um interactive dynamic maybe asking questions or you know maybe taking some input from us to find or a search bar maybe we want a search bar added to this so we can just search specifically for status and details on a certain project. We could do that with what we have today. um we would just have to prompt it as one of the steps. So that could be we have four steps here. Maybe that's step five if we wanted to add one. So that might be a good suggestion. So I might do that. Thank you for that question. All right. Um looks like we're finishing up. We still have um still got time. So that's good. We should finish up just about in time. Uh this part step three takes the longest just because obviously we're implementing um with our different um agents that are doing the editing the coder and designer. So that takes a bit more time but looks like we're coming to the end here. Yeah, commit dashboard implementation. So it actually um that's another thing that I may want to switch. See how it's automatically um committing and pushing if I want. It created the commit. Let's see if it pushes it automatically to Yeah, it's pushing it to the repository. So that may be something that I want to change. So um we want more control there. We want to control when we probably want to look at the code first. Um, so that's something that can be specified as part of the orchestrator agent is like don't uh don't have any of the agents uh commit or push any code. That's an easy instruction that I'll probably add to this to make sure like that doesn't happen. Um but otherwise it happened as we expected. Was the charger write to the file is it orchestrator? Um the agent has it in each agent file. you'll see that um it has that ability. The orchestrator actually does not have um I wonder if it's more of a tool set memory has been re Oh, it so it's more of a renamed that's why it's uh Xed out. So the memory I guess that's something that um I wonder though if we're using in the CLI if actually we care about that we probably want to keep it memory. I think that's actually just because the VS code is noting that. So I think it's probably still there. How are the user u how are these agents communicating? They maybe um they're communicating to the through

the orchestrator and you can specify that in each agent that you know don't you know take instructions and follow direction from the orchestrator agent. um you know you can put that in there and may maybe in some of there I don't know if I remember putting that but if I didn't that's obviously you can see how many times you can iterate over your agents to get them exactly the way that you want. So um there's always room for improvement and iterating on things to make them better and this is no different um you know just like in our exercise here. So looks like we pass past step three. We have our little UI with our little dashboard here. Um, let's go to step four as we come to the close of this. So, um, we're going to stay with the orchestrator agent again. Validate the project pulse, write a final handoff report. You know, some things that you do both on the coding side of a software project, but also on the planning and program management side, uh, project management side. run it. Launch didn't include section header that contains the lowercase word validation handoff. Oh, okay. So, let's see what we get. Um, so let's go to the bottom of Oh, that's our orchestrator. And we are still in the orchestrator agent. As you can see here too, it tells us on the bottom here too. I also am using model auto. Um, I think you might have seen that when I started, but this is how you choose your models too. Obviously, I have access to a lot of models here. Um, but we paste those lines level. Let's let it go and do its thing. Um, I may also change some of this to you of like launching and things like that. So, um, if you do find issues with it, you can open up an issue at that repo. I'll take a look at it. Um, I will try to address. Um, obviously all of this is working, but there's certain things that, uh, folks have pointed out that I'd like to go back. And this is good. That's why I love these sessions, too. you just get good feedback of doing it live um of things that people want to see differently or have questions of why I'm doing something and if I can clarify that or make some changes and updates to the exercise um that's what I love about these sessions. So appreciate that. Um yeah, me too. I remember having trouble with the orchestrator opus. Always reading and challenging. Oh yeah. Um there is a I don't know if it's in here. I guess not for this view. Um yeah. Um I don't I honestly I can't tell you if the chat panel I haven't had issues with that. Um uh since I'm using the CLI mostly. Oh, I guess it didn't log me in. There we go. Um but uh I I definitely have had issues in the past. So I could definitely see that. That's another reason why I like the CLI. Um I probably say I don't have some of those um issues as much anymore. Um I really highly recommend using the GitHub copilot CLI. It really is um the best uh interface I think. Um uh that being said, I have not used the new Copilot app. I kind of took a look at it briefly, but I I'm kind of waiting too for more iterations of it um before I really kind of dive into that. But that also is a good UI kind of CLI type of feel to it too since it's the same pane that runs um on your desktop. All right. So, it's uh doing some of these changes. Got about six minutes left. Um we're getting towards the end of our exercise. Looks like we're committing things and going to push them. Um I may, like I said, make the change uh to pull that back and tell the orchestrator um to let the agents know not to do that. Um, you could also put it in each agent if you decide like I don't want that agent to ever um commit or push or create a branch or do any sort of uh get functionality uh when it comes to that. Um that's perfectly fine too. I don't think the planner would do that since it's not editing files. So I don't think it would do it automatically. That's probably why in the first step we didn't hit that. Um but these other ones if I think if you don't call it out um it le and also in some of my prompting I think you saw like it kind of it gives that liberty or that notion of liberty to the agents and the AI to do um or the sorry the model to do that about with the system here is the routing log not sure of that question so

uh let's See, let's see if we got what we wanted here. Uh, handoff report pulse ready for deployment. Um, that's another reason why I kind of want to let myself um, so let's actually look at that handoff doc. We have a new handoff doc. Let's preview it. Gives you an exe what was built. Let's see if we can also Let's um rerun the dashboard. Let's do that. Um, yeah, functionality, accessibility, our cascading stylesheet, the colors that we chose. So, it gives a good summary. So, I think what you know this would be great for, right, is if you have the project plan from the beginning and kind of the handoff kind of gives you like this is where we started. This is kind of where we ended up because that obviously as we do software projects and software development, we don't always end up from where we started. We make tweaks along the way of what makes the most sense. Um, sample data covered the dashboard includes 10 diverse projects. Okay. Yeah. So, they're all separate projects. Um, let's see what this said. Let's see. Let's stop the dashboard. So now we're just doing I'm just playing around. I think we've um if we're correct, we've finished this exercise. So what happens at the end too um in our GitHub skills exercises as we wrap up here in the last two minutes is we get a good summary of what we've done. Um, so we've, you know, we've completed it. Um, it gives you, you know, what you've learned, what's next. Um, you know, there's other, uh, GitHub skills exercises you can explore. You can learn more about the CLI. Um, using other commands, um, you know, how to reopen and run the project, um, you know, thi things that you can do to continue, uh, working on this now that we've closed this issue. So um now this code and what you've changed is already part of this exercise um and you know it gives you a nice little you know you gradually you can share with your socials too if you've completed this exercise please do that we love to see that uh post it on LinkedIn you can tag GitHub or you know tag myself in it um we'd love to see that uh and you can always return to the exercise which should probably take you back um to the main issue view here that's been closed. Um, and then you can also explore other skills. So these are other GitHub uh copilot or I should say GitHub skills on all the platform. We have stuff all the way from you know using it for the first day. So if you want to get intro um automating workflows with GitHub actions, code security, you know, switching to GitHub obviously the big popular one is C-pilot. So we have a lot of different exercises here. Um but yeah uh thank you so much for the time. Um I hope this was useful. Take it take the exercise for a spin. I will be making updates. Trust me on that. Um we try to always uh go back and iterate um try to uh field any of the issues that come in for exercises. We are a small team right now but we do try to maintain and also you can create your own exercise using the same actions that we do. So thank you so much for the time. Uh enjoy the rest of your day, evening, afternoon, wherever you are. Um and take care. — All right. Super. Thank you. That was brilliant, uh Ari. And uh yeah, uh I felt like I learned a lot there. That was very cool stuff. And uh I love that you were answering questions as you went through. Saved me a lot of hassle. So with that, uh we are past time now. Um please do come back uh next week. So we've got a session on building uh a facial recognition system. Uh so that's going to be next Wednesday. Uh do sign up for that if you're not done already. Uh hope to see you all again soon. So thank you to everyone who as a question. showed up today. See you all again soon. Bye. — Yeah. Thank you so much. Take care. Bye.