Burke Holland 6:11 All right, we survived the the intro. Hey everybody. Thank you so much Brian for having me today. And my name is Burke Holland. I work at Microsoft with the Visual Studio Code Team, and today we’re going to take a look at GitHub copilot, which you probably heard of, and we’re going to just look at some of the things that it’s really, really good at, and some of the things that you probably don’t know about it only because no one’s ever showed you. So hopefully I can do that today. So thanks for being with me.

All right, so let’s see how many, how many people feel like this about copilot.

Let’s just, I just right. Let’s just get it out there, right? I mean, it’s, this is a, this is a, what’s the word? It’s a valid feeling about some of the terminology, and a lot of that’s because we’ve just kind of been inundated with copilot as a term over the past, what, 12 months, you know? So I this is just a snapshot of some articles that I grabbed some time back. But there’s Windows copilot, copilot and edge Microsoft circle to co pilot, GitHub copilot in the enterprise Microsoft swift key, which is a keyboard that’s copilot and Excel has copilot. Copilot is everywhere, right? It’s sort of a generic term describing Microsoft’s implementation of AI in tools. But one of the things that all of these copilots have in common, sort of like the common thread here, is that they’re all descendants of GitHub copilot, which is the most popular developer tool, a developer AI tool in history, right? So all of the copilots that you hear about from Microsoft, the name comes from Git. It is the original copilot, GitHub copilot. And we say this coming from the Stack Overflow developer survey. You can see here just some stats on adopted AI tools. And the other interesting thing about this is that this is a very widely adopted tool in the enterprise, which is kind of unique. Enterprises aren’t necessarily known for being early adopters of technology, but they are early adopters of AI, and so enterprise devs, a lot of them, have access to GitHub copilot. It could be you, even if you’re not using it, and that’s a phenomenal thing, because you have a leg up on everyone else right now, just by virtue of that. So GitHub copilot is, you know, I would, of course, I work on it, so I’m biased, but I would propose that it is the most consequential thing to happen to developers, really, you know, since the the creation of the text editor, and there are stats that that back this up, right? And so some of our internal testing and measuring shows 55% faster coding with GitHub copilot, which on its own. I mean, that’s, that’s a huge number, right? 100% you’d be coding twice as fast. And I think numbers like that are possible, but the one that’s more important is the 75% of developers are more fulfilled. This is the number that actually matters. Productivity taken at the expense of your happiness is not productivity, right? And one of the reasons why people feel happier using GitHub copilot is because they are more productive. You send spend less time cutting yourself on rough edges and running into walls, and that enables you to do things that you otherwise can’t do because you don’t remember the syntax or because you noted I know before, because you just don’t have time to. In Time automating that thing, you can now let copilot do this for you. So it’s remarkable the being more fulfilled as a developer. So when we talk about GitHub, copilot, before I jump into what it does, let’s talk about exactly what it is. So for our purposes here today, it is an extension for Visual Studio code. Now there are two extensions. If you go into Visual Studio Code, there’s a GitHub copilot extension, as you see here, and then there’s a GitHub copilot chat extension. They have the same icon, and if you install one, you get the other. And if you remove one, you remove the other, right? So it’s there’s two extensions. You only need to install one, you get them both. And we’ll talk about why there’s two when we get into the demos. Now, first of all, let’s talk about how copilot actually works and what it is. So first of all, it’s important to note that GitHub copilot is not an AI, okay? It is a set of tools and services that allow you to use the AI from inside of your code, whether that’s within Visual Studio code or Visual Studio or some other editor, or even github.com it is the AI itself. It’s using these open AI models that are running in the cloud. So this is kind of how this works, like in a typical interaction with copilot, you might say something like, create a web server in TypeScript, whether you do that in your code or you do it in the chat. And then what happens is, copilot then takes this and begins to build the prompt right and says, You, you know, you’re a friendly coding assistant. And it’s building out this prompt in the background. And then it passes your message to the model. And so it’s, it’s doing a lot of prompt engineering for you in the background to get you the right result from the model. It passing context from your code, things like that, things that it knows that the model is going to need to give you the best answer. And then the model responds right and says, Okay, here’s the response. And if you’ve used chat GBT before, you know that you might ask for even a simple query like this one create a web server in TypeScript, the model is going to respond, and it might actually say, step one is to import Express. Step two is to do this. Step three is to write it’s very verbose, and really you just want the code. And so copilot then parses out what it deems to be the most relevant material for what you’re trying to do, right? Are you in chat? Do you need a full response, or are you in the editor? You just want the code. And if we’re in the editor and we just want the code, it pulls that out and then puts it in the editor, so it’s parsing on the way back in to make the response the most useful. So it’s your interface to these open AI models. It’s also a good time to point out that if you’re using copilot chat, you are using GPT four. Oh, we’ve actually rolled that out to all users now, which is great. It’s 100% faster, what we call a time to first byte, even though it was fast before, it’s 100% faster now, and up to 50% faster streaming as well, which is remarkable. So as these these new models roll out, we implement them, and you get to enjoy them. Okay, um, the last thing is, before we jump into this, is the word for today is stochastic. If you’ve not heard this word before, all it means is unpredictable. Okay, so, like the weather is stochastic, we can sort of say, well, tomorrow it’s gonna rain. 50% chance it might rain. It might not rain at all, right? It might rain today, when there’s a 0% chance it’s unpredictable. And I point this out because I’m gonna jump into these demos where I do a lot of stuff, and copilot is gonna make a fool out of me, because it’s unpredictable. Okay, I can’t there’s never been a better time to try to demo technology, because there’s you can’t reproduce it, okay? You can’t get co pilot to behave. So just bear with me as things go awry. That will be your experience as well, and you just sort of learn to work with it. It’s part of the experience, right? It’s and sometimes you’ll see disclaimers like, responses may be incorrect, right? And this is because it will be incorrect from time to time, and it’s important to know, okay, all right, the rest of it’s just demos. Y’all, what’s up? Nick Good to see you here. All right, let’s see here. Let’s jump over to Visual Studio code, and let’s just sort of begin at the beginning, right? We’re going to start simply and build up here. So as we said, what did we say? We said, GitHub copilot is an extension. And we said, there’s two of them, right? There’s the copilot and copilot chat, right? Same icon, and if you get one, get the other. And for some reason, it wants to me to reload my window, so I’ll do that. And then once you have copilot installed, you’ll need to sign in with your GitHub account. And if you have access to copilot through your employer, then it will just be on for you. Otherwise, you’ll need to start a subscription with GitHub copilot. It is not free, although I. Think there’s like a 30 day trial period for that, but it should walk you through that from the editor, and then once that you have it installed and it’s on, you kind of know that it’s on because of this little icon down here, right? Um, you’ll also see the chat. I’ve actually got the chat moved over to my secondary sidebar, but you’ll see the chat here, right? So it looks like this. It’s kind of like chat icon. And then you know, you know here that you have copilot installed. So that’s how you know that copilot is there and in Visual Studio code. Just generally speaking, you can always just look in your command palette to see if, if something is installed, right? If you’re not sure, just like, look up here and all your commands are here. Okay? So once copilot is installed, it’s like, Okay, now what? What do I do now? So now, now you code. So let’s start at the beginning. So copilot, in its first incarnation, which was years ago, actually, before it became a big deal, is that there was this thing called GitHub copilot, the original incarnation with something called Ghost text. And so the way that works is that you just kind of start coding, and you’re like, so in this case, like, let’s reverse a string, and then you’ll see that it completes my my request there, right? So that’s, let’s fix the casing here. Do that again, because I went fast. You can see it, it’s watching what I type, and then it’s trying to predict what I’m going to do next. And it’s actually really, really good at this. You may have heard before that these large language models are just super powerful. Auto completes, which we can argue about whether or not that’s an accurate description, but it is a description, right? That is what’s happening. So it happens to be very, very good at this.

B, so that’s one way to interface with copilot, and it might actually be able to predict what I want to do next. Like, if I wanted to test this, maybe I want to do a console, and then, yeah, see it can predict what I probably want to do next. You’ll probably use this more than anything, because you’re coding, and that’s where you want to stay, in the flow. And ghost text is unique because it can be in the flow with you. It’s literally in your head as you’re typing. It will complete your thoughts, and you will have moments where you say, that is remarkable. GitHub copilot is most impressive now when it’s writing the code that you don’t know, but when you’re right, when it’s writing the code that you know that you’re gonna need, and you don’t even have to ask, okay. So the other way that you can interface with copilot is that you can use comments. So let’s say we did write a function. This function reverses a string, and it can probably complete that, and then you’ll notice that it doesn’t do anything. And you may get this behavior from time to time. Oh, there it goes. Okay. Also, it may do this sometimes, or just adds another comment like this. If this happens, you can just start typing function, and then you’ll get you’ll get the code here. But this, the other way, is to write comments, and then it will generate code from your comments here. Now, let’s say we were doing something a little more complex. We were saying something like a function that finds an object with a specific key in an array of objects, yeah, and then returns the value of that key. So this time, so here we’re getting a function. And you can see here that if I hover over there’s actually three suggestions here, and I can look at them and see which one I want. Oftentimes, in programming, there’s multiple ways to do something, and so copilot may give you multiple suggestions, and you need to sort of find the one that’s right for you. It’s giving you the one that I do like this one the best here. The other thing is that if you decide that you only need part of the answer, you can just do a Control or Command, if you’re on a Mac and then right arrow, and you can just sort of select as much as you want or don’t want right and then it’ll go away, and then it’ll come back here and try to do something. Okay, so those are sort of like the the basics of GitHub copilot. Let’s take this a step further. You can actually do quite a lot with this, let’s open our sidebar here for a second. I’m going to add a new file here. Let’s call this string, and what we want to do is one of the tricks that you can use in GitHub copilot, is that you can use a comment at the top of a file to define the file, or rather, give the model the context that it needs to help you write the code in the file. So in this case, let’s say we wanted to extend. So let’s do this. This file extends the string prototype. I’m going to stop and see to add a new method to add let’s control over to add new methods. Is to add the following new methods, all right, and then it’s probably going to try to guess what I want. We don’t want to do capitalize. Let’s do reverse, because we already did that, right? So we’ll reverse. Let’s do strip HTML. We’re going to strip out all HTML characters. Let’s use slugify, and that’s good for now. So we’ll end this, and then I’m going to just sort of enter down, and you can see that it’s trying to reverse the string. That’s the first thing it wants to do, because that’s what we’ve said to do. And if we take this, it does this right here. Now this actually works, but we’re in TypeScript, and you can see that we have an error here, and this is sort of the first place. I’ll point out that copilot GitHub. Copilot is sort of the value you get out of it is really related to your knowledge of a specific language or framework. The more you know about it, the more help copilot is going to be. It seems like counterintuitive, but the reason is because, if you don’t know a lot about TypeScript, you’re here and it’s suggested this, and you you’re you’re already at an error, and you don’t know how to resolve this. But if you, if you sort of know, then you know here that you actually need to start off with an interface defining the interface, and then it will automatically add the methods that you need here, right? And then it will start writing the code. There’s reverse, right? There’s strict HTML characters. There’s the slug of Fi Sure, I don’t know. So it’s important that you know what you’re doing, so that you can nudge copilot in the right direction. It is, it is the copilot. It is. It is not the pilot, for lack of a better analogy, and so you do need to know what you’re doing. So it’s good to learn, learn the fundamentals, be an expert in your field, and you’ll get more value out of GitHub. Copilot. Okay, so once we have this, let’s go back over to our app file and we want to import. So let’s import this. This file here, actually we need to export from our let’s see here, do we need to export? Sure? Why not? So let’s pull in the let’s import this string.ts, file here, and then you can see it’s trying to write code for me. So it’s gonna reverse it. It’s gonna strip HTML characters and then strip HTML tags. You can see like it doesn’t really know what to do here, and this is because it doesn’t actually have the file open. So it’s important to note in GitHub copilot, that copilot doesn’t know about all the files in your project. It only knows about your current file and really what it can seem that what we call the viewable editor space, which is any code that’s in this area, if it’s out of view, it may not be included in the prompt, and it knows something about the other tabs that you have open depending on how many you have. So in this case, if we have the string tab open here, then we might, you know, we might be able to let me, let’s see import, you know, let’s see here. And then see now it can reverse, it can strip, and it knows about slugify as well here, and we didn’t export correctly or import correctly, but you can see that it knows about the different methods that we have, because this file is actually open here. Okay, it does exist on type string because we added it. So that’s the basics of how to work with GitHub copilot in Ghost text. The other place that you can work with copilot is like, let’s go back to our file is with chat. So there’s a couple different kinds of chat. One of them is inline chat. So we could say something like TypeScript an Express, express web server, and then it will go ahead and generate that for us. So you can use Ghost text to generate, you can use inline chat to generate. The inline chat is, in my experience, I mostly use Ghost text. I use inline chat when I want to iterate over existing text, right? So if we have this right, and I’m like, Oh man, you know what I really want to do? It’s like, I want to return index that HTML from public, and then it’s probably smart enough to figure this out, yes, right? It does the static uses dir name, or maybe I want to, you know, run on port 3030, it should be smart enough to update that it does, right? Or, you know, if node env is development. Then 3030, else, 3000 right? And it’s smart enough to do all this, to pull all this stuff in and try to read from the process, to look at the environment variable. And so it’s good. Inline chats really good for iteration. It’s also good for generating code. Now inline chat is available in the editor, but it’s also available in the terminal. So if we let’s get back to our main directory here. So if I trigger this in the terminal, it’s the the triggering is control I, controller command, I here, right? Controller command, I here, and then we can ask how to do something in the terminal. Now, what’s great about this is that we can ask how to do literally anything at all. So for instance, we see we wanted to know do is node EMV in my path. We might not remember that that’s Echo to Echo at the path here. And so you can see here, it’s going to give us command, so it’s looking for node env, and then it’s going to echo whether or not node env is not in path, right? So now I want to add node env to my path, set to development, set to development,

and then let’s see here. Uh, right so there’s the setting right there. So we can go ahead and run that. And now, if I check now node env, still, it’s still echoing. I’m not in path. But you can see here that you can pretty much do anything on your terminal when you are using copilot chat here, triggered with control I and I mean, really, you could do really anything at all, which is pretty remarkable. So you are now an expert in the terminal with GitHub copilot, all right. And then the last place that we have it is in the sidebar. And this is kind of like when you think of AI, you probably think mostly about chat, and chat is here, and you can do a lot with it. However, you’re going to spend a lot of time in your code, unless I’m chatting. Chatting is really good for brainstorming things, asking questions, thinking about things. The other paradigms, ghost, text and inline chat are really good for writing code and iterating on existing code in chat. You know, you can ask pretty much anything like, I don’t know, you know, you could do, generate a TypeScript, an express server with type script, use swagger, maybe for API documentation, right? And then it’ll, it’ll do that. Notice you get a lot of text with it. If you, if you don’t want the text, there’s a trick that you can use here where you can do the command here, and what I do is just say, well, that is a lot of right? So I

usually use the word simple, so that it will be simple, right? And then I say, just code. Don’t give me any text. Just give me code, right? And then that’s, that’s more along the lines of what I might have wanted, something quite simple, like that. So those are tricks you can use simple, right? And then just, if you don’t want a description from the AI, put just code along with your prompt, which is pretty effective, remarkably effective. Okay, so that’s chat. That’s great. Let’s look at some of the things that copilot is really, really good at. So the first one is, it’s really, really good at writing cron jobs. So for instance, like a cron job that runs every Tuesday at 9am right? This is the kind of thing where, as developers, right? It’s like, boom, there it is. Now, is this right? I don’t actually know. We always want to trust but verify. So usually there’s an extension for this. Let’s see what we’ve got, really let’s see here, easily scheduled into a readable format. That sounds good. Let’s see if this works. Cronex. Explains, if we mouse over it at nine o’clock only on Tuesday, right? So you want to use the tools that your editor has to verify that the answer that you got was correct. But you can see here, it like has no problem generating cron jobs, right? So if you’ve been shying away from using cron jobs because you don’t like writing them, so probably problem, copilot does not mind writing cron shops. The other thing that it doesn’t care about and will happily do for you is write regex, right? This is the one you probably have seen this demo. This is the one that I think we see all the time. But in this case, you know, let’s say. We have an input that’s going to take in a URL, but we want to reuse inline chat here. We’re going to say, validate that the URL only allows characters, numbers and dashes, right, and then it has no problem doing that right. It will just spit that right out. Now again, how do we know this is actually correct? We don’t we need to test it. So let’s look for there’s like a regex previewer extension right here, and so now we can see test regex, pull the text out of here. So what do we say? It should be something like, this is a valid URL, but if we add a space, it’s not right, because we didn’t say that was okay, this should be that’s not right. So now we need to go back and correct this and say, you know, right here, say, allow the forward slash, right? Let’s see if this works. Now, testing our regex now it works right? So we want to test, make sure spit that still doesn’t work, that’s good. And so, yeah, you can see it’s suggesting for us some things we could do. So we want to test, generate, test, test, test, test, okay, if you don’t know, you can immediately look at the code and know that it’s right. Test, what copilot is giving you, but it’s pretty good at this. All right, what else is copilot really good at it’s really good at at CSS, but in ways that you’ll find pretty useful, I think. So let’s let me see here. Let’s move into that folder. So in this example, we have an application. Let’s pull it up here, where I’m going to do a preview here, where we have, I built a little chat interface, and it doesn’t look very good. Part of that is because the code is in SAS and not CSS. So the first thing, actually, it is CSS just has the wrong has the wrong extensions, all right, but it’s still not quite right, because, as you can see, like the chat box is not centered and well, so let’s clean this up a little bit. It’s the first thing I want to do. I’m just going to find going to find the message. The new message here is this, the thing we want to style. So what’s curious here is that the margin is set to auto, but it is not, it’s not auto, right? This, it’s not respecting margins, and I don’t know why. So let’s start off here. And a lot of times copilot will just try to style things for you. It’s like, I don’t know, you need some padding. I don’t know. How about this border? What if we make it rounded? Like, all this looks pretty good to me with 100% I don’t want that. I do want, like, we could do, like, a subtle drop shadow, because I don’t remember what the syntax for this is. It’s a box shadow, very nice. And then, like, resize. I can just start typing this, and it probably knows, yeah, I don’t want people to resize it. And then the last thing we want to fix here is, like, centering it. And I don’t know why this is working, so I’m just going to ask it. I’m just going to say, center the text area. Okay, I’m providing a little extra information here, letting it know that it’s a text area. And you can see that it it says you need to set display block, because text area is an inline element, and therefore it’s not going to respect margins in the parent element. This is the kind of thing where I lose a lot of time on stuff like this. I spend a lot of time fighting styles and copilots, so good at this stuff, because it knows about, you know, all of your CSS here in this file, which is, which is great, and does this work? No, it doesn’t work. There’s no code backing it up. But you get the idea. All right. So those are some of the things it’s good at. What else is it good at? What else can copilot do? It’s really good at explaining things, so let’s take a look here. Here’s some code. And this code. Anybody know what this code, this code is? I’m just gonna like, let the chat. This is, yeah, Robbie, this is that not so popular language, or is it? What language is this? Someone should know? I know someone out there knows, and in the meantime, I’ll install an extension for this, and you’ll know what it is that. It’s Ryan Miguel. You got it, it’s cobalt. So this is cobalt. If you’ve never seen cobalt before, this is your first cobalt. You didn’t know you’re gonna see cobalt today, right? It’s a bonus. Yeah. So today I got it to Robbie, cobalt, cobalt, cobal. Anybody know what it’s doing? You want to guess what it’s doing? What does this do? Curious, if anybody can get this just by looking at it. And then we’ll, we’ll ask co pilot what this is doing.

What does this cope? Does this has a COPA? Copawl, copilot and cobalt combination. What does this cobalt code do? Defining some strings, looking at the length periods in here. I know nothing about cobal. All right, so the point is, we can explain we can have copilot explain this code, and there’s a couple different ways to do that. Usually, this is the kind of thing you want to use chat for. And again, I told you, I put chat in my secondary sidebar, which you can open. You can do it by toggle secondary sidebar. If you didn’t know there was one in VS code. There is, I have that map to Alt b like this. You can also just click this button up here, easy way to get to it. And then, in VS code, you can just take any icon and just drag it anywhere you want. In this case, maybe put it here. There we go. So now our chat is in the secondary sidebar, so I can collapse this and just kind of focus on chat. And then here, kind of a weird state. Let’s ask Copilot to explain this code for us, and we’ll start a new chat. And we do that. You can do that with this plus arrow, or you can just do Control L, which also starts a new chat, which, like, is the same thing in your in your terminal, clears the terminal. And so let’s just ask, right? So we’re just going to say, explain, and I’m going to use a slash command for that. And when I use a slash command, slash commands are like pre configured prompts that we’ve already optimized for you with, you know, weeks and weeks and months and months of blood, sweat and tears, of messing with poking the AI and trying to get it to give a valid results. The other thing is the workspace participant, which we’ll talk about here in a second, it’s asking for the range to explain. Instead of doing that, what I’m going to do is, Oh, it did it anyway. The provided cobalt submit is a simple program that reads a string from a user and then reverses it. So in case you’re it was a great Robbie, it was a great example truncate the string. Those were all great guesses. It reverses a string. So just in case you’re wondering how far we’ve come in terms of language ergonomics, this is what it used to be like. I know somebody. There’s probably some cobalt person out there that’s like, No man, you just use this method that’s built in, but we don’t know what that is. So it’s very good at explaining legacy code, right? Like you might not have anyone around that remember, that knows that about the FoxPro code that was written 10 years prior to when you got there, but copilot does it. It knows many, many languages, which is great. Okay, what else is it really good at? We talked about how it’s really good in the terminal. So I want to give you a bet, sort of a better example of how you can use this. Let me come here. We got here. Let’s talk about FFmpeg for a second. I’m going to open up and open up this project. So I ran into a situation recently where I was had some videos and I’m going to delete this file. And what I wanted to do was, from these videos, I wanted to create covers for each one of these videos that I could show them in a web page, right? So when you embed a video in a web page, you need to define a cover image. And YouTube does this, like when you upload a video, it gives you a thumbnail. How does it do that? It’s doing it by pulling out a screenshot. And if you want to automate that, you need to use a library like FFmpeg. And if you don’t know FFmpeg, join the club. I don’t either, but what I do know is that FFmpeg is a library that you can use to do this. So guess who does know about FFmpeg, GitHub, copilot. So let’s just tell it what we want to do, right? So like, just tell it, like, create a batch file, bash script, because we’re in batch, create a batch script that will create cover images for every video in the videos directory and put it in a covers directory, all right, so let’s see what we get here. So it’s going to give us a bunch of description about what it’s doing, and then it comments its code pretty good, right? So. So I like this. So let’s go ahead and put this into a new file here, and we’ll just save this as let’s see, create covers. Create covers. H, does it work? I don’t know. Let’s try it out here. So let’s open up our terminal here, and let’s just call it

command not found. Oh, is FFmpeg not install? It’s not installed. So you can imagine, I don’t let’s see sudo at install FFmpeg. I forgot I’m inside of an Ubuntu installation here. Y’all bear with me. Yes, please. Is

it new? But is Ubuntu or Ubuntu? Let’s see here, I answer some question here. I asked the cobalt thing because I’m interested in mainframe modernization. Yeah, it’s, actually, it’s so Robbie. It’s not going to be as good at cobalt as it is at Python. Like, it’s really good Python because it was trained on Python code. It’s built with Python, as far as I know the model is, but it actually knows a remarkable amount about about COBOL and really any language, because their languages are structured, and it can tell from the context, kind of scary good at that. So let’s try, let’s try this again. Alright, so we got a lot of output. Did we get covers? We did look we got covers for every single one of these videos. And what’s remarkable about this is that, because this is, like, a one off thing, this is so cool, right? Like, we don’t know FF impact. We just sort of know that’s the tool we need. We don’t know about all these switches. Like, I don’t know what this is, I don’t know what this is. I don’t know what’s going on here. Now we could ask Copilot to explain this, right? So we could do the explain, and it should tell us it’s going to break it down using FFmpeg command starts using video, it’s going to pull it at one second. So now I know that I can, I can move this if I wanted, at the two second or three second mark in the videos. I could just change that value right there, right? So this is where copilot really shines. Is that all this stuff that you were like, I know FFM can do this. I know there’s probably a command line switch to do it. I really don’t want to spend line, spend time traipsing through forums, just like copilot do it. There’s no problem with this. All right, let’s talk about let’s move on here to some more complex topics. Talk about participants. So participants in copilot are GitHub. Copilot are an important concept. Let me move over to this other directory here, and let’s look at what do we have. So let’s look at this boomerang project. So here’s a project that I found on GitHub called Boomerang. And if you’re the author of this project, I apologize for this demo. It’s not meant to throw shade at the project, but just to show how copilot participants work. And this is a great example. So in the read me of this file, there was a one line description of what this did, but I took it out so copilot doesn’t know anything about this project based on the readme. And we have, we have a screenshot here, and the rest of this code is C and again, like, I don’t know C code, and there’s quite a bit of it here. There’s like, server addresses and sockets. It’s like, I don’t really know what this is doing. So what we’re going to do is we’re going to go into copilot, and we now need Copilot to know about the whole project and but we’ve already talked about how it doesn’t right. What does it know about? It knows about the code in the viewable editor space and then any other files we have open. So what I want to do here is ask copilot and use the workspace participant. So I’m asking copilot a question about this particular project or workspace, and I’m just going to say, what does this project do? And the way that this works is that if this is a public GitHub repo, which it is, then GitHub will create an index for this code. If it is not right, if it’s on your machine, it will create an index on your machine. And then now you can ask questions about your whole project, right? So in this case, it says, based on the provided information, this project appears to be the purpose of this tool is to facilitate file transfers. The reading includes a screenshot. It says, For more detailed information, you can refer to the readme so some sort of file transfer tool. Let’s ask so this vector workspace and say, No, not that one workspace generate a readme. Do. Award this project that explains what it does and how to run it locally. And so we’re sort of backing into the read me from the project, and it has given it’s even given us a license. Is it MIT license? I don’t see a license file in here to y’all, it just made that up. I don’t even know if that’s true. Okay, let’s, let’s insert this into a new file. Check out our new read me here. Is it good? Say, read me an MD, because we already have a readme. Yeah. So now we have a readme for this project, right command line tool for transferring files between systems, sending or receiving files over a network connection. Here’s how to install it, clone the repository, build it using make here’s the usage. It even generated the usage for us. This is so cool again. Like, is this all right? I highly doubt it right. What if we’re, like, 90% of the way there? Maybe that’s a fair bet. 10% of this, we’re going to need to tweak Right? Like, I’m going to guess maybe one of these ain’t right, but we can. We got the skeleton, we got most of it, and now we’re just doing little tweaks and boom, we have a read, which is great. All right, let’s look at some more participant stuff here. I have a site here, so let’s, let’s see there’s one this one here. So let’s go in here. Just make sure change. I’m going to change my node version right fast. Back to this is an old project. And then let’s just like, let’s see if we can run this. I don’t even know that I can NPM. What did I node run? Try this. That’s better.

So we’re building and we’re running, and you can’t see it, so I’ll move it over here, but this is what it looks like. Let me didn’t actually open it. That would have been nice to open it in Visual Studio code. And then this is what so this is the application. What I want to do is add another button here, like, let’s just say that’s the that’s the scenario. How would I do that? I don’t, I don’t know where the buttons are in this project. So again, this is where we might want to use a participant. So I’m going to look for start a new chat. Because remember, when you have a chat, all the previous contexts also get sent. And so when you’re changing subjects, you want to start a new chat. I’m going to go to the workspace and just ask, where is login handled in this application. And I’m going to let GitHub copilot go through and try to figure and see if it can figure this out here. Okay,

so it’s handled in the modal login component. That sounds good. I’m going to be more specific and just say I want to add a new login button for Facebook. Where should I do that? I know I didn’t mention the workspace here, but you can always pass your query to the workspace with Control Enter, which just says, Send to workspace. We want to add that context on. So it’s going to tell us here modify the source components, modal, login, phi, and then it’s going to tell me exactly where that is. So let’s click on this here, and that takes us to this template. And yep, there’s our Twitter button right there. So what we want to do here is add a new button, and so I’m just going to put an enter here, and you copilot may so it doesn’t know, right? So let’s just ask with inline chat add a login button for Facebook, and it can probably generate this code for us. Yeah, it can, right, because it’s the exact same style, but some of the stuff is missing, right? Like this Facebook URL doesn’t exist. This ID doesn’t exist for the styles. But when I talked earlier about reading your mind. This is kind of what I mean. So if we know that we need a Facebook URL, then we can just kind of do get and then wait and see if copilot can help us out here, it doesn’t get Facebook. There it goes, right now it kind of kicks in, right? And that’s exactly what we want. And then down here the same thing, right? We need a. Facebook button. So let’s do like that. And then what’s amazing here to me is that it knows what the color of the button should be. It knows the the brand color for Facebook blue. And not that, not that you need this all the time. But what I’m trying to show you is that it knows a lot of things, and just kind of wait for Copilot to finish your thoughts on a lot of stuff. It could just do for you, instead of you going out with like a color picker and trying to figure out what this color is, I don’t know. Did this work? Do we have a login button for Facebook? We do look at that. Demo. Success. All right, we got 10 minutes. What? Roughly 10 minutes left. What else can we make copilot do here? Let’s see. The other thing that participants can do. This is actually a pretty good one. Let’s see here. As I get rid of this, get rid of my sidebar, let’s do let’s move into this. I have a React app here, and this react app is just what you get with create react app. That’s all it is. If I look at the source for this thing. Let’s go into the app file here. And if you’ve used Visual Studio code before then you’re probably familiar with something called emit, which is how you write HTML in Visual Studio code, or it’s how you can so I’m going to delete this line. The way that this should work, you can see it’s not working. The way that this should work is that, if you’re in HTML here, and you want to write a div, right? You can just type div and hit tab, or, you know, like div, main app, right? And then you get a class, and you can compose HTML really fast. This way, a div and a div and a div and a UL, unordered list with three items in it, you get all that. The problem is, none of this is working in my in my JavaScript file, and this is an editor problem. It’s a VS code configuration problem. And let’s see if, because you can see I’m typing div and then tab and like, just nothing happens. So let’s see if copilot can help us with this. And so what I’m going to do is open chat, and I’m going to do I’m going to do this a different way. I haven’t showed you. There’s also control shift I which opens the chat, like in an, almost like a, I don’t know if people remember Alfred on on, that’s the paradigm I have in my head. Or, like the search bar on Mac, like this, like this ephemeral thing that you can just like summon and then dismiss. I really like this interface. And here we can just add VS code. And so VS code participant knows things about Visual Studio code and say, How do I make emit work in JS files? Because that’s the problem is that we’re not in an HTML file, we’re in a JavaScript file writing JSX. So let’s see if GitHub copilot can help us understand what to do here. So it says to enable image abbreviations you need to configure emit. Dot include languages and settings, and so it says, go to your settings file and add this right here. So let’s so this is actually kind of correct, but kind of not correct. So this is, this is interesting. It’s, this is the right setting. This is not the right value. But if we went to settings and we looked for emit include languages, so it pre fills it for us right here. So you can see here, it’s actually, it’s actually trying to tell us right here, which is nice. So copilot pointing us in the right direction, right hopefully we pick up on this. Let’s do JavaScript react here and now, if we go back to our if we hit div right now, we have image support and react. And so you, if you have an editor configuration question, like, you’re like, I know the editor probably does this, but I can’t figure out how you can use that VS code participant to try to do that. All right, Brian, can I just keep going like, how long are we gonna do this? We got so much we can do, man, we like. We can do custom participants. I can show you like prompts. Peace, yeah,

Brian Rinaldi 54:21 you got a lot going on here. I think we are. We are running up to time here. I mean, we can go over, you know,

Burke Holland 54:31 I need, like, another hour here.

Brian Rinaldi 54:35 Oh, whoa. Inception, yeah. Inception mode, um, yeah, go for a few more minutes.

Burke Holland 54:41 Okay, keep let’s keep going. Let’s keep doing it. So let’s look at like custom participants, because you can build these things yourself. You can write a VS code extension, and you can leverage like anything in GitHub copilot. So let me show you like how that works. I’m going to go to this. Vehicle dashboard project here, you can see that I’m like opening Visual Studio code from the terminal in Visual Studio Code, which is kind of like how I move between files, just so you know you can do that in this project here. Actually probably didn’t need to be in this project, but in any event, we have this like data file of electric vehicle data, and so let’s say that we wanted to create a like. Let me just go here, and let’s just ask, let’s like, let’s say we’re working with Django and we need a like, create a create a Django model for the and I’m going to use what’s called a variable, and I’m going to point specifically to the file, data, dot, CSV, right? And then it’s going to give us all of this. And you might remember what was our earlier tip, right? When we don’t want to see all this, what do we all this, what do we do? What do we do? See, just code. Just give us the code. Man, okay, so from Django, this looks all looks good. You can see it’s pulling in all the fields it gets probably, so, okay, this is fine. The problem with this is that it’s contrived, right? You don’t have a CSV file laying around. What do you have? You have a database. Okay, what do you do? Let’s say you have a Postgres database. There is a participant that Mr. Rob Connery wrote, and it allows you to chat with your database. It essentially passes the database the schema, so that you can, you can ask questions and use the AI against your database. So how does this work? Let me show you. It’s a custom participant, and once you install it, then you see it right it’s right here. So let’s go into and let’s just it wants to know first of all, like, what is the connection string. So I’m going to do Postgres. Postgres, hopefully I get this connection string correct. I think this is right. I think it’s 5432 and then there’s a Chinook database, which is like the sample one that we’ll look at here. So you can see it’s now set. And so now we should go to do show and look at the database, all right? So we can, so these are all the tables that are in the Chinook database. And again, how does this participant know this? It knows because this is a custom extension that Rob has built, and it’s connecting, taking that connection string, connecting to the database in the background, and then providing that information to the model. So now what we could do is we can say PG, and we can see, create a Django model for customers, right? So now we’re taking this and we’re saying, create a Django model from the database. So we have the database just give us the model file and like, let’s look at what it gives us here. So it gives us facts, first name, email, right? I just know from looking at this that this is all you know, this is all correct, but I would pull up my database and and verify. The point being, though, did I say just code? I didn’t say just code. I should get into habit. The point being, though that it can automate this kind of thing, right? Like, this is the kind of stuff that isn’t like super value add for you, you need a model. You don’t want to have to create this model. So you can generate it for yourself using a participant. And you can do you can build these. We have docs on this. You can see, I’ve got one for GitHub here, which is provided for us here at Microsoft. There’s some different ones. There’s one for the terminal, but, yeah, you can take GitHub copilot and get it to do anything by just writing your own extension. And it’s pretty, pretty easy to do. All you’re doing is composing messages on the back end to the model and then parsing the responses yourself. You can totally do that. I built one. You can definitely build one. Okay, a few more things here. Let’s see, where are we at? How many? Too many VS code. Windows open. There we go. Let’s do let’s get out of here. What are we doing? What are we doing? So let’s talk about prompts for a second. When we talk about the chat, there’s some prompt strategies that you can use. And actually, I’m gonna go back into this vehicle dashboard because, oh, I’m already in it. So this is a good one. It’s a good example. So in this case, in this project, what I have is a project structure that is not a project structure. I just kind of threw it together. And so it’s like a junk drawer, right? Like all these files are in here together, and at this point, like, I want to structure this, this project correctly. And so what I’m going to do is I’m going to take the workspace, I’m going to say, recommend a. A folder structure for this project, I wanted to tell me how I should structure, but I’m going to use something called a Q A strategy prompt here, where I’m just going to say, but ask me, like some clarifying questions first, to help you make a better recommendation, right? So basically, this is also called meta prompting. Sometimes, where you get the model to prompt you, you prompt the model to prompt you, is essentially what’s happening here, and these are just workflows that you can use with the model. So let’s see what actually happens. This is asking me questions. Okay, here it wants to know like Project scale and future growth. Do you anticipate this project will be growing significantly in terms of features and models? Yes, right. So we can just kind of do like, yes. Then it wants to know testing. Yes. I want to do testing configuration environment. Do you have a plan to have multiple environment configurations? Yes, right? These are all things that I might not have thought of as I’m structuring this project. I think of them later, but then it’s like, it’s too late, right? The structure might have me locked in. Do I well, have database and models? Will you be adding more models? Yes. Do you plan to expand the API significantly, and then, you know, I can give it more information here. I’m just gonna say, basically say yes to all this stuff, but you can provide as much information these answers as you want. You can see, I’m being pretty like, I’m structured in the way that I’m giving the response. But it’s after that. It’s pretty open, right? It’s pretty free form building deployment. Do you have any specific building deployment processes? No, I don’t think so, right? So let’s provide those answers, and then you can see it’s going to provide me a recommended folder structure here, even, and it’s going to lay it out visually, right? So here’s the source. It’s got things broken up into modules. It’s explaining why it did that up here, right? And then tests down here, and then config, models, controllers, routes, middleware. So this is a strategy you can use prompt strategy called Q and A Another one is, if we look at this database file here, you can see that I have a database connection, but I’m not really sure that this is being done the right way. And so what I can do in in here is use something called pros and cons, which is exactly how it sounds. We talked about how there’s many ways to do something in programming, so I can say, recommend, let’s see. How can I implement the database connection in my Express app so that I can use it anywhere. I need to query provide several recommendations with the pros and cons for each so now it’s going to look at this. It’s going to say, here’s some things you can do, right? You’re currently using a singleton. Here are the pros, here are the cons. And basically, you’re just looking at this and saying dependency injection like that. Sounds good, and it’s going to refactor that. This is what it would look like to use it like that. Here are the cons. Little more complex. Middleware must be applied to all routes. You can use a service locator. I don’t even know what that is. You can use using environment variables directly in routes, but you can sort of look at these trade offs and decide which one is best for you, right? Not suitable for production environments, right? So we probably want to use this one and then, and then decide which one’s best for you. I want to show you one more prompt here, and I’m going to, I’m actually going to get Copilot to do something a little bit goofy, or maybe not how you would think to use it. And to do that, I’m going to open the chat in the editor so you can, you can put anything in VS code. Can be an editor, like, literally, I think you can even like, make the terminal and editor, like, open terminal in editor, create a new terminal, terminal editor, maybe something like that, like anything can be an editor in VS code, yeah, in case you know that. So you put your terminal up there. But in the chat here, what I’m going to do is I’m going to tell the I’m gonna start giving the AI very specific instructions. So first I’m gonna give it a role to play and get we’re doing that for you behind the scenes, but you can override that, so you can say you are a skilled instructor

who makes complex topics easy to understand. Okay, now we’re gonna have it teach us something, and I like to learn by doing. So I’m just gonna tell it that you provide fun exercises so that students learn by doing, you are teaching an intro to regular expressions class, and then I’m going to tell it I’m. Provide one one exercise at a time. Do not move on to the next exercise, exercise until the correct answer is provided. Usually you don’t dispel things correctly. By the way, copilot is pretty good at figuring out what you want if, if the incorrect answer is provided, then what don’t give the answer instead provide a hint, a helpful hint, to nudge the student in the right direction. All right, we’re gonna say again. All right. So now, now we’re actually in this weird interaction with the AI where it’s like it’s not writing code for us, like we’re just we’re talking to it, and we’re learning. So write an expression, regular expression, that matches any string containing the word cat.

It doesn’t really tell me, though, like, I don’t know, is it just cat? Right? Regular section that matches any string that starts with the word hello,

hello. That’s close. But remember, we went to match strings hint, use the curry symbol to indicate the start of a string. So is it Hello, and then the carry symbol, not quite should be placed at the beginning. Okay, so we were close, okay, but you get the idea, right? Like, look, you can learn anything like this, right? Like we could learn. We could tweak this. Got it perfect, right? Just gonna go on and on and on and keep giving me regular expression exercises to do. And this is like customized curriculum just for you. And you can mess with this prompt and do all kinds of things, right, like intro to Intro to cobalt. Where’s my cobalt people at right, and then start all over again. We’re gonna ride it. We’re gonna ride Hello World and cobalt. Um, all right, Brian, like, I feel like, again, I could keep going. We could get into data science, but,

Brian Rinaldi 1:07:17 yeah, we’ll have to, like, do another session. Yeah, learn data science. What I mean you could actually what you should do next time is just start that prompt and be like, Okay, you guys are going to learn data science is going to be taught to you by copilot,

Burke Holland 1:07:30 right? Just, just ask it. Bunch of value after vibe, yeah,

Brian Rinaldi 1:07:35 right. So we did have one quick question. I know we are already over time, but we have a lot of people stuck around, so it’s obviously good stuff.

Burke Holland 1:07:47 That’s great. Yeah, Cassie was here,

Brian Rinaldi 1:07:49 so we had one quick question from Ravi, who asked, like, when a new programming language was created, how long till copilot is aware of it?

Burke Holland 1:07:57 Yeah, I don’t know. It’s a great question, I can tell you generally. So Ravi, remember, like we talked about how it’s using a large language model, right? It’s using GPT four, oh, and so it’s kind of the question is like, when is GPT four? Oh, aware of it. And there’s a great video that I recommend everybody watch on on YouTube from Oh, who’s the fellow from Stanford that used to be the head of AI at Tesla. Oh, his name escapes me anyway. It’s International, large language models. Maybe we can get this in the chat. But he explains that when these models are trained, that that’s a very computational intensive process. It costs millions of dollars, and it takes, like, a month and so, and then fine tuning is done after that, right? And so it depends on whether or not, you know, it has to be part of the the training which is done, like once a year, or the fine tuning, which might be done, you know, every couple of months. And so I would say, I don’t know, carpathy. Andre, karpathy is the name of the fellow. Yeah, great video. I recommend everybody watch his intro to large language models. It’s about an hour. It’ll help you understand so much more about how these models work.

Brian Rinaldi 1:09:13 Okay, pasting that in, I think it’s this one that I’m pasting in. I’m going to paste that also into here. Andres caprati, yes, okay, somebody actually on Crowdcast knew exactly who you were talking about. So yeah, with having multiple chats going on at the same time, can’t watch them all.

Burke Holland 1:09:33 He’s an Outstanding, outstanding presenter. Very, very well done.

Brian Rinaldi 1:09:38 So okay, well, considering we’re already 10 minutes over and I don’t see any other questions at this point, I did. I did have a question at one point, but this was like early on in presentation, how you managed to have 10,000 uncommitted git changes,

Burke Holland 1:09:53 node modules folder. Node modules is not in the Git ignore. That’s. Always the answer

Brian Rinaldi 1:10:02 makes it makes sense. It is crazy. When you think about, like, okay, it’s just 10,000 files. Like, how it is, is this amazing? How many files end up in the known modules folder?

Burke Holland 1:10:13 Honestly? Man, for a lot of projects, try to check in the node modules folder, and you’ll actually get an error from GitHub. That’s like a 400 error because it’s too big.

Brian Rinaldi 1:10:24 No, yeah, yeah, this, you know, we can get into a whole philosophical discussion about what what this means for developers, but I think at this point we’ll call it. Thanks everybody for joining, whether you’re on Crowdcast, YouTube, LinkedIn, whatever. I really appreciate you joining. We will have talk later this month on our regular scheduled for fourth Tuesday at 1pm I will post that very, very soon. I’m actually really excited about the talk. I can’t wait to share it with you all. So should be posted hopefully this week. So look for details on CFE dot Dev, as well as upcoming code break and Dev relish episodes and all that stuff. So thank you all for joining. We’ll see you next time.