Name: GitHub Copilot
Uploaded: 2024-12-07T14:02:11.431Z
Duration: 2 min 33 s
Description: An AI-powered coding assistant that provides real-time code suggestions and autocompletion to enhance developer productivity.

github-copilot

An AI-powered coding assistant that provides real-time code suggestions and autocompletion to enhance developer productivity.

GitHub Copilot

GitHub Universe has been going off all week and there have been so many great announcements from the GitHub team. Uh particularly when it comes to vs code and co-pilot which is what I'm going to focus on today. Probably the biggest announcement is co-pilot edits where you can edit multiple files at a given time. We also have intent detection which means that co-pilot's getting smarter and it will include the context that it thinks you mean when you start a chat session. 

Let's take a look at all of these now. Let's start off by taking a look at my favorite feature which is co-pilot edits. Now if you have installed the latest bits you might already know this but if you don't, uh copilot's kind of moved a few things around here. The extension that is, you'll notice that the chat button is gone or if you have it you'll get a notice saying hey we moved everything to the right and that is where co-pilot lives now. 

There is a brand new experience window that's on the right side here and if I drag this over you can see that the intent here is that you can just have co-pilot open to the right that is separate from your project over here where you can do all kinds of good things. So you can see I have a brand new View application here. This is just the boilerplate. Uh there is nothing I have done to this just yet but what I want to do is I want to add a login experience. 

So I could do this with co-pilot and ask it how to do things instead. What I'm going to do is I'm going to go over to the new editing experience. This is in preview but the idea here is that what we're going to do is we are going to drag in the files that we think we're going to need to work with. Now if you don't know view that's okay. Vue has a router just like many other front end Frameworks you choose to install it if you like. Uh what I'm going to do is I am going to use main.js here which

Is again the main file I'm going to use app.

Viw which is the main component and I'm going to pull in the router as well. I'm going to say create a login route and what co-pilot's going to do here in this editing experience is it's going to be thinking about this H. What do we need to do? Well first off in index.js we need to add a new route for the login page. Very good. Main.js we don't really need anything changed in there. App. View we are going to add a link to the login page in the navigation. In the login view I'm going to create this. You cool that? If I create that like hell yeah that looks great. That looks amazing.

So let's review what's going on here. For that I can come down here to what's called the working set. I'm going to expand this so we can take a look at it. These are the files that have been uh either worked on or not in our working set. What I can do is I can click on this and I'm going to collapse this a little bit. I can click on app. Viw to see what has changed and if I come through here you can see well we've added a little login link. Yep I like that. I am going to accept this so I'll click accept. If I come over here to index.js you can see it is now importing login View and it's added a login route. Yep I'll accept that too that looks good. Main.js nothing. All right I'm going to accept all these changes. Is that neat? But it hasn't saved it yet. That's fine. I'm going to hit this. Uh looks like I saved things in the wrong order but if I refresh and you can see we now have a login view. Let's go over here and boom I've got this login page and this is this is okay but you know what I think I'd rather have I'd rather have something that looks a little nicer. So I'm going to drag this over here app.

Viw and I am going to say remove the boilerplate. It's going to think about this. It's going to say well removing the boiler plate hm that means deleting hello world and all this related stuff. That's exactly right boom it has removed at all and I'm just going to say accept very nice. 

Now hit save good now we have a little icon on the top I can live with that. Okay so now what I want to do is I want to go style up this login view and I'm going to pull this over to the working set and I'm going to say style here we go. The style looks a little dated please make this look cleaner and I'm going to collapse this a little bit so we can see better and it's saying sure I could do this. 

Uh I'm going to update the styles to make the login form look cleaner and more modern. I like it so let's take a look at the diff here as you can see it's add of some styling it's taken away a few things and good we like all this. All right we're just going to say accept and once we hit save o look at that that looks much cleaner. 

But if I hit login you can notice that nothing happens and that's okay I don't really have any backend routine yet. But you know what I want to do I want to add some pizzazz in here. I'm going to drag main.js over to the working set and here I'm going to say I want some razzle this will be fun. 

I want some razzled dazzle for the Lin experience add confetti to the login click why not. I'm going to say okay off we go and what it's going to do is it's going to say hey you know what in main.js we need to add canvas confetti. That's what I'm going to do up here if that's cool with you it's cool with me. 

In the login view it's going to also add some code to trigger on the login and there we go. So let's go back over and review the changes here. So in main.js we can see up at the top it is importing confetti all right and it's setting the global properties.

Like that I'll say okay why not and then we'll come over here and we'll save it. We're going to get an error here because well we don't have confetti installed yet or canvas confetti I should say. I'll have to add that package and I'll do that in just a second. There we go. 

So now I'm going to do npm runev. Yeah look at that. I'll put in my email address robcon and microsoft.com and down here doesn't really matter it's not logging in anywhere. Boom that gets me every time. This is what you can do with co-pilot edits in a very short amount of time. 

Co-pilot now has intent detection where it will attach context to a chat if you don't specify. So normally if you had a question about your workspace you would want to add at workspace and then it would look at your code base and attach it as context to the chat. But if you don't do that, co-pilot would do it for you. 

Because I generated this project using the create script from npm I have a lot of boilerplate in here which is a lot of example code and so on. Rather than going through bit by bit and trying to figure out what's a boiler plate PL, let's ask co-pilot see if it can help out. 

And what co-pilot's going to do is it's going to think about its answer and as you could see it attached the workspace for us. We didn't have to do it and it used 24 references. It used all the files and as you can see yes we do have some left over with the hello world. 

Viw when you're using copilot do you ever wonder what model is being used on the back end? Well nowadays it's GPT 40. But did you know you could also use 40 mini or the O preview and O mini? Now you might want to use one of these, but up until now it hasn't been possible with co-pilot. But it's a key there. Up until now we can click down here GPT 4. You can see we now have access to o1 mini preview and 01 preview, so you can choose your model based on what you need.

Okay this extension here, this one, this one might be my favorite. This is the vision for co-pilot preview and it will take a look at an image and do its best to work with it. So the easiest way to see how this works is just to open up chat, as you can see. And to get an image into chat, there's two ways to do it. One, you can just pull it in, as you can see, and it says attach image as context. Boom, done deal. The second thing we could do is I could copy this image, which I'll do. It's sitting on my desktop. I can copy that image and you can see image from clipboard and it'll paste it in chat for me.

Okay so I'm just going to drag mine in because why not? Okay there's a lot of things now that I can do with this screenshot and as you can see it is a screenshot of github's homepage. CU I like it. I love this purple background and I might want to say hey Vision how can I structure? There we go, that seems like a pretty good prompt. Now when you hit enter on your prompt, uh vision is going to look for an API key for open AI or whatever provider you have. You can read the docs for more information. I have already set up my open AI key so I'm just going to hit enter. 

So as you can see vision is talking opening eye and it is, it's passed along the image and said hey well, uh what does this image look like? And then opening eyes coming back and it's saying it's describing the image and so now we now have HTML and.

CSS based on an image which I think is pretty darn funny. Now I'm not going to put this together because I want to show you something that's a little bit more useful. You come over here to our files and inside public you can see we have a little image here that was created by my old boss Ashley McNamer. This is a bit he is our mascot here at Microsoft's uh Cloud advocacy. 

So what I could do with this is I could drag this into the chat and I can say hey Vision create alt text for this image. That's right it's a cartoon raccoon wearing sunglasses black outfit nice illustration Ashley Mauma. And for fun we'll just keep on zooming in. If you work with data a lot particularly CSVs you're going to love this extension data analysis for co-pilot. 

To show you how it works while I've installed it but you open up a CSV file and you'll notice right up here you've got co-pilot. Hello co-pilot we're going to open this up it's automatically going to attach the CSV and analyze it for us giving us some basic information telling us how many total entries we have and describing them to us which is pretty neat. 

But now what we can do is we can chat with our data. So here you can see we have the at data participant again this is the data analysis extension from Microsoft. I can ask a question like how many artists here on the same playlist and so we can ask intelligent questions and the CSV will be part of the context of that question. 

There we go we can see the number of unique artists per playlist. This is great 16 artists on '90s music and there's one one one hm I got to organize this better music 51 that's a playlist. All right whatever we can even do display a visualization of this and there we go we have a chart straight off our CSV. 

I know that I keep saying that this extension is my favorite extension but this one right here this one truly is one of my. 

Favorite extensions. It's so good. It's been around well. And if you have a project that's hosted on GitHub, you probably have this extension already installed. If you don't know what it does, I'll go over here and click on it. You can actually handle pull requests, see diffs, add comments, do code reviews, and so on. All of this is pretty neat. 

However, the thing that has been added recently, which is great, uh, they've added the ability to integrate co-pilot with your issues in your PRs. Let me show you what I mean. I am just going to copy this right here. So I'm going to open up the command library and go to work and settings. We're going to open up workspace settings. Good. And then I am going to pop those settings in right here. You go, make sure we have a comma. 

And notice we now have notifications. This is interesting. So what I'm going to do here is I am going to, just to be safe since I added this, I'm going to reload the window since I tweaked the settings. And there we go, we have reloaded our issues, reloaded pull requests, and now we also have notifications down below. This is so fun. These notifications, uh, come from across GitHub. So these are the ones you haven't seen yet. 

But what we also have is this new little button right here, summarize with co-pilot. And of course, you can go look, add it on GitHub, but I'm not working with notifications today. I am working with issues, and I've got a few for this milestone I'm calling November push. Now this project right here, this is my node Postgres starter kit that I've been running for a while. It's just a little open source project that I like to play with. 

Uh, what I'm going to do here is I'm going to go and I'm going to take a look at some of these issues. Uh, hardcoded reply to email, who did that? I guess it's me. Um, if I don't know what this issue is about or maybe the description is a little bit cryptic, I

Can summarize it with co-pilot and as you can see it's fetching item 31. It's fetching issue 31. This is great hardcoded reply to email not good. All right so email address is hardcoded we don't like that at all. And uh this is just basically summarizing the issue for us. 

What I can do here is I can now go over here and click fix with co-pilot and this is so much fun. It is going to go and fetch this issue and see what we could do to fix it. There we go this just makes me laugh every time I see it. So it is using the EnV file because that was a suggestion on the issue itself. Very good and then it's telling me here just update your send email using this right here. It's even adding the assertions make sure that we have a default send from a default reply to and here you can see we are adding our defaults in from. Thanks that's an awesome fix. 

One last thing I wanted to show you which I think is nuts is if I come in here I have a new chat participant called GitHub PR and I can ask a questions like how many issues how many issues do I have open for the November push Milestone. There we are we have four open issues for the November push Milestone and it even tells you which ones they are. Oh this is just too much fun. There were so many fun announcements from GitHub universe and if you can't tell I'm having too much fun here playing around with these extensions and all the enhancements from co-pilot. 

I hope you have a good time too. Thank you so much for sharing AI Agent Store with friends and as always happy coding.

Note, that there may be slight differences in text and video. Watch video for the original content.

GitHub Copilot Video