I'm going to dive right in. No introductions. If you want to follow along, get out your VS Code, some of the things I'm showing are VS Code insiders. Who's an insiders user? Anybody? I'm going to explain it. Insiders is our pre-release that's built basically by whatever the team landed the day before.

It's going to release actually twice a day. And it has all the latest things working on. VS Code otherwise releases on a monthly basis. The next release is coming up next week on the 11th. Who has done Vibe coding? Anybody? Some. Some. Who has negative feelings about Vibe coding?

Okay. So, yeah. We want to fully give in to the Vibes in this presentation. It's going to be a lot of screenshotable slides to bring home to your team. So get your phones out now. We're going to embrace the exponentials and forget that Code even insists how Andre Kaparthi created that Vibe coding idea.

So, Vibe coding in itself And why it has these negative connotations. It starts in this fun chaos mode. I think it's part of the journey of what I'm presenting, looking at the clock in 13 minutes and 40 seconds, is how we get to this other side of professional Zen vibes.

And to break it down a bit, this initial Vibe coding, what you see most people do on YouTube when they work on websites and ship them to production, and then wonder why everything is slowly falling apart and their bills go up. That's the Yolo Vibe coding and not meant to ship to production.

It's about speed, instant gratification, there's creativity in there. And it's really about this fast learning. Hopefully I can highlight that. Then next -- and these are all made up terms. This is an ever evolving space. You can find -- if you have better words, please bring them to me.

But structured vibes brings guardrails to how these things actually act. And if you have an LM in this first space, it will just do creative things. Guardrails added to -- enter the state of maintainability and balance it to bring you some more sustainable code in the end. Yolo vibes are not meant to be used in the long term.

Structured vibes are where you bring actually that enterprise state in the end that somebody you feel comfortable handing it over. And lastly, we have the spectrum and vibes where I think most of you probably want to end up with. And that's where vibes -- the idea of Vibe coding scales up to large code bases with scale and reliability and really that velocity of everybody feeling the vibes and generating code, but in a generating code in a way that fits into the code base.

So quick Yolo outliner. As Kaparthi termed it, it's all about the outcomes. You don't look at code. You iterate using language. Best even talk to the AI. Then auto accepting is really part of it. You talk to the AI, you look at what it creates, and all the rest just lands.

If it ever goes wrong, you just reset everything completely. You throw out the code or you undo and you keep going. And there is a place for Yolo vibe coding. It's not just weird weekend things. It's rapid prototyping and proof of concept. You just want to explore. It's where creativity really shines and you can focus on the outcome.

And that's the thing where vibe coding really shines. And while you do it, you can learn. You can try something in a rust code base. Make a rust game. Make a rust frogger. Try a different stack. Make a neon flickering rust frogger. Just -- and then look at the code in the end.

Like, how do games work actually in rust? Have AI explain the code back to you. And lastly, personal projects is where we see it most. Just over the weekend, my kids needed an app to do X. And we build it together. And now we have an app to do X.

And I'm not shipping it to production. But it's my app. So we can do some demos. I think the easiest way to show it off. Just open a new VS code window. This is my insiders. If you haven't done it -- oh, I have an update pending. Oh, this is insider.

So it's every day something new. I'm excited. But not updating now. Okay. In -- so make sure you're in agent mode, which right now isn't yet the default. We're working on that. Same problem, I guess. Auto sharing to -- don't monitor. Change. Entire screen. Ta-da! Okay. Thank you. Yeah.

So let's start with the -- don't care about the code. And one way to do this is auto-approved. If you look at chat auto-approved, it's a -- with caveats, cool option. And you can enable it also for, for example, your workspace only. But auto-approved allows you to avoid all these confirmation buttons that the chat otherwise annoyingly throws at you while you're trying to vibe.

So while we're here, let's start this -- you see this little microphone button down here. And that is built into this code. It's actually a local model. Nothing leaves your machine. And it's really -- it's a great way to just chat with the AI. I -- you can actually send it back that it responds everything back to you.

Let's try -- let's make our first app and then go back to the slides because we want to just make copilot vibe what we ask for. So, actually, the shortcut is for me is command I. I like that one. Let's make an app for water hydration tracking in React and Byte.

It should use Material UI and follow nice Apple-esque design principles. So, yeah. Thank you. Okay. And off it goes. So, what you see now first is actually we have a create new workspace tool which let's you vibe code a little bit easier. It's -- let's do my -- Is this just copilot or is this something like that?

Just copilot. Yeah. The copilot agent load. It comes with that tool. So, demo one, two, whatever. It's vibe coding. So, we don't care about the code. But it has to be somewhere. Okay. Now, because we have the repo, our workspace, it will just continue. And now it will actually just see how it starts it off.

Created React, workspace, water hydration tracking app, material UI, Apple-esque design. It made a plan in the background. And now it shares the hybrid plan with us. And it goes off. So, we can go back to the slides and not care about the code. NPM install. NPM dev. So, I trust it.

It will do stuff. And the model used is the one that was at the bottom? Yes. Yeah. So, this is using Cloudson 4, which I found really good at UI. I actually ran the same demo with different models. 4.1 makes it look very wireframe-y. 2.5 Pro has an interesting design sense where it always looks somewhat different.

And Cloudsonnet makes it always look like a blockchain landing page, if you make it wrong. So, lots of gradients and dark and big letters. So, to kind of -- as we -- seven minutes. So, we have YOLO toolbox. There's a new workspace flow that's really interesting. So, if you haven't tried it out yet.

It can also trip you off if you ask for something, a new app and an existing project. Make sure you -- if you hit that. Voice dictation built in. Visual context. I might get to showing around. So, once it actually starts finishing, it will open up the page in browser preview in VS Code.

And I can actually select specific elements. And then the auto accept option. There's another auto accept after delay if you don't have that on in VS Code. There's an autosave that I really like to drive any live updates in the background that are running. And the undo and revert I quickly show up here.

If anything goes wrong, there's always these buttons up here for undo and going back. So, see where it is. Still installing. Beautiful WiFi. Making demos easier. Yes. Actually, when it -- when this runs and it runs in the terminal commands and the terminal commands fail, it will actually look at the output.

So, if there's any dependencies missing, it will go off and install them. It's still like chat.cn had some changes in how you install it, for example. It will figure out because the error messages. Use this package instead, and the next command will use the right. Yeah, but there are console errors that you don't draw.

Sometimes it will run things in the background terminal, but there's ongoing fixes to make it basically always find it. Okay. Let's keep going. Next one. While it runs. It's -- use YOLO VibeCoding. So, really try it out. Go. Embrace the exponentials to build that AI intuition. Like, what is AI good at?

What AI can't do yet? And find that for yourself. Just baseline what AI can do. And that's where YOLO VibeCoding with, like, a very open canvas and being able to steer AI is an extremely powerful skill to inform all of other AI usage. Then the second one is using frameworks.

I pick React invite in my demo because it gives a nice grounding and it's something that hasn't changed in a while. So, that's a good way. If you use any new ones, you want to be more explicit about how to read the docs and where to find information. And lastly, it's all about iteration.

So, it's a whiteboard. You want to wipe things off completely. You want to start from scratch. You want to work on specific items. But it's really about, like, having this iterative workflow outlined. Quick check-in. Still working on some files. Okay. We keep going. So, structured VibeCoding. And that's where we bring in a template.

And that template comes with a consistent tech stack. And that could be your internal stack. It would be a container that you give to developers. So, if you want to work on UX, bring this template in and you can just start vibing. That could be even for non-technical people.

Just check out this repo or work from this template on GitHub, open NBS code, engage agent mode in voice mode and start vibing. But because it's a template, it comes with this consistent tech stack. And it comes with instructions to guide the copilot flow onto specific conventions that you're running with.

And then, lastly, we want custom tools using MCP and other things to make sure if it needs information or needs more context. And that's really more reliable and more consistent than YOLO mode. If you ask YOLO mode, and if it wouldn't have given it material UI, it might have picked any other design framework, it might have went with Tailwind.

So, that allows you to, internally, we use Fluent UI. So, you're going to use Fluent UI. This is where you get the package and just it's outlined and it's clear. And so, it's really great for bootstrapping these screenfield projects because you end up with something people can hand over to engineering.

And engineering doesn't say, like, this is totally not what we're doing. And this is also, it's better at the off mainstream. Like, anything that's not popular, like Spring Boot, whatever latest version you have that the AI struggles with, you can add more instructions on top that it gets it right more often.

I'm going to show a quick how it looks like. It's still vibing. I think it's mostly the internet speed here, making it slow. So, let's figure out -- this is a nice repo. It's actually on the -- on the internet. If you go to GitHub.coms.digitarout. And then I put it up.

I think it's still on there. Frontend Vibes template. So, let's see if I'm in. If you want to take a screenshot for later -- again? How's the screen sharing working? I don't know. I'm not technical. It's this entire screen, right? So, okay. Yeah, I think every time I switch back to PowerPoint, it tries to do the mode screen again.

Okay. So, GitHub again. Sharing the vibes here. Two minutes. Okay. We got good. Yeah. So, that's a nice template. Just going to do a quick roundup. So, one, we have chat modes. That's what I'm highlighted here on the left. GitHub. folder chat modes. And you can define already tools.

You find what tools are in the mode and what's the system prompt. And then they show up down here. Actually, you can switch out agent. It's a new agent that's now doing test-driven development for you. And that description here I wrote in another demo earlier about how to do test-driven development.

I didn't know there's a red, green, and anything else. So, that's up to you how you define that mode. But this basically now guides it. You have to write tests first. And then you write code and that has to pass. And only ask only move to writing code after I confirm because I want to review the test.

And that's much easier for review to me. You can also create prompts. And that's a way for your team to create these reusable tasks that are then used across different iterations. It could be a new landing page for your design team. Like, we need a new micro landing page.

This is how you structure it. And then you can just create it. And lastly, instructions. Those are new. Those are .github/instructions. And those can outline what specific parts of the code base do. So, to go back to the slides. Yeah, the thing again. So, you want to bring in workspace instructions.

There's a good document on VS code documentation on customization. If you want to go deeper, there's instructions files I showed and prompts. You want to make them dynamic for specific parts of the code base. And you want to start bringing in MCP. Couldn't show up MCP right now because we're running out of time.

Check out my MCP talk from the MCP track if you want to see some of those demos. Also, VS code has access to problems and tasks. So, if you have your task runners set up in VS code and your linters properly, it will actually start fixing code as it makes mistakes, which is a really powerful context to have for the AI.

And lastly, if you haven't found that little sparkle icon and then you commit, it's really important once you start working and having workable code to keep committing that workable code so you don't get into weird areas where it worked before and now my Vibe coding broke it. And that's always sad.

So, review is important. Always says on these instructions are important. Start with errors. Committing is important. So, commit often. Pause the agent to inspect. Lastly, in 10 seconds, spec-driven really brings this often repeat idea, which you'll see here as well. You start with a spec, you make a plan, and then you implement the plan.

And that really brings it up to the large scale. And the features we have here, I showed off. Prompts, more MCPs, and more task-specific tools that you can bring in. And we're up. Happy to chat more outside.