Real World Development with GitHub Copilot and VS Code — Harald Kirschner, Christopher Harrison
Channel: aiDotEngineer
Published at: 2025-08-03
YouTube video id: eOxOzcw70f0
Source: https://www.youtube.com/watch?v=eOxOzcw70f0
[Music] We have um VIP coding at scale. It's a talk I'm going to give at the expo in a very short version without all the hands-on stuff. So this is whatever how long this will take. It's all about VIP coding. So we're going to give fully into the vibes, embrace exponential and forget that code exists. It is about focusing on the output and not actually on the code. And that's where where people disagree like if I don't look at my code as an engineer, what am I? Um and then if what does even embracing exponentials mean in this case? So, and that's we're going to get into that and but we're definitely going to forget that code exists. And I think uh the at the anthropic conference two weeks ago was a great chart of how exponentially agents run longer and longer and generate more and more code. So, slowly forgetting that code exists and you want to review every piece of code, but building trust and adding guardrails to the AI is what this talk is about. And his VIP coding journey starts kind of initially what people most people saw of just like I built an app in just one day and I put it online and I made money and I then things happened to the app and things got leaked and things were no longer fun and that that's that fun chaos state of vibe coding and we're trying to move to professionals then and that initial state is what I'm now terming yolo vibes. It's the unofficial wording, but it's all about creativity and speed and it's a good place to be. It's because there is instant gratification. It's getting things up. It's about learning. It's not about shipping products, but and so we need to get there. Second stage is structured wipes. It's all about balance and sustainability like how do you bring mainten maintainability more readable code like things you might actually somebody in the end might want to read that code and you have a handover to somebody else and you want to have some quality control that what you built is maintainable and not just a throwaway project and lastly we get to spectrum vibes and if you have done anything on Reddit or on blocks in the in the past then few past few weeks you've probably seen people sharing their kind of best practices. This is how I finally got good value out of AI and those are those best practices are emerging but they bring you that scale, reliability and velocity that that comes with that while still hopefully giving you some speed and gratification along the way but reducing that chaos while maybe keeping the fun. So VIP coding initially where we see this outcome first as I said it's all about no you not don't even want to look at the code like if you're in an editor and I see actually people framing their experience in AI editors of low code mode so they they just look at the chat panel and look at whatever comes out of it and that's the outcome first. It's all about natural language. It's all about just staying in the flow and doing working with the AI and it's about auto accepting changes. So until it maybe no longer works, we might want to undo but otherwise we just keep talking to I know you did this wrong. Try again. Um fix it or go to jail is a very popular one. So you can try all kind of but stay in natural language. Don't don't be too specific. So there is a use case for that though. You wanna get a sense for yolo vibe coding for rapid prototyping for proof of concepts where you just want to get something out. That's why I actually have a ton of conversations with larger companies who want to who start a conversation like how can we do white coding and for them it's all about getting people who are non-technical to be able to communicate ideas. It's about UX people just making a mockup and being able to bring that to a meeting and being able to communicate what they want to do in the mockup. It's all about learning. Like I we had last uh two weeks ago at build we had one hour vibe coding on stage live and people build games and I use 3JS which I have tried many years ago but I haven't used 3JS in a while but once I got the code running I could start getting into how it is structured how does it make shapes and I could actually understand technology because I have something working and that's that's really the power of getting something up and running that that gives the technology something to hands on to actually try out and of course personal projects. So um I'm sure how many of you had s sit down with somebody who's non-technical and showed them vip coding and just build a your water tracking app or you build something with your kids. There's all kind of personal projects you can now finally solve over the weekend thanks to yolo vibe coding. So let's do some yolo vibe coding. This is AI generated. So the images do reflect the vibe. So, this is really about voice input, relaxing. I guess coffee is in there as well, but let's get it going. Um, okay. So, in VS Code for YOLO VIP code, we're going to start with an empty VS code. So, hit command shift N. Sorry. >> Are we supposed to use >> I might show off insider stuff, but all of what I'm showing is also unstable. If you have insiders, use insiders. Insiders is the pre-release version of VS code that ships on a daily basis like Firefox Nightly, uh, Chrome, Canary, Dev Ships Nightly. So on your left side, you will have no folder open. On your right side, you will have co-pilot open. Everybody got this? Raise your hand. Cool. Awesome. So um who has used agent mode? Just checking so not have to explain everything. Okay, cool. So agent mode uh the probably the default you want to have set and default was setting. Um clots on four is great at front end stuff. So for me personally my my favorite big enough. Yeah. And now what's interesting so just one one quick tour of how we're going to do VIP coding is there's actually this interesting setting here. This is zooming. Yeah. Is news workspace in VS Code. And for this first round of VIPE coding, I want you to go into this tools picker down here and actually disable scaffold new workspace because it will help you scaffold your workspace, but it will lower the vibes if you're just trying to do HTML coolness. >> Oh, yes. Uh tools picker down here. That's the little one. Uh, how to get into this menu? There's a tool this tools picker. >> Okay. Uh, >> oh, yes, it might be in. It was in a different spot before. Um, if you don't see, check that you're in agent mode. Otherwise, you don't have tools. >> Yes. Ask mode. Yeah. Okay. First step into the panel is switch to agent mode down here. It should might be in ask by default. >> Yes, it is. Cool. And then second step, go into the tools menu, which only appears in agent mode. Soon agent mode is going to be default. And this whole where is my my tools picker is less of a problem. Okay. So, and then what you want to uncheck is this new section. >> And we're going to check out new. >> Yes. Do you see nothing? >> I see those two items and nothing else. That's not enough. I I see more more see. Um you might be Yes, I think that's fine. Let me just >> shoot. >> Okay, good insider. Yes, I think this is actually it's very recent and we're actively working on that. So, keep it keep it checked. It's fine. So, let let's actually use it. Um let's start with our first VIP coding using because it's so hard to disable. And the way we're going to do this is um create a uh let's do react vite. And that's first lesson for VIP coding. Use stacks that are kind of popular in front end where the AI doesn't have to reason too much and make wild guesses. So react invite are good ways to run a project. Um website that for what do we do? Um hydration tracking water hydration water consumption app simple and big accessible UI following uh what do we tell the AI to make it really beautiful? We tell it I like to tell it Apple design principles. You can infuse it with whatever design sense you have. Mine is just make it look pretty which always helps somehow adding that extra. So right water tracking hydration and that's so we don't give it any constraints. We don't tell it how many buttons like is it mobile friendly? Is it not mobile friendly? Is it um what CSS language to use? Uh I might actually not do reactivite but might Oh yeah, let's do that with material design with material material design. So yeah, now we got a stack. We got a design direction and we tell told it to make it pretty. Okay. And then hit run. So we're now in in a no folder state. So what's first happening? It's going to tell us to empty to open an empty folder. Everybody got that in there? Flow. Okay. It's going to hit continue. Now it's going to actually ask me to open a folder. Going to make a new folder. Vibing at NAI engineering. Put that anywhere where you put your stuff, where you put your code. And now it's actually opening a new folder and it's going to continue the setup. And to explain a bit what's happening here. So this is using the new command. A new command is is optimized for creating projects from scratch which if you look at the internet of how people evaluate AI coding tools is what every second person does. Can it make me a water tracking app? Can it make me a movie database app? And so we optimize for this flow, but also it makes for this nice vibe coding from scratch because everybody struggles with what is the right stack? How do I get started? And this is what this is here for. Uh we got the latest. So we we can now review the commands. And this is maybe where we do the first tweak of our settings. So if you go into settings and search for approve, you will find the auto approve. That's the first rule of VIP coding. As we said, we we don't want to look at code and we just want to have the AI do stuff. So what you can do in my my case I'm going to actually go to over to workspace from user to workspace and that means that setting is only set for this workspace which is the safest way to use this setting. So use with caution are going to auto approve which means all of these continue buttons won't happen anymore and we're just going to get results. So check that box close it again and we can hit continue here. This is using invite. This is fine. Now we're gonna stop worrying about the code. Uh but I can still read the plan. So install materiali dependencies create hydration tracking apple inspired design and project structure. So it's running commands. Um why is there files already in here? Okay, cool. skips. Where did it create? Oh, the music come from because I already did something. Cool. Okay, we're on. Yes, keep going. This case, I tried to create something and then it ran another terminal command. Keep going. That's fine. Is it doing stuff for you? Do you see things popping up? Oh, proof. >> Oh, wait. Did we That was in the last version. >> Okay. Okay. Okay. >> Let me let me check in VS Code stable. [Music] >> Yeah, that's my my problem of not being enough in stable. I shouldn't run workshops. There you go. >> Why is that different than >> So you found it in >> Thank you so much. There's two ways to get to the same thing, but it's different menu. >> Oh, there >> the settings. >> There's settings from the bottom and settings from the top. They're not the same. >> Okay. >> I'm happy to go later. There's settings up here. >> I use the gear. I use the gear. >> Yeah. >> Okay. Where's the other one? >> Oh, and the other setting. Yeah. Yeah. I have customized my UI too much as well. Cool. Question. Yes, that's that's what we I think I should have said auto approved before. So, it's active for the chat session, but this is the setting I just showed is the is the auto approve. So, you all the continue buttons are basically gone and it just autoroves. >> Yeah. Yeah. And for MCP tools, we actually do have drop downs to allow always allow for session and always allow for workspace and or not always allow. So there's some more fine grain things we're rolling out to more tools, but for Yep. >> Yeah, I think it's the auto proof is not applied to the current session. That's I showed it too late. I should have done it the other way around. Okay, we got some material design coming in. And this is where you need to get your coffee and just wait. >> That's a good idea. Let's do that. Okay. Uh, open new window. Um, okay. What What prompt did we use? Create a right. So, okay. Now, in the new window, I'm going to do autoproof first. Um, approve. Auto proof is already on. That's good. Um, this is another window now. And we're going to do the same thing. And we're actually going to use material design. I guess is still out there, right? And or fluid. Fluent. That's the Microsoft one. Let's see what this looks like. Again, it's going to prompt me for a folder. Um, vibing at aie two. And this is I think one of the key takeaways like trying out different ways to get to the same result is where VIP coding really shines is continue is just trying I had really success of just like what are different signup flows that we can create like create three different versions of this design to explore what this could look like. Okay, it installed. It's up in the next in the in the one script. And that's where it gets confusing. If you have multiple open now at the same time, you got to figure out what's running what. And now this flow actually over here runs without any confirmation. So we we set auto approve in a correct order. And it's now just creating v installing installing fluent. You notice that we got the wrong fluent because there's a dependency. Now it's fixing those. >> Yes. >> So do I. Um I I do command comma is the quick way. So I don't use menus. I should use menus. Um so you go up here. I have my settings up here. Most probably have them on the other lower side. and you go in here and go into settings. And this is what it should look like. Do your settings look like this. And then if you look for approve sorry can't type auto approve. Do you see it? It might be insiders. It's all blur. We're shipping on a monthly basis and I thought we tweeted about it end of last month. So, so you found it. Okay. >> I'm not trying to use this. I want to stop The challenge is auto. >> Yeah. Yeah. >> Yeah. >> I'm looking for that right now. >> Yeah. >> Yeah. The good thing the person who owns the AI terminal integration just came back from paternity leave. So we're back on the game to work on it. But the um there is definitely we've been looking at how to allow specific terminal commands and that's how most tools do it. But if you think about the scary parts of chaining and running multiple commands in one command. So terminals are not as predictive as you would think and how you can easily allow list things. So I've been mostly thinking about the how to do it right. Right. Okay. And I got two VIP coding sessions going on here. and hide this one. This is not this is for tomorrow. This vibing is happening. So what you see it creates an app tsx. It creates an app CSS. It also creates copilot instructions. Uh who's been using copot instructions before? Yeah. So that's that's one way. This out of the box experience just does things for you. It uh comes with instructions baked in which is nice. It understands which stack you're using. That's mostly about it. It already captured my design principles that I eloquently put in please make it look like Apple and now it's actually there's a clean, minimal, intuitive interface, consistent UI and everything else. Uh it broke down the technical stack even things I haven't mentioned like CSS and responsive design. So it calls out some of the assumptions that AI will fill in if you give it a high level task. Okay, this is still working on the index CSS and the other one is working on the HTML file. >> Yeah, >> it would just do it for it would usually do it as it creates the project. I haven't typed anything else so far in. We're just we're just vibing. it. Um, here created one. >> Let me see if it created one both. >> Okay, there we go. >> Our first app is done. Hydration tracker. Stay healthy. Stay hydrated. Today's progress. We're on a quick ad. 500 milliliters. And it went with metrics. Isn't that beautiful? Just how I wanted it. Maybe you got my accent. I don't know. Um, we can do plus minus. >> It's interesting how mine looks different. >> Yeah, I know. I know. So, does does everybody looks as nice as mine? Do you already see yours? Okay. >> Yeah, yours better. Yeah, that's this like a very wide open wipe coding workshop. Um, I ran these a few times and this is probably one of the nicer ones. So, um, but it's also I like actually running these with different models and getting a sense of how good each model is at design and having design sense without me telling it how to do everything. And Claude is definitely usually rocking the the icons. It got the colors really nicely. So, uh, that's been great. This is a really nice app. So, now next on because we're visual like we haven't even checked the code. We haven't read the CSS. We haven't looked at the TSX. like is this still doing which is doing functional programming like how does it handle state I I don't I don't care it works so now you can actually do a new feature we landed you can now say work visually so I can now say this header up here I don't know what it's called like whatever progress indicator um let's make this uh more animated adding particles maybe that's good. So mu pet paper. So this is all is this material design. This is material design. Yeah. >> I didn't I hit start down here. If you have the browser preview open did it open fail? >> Cool. So this is um to point out two features. So one is in this flow at some point it basically started the task. It did npm rundef and then the next step it did it opens simple browser and simple browser is this VS code in browser preview we have and it will just um what we're injecting here what just went away is a little toggle you can now use to select specific elements that we then attach as a visual reference reference and as CSS into the current chat. So if I scroll back down here, I see what's being attached. Actually click it. So everything you see under message is in the context. The element screenshot somehow didn't didn't make it through. Uh but this one made it in. And that's basically the the CSS description and HTML of the element we attached. So I didn't have to describe the element where it sits. It just did it for me. Okay. Ran into snacks. We don't care about that. Let's check the other one. Number two, fluent design. Uh, this is what it came up with. It's a little bit plain. Um, this is sad. Okay, at least it has a goal reach. That's nice. Um, and it has recent entries, too. It made similar assumptions on what we want. So feature- wise it somehow got to the same conclusion but design-wise uh this is definitely more corporate. Um yeah so that's the simplicity of VIP coding and using the new tool out of the box. Uh if you are an insiders and you can disable new tool it's easier to do like a single file HTML thing because new tool is definitely biased towards using npm and installing packages. So it always ends up a little bit more um complex. >> Do you work with >> Yes. basically the team I work on. So I Hi, I'm Harold. I work on VS Code. >> Yeah. >> Really cool to understand what are the new things that just like like a quick dip somehow. Someone could show me like I have them both on my machine, >> right? and I use them both but then I like fall behind a couple days back. What are the new things and why I should be using insight? What's >> Yes. So the the best way to stay on top of what's new is so we we do actually right now this week it's testing week and we're writing our release notes. So the release notes are usually capturing everything that's new. But for insiders it's hard because it's coming out every day. So it's hard to point. >> That's a great idea. We're going to make an MCP server that summarizes what landed. Yeah. Yes. I like that. Okay. Okay. >> Let's let's do it for the next next demo. >> Next demo. Okay. So, what do we have in our YOLO vibing toolbox? We have the agent. Um, which sometimes is hard to find. Now, you're all on the agent. So, that's great. It's all about um actually didn't show that. I could have shown that is different panel styles. So, if I go back here um you can actually move this into the editor. which is nice. So, some people like that more space for your chat. Um, you can also, if I go back into my panel, >> oh, I moved in into a drop down here and you can move your chats into here. So, you can have multiple chats and they actually have names. So, it's easy to go back and forth. You can put them in parallel to your codes. You can use all the like window management things. >> Yes. Wait, how did you know? Um, okay. Where do we go? In new window. >> There you go. Now you have a chat in its own window. You can put it on your own monitor. So, feature request succ. And you can actually pin it on to be top. So, now if I run this and I can close this uh let's move that away first. So, I can accept this. This we all going to keep and close it. and then close the other one. And now we have the output and we can just move our chat across and fully focus on the exponentials that are happening in this window. Yeah. So that's one way you can really manage the space how you want it. Uh new workspace flow we showed. So it's really this optimized CLI first question. >> Okay. Okay. Yeah. And then voice dictation I haven't shown. Uh who has tried voice dictation in GitHub copilot already? Okay, magic moment of um add a dark mode please and maybe give it a cool name that works with a younger audience who needs to drink more or maybe my kids. Make it for kids so a little more kids friendly. Thank you. Bye. Okay. So, u command I is actually the default shortcut. Um it's it's a local model which is great for privacy and it's really fast. Uh it's accurate and there's an option as well if you when you use command uh voice input that it also reads back the text which is great for accessibility. And yeah, by using just your voice, you can now finally don't put that coffee down and just keep keep vibing. Uh there's a hey co-pilot as well I think we did at some point which I haven't used in a while. Okay. Uh I said all that keyboard shortcuts. There's a keyboard shortcut if you want to customize it to actually hold down while you talk and then let go. Uh visual context I showed attaching. It's great for wireframes. the in preview gets hot reload. It just works and you can attach the elements using that little send button. And then auto accept. I showed the auto approve tool. There's also an auto tool auto approve tool setting. Uh there's also an auto accept after delay. If you don't have that on, I love autosave. It's a great VS code feature that's already working. Um basically after delay or after focus change, it will just save it for you. And what I haven't showed, let's see if this this works. Here is the undo button. This is still going. What is this doing? I forgot. Um Oh, this is adding the particles. Cool. It still worked on it. Got to compile it. Okay. Got stunning animations. That's great. That's what I wanted. Is it doing it now? So, let's keep it does animate. Nice particle. Nice. Look at bubbles. Okay. Um I don't like it. Undo up here. Uh those are basically our our checkpoints. Uh there's a new checkpoint UX coming. But because I have many people saying tell me, "Oh, you don't have checkpoints. I can't undo stuff." But if you already accepted stuff or if you want to go back to something like this is like these particles but for for V0ero. Oh, that's beautiful. I love it. Uh we don't need that. Then you can also bring that back. I just need to see that again. That was really nice. Okay. So for people who don't like particles, we can now undo and it's now back to the original version. So it it has stages for each of the of the work it did. You can easily go back and forth to see the before and after as well. Yeah, but in VIP code, you don't want to look at the code because we don't look at the output. Okay. Um, that's the YOLO toolbox. And I think as I mentioned before, you want to try it out just to get an idea of the AI. Like in my case, I mentioned I like getting a sense of how good AI is at design. like can I just give it wide task to explore a space and it will like come up with something interesting or do you need to how detailed do I need to be when does it make mistakes if I give it a general task maybe about Java where it's not as good at like what will it do um next one is known frameworks we went with V material design things that are kind of off the shelf and haven't changed in a long time uh in a large scale so you want to use something that's popular and have has been consistent And lastly, we use it as a whiteboard. Um, we showed there just attaching a visual element, change this, add some particles. Um, it's really about not being becoming too attached with whatever you're working on, but being um, able and willing to throw it out and start from scratch if things go wrong. Structured VIP coding is this middle stage. tries to balance the yolo, the fun and chaos with a more structured approach. And there it's um I think it's the biggest impact I see from talking to customers on like this is this is how VIP coding can work for us. This is where we can bring somebody non-technical in. give them a good starter template that has a consistent text stack that comes with clear instructions for the LM and how to work on it and keeps it in its actual guardrails and already brings in some custom tools that bring in expert domain knowledge or internal knowledge that you would need to work on this codebase and that's really kind of yolo on on guardrails. uh it's faster and gives you more consistent results. So you don't end up with something, oh it used material design but it should have used fluent or it used should have added dark mode and should have been responsive. All of that can already be baked into the instructions. So I see a lot of companies bring that into their bootstrapping for green field projects. So we have something and you can often times it's you go into a meeting and you have a product that looks already finished because you vipcoded it with your go-to stack. It uses your internal design system. So it already looks way more polished. And the last piece I think out of mainstream workloads is where YOLO by default will always bias towards whatever is like top of the training stack. With this one, you can then customize it further down to internal stacks, internal workloads, internal deployment infrastructure that makes it work better. So let's do structured VIP coding. This is now the image as I explained is now has wireframes and uh more charts. So that's what makes it more structured. There we go. It's open. So what I'm going to do now I think I'm going to push this. It's still running. Let's see if this runs. I did create this vibe coding. I do have another one that I can share. Just look at this one. And I'm going to push it to GitHub. It's gone through fine. Um, cool. Front end vibes. Perfect. Um, this is all vibes. So, we're going to make this live. Um, this is commit and then Yeah. Oh, yeah. commit misses one who has been using this commit button here. So cop will write your commit message then this looks good and now sync changes and I'll share the repository this repository might still be an old name. Let me see. Yeah, probably. Let me just check where it sits because I forgot where it sits. Oh, it's perfect. Sleep wipes. This is one of my VIP exercises. Okay. >> For browser window >> which the >> just open. >> Oh yes. Yes. Um yes the simple browser simp. So we go into simple browser show. That's it. Sleep wipes. Okay. And then npm install on it. And then yeah, it would have prepared better. It would have been a code space and a dev container and you just click open in code spaces and things work. Um, come to my next show and then we'll get that fixed. Yeah, let me just open the code space to see. Now I'm curious if it just works. Anybody's been using code spaces on GitHub? Not many. Okay. Occasionally >> the complexity lies in all the different versions of regular version all the work. out of bugette. Yeah. Yeah. >> Everything just work. >> Yes, it mostly does, right? But mostly, right? >> Yeah. >> It's 95% there. >> Yeah. >> But it's the 5%. When something doesn't work, you just go back. >> Yeah. >> You could try. I haven't I'm actually not running it in container but if you wanna >> the container is just a NodeJS one and it should work too. I did add a container. See >> I vip coded my container too. Wait I can now check. So if you ever wonder what you did on a project um so this is where I created my container. This is where I just asked uh GitHub copilot to update my dev container. just look at my codebase and update my dev container. So I did a good job here. Should have maybe remembered that I did that as well. Okay, if if ready meanwhile why you clone while you npm install anybody got it working already still. Okay, cool. I'll give the tour of what we have. So one is we again start with good copilot instructions and they live in github/copilad-instructions.mmd. It's a markdown file that's included with all your agent requests, all your chat requests, all your inline chat requests. It just copilot basically gives a grounding foundation knowledge about your codebase. And sometimes they feel a bit repetitive like um depending I saw some demos of like use basically it repeats linting rules that you expect the AI to just follow anyways. But I I like um my go-to is just a oneliner on what what's your stack. That's that's a good starting point. Just point it to what frameworks, what version. And that's one way to just keep it on rails with what what it uses. >> Question. >> I was experimenting with this figuring out what would be the best way to have that be a standard that gets included in but like let people not not mess with that like give people some coding structure. >> Yeah, >> if you have a whole team of probably don't want to touch it. >> So this is in your repo. So I think it's a good team exercise to iterate on it like it shouldn't be a stale document. You can put this in your user settings as well. >> You probably don't want it with each app. You probably want to right >> you could do it set up a way that you code and then each app. >> So I've been trying to convince on my peers on a GitHub site this should be an organizational setting that people can set easier on like a organizational level and like something as a as a team you can select which ones you want to use. So working on that discovery sharing is there always one file or can you opt in for like you have different languages different things you're building. >> Good question. >> Yeah. So we have this one now. This these are new instructions. So they these are these become rather monolith and large and unwieldy. And now uh just point out here before I go to new ones I do also guide which tools to use. I do have my first MCPS in here and I already tell it for front-end Q&A and review use the browser tools that come from playright research. I use perplexity. I have uh context 7 in here which has library docs and it keeps using this ID tool to look up IDs but I just gave it these are the IDs you should use. Don't don't use the other tool. So there's ways you can already guide it to specific tools you want it to apply when needed. Um the rest is just syntax formatting optimizations um key conventions. Yeah. And then the other format we have is github instructions.instructions.mmd. And those have this front matter syntax that's becoming more popular for rules of what what files it should apply to. So they start to be scoped with a glob pattern and then right now they're limited to being applied. You actually have to have the file in context. So a TypeScript file would only be applied if I actually do have a TypeScript file in here or I do have one open and then I enable this context then then it would be applied. But if I only have this right now, which means this isn't included, it wouldn't actually apply the rule. We're we're fixing that and it's going to be more working as expected probably. Um but that's that's right now that's like the biggest question I get like it didn't include my rule because right now it really wants to see that file. Um yeah so those those are new uh those shipped I think the last version so they should be also in stable and we're actively working on those. So, and then the the new new thing is plans or prompts. And there we have the first kind of reusable tasks for as a team. How do you think about ingraining like, oh, we now have finally a way to tell GitHub copilot to write tests and your AI champion in the team handcraft this this perfect prompt which oneshots your test consistently and now everybody shares it in Slack, copies it around. Once you run the right test, you go back to Slack, copy it back, and that's what you want to use prompts for. You can finally put these prompts into a place where they can just be used by everybody. And how can they be used? So I showed these can actually be be attached. So you can also go in here and attach instructions. So you can you can do it manually too. So that's one way. But I can also now go in here. I'm in the chat window and hit slash. And I can now actually run user prompts that are my own that I create for myself. And I can you use my plan and spec prompt you see over here on the left. >> Can you make that custom? Yes, these are custom ones. So the ones I have here, these are already custom in the workspace. And then the other ones I don't have I'm not showing. So I think we do there's a new menu. >> Yes. Yeah. Yeah. So let's make it here. Um, so this this one actually just landed yesterday because insiders we can now finally have an entry point because everybody kept asking how do I create prompts and I have to tell them which command to find it in. So this is the new prompt configuration file and I have some already here. So as you mentioned like this is one that's interesting for um if I open this one this is like defining how I want to write custom instructions. So whenever I'm in a new project that doesn't have custom instructions yet, I do run this prompt to to bootstrap them for me. And yes, there should be a prompt sharing website where you can find these amazing prompts that I create. And next week we're going to >> So each problem is like a separate separate from each other. >> Yes. So that's the main difference between instructions. instructions are you can have multiple if you work on for example if you have one for TypeScript and one for your front-end folder they do combine because there's multiple instructions that hopefully don't conflict with each other um but they they allow you to be attaching multiple instructions and they're really more about code whereas prompts are basically uh easy ways to inject something in this prompt field and they stay in the conversation but They um they're mostly around a task and maybe giving the AI something like specific to do. Instructions, you wouldn't necessarily give it like what to do, but more how to do it. >> What about if you wanted to always do TDD? >> Yeah. Yeah. So TDD um good point. Uh that would be a good way to use custom modes. So if we go into here, custom uh mo sorry. So this is only insiders because it just landed. Sorry, you can't follow along or if you're not insiders. So custom modes will show up um in the dropdown. So this is like going to now it just went into the menu, created a custom mode, and now I can pick where it shows up. So got github/ chatmodes which put it into the repository or I just want to keep it for myself. So a good pattern if you just want to experiment put it in your user folder. If you want to make everybody's life better in your team and you have high confidence that your mode does that then you put it into the project. And then uh we're going to do name this one TDD. And then we're gonna ask AI to fill it in, right? Uh prompt um expert expert prompt uh for just typing. Hi there AI. We need a prompt that enforces testdriven development uh for GitHub copilot. So it should probably first make sure it understands the problem then write tests first and only after tests are done maybe get confirmation from the user to then write the implementation and then keep running the tests against implementation. Cool. Thanks. It's important. I didn't know I didn't say I'm now worried because I didn't actually activate my files context. Let's see if it I think it should have a tool to just create modes for you if you ask it. So it's gonna going to make that an MCP server next. Okay. Oh, it got it. Okay. Oh, wonderful. So we have a test driven development assistance. This is my code. We want read the code. Test development assistant core principles understand. Red write failing tests first. Beautiful. I wouldn't have not green. Wow, it does follow refactor, improve code quality, strict rules, noation tests. Beautiful. Beautiful. So, this our new TDD mode. Um, >> we've done it four. Looks pretty good. It has emojis example. Should we try it out? Okay, we have >> um >> use a framework. It's framework independence. Looks like >> Oh, just Yeah, I think it does some Yeah. >> Okay. So, it has it right there. >> It does make some stuff up. Yeah. Wouldn't need to do that. I can take this out. I already have my so um cool test drive the design wonderful okay let's do it so we have this project which doesn't do anything if you just run this um npm rundev probably doesn't I think I already did this before so this is just a basic plain landing page so let's do the um what feature do we have I want a dashboard for GitHub issues just use mock data because I don't want to wire it up to GitHub. So, we want to have maybe some interesting contribution metrics. And but first, actually, let's make a plan. Meanwhile, while I type this in, let's stop it. Um, TDD. So, dashboard for GitHub. Um, don't worry. So now again we give it a very broad task but we can now put it into TDD mode which is our new amazing test and development mode that follows all the best practices I assume that the knows about TDD and let's see >> so wait that's you created a new mode there >> yeah because so we went previously went into configure chat modes we created a new mode this mode is Now enforcing the technique we can actually in a mode you can say which tools it's supposed to use. >> So >> is the mode in agent mode but based on file. So it's a it's a custom agent mode. >> Yes. Yeah. >> When is that going to be live? >> Uh it's in insiders now. It's going to ship next week on on the 11th. >> Yeah. Insider ships. >> Insiders ships daily, but it only releases monthly. Yeah. And we're one one week late uh because there was a short short week, so we adjusted our schedule. Yes. Um so for most of you this menu will just have these entries and the in insiders only if you look for modes in the command pallet. So command pallet you can also click up here show run commands and then modes and that's that's the place Yeah. >> Yeah. Are they in in the output or in the problems view? >> Okay. Yeah. Yeah. Yeah. >> Yeah. >> Yeah. >> It if it runs the commands itself, it will start looking at the term. So the easiest way if you if you run the deployment and the scripts itself through co-pilot itself. But otherwise there's also context actually if you look here we have um the is actually terminal last there's terminal last command which includes the output as well in term selection. Now if you ask me why they're not in the at context I I couldn't tell you right now. Yeah, but yeah, that's working. I think I did this thing wrong, though. TDD, let's just see. Oh, the tools. It configured it made up tools. So, it did that's that's the part it made up. This actually those are not the right tools. Um, this is why it didn't do anything was when I it just basically acted like chat and gave me the code because all the tools it tried were uh it didn't have any right access. So let's try this again. So this probably a good good point to good thing to point out. So in now prompts as well. Let me open plan prompt. So this one can actually now said tools and if you just make a tools entry here to tools you can now actually click here and say which tools in this case this is a planning prompts. So mostly you probably wanted to look at perplexity to come up with anything it needs to find on the internet. Uh I can select that. So that's the way you can now have tools constrained for a studio prompt. which which always helps with kind of higher quality because if you have many tools which as you install more MCP servers you always have this tooling explosion and they might solve all different problems you're having throughout the day but now you can configure it more specifically for domain and also insiders only we have tool groups uh tool sets as should we call them so tool sets I And how do I get here? Um down here in the tool dropdown, configure tool sets and add more tools. This I think sends you to add server, but configure tool sets. Open this opens this one here. And that's only for >> servers, right? >> Anything both built in and MCP actually a lot of the tools you see here, we cleaned this list up. If you use insiders, you see them. Then these are actually tool sets already. So we use tool sets internally because edit files has multiple ways to edit files. We give the AI a few ways. Uh codebase search has grap has file search has different searches as well depending on what you're looking for. So all of these actually are tool sets in our own back end and we expose this now as something you can create yourself. So my research tool for example has the perplexity tool to ask deep research questions and it also has fetch No, I didn't. No, we can show. >> Yes, I can. Wouldn't be a talk without MCP. This is also there's a talk tomorrow about MCP, a whole talk track where I'll be talking about MCP if I can finish my slides. Um, okay, there we go. So let's talk about MCP. This is doing something. Let's see. Not understand requirement. It create mock data. Redph face writing tests. It wrote tests. It Oh, it found that there's a no package library. That's that's sad. Um and it created the test utility and then it tried to run the tests. Um and then it asked to proceed. So that's cool. So it did the first stage of that mode. Um but I don't need to go too deep. But but that's modes TDD. It will ask now for because we asked it to ask for confirmation. So that's why it's now pausing. It wrote tests. Uh they're all red. So that's good. Okay, we accept it. And let's go into MCP. So MCP servers, who has already MCP servers set up in their VS Code? Good. Okay. Um, one way to get SP servers is editing JSON. And that's really, um, there's a few other ways, but let me show you another way. Um, Playright MCP. Who's been using Playright MCP? It's probably one of the coolest ones. Um, so Playright MCP is a browser testing framework and allows people to access the browser locally and just take screenshots, run websites, get accessibility audits, a whole bunch of utility in there. and how to get it for VS Code. There's a JSON blob that you can all ignore and just hit install server. So install server is just a VS code protocol that we use to just wire things up into VS Code. You see the same if you go to the extensions marketplace for VS Code, you can hit install extension that powers the same process. So now I can inst um don't hit show configuration. We need to move this down. But install server actually puts this now into my user settings. And so you can see you can have MCP servers both for yourself. And I have the one for GitHub and for GPAD which is a cool one. I can recommend this one. And then yeah play right now. So you can already see how many um tools I provided. You can see if anything fails you can get to the output. If there would be configuration, I can show that here. There's actually just pad needs a GitHub token. So, it's a local MCP. And what have you ever seen that one? So, yay, no tokens in my configuration. So, you can use inputs in VS Code configuration both in the MCP.json and your settings. And inputs, you might have already seen those in tasks.json is how you configure your tests and your build steps in VS Code. It's the same system. Um, they're defined up here. So, inputs are just an ID, a type description, a default value, and the password true means it's encrypted at rest after you put it in. So, it doesn't ask me more. >> That's going to prompt you. >> It would if it but this this shows basically that it already has a token. But if you enter it the first time and we can actually try that if I >> where is it actually >> uh in VS codes key storage. So if on Mac it actually uses keychain. >> Oh okay. >> Yeah. So >> what other MCP servers? >> Yeah. So I can show um JPAD is fun. It's done by actually um Zia GitHub. So Jispad.de justpadmc that's mostly I'm going to show it off tomorrow as well in my talk. Um, but it's a fun one that uses uh gists as a knowledge base and also for prompts. So, I really like this one. Uh, it adopts a ton of like recent MC MCP stuff, but I think the main ones we usually see is GitHub MCP server just pet just >> lost in tangent. >> Okay. >> Yeah. So this if you just want to play around with it with a really well done MCP server, then that's that's one. Um not saying GitHub one isn't as good, but it's um there's a lot more coming here as well. So they're all in like really active development to figure out what the best way for MCP is. Yeah. >> Yeah. Yeah. >> Yeah. >> Okay. >> Yeah. Okay. >> Okay. >> Right. And in your case, that server is already running. So, how to hook up? >> Okay. Cool. Yeah, let's do that. So, SSE um same way basically. So, what just finding my max it out? So, go back to my MCP. JSON and down here. >> Yes. So, to clarification, MTP.json sits in docs code right now and it's per workspace and that's shared across everybody. So hopefully it puts stuff either you work on it alone and it's just for you or everybody is happy to have those MCP servers. >> Yeah. >> Yeah. >> Yeah. Yeah. Okay. And then the what's now if you hit add server you will find what you're looking for. And then from ads server you can hit down on HTTP. So we actually do support both SSE which is actually deprecated and streamable HTTP which is uh the the new fangled easier to scale better for your cloud. >> It's no long in the spec. Yes. And we do fall back to it on a client side but it's it's the SSE is really hard on on hosting right because they have these long running connections long >> long. Yeah. Yeah. So yeah, so that's that's where you put in your yeah your MCP sec server. And if you want to do it manually, it's really just um you get a nice autocomplete too. So if you pick a name example and um this would be the type would be not studio actually it's http yeah you already would you would use http and I would already yell at you that you don't have a URL so I'm going to put URL so this this is how uh everything is by default as stdio once you have a URL Well, I think I can take this out. Yeah. So, would be just that entry. Yes. So to get Yes. Um so many demos I see people hit start here as well just to see that it's working. It's a nice configuration that just make sure it's working. We actually do cache the tools once we saw them the first time. So how MCP works is that on the first init initialization from the client to the server, it shares its tools back and that's what you see here, the one tool. So if you would do it right, you would never know the tools unless you start the server. We actually cache them. So you don't have to we don't have to start all the servers proactively once you open Copilot just to get the tools. >> Yes. Yeah. >> No, actually you want to be in agent mode. Agent mode ask mode will not run MCPS for you. uh you can you can go uh because as mode is not uh it's not actually there's no function calling inherently right fun as mode is really this traditional askd question will answer based on its training there or its context um yes so there is also an ask what you don't have tools you would see it um but I can do actually does this still work Um, let's do that more quickly. I think we actually do this still. Yes. So, we're actually blurring the line a bit now. So, if you do That's not working. Okay. Yeah. But if you actually reference specific tools in ask mode, it will invoke them for you. But by default, the the way where you want to execute tools is in agent mode. Yeah. >> Uh they're all coming through GitHub copilot. So they're all using your paid. Uh you can add your own models. Anybody has tried it managing your model? So um so I have gamma 3 through lama which runs locally and I have open routers perplexity R1 uh which is actually a fine-tuned model from of deepseek R1 from perplexity. So if you haven't tried it yet, uh basically go into the model picker and hit manage models and then we we can actually custom configure your own API keys from Enthropic, Azure, Cerebras, Grammite, Rock, all of these. Um Olama is the local one. So if you have a beefy M4 Pro, I'm still sad how many models I can actually run on this, but but eventually it's going to be small powerful models. Um that makes sense. So Uh, it might be because of your anthropic tier, right? That's um or is it >> you have four? Oh. Oh. Uh, the other one. Yeah, you might be in agent mode. So, we do actually filter them down. So, that's an ongoing improvement we're doing. That's why it's not it's right now a preview feature only because we're still having to connectly correctly wire up which model allows tool calling. So there's some some every provider has different indicators of how tool calling works and that's that's one of the matching things we're doing right now. So you might not see it because it's not on our our list yet. >> Yes. Yeah. You you will see that. So if I do just um one example here uh so just bad so a you can disable them if you already if you want to be faster you can do command down and just go through. So contact 7 is the one I want to keep player I can disable right now but once you start using them >> this is command up and down the power user way of navigating those. So these are all built-in MCP servers. And once you start, you can actually now if I want to be very explicit and I know which tools I want, I can use my tool sets or I can mention specific tools that are um in in my list. But I can also now just go in and say what do we want to do here? Um research uh GitHub metrics. Let's actually use the research one because we created it. Sounds better when I use research here. Use it in a sentence for productivity. And what happens now is uh this one has now is an agent mode. We have the research group set or tool set. So we'll either use perplexity or fetch. And one of my perplexity keys actually outdated because it failed before. Let's see. Okay, so you see I already actually proved this before. So you see a that it runs the server and you actually click the server to see where it comes from. Um if I would have not autoproofed this because auto proof is still on from our previous session, you can actually go in here and edit what it's sending. Um which now doesn't make sense because it's it's already sent and then it writes up uh what it found in this case. Does that ask? >> Uh, that's just the odd name for the perplexity tool. >> It happens to coincide. >> Yes. Yeah. Yeah. It's just um the verb should be before. So, it's their their naming. Yeah. Yeah. So, that's now run two. It actually did a follow-up query as well and explained it. And now I could put this in into a spec as well. It's actually I did this before. So I wrote a spec using for community dashboard. So I did the research using perplexity and then ask it to write a spec from it using a little query I have here for the spec. Um so that's one way you can quickly get things done. And just to point out this one, it's a pointing it to the spec. So these are actually resolved by the AI. So if you point it to specific files, we do actually validate those as well. So if you get them wrong, I think they're underlined. Um, you can also click them so you get all the markdown goodies. Um, and then you just ask it to write on the spec. Do nothing else. Uh, use perplexity to look up stuff. Don't lose details. Keep updating the spec. So that's that's one way to work on specs. There's probably more more tools we we're going to add here. Yeah. So that's MCP. Any other MCP questions? uh per MCP. So the MCP itself doesn't run anything except when you support sampling which we do on insiders. Sneak preview for tomorrow. So but yeah, if you use sampling, actually I guess I have to explain sampling. So as sampling is a way for MCP to reach back out from the server to the client to use the LLM on the client and it's you can often think the best use cases are to summarize use cases are if you want to um reduce the amount of tokens you send to the back to the client to explain something. So there's a few ways, but um overall there's not enough integration of sampling. Um but so we are the first ones to to get it out there because we already have the LMX posts. So that's cool. >> Yeah. to pick the model kind of. >> No. >> Yeah. >> Yeah. >> But it's still hardly >> right. So, >> so >> yeah. So, what I recommend is a in in your modes boil down the tools to what you actually need. So reducing the tools manually either deterministicity already in in your prom. So this prompt could have tools for like what it should actually do right that would be one way and then I can configure what do I actually want to have here like this should be only doing perplexity because I it needs to do research and that's all it should do >> with custom mode that >> custom mode. Yeah pockets of like this like this right then you kind of pick your pockets of >> Yes. So custom mode is one way and then the other one is you can actually mention specific tools. So if you go in here into add context and then you can actually point it to specific tools. So you're not doing like the look up things on GitHub and you try to find the right verbiage that it gets the right tool. You can just actually mention the tool of it should um for example resolve lab ID. So so you can just add these here and then it will be handed to the AI of like these are the tools the user wants to use. It's it's still >> Yeah. >> Right. >> Yeah. >> Yes. Yes. Tool calling is inherently always even in this case we're telling the AI it should use it but it might not use it. Yeah. Yeah. >> Yeah. >> Yeah. So, my timer is down to zero. Maybe just go back to the slides to wrap it up. >> There more, right? Um, wipe coding. So, we showed workspace instructions. We showed dynamic instructions which only applied to parts of the tool set. Uh we showed custom tools playrite deep research. Uh I haven't showed using web docs like actually one of my favorites just point it to an existing repo and say read this repo if you have questions. MCP works great for that. When I work on MCP server I just tell it look in the TypeScript SDK server from the context protocol if you have questions. Because we have cross repo search it just works. Um the agent actually has access to problems and tasks. So if you have tasks set up and you have linting set up, things will just work. So make sure those are set up in your template. Um generate commits I showed. And then fine grain review, you can pause at any time. If it asks you questions, you can always type something in and keep steering it into right direction. And you can trust read only in specific tools. And I showed you also editing. So yeah, uh instructions keep refining them as it makes mistakes. One of the key ones is commit often. I didn't show commits now, but anytime you have a working state, just make sure you commit it so AI can continue making mistakes and be creative. And then last one, there's a clear pause button in the lower end. So if AI goes off and you're like, what is it doing? Like is it just doing the right thing? Just just pause and review. And that's possible as well. Uh I showed a bunch of this for spectrum development already but it's really about having a spec having having a like done a plan and doing more custom prompts and tools which I showed um showed us prompts. Um there's more MCPS for database access and logging and project tracking like the GitHub MCP and there's also access to actually tests and do debugging within the agent as well. So if you ask it to test driven development like we did, it will actually start running the tests if they're set up in VS code correctly. And then we talked briefly about models as well. So if you want to use 03 for any of the cool stuff, the the deeper thinking, you can do that as well. Um specri is really about focusing on the spec and I think a great way to do that is just create the spec from all the conversations you had about the spec. So, one way if you have a transcript from a meeting about the project you want to do, just feed that in and make sure you call out what the final decision is. It's a great way to have meetings, but it's also a great way to not write the spec yourself in the end. Are there any tools to determine whether spec >> right >> I would ask and say what are things missing and how could it be better and stuff like that and we basically argued with about Yes, arguing with AI is one great way. So if I I have focus on one run prompt um or prompt is where's one critique idea is one I like of just ask me three questions about my idea right just have AI go into thinking mode like what would you ask somebody for feedback um and have it critically analyze your stuff. So these prompts like those are basically the next level of prom crafting where you don't just ask it to code but pull it in as a thought partner as a design partner as somebody who can poke um holes in your I so yeah um front view steps is yeah >> a plan you you now can create one. So we have don't have a plan mode built in but we also know askedit agent will not be there forever. So it's it's a like series of evolutions. RU has way more modes that you can customize. So I think we want to allow developers to create their own. Um because I even see very few demos of people in client using plan. They just give it a thing and then it runs right. >> Yeah. >> It is. Yeah. I mean planning in in VIP coding you even do planning and then writing the implementation plan. So you would spend way more time on that initial just what and how we're doing things and then you let it implement. So that would be even plan write the implementation plan or like write the spec write the plan and then implement. So you would even have three modes if you do it correctly and then yeah so that's probably the last one. So takeaways, you got to experiment. You got to figure out what works for you. Like at what point can you just give it a task and it runs with it? At what point do you want to give it a task and write a spec first and then implement um keep giving it feedback and iterate. So never just accept a bad answer and then really work on your process like what what works best for you, what works best for your team and use modes and prompts and instructions to ingrain that. Um there's some bonus mistakes you can screenshot. >> Yes, please. One more. There's one more. One more screenshot. >> You can end up like major modes. You can have multiple minor modes. >> Minor modes. Yes. That's kind how you end up with problems in custom modes right now. So I got to clean this up too. And then yeah, lastly there is there is a sweet spot for how you define your code bases for AI. So you want to have well structured self-explaining code. want to have the instructions set up. Want to have examples in your instructions. I want to keep instructions updated. So that's it. That was my unplanned workshop. Thank you for coming. [Music]