Beyond Vibe-Coding with GitHub Copilot

Hello everyone and thanks for joining today's code along. We will kick off today's session in 5 minutes which is waiting for everyone else to join. In the meantime we'd love to hear from you. So let us know in the chat where you're joining from. For this code along you can check out the resources up which is being [music] commented on the chat. And please note that this session is being recorded and the recording will be sent to you to everyone that was 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 for you. >> [music] [music] >> Mhm. Mhm. Mhm. Mhm. Mhm. >> Hello everyone, and thanks for joining today's code-along. Uh we'll kick off today's session in less than a minute. Um We're just waiting to make sure everyone has a chance to join. In the meanwhile, we'd love to hear from you, so let us know in the chat >> [music]>> where you're joining from. For this code-along, you can check out the resources doc, which is pinned on the chat. And [music] please note that this session is being recorded, and the recording will be sent to everyone that asked to participate in 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 from me. Now, I'll hand you over to your host for today's [music] 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 Co-pilot across your organization, how to use Co-pilot with Excel, and today we're going to get technical. We've been looking at how to use GitHub Co-pilot for software development. So, GitHub Co-pilot was the tool that really launched the AI-assisted coding boom was like a little over 3 years ago now, and I'm very keen to see what's new. So, our guest today is Ari Levine, who is a senior learning advocate at GitHub. We're going to search this awesome. Welcome, Ari. Thank you, Richie. Appreciate it. Thanks for having me. Yeah, great to have you here. So, Ari's 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 both on Substack and GitHub blog. So, he covers topics such as GitHub Actions, GitHub platform, GitHub Copilot, and all sorts of AI-powered software development. Beyond this, he also maintains the Continuous G33K YouTube channel, also the GitHub Learn on React on Microsoft Reactor playlist. So, if you enjoy this session, please do check out the rest of his content. I'm sure we'll provide links for you later. All right, so with that, Ari, please take it away. Great, thank you so much, Richie. Once again, I'm Ari Levigne. I'm a senior learning advocate with GitHub. 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 coding and review of what you're writing on a one-on-one basis as a, as a, you know, a pair programmer, but more of how we can maybe delegate tasks to agents and and how we do that. Um, as Richie mentioned, too, I help develop and create GitHub Skills exercises, which are nice, self-paced uh exercises that you can learn GitHub within GitHub. So, they're all maintained in GitHub, and those links have been shared with you. Um, I'm going to get into very few amount of slides cuz 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 or like a fleet, which is one of our, if you're familiar with the GitHub Copilot CLI / fleet, it should be something that should be familiar to you, or just slash delegate. 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. Well, 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 we're kind of the human bottleneck here of like we're 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've 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 use Claude Opus for the orchestrator and planner, highly highly agentic with uh, relentless energy. You know, it it gives you a lot of depth and research, um, and also the ability, and that's why we want it for the planner, and also kind of coordinating with the other agents. I find that the GPT models, especially I've been using 5.5 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 The other thing too is you notice you start to use tokens obviously when we're doing all of these, uh, you know, these tasks that we're delegating to agents or we're using Copilot in general. Um, and with this kind of mechanism of using a fleet of agents and and certain, you know, main agent and sub agents, we tend to utilize be more efficient how we're using our tokens. So this kind of a little note on that on scaling that and saving on your tokens so then obviously that saves on cost and I'm sure everyone's in your 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 budgeting and things of so 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 a PM or an orchestrator, um, someone's written a product plan, um, for you or, you know, a yeah, a um, a process document and and and and what the project entails. And then coder or 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 application using the CLI, installing it, getting it set up. Um, some of the 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, um, obviously I already have one created, but I could create a new one. So, I could say uh DataCamp 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 raw repository from this template for you uh in your name space. I've done that here as you could see my handle at the top and the name. It has the 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 cuz 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 I I if people have questions about this at the end then I maybe I'll 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 you pop up 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 Ag- agentic um the agent orchestration. Nice little graphic ASCII graphic there with uh there's actually a whole blog about that if anyone wants to look that up on GitHub uh blogs, you'll find uh the story behind uh this little images that were created that start up. Um but, you know, typical like {slash} help 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 cuz 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 you to use certain tools or execute certain commands. Um a lot of stuff around session renaming, 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 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, it can create a file or a gist um and I want to share that with a coworker, it's really easy to do that um and 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 as this template is that now it's actually changed the read me on the main um in the main root of the repository and then you can just go to your exercise and it's a nice issue that guides you through the the all the steps. Um this is what our GitHub Skills platform is based on um and it's 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 leads you with some commands to use. Um we're we'll get into this now. What what we're we're already started up in this code space. I'm actually already started. I have the repository. I'm ready to go. I don't want us to have to wait on that. So I had already started my code space. If you were doing this and I want to point this out, you would go 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 in your from that repository right here as you see here. We have our you know our traditional co-pilot chat panel, but what I actually did and I recommend this. I use terminal and editor now in my VS code local or a code space just because it's like really consistent and useful. I enjoy using the CLI. Obviously everyone's different. Maybe you want to use the chat panel for some of these things. Perfectly welcome to do it there as well. You know, obviously we're going to talk about the agents that I've already that I've created for us to use today. 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 under .github/agents which we can see all the same names that I showed you in the slide are 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 cuz 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 I was doing here in the first activity is we're we're asking co-pilot um with the with the the base agent here to inspect um you know what's what agents we have available and update and replace the text for us and and that's more just kind of to get to know what our agents are about um and what their 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. Um 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 codes 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 a 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 there may be bugs in there. We'll 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 GPT-5.5 recently when it came out. Honestly, I was using the the other models before for for coding, the 5.4, 5.3. I did use 5.3 Codex for a little bit as well. Um but um that worked well for me. Um I like the Codex models, too. Um but I tend to gravitate, and this is my preference. Obviously, the Codex 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 CodeSpaces. Uh which is the same as V 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 want it 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 when you 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 cuz 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 5 3 Codex for the coder, and I had I had Sonnet for the um orchestrator and the planner. So, not a bad choice, either. Um I I I I guess I'm a little bit spoiled. I have access to a lot 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. Uh obviously, the Codex ones are designed for coding, so I 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 the Copilot coding agent um or sorry, the the Copilot is just the the agent that's built in or you could obviously delegate to that agent if you wanted to. 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 Copilot which that's actually what I do when I create my agent skills or my agents or instructions is I actually work with Copilot to generate them so they're accurate. Use the Copilot in a chat window as a plugin for PyCharm. I think I'm missing some pre-wreck setup to follow along quickly here unfortunately. That's okay. 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 take it offline after the session, you know, follow you you can run through it and and I'm I'm sure you'll you'll figure out what's going on there. 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 and we're going to kind of generate like a identify pieces of the project, the people that own them and we're going to create kind of like a mini dashboard. If you have the links available, just go to the repo and then copy that exercise to your handle your GitHub handle. You need a GitHub account. You need some level of a Copilot license even for you know, free. There be some limitations on which models you can use. So if you have to make adjustments there, you can you can do that accordingly. Yeah, we I I to keep things around like oh wait. What is it? Process and have and bad handoffs between multi-agent hierarchies like the planner and coder. Um I mean at that point uh I think you can 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 your 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 the include the designer and and coder in responsibilities. Include any dependencies that we need. Um Yeah, um if we don't We'll We'll answer We'll leave time for questions at the end, too, so don't worry. I think we still have plenty of time. Um we It'll include a 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 what agents it's kind of going to be working with, the specialists of those areas. Uh the execution model, you know, of of who's going to be doing the plan, who's going to be 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 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 code base. 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's 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 I appreciate the questions on the different models and using what um seems like everyone I didn't hear any feedback or or I would say any change on the on the designer using Gemini, so I'm assuming that everyone kind of agrees with that one or and 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 could see it tells us that we're in the orchestrator. Um, I'm when there's many lines, you'll see it get this little bracketed in, 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 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 don't need coding experience to do this per se. Um we're using Copilot for a lot of the commands to do everything. We are also Markdown is basically natural language with just some syntax highlighting around it. Like for those agents, if you notice, we had like these this little preamble this front matter here and then we have like these little head These are headings and this is a heading two and some bulleted list. So obviously if when we look at this like in Markdown, if you're not familiar with it, kind of looks really nice and pretty like this when you take that syntax and put into this. Copilot's 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 see a lot because I use the VS Code example when creating agents and adding tools. Yeah, you can use that. It should be the same. I don't know why it's actually slashed out. I don't know if that's something maybe I need to specify or add it. Um I I for this exercise it doesn't really matter, but I think I could have on I don't know why that's like struck through on that word 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 obviously not that you're just you know, copying pasting commands, but what's happening there. And obviously then you can check with what's in the code in the repository 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 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. Agent mode Copilot can autonomously plan the work needed and the relevant files and the context it then makes edits to your Yep. That is 100% true. This particular architecture you chose any other ultimate 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 uh creating an app maybe for the education um you know, uh and a 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 {slash} planner, too. Um it could maybe have both roles. I did this for more obviously, I I it's better to separate them and show you know the uh more granular possibilities of more agents involved. But yeah, join. We are building a team of agents. Um So now let's see where we're at. So the planner 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 and things like that. Like it's looking at everything and then handing off the work and letting agents know when they could work run in parallel or run sequentially. Um so we have the sequential steps um through refinement and optimization, um the file assignments, uh dependencies, you know, what's in 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 a project pulse dashboard implementation plan. Um the target user is Mona. Obviously if everyone knows GitHub, uh Mona is kind of our mascot. Um the Octocat is called Mona so uh that should sound familiar so we took it from that persona. Um quickly assess a multiple projects at a glance, view project status. So these are this is what we want this dashboard to have um and use a dashboard as a daily operational tool. Obviously what I what I developed here is very basic. This could even have more added to it um and 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 and 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 tell Copilot to, you know, stage and commit, push to main, um, and then where hopefully will our 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 the 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 a part of it, um the different style the style sheet 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're use VS Code, it's it's probably the best way to run your applications within VS Code is I added this .VSCode um just like we have .github or other dot like kind of private directories in a repository that stores its config files or certain setups. Um we have a .VSCode launch, which will be a run and debug and 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 dashboard that um at least show some project uh information. So, um with that said, uh uh let's take what's here. Uh have you actually planned any of this? This plan to agents. I'm delegating the plan to to to agents. I I I let the agent run run with this the agents run with this. What about the orchestrator context window? Just write directly. Um no, so those 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 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 those agents themselves support instance with Oh, boy. Um so, what 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 where should Let's just check, too, right? That we're in the right agent, which we should be. As you can see, the default one um the 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 to 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 file when it 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 I like this and I'll say this too. Um I know I use VS Code um and I as an IDE, but other people use like PyCharm or JetBrains 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 the um the this command center which I 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 new 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 this 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 we could use um in in the uh in the chat panel as well. Um for those of that are familiar with uh GitHub and use GitHub a lot, we have a Copilot app that's out there now, too. Um that's in uh I believe it's public preview or 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 it now it's just waiting on 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, keep track of what 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 doesn't have to be called that. Um you know, it just made sense to me it's orchestrating the work but you could call it whatever you want and even in the exercise right like we're we're giving kind of prescribed way 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 you know, you could iterate on yourself and you could take this repository it's there for you to own in your handle and you could fork and make your own version or you know, do 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. We love when people take our GitHub skills and do their own thing with it. Obviously we're trying to keep ours consistent and that's why they're templates but we are totally always open for people kind of in their own name in their own handles and usernames to to make modifications to do what they want with their own exercise. Now we got to we have now the designer is giving us our index file our HTML file. Um Signer'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 while that's going to I can switch back to the CLI obviously you know, you want to log into in the CLI which will bring up like a code to log into your um to log to log into your sorry your username in 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, we'll give you that information. So, if we were to do that it 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. Gives a nice visual, too. Obviously, I haven't used many um um like if I wanted to tell me more about /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, like you're not sure what a /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. >> [cough] >> Yeah, the cost and the quota. Um obviously, everyone has probably seen, you know, where we've gone to a usage-based 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 cuz 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 file here as part of um what we're doing. And this is what VS Code then, when you come to this panel, it has a list. Otherwise, until we create that file, this did not exist. And then we can hit play if we want to run the dashboard. I thought I think it's cuz it was already started. Let's see. Uh we can go to our ports and probably, yeah. Yeah, boom. Yeah, it it I guess part of my agent there started on on its own, so I didn't have to click the run button. Um but we could kill it and then do that. That might might be a modification this exercise that I probably don't want it 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 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, analytics, Q4, you know, different parts that we want to plan on 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 we're updating the code uh in the background. We should Let's see what files we have now. So, we got our .vscode JSON 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 is the two um the index and the style uh cascading style sheet. 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 you 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 too. 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 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 uh commit or push any code. That's an easy instruction that I'll probably add to this to make sure that that doesn't happen. Um but otherwise, it happened as we expected. Who is the charge of the edit? 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 or tool set memory has been re- Oh, it So, it's more of a rename that I That's why it's uh x'd out. So, the memory I guess that's something that um I wonder though if we're using in the CLI of actually we care about that. We probably want to keep it memory. I think that's actually just cuz the VS code is noting that. So, I think it's probably still there. How are the user uh how are the agents communicating? 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 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 in our exercise here. So, looks like we passed it passed step three. We have our little UI with our little dashboard here. Um let's 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 then 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 I'm using model auto. Um I think you might have seen that when I started, but this is how you choose your models, too. I also have access to a lot of models here. Um but we paste those lines Let's let it go and do its thing. Um I may also change some of this to of like launching and things like that. So, um if you do find issues with it, you can open up an issue in 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 there is an I don't know if it's in here. I guess not. Let us view. Um Yeah, um I don't I honestly I can't tell you if the chat panel I've been had issues with that. Um Uh since I'm using the CLI mostly. Well, I guess it didn't log me in. There we go. Um but uh I 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 the GitHub Copilot CLI. It really is um the best interface I think. Um 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 to for more iterations of it before I really kind of dive into that. But they that also was a good UI kind of CLI type of feel to it too since it's the same pane that runs on your desktop. All right, so it's it's uh doing some of these changes. Got about 6 minutes left. Um We're getting 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 to pull that back and tell the orchestrator 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 Git functionality when it comes to that. 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 lead 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. Thought with the system here is the is the routing launch. Not sure that question, so uh, let's see. Let's see if we got what we wanted here. Uh, handoff report pulse ready for deployment. Uh, 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. Give you an executive summary of what was built. Let's see if we can also uh, let's, um, review um, the dashboard. Let's do that. Um, yeah, functionality, accessibility, our our cascading style sheet, 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 kind of where we ended up cuz that obviously as you 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 2 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, things that you can do to continue uh working on this now that we've closed 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 you know, you could gradually you can share >> [cough] >> with your socials too if you've completed this exercise. Please do that. We'd love to see that uh posted on LinkedIn. You can tag uh 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 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 Copilot. 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 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 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, it's going to be next Wednesday. Uh do sign up for that if you've not done already. Uh hope to see you all again soon. So, thank you to everyone who asked a question. Thank you to everyone who showed up today. See you all again soon. Bye. >> Yeah. Thank you so much. Take care. Bye.