Github Copilot Introduction (Official)

hey friends welcome I'm Scott hansman I'm very excited to be here with you to talk about my new favorite tool our AI powered pair programmer GitHub co-pilot and I am joined with my friends Aaron crawfis and Roselle Scarlett Aaron is going to be showing an amazing end-to-end demo and intelligent app that was built using a combination of Open Source Technologies developed by Microsoft in the community along with some other services that run on Azure he's going to show us how he used AI assisted programming and GitHub co-pilot to build this demo and then Roselle is going to highlight some cool upcoming features of copilot that infuses AI throughout the development lifecycle and maybe uses some voice so thanks for hanging out with us today this is going to be fun friends so so Aaron what is it that you have have made here yeah um so that we have we're quickly chatting a little bit a while ago about how we all have a pet that we've lost at one point or another uh might be a dog might be a cat or some other type of a pet where um they might run away and get off leash but uh but usually what you end up doing is having to go around staple up signs text your neighbors let them know um but we what we were thinking is well we all have like tons and tons of photos on our phones and our camera rolls of our pet why can't we use some of the latest and greatest AI Technologies to help make that process a little bit easier so go ahead and share my screen and walk through the new uh pet spotter application so with pet spotter you can take all those photos that are on your phone's camera roll fine-tune image classification model and then if someone were to come around and find your pet later on they snap a quick photo and it instantly matches to your pets reuniting them with uh with you and to make this possible we've actually integrated a lot of different open source Technologies and Technologies within Azure to make this possible so you'll see the the laundry list of amazing Services here but more importantly it all comes together into our architecture here so you'll see that we're running a front-end Blazer app we're using the Dapper distributed application runtime with all the different uh building blocks such as Pub sub output bindings State Management and then we're running just a simple python backend which in turn will talk to Azure machine learning to both do our model training and then offer an inference endpoint so it all comes together into this Cloud native application that can run locally on your machine or on a GitHub code space using the local file system and a lightweight redis container or we've made our Azure version here which can just swap out those Dapper components to use Azure service bus blob storage or even Azure Cosmos DB so you get all of that cloud scale and with the portability and the nice part is none of your code has to be aware of azure or local or like have different code paths or sdks it all uses those Dapper building blocks so it's a very very seamless code to Cloud portability there well that's interesting you point out that it doesn't have to be code aware like when I look at a diagram like this I think wow this is really complicated this is a very sophisticated Cloud native app right your result you're nodding as well you can run this locally and to your development process you know it doesn't feel very Cloud focused it's you're making an app whether it runs on your local machine or in the cloud and is it Dapper that's making that possible exactly so with Dapper we offer yeah those building blocks such as adding State Management or Pub sub but under this like under the hood it's all of those SDK calls to redis or to Azure service bus or to Cosmos DB that's all contained within the Dapper sidecar or that lightweight process or sidecar container if you're running uh in the cloud and kubernetes but yeah all of that complexity is shifted over into Dapper so in terms of your code you just say Save State get State all of that and yeah your code doesn't need to be have any sort of cloud specific sdks there very very cool okay so that this is great so then I we talked about copilot though where does copilot come in how did copilot make this possible yeah so um when I was uh uh setting forth to get get going on this application um there are a lot of new technologies that it wasn't quite as familiar with um so for example.net um it was the first time I actually sat down to do a Blazer app or even with uh the Azure machine learning I was finding that I was using a lot of different libraries and technologies that were pretty unfamiliar to me so as an example uh when I was creating my pet model I was I tried I got started trying to find a lot of uh different getting started guides and all of that but I was like wait let's see if co-pilot can assist and make this possible um so I was using the uh new copilot chat which I'll open up here on the side and with this co-pilot chat it makes it easy it asks how it can help me and then down here it'll allow me to ask some questions so here the first question that I was trying to ask was well I typed in my my class here and it says well this property is not nullable and so me being a very beginner when it came to some of these dot net isms I just asked co-pilot I was like um how can I get started and I knew of Constructors I'd used some object-oriented programming before such as Objective C and things like that but I just needed to know how I can get started uh with a default Constructor uh here in my model so very kind of natural language I was asking it questions that I would ask say someone on my team about this and it's uh said oh yeah so here's your uh how to do your Constructor and the really cool thing is I just have to click this insert at cursor button right here so I'll zoom in you can see that you can either copy the code block directly or you can just insert right out your cursor so what I did is just insert that cursor and here I have that put it at the wrong place add some lines in here insert that cursor and now I have my Constructor however it looks like it got the braces wrong so just uh shift alt F and it reformats that document so there I have my default Constructor now I wanted to add some business logic in there so the next question that I can ask it and kind of build upon that using the context is while I want the ID to be just a new guide string so I can just say make ID a new good string so each pet gets a unique good and it's like yep here you go there's the uh good new good string I can just drop it in right there and just like that I now have the a little bit of.net I need to make that possible and I can continue on the submit saying like uh make the default State new and you can continue customizing it from there so I had a lot of fun as I was learning about.net and getting going uh here with GitHub Copilot that's really awesome I love how it has like context of the the file that you have open I'm curious if you found any like tips and tricks on making sure that like either GitHub co-pilot through writing comments or co-pilot chat like produce the like desired results for you because sometimes I know that like I'll like write a question and it doesn't give me exactly what I want so any thoughts or tips on that yeah great question so yeah as I was getting going uh you mentioned that there also is like the inline uh GitHub co-pilot as well where you can start typing some things and it'll try and guess and uh try to kind of guess and you can also hit Ctrl enter and it'll kind of synthesize a bunch of solutions for you so um yeah so when I was trying to decide between should I do something here in line or should I use kind of the synthesized Solutions I found that the natural language portion was really handy because very often like when you start typing some code like yeah comments can also help as well or you can say uh something like let's say there's uh the pet name and then you can use that little hint there to uh generate the pet name so I found that kind of the blend of using the right comments and then synthesizing some more advanced Solutions or if I couldn't get the comments to work or I really needed to have some specific questions there after the chat with a natural language ability helped immensely but um but yeah I'd say little hints wherever you can you can drop in just a little comment you can if you notice that something isn't quite right where you need like a pet first name you can add this in and then it uses that information just to pop down here and then uh you can get there it goes and uses the uh the information from above to generate the pet first name so yeah a lot of different ways to drop those hints in that's awesome thank you now this brings up a number of really interesting points here Aaron because what you're doing is you're showing that copilot is kind of multimodal there's there's intellisense which is the you type and you hit Dot and there's intellicode where it anticipates your line and what you're about to type and there's co-pilot and all those three features are working together and then you're seeing this preview of the copilot chat that'll be available to folks in the future and that copilot chat as Rozelle you know very rightly points out has this context like you didn't just go and like save yourself a Google with Bing you didn't just save yourself a web search right Roselle said that there's that context there so it knows about your code it's watching that context in the tab I think that's the real magic is that extra bit of context isn't it yeah exactly um and like you a lot of the in a lot of the cases I found that I knew just enough to get started I knew what I was looking for and like usually it would just be a quick Google search like how do I add Dapper to a.net app but um I can just using the context here now I can say just now add a Dapper uh client and save the pets State using a new method if I can save pets States and just like like using that context I knew I knew that I needed a Dapper client and I knew that I needed uh to integrate that and just like that it uses all of that context it knows that this is going to be uh the import the using the Dapper clients Library there and then all I have to do is just drop in this one method underneath and again shift alt F reformats and just like that it it's still a little bit of work I need to do to specify the store name here so this one I will be pets so it it gets me 99 of the way there where I now have my Dapper client and then I can save my pet State just like that how how much did you feel you could trust it like did you feel like it got you you said 90 or 99 there I don't think it's always 99 of the way there did it ever did it ever confidently generate nonsense that you had to find your way around yeah so this is the one where um so save pets State here worked really well um when I was trying to generate more of the Dapper output bindings so I'll show you an example um add a method to Output the uh pets uh images to a Dapper output uh binding for local storage uh kind of knew what I wanted to achieve there um I found that the code that it generated here for invoke binding async uh wasn't uh quite right when I was uh doing it the first time um so when I pasted this in uh it generated uh it didn't generate all the metadata that for example you might need so it got me in this case probably 80 of the way there and that's when I know okay this is the function call that I need but what it's missing is the metadata so when I when you if I ran this the first time it didn't quite get me there I found that the image wasn't generated but it got me definitely headed in the right direction where then I found oh I need to set some optional metadata here in order to give the file a name and whatnot so it got definitely got me in the right direction that's awesome I feel like that's a good reminder to folks that like co-pilots a peer programmer and it's not going to do all the work for you and just as you would with another co-worker or peer programmer you would like review the code make sure everything's looking right um and it's just guiding you in the right direction yeah yeah definitely and this is the one where um I had a bunch of teammates I would normally go to and ask hey why isn't this image being saved correctly and help me out with this now I can yeah I have that peer programmer that co-pilot on the side that I can in some cases I can even ask it hey why is why am I getting an error so as another example when I was looking at the uh at the back end here I was getting some error messages like data is possibly Unbound and um I had a slight idea like okay um Unbound I generally know what that means but again that would be I usually go ask someone or do a Google Search and try and figure out what's wrong uh with copilot being that pair programmer all I have to do is just select uh let's I can use the slash clear command so they have these little uh methods their little uh helpers you can do so I'm going to be using uh clear to clear out and give me a new window here so all I have to do is select the code that's giving me some error lines there and I can just say fix and so I can say fix and it will look at that and say oh that error message is tell me why is because the variable data is not defined you need to Define that before using it and then here's one example where I can type in some dummy data for fluffy the cat and then it'll uh tell me that it'll replace with my own data or I can say I want data to be initialized as blank and then it'll say sure you can also initialize that as blank all you need to do is Select data as an empty object there so if I just drop that in right there my error messages go away so a little bit of back and forth and just like that it's helped solve my error on my backend service here so which languages were you familiar with before because like I feel sometimes like if I'm practicing my Spanish somewhere I I I kind of get it out but it's not you know idiomatic were you a python person before or a.net person before and how much did you feel like you were in over your head during this process yeah so I started out my career with Objective C doing iOS applications so I I knew enough about object-oriented programming to kind of know the basics but just like you said like kind of switching uh with uh with languages it's uh like spoken language is very similar with coding languages where I knew okay I think a Constructor is what I need but how do I apply this to.net like what are the specifics and I

think that's where copilot made a huge difference for me which is yeah I knew what I was looking for I just didn't know how to express it in the exact uh in pieces of the language and that's where I got the most value out of copilot is I was like okay objective c I need a Constructor to initialize this the instance of this Source um I and I'm just like and so I knew what I was looking for copilot it's like oh yeah in.net this is what it looks like and even in Python I've spent a lot of time in Python but um in this case it was giving me an error because I was only exercising the happy path which is if it actually retrieves that so uh trying to think through okay there's going to be this other path of the call to Dapper fails and so you know co-pilot was able to say I was like how do I product against that and as we just saw in copilots like oh yeah in Python here's what you're trying to do so it made it really really easy to like take like okay I know the concepts of how do I actually put pen to paper or cursor to the S code window in this case very cool very cool and then you know this is the code part you still have to deploy it you have to get it up into the cloud like it seems to understand Dapper it seems to understand Python and c-sharp did it help you deploy this did it help you with things like yaml and Docker files and things like that yeah yeah yeah definitely so when I was getting ready to do a Docker file for this again I knew that I needed a Docker file I knew that I needed to do a build and some sort of like entry points and all of that and I remember even thinking back well I know vs code does this in the doctor extension somewhere but I didn't know like what to click where to dig in all of that so just like I would ask someone in the office or some like one of my friends or I can ask copilot as saying I need a Docker file uh for my blazer app uh pet spotter and I was like that's what I'm trying to achieve here so I just type that in and copile it comes back and says yep here you go for net you're going to need the SDK as the build environment you're going to need a set of working directory copy your project file and do a restore you're going to need to copy in the rest and publish it and do all of that so it just made it really easy to say oh yeah that looks like the docker file but you'll notice that kind of being that it's kind of that pair programmer and that assistant there's a couple things that we need to that aren't quite right that we need to dive into you see that it's using.net5 when I was using.net 7 in my app you'll notice that it didn't have if you look at the uh back end here you'll see that at the front end I should say you'll notice that the docker file is in a directory above so it's not indexing it quite right so in order to fix that all we have to say is for example use.net uh seven instead of five and just it'll using that context from that chat it'll be like oh yep here's the the correct image tag using.net7 um and then uh and I'll say uh my app is in uh the pet spotter directory and then it'll say oh yep no problem it even says no problem you can uh change the working directory and so now it actually indexes into the proper uh directory to grab that do the restore copy and do all of that so let's go ahead and try this out again I can uh just go ahead and insert that at cursor and go ahead and hit save and now I'm ready to build and run this and now I was sitting there I'm like okay what's the command again it's like Docker build but I have to tag it like how like what's the exact command for that so I was like how can I build and run this on Dr desktop so it just kind of asking it that next question um like kind of building upon that and it's like yeah so you're just gonna need to open up a terminal I'm going to need to run the command Docker build uh pet spotter image in the current directory so let's open up a terminal and give this a shot um so looks like the docker file that it ran that it generated is uh currently uh compiling that uh the application and building that Docker image for us should just take a couple seconds here um but then once this is completed building it even tells me it looks like that uh failed but that'll um oh looks like uh as we were making some changes over here it was uh caused some errors so let's revert back to uh that the uh the older model and go to this and why this is why we do things like this because it's not going to get it right in the first try uh again we are using the copilot chat which is a version that not everyone has right now not everyone has co-pilot chat you know you do have copilot available to you folks that are watching where you can put in comments in English in your code and it will generate code we have access of course to intellicode intellisense uh in the in this example here where you're using copilot chat it's worth pointing out also that Aaron's got little Auto uh suggestions about what the next thing will be so when you went and asked it how do I run this in Docker it actually made a little suggestion that that might be the next thing for you to ask which I thought was super cool as well yeah yeah it's definitely it's knowing what what will the next question I have be so it's already knowing like these are going to be the next steps but uh but yeah once I uh return my pet model to the proper uh proper State there it built correctly and then it even knows that yeah you just need to run Docker run um specifying the name and the image so let's go ahead and copy this command paste it in here and uh just like that it's spun up uh a instance of my container and then I can just pop open a browser go to localhost 8080 oops localhost 8080 and now we have our pet spotter application up and running running in my Docker container I can go in report a lost patch or I can go in and report that I found it found a pet here so yeah the copilot made it super easy not for not just generating my code and getting started but also building that Docker file that the docker def file definition itself building it on my machine running it locally and then I can even click the suggested uh action here which will say here's the next steps you will take to get into something like Microsoft azure very cool now again important to our friends that are watching to remember that co-pilot is kind of like a you know a family of interaction models uh the chat example that we'll see in the future on our own machines uh there's other interaction models that we can see as well whether it be in the comments as an autocomplete uh or of course if I go to Bing chat and I put something in there it wouldn't have the context of the project that I'm working on like Roselle pointed out at the beginning it's cool that it's integrated inside of vs right here yeah no it's been a huge accelerator as I was getting down to do pet spawner just one quick final uh thing that I wanted to show how this really kind of not only accelerated me for writing code but helped me understand it at a deeper level so just to kind of finish up um so cada or a kubernetes event Driven Auto scaling was something that I'd actually hadn't used before it's a really popular open source project for taking your application such as like your front end container and your back-end container and scaling them out like making more instances of that particular uh pod on your kubernetes cluster so that way if you get a ton of traffic all at once you need to make sure there's more back-ends available to handle all that request so I was following kind of their documentation and looking at their websites and they had this really great example of what a scalar would look like in its yaml definition here using Azure service bus um but what I was trying to kind of understand which would help me in the pet spotter application is what is this actually doing what's a scale Target graph what's the trigger what are all these things well with copilot there's actually one more quick command I want to show which is explain where with explain you can explain step by step how any sort of selected code actually works and this works I found it works with all the languages that uh that are part of pet spotter.net python or even in this

case uh yaml so let's give it a shot so you'll see that on the left I've selected my yaml I'm just going to type explain and now it is telling you yeah the code above is written in yaml describes a kubernetes scaled object and it even says the scaled Target ref specifies the deployment that should be scaled uh the Min replica count specifies the number of replica so it actually goes line by line and shows me and explains to me how each of those fit in and then from there you can say customize it and tune it from there but not only does it all generate the code but it actually from an example that I pulled from the Cato website it explained all of the fields instead of me having to go dig through endless reference documentation so it saved me a ton of time there as well so it's been a great experience as I've been getting going on the pet spotter app very cool well thanks for sharing that Erin um let's turn our attention over to Roselle right now who has a really interesting demo of another way to use copilot and what she ended up writing awesome thank you so much all right so I love the the co-pilot chat feature that we just showed it's one of our things in technical preview but right now what is available to you is you can use GitHub copilot right in your editor by writing comments um so what I'm going to do right now is a demo I really like to do and I'm going to end up sending a tweet but copilot um one of the cool things here is I don't know python I'm more of a JavaScript developer so this is going to help guide me um what I like to do in the beginning and let me just click right here to make sure we got it what I like to do in the beginning is give co-pilot the entire context of what I'm trying to do so on the first line I'll tell it I'm going to send a tweet or send a tweet um to Twitter using the treaty Library so on the next one um we can already see that it has that context of what I want to do so it's suggesting that I import the Tweety Library um so I'm going to go ahead and start typing it created a comment for me import autocomplete's kind of popping in at the same time so imported creepy here um now it's also noticing that I want to import the config file where my variables are being stored or my my um API like tokens and secrets and stuff like that which I really like that it's doing that so I'm going to go ahead and import the constraint file after that what I want to do and it's probably um used to me using this um same folder and it's also probably used to um just just the context of using um Tweety as well so the next thing I want to do is I want to create a client um with tweepy.client and I want to like pass in my consumer key My Consumer secret and access tokens as arguments so I can connect to the client so I'm going to accept that comment and on the next line it should start to try to like fill it out for me so all I'm doing is like tabbing um which is pretty cool pretty easy for me um and maybe in the future I'll have to like reformat it a little bit like we saw Aaron do early earlier but we'll see what happens next thing I want to do is I want to go ahead and create a variable um for what I want the Tweet to say like some text so we're just already suggesting that for me and I'll tell it um that I want to say I wrote this tweet with copilot and I went to a new line with co-pilot and I'll end it right there maybe I'll put an exclamation mark on the next one what I'm expecting it to do is create a variable that says tweet um and then also have that text inside of it so let's see if it does it okay maybe not I'll I'll trigger it a little bit by starting the word tweet equals and then it's trying that's not exactly what I wanted uh I should say I wrote this tweet with Copilot and call it a day all right next thing I want to do is I actually want to like send the Tweet itself so I'm going to create a comment that says send free and let's see what happens on the next line um and as we see sometimes it's making suggestions that I don't always want which is why it's important to like continue to review like the code that it's writing and the code that you're writing because at the end of the day you're responsible for the code and it's just a peer programmer helping you out so I'm going to go ahead and send a tweet and it's already suggesting that I use the client create tweet method which I really like because um the Twitter API has two different versions it has API V1 and API B2 and for API V2 it's actually using the create tweet method so um I prefer that um it went ahead and wrote it for me and also stored it in a variable called response um and then I want to kind of print the results of the response so I'm going to ask it to print response it's already like knows that I want to do that love it um and then I'm gonna press print response um and now I want to run it in my terminal and let's see I might just create a new like yeah there we go um so instead of just running it I just want to double check that the Tweety library is actually installed because I realized I just started typing without doing that so I'm going to go ahead and do tip reinstall Tweety just to make sure we have everything in there looks like we do and I'm gonna go ahead and um run this file by doing python three and then send tweet.pi and if you all see this pop up this is actually another plugin called trig.io I like this as well and if I press enter what it should do is give me a response and let's see maybe y'all are like I don't believe you that it actually got sent so I'm going to pull up my browser um and go to my Twitter profile and see if it actually did get deleted out I'm just going to make this small really quick or minimize it I mean to say and I'm going to pull over my browser and I'm going to go to my profile and what we should see is a couple seconds ago yep 24 seconds ago it says I wrote this tweet with co-pilot um so that's just an example of the fact that you can use copilot to write in a language that you might not be familiar with or with an API um or service that you haven't been able to use before um that's it that is really cool that's examples from both of you of being a programmer in one language but entering an unfamiliar space and still being made successful because you're you know your helpful pair programmer buddy copilot is there and again we could do these things by as I joke Googling with Bing or stack overflowing or even asking questions of a friend I think we can still do all of those things but that additional bit of context that co-pilot provides as it's watching us code as we saw seeing things that result may have typed before or uh examples that you had done before Erin it's always helping it's always learning and hopefully we'll continue to get much much better thanks for both of you for for spending time with us today yeah thanks so much I've even learned a bunch I was watching just that demo right now and saw the config I've never seen that before so and like just saying Tab and just seeing it pull in the right arguments was I'm gonna go try that right now and have some fun with that thank you and I learned a lot from yours as well I didn't realize the co-pilot chat actually had those slash helper commands I was like oh cool very cool well I think that this demo has really well demonstrated how co-pilot is attempting to you know Empower every developer to make you know better quality code hopefully faster you know we know that it accelerates Innovation and developers apparently who use copilot uh can complete their repetitive tasks they say 96 faster uh they're 88 more productive and I'm hearing less frustrated with their coding so that sounds pretty helpful to me thank you all for spending time with us today I can't wait to see what you our friends in the audience are going to build with GitHub co-pilot hopefully your creativity will be Unleashed with this new AI power developer experience and we thank you all for your help I'm excited to see what's next

2023-04-23 14:42

Other news