Vibe Coding at Scale: Customizing AI Assistants for Enterprise Environments - Harald Kirshner,
00:00:00.000 | I'm going to dive right in. No introductions. If you want to follow along, get out your VS Code,
00:00:20.080 | some of the things I'm showing are VS Code insiders. Who's an insiders user? Anybody?
00:00:25.200 | I'm going to explain it. Insiders is our pre-release that's built basically by whatever the team
00:00:31.780 | landed the day before. It's going to release actually twice a day. And it has all the latest
00:00:38.200 | things working on. VS Code otherwise releases on a monthly basis. The next release is coming
00:00:42.340 | up next week on the 11th. Who has done Vibe coding? Anybody? Some. Some. Who has negative
00:00:54.800 | feelings about Vibe coding? Okay. So, yeah. We want to fully give in to the
00:01:01.480 | Vibes in this presentation. It's going to be a lot of screenshotable slides to bring home
00:01:06.100 | to your team. So get your phones out now. We're going to embrace the exponentials and forget
00:01:10.920 | that Code even insists how Andre Kaparthi created that Vibe coding idea. So, Vibe coding in itself
00:01:18.140 | And why it has these negative connotations. It starts in this fun chaos mode. I think it's
00:01:23.780 | part of the journey of what I'm presenting, looking at the clock in 13 minutes and 40 seconds,
00:01:28.820 | is how we get to this other side of professional Zen vibes. And to break it down a bit, this initial
00:01:36.140 | Vibe coding, what you see most people do on YouTube when they work on websites and ship them to production,
00:01:43.140 | and then wonder why everything is slowly falling apart and their bills go up. That's the Yolo
00:01:49.620 | Vibe coding and not meant to ship to production. It's about speed, instant gratification, there's
00:01:55.260 | creativity in there. And it's really about this fast learning. Hopefully I can highlight that.
00:01:59.860 | Then next -- and these are all made up terms. This is an ever evolving space. You can find -- if you have better
00:02:06.900 | words, please bring them to me. But structured vibes brings guardrails to how these things actually act.
00:02:13.380 | 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.
00:02:25.380 | Yolo vibes are not meant to be used in the long term. Structured vibes are where you bring
00:02:31.860 | actually that enterprise state in the end that somebody you feel comfortable handing it over.
00:02:36.660 | And lastly, we have the spectrum and vibes where I think most of you probably want to end up with. And that's where
00:02:43.860 | vibes -- the idea of Vibe coding scales up to large code bases with scale and reliability and really
00:02:51.460 | that velocity of everybody feeling the vibes and generating code, but in a generating code in a way that fits into the code base.
00:02:58.340 | So quick Yolo outliner. As Kaparthi termed it, it's all about the outcomes. You don't look at code. You
00:03:08.340 | iterate using language. Best even talk to the AI. Then auto accepting is really part of it. You talk to the AI,
00:03:16.820 | you look at what it creates, and all the rest just lands. If it ever goes wrong, you just reset everything
00:03:22.740 | completely. You throw out the code or you undo and you keep going. And there is a place for Yolo vibe
00:03:29.060 | coding. It's not just weird weekend things. It's rapid prototyping and proof of concept. You just want to explore.
00:03:36.020 | It's where creativity really shines and you can focus on the outcome. And that's the thing where
00:03:41.220 | vibe coding really shines. And while you do it, you can learn. You can try something in a rust code base.
00:03:46.260 | Make a rust game. Make a rust frogger. Try a different stack. Make a neon flickering rust frogger.
00:03:54.500 | Just -- and then look at the code in the end. Like, how do games work actually in rust? Have AI explain the
00:04:00.340 | code back to you. And lastly, personal projects is where we see it most. Just over the weekend,
00:04:06.420 | 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
00:04:11.300 | not shipping it to production. But it's my app. So we can do some demos. I think the easiest way to show it
00:04:18.500 | off. Just open a new VS code window. This is my insiders. If you haven't done it -- oh, I have an update
00:04:24.100 | pending. Oh, this is insider. So it's every day something new. I'm excited. But not updating now.
00:04:28.820 | Okay. In -- so make sure you're in agent mode, which right now isn't yet the default. We're working on that.
00:04:35.860 | Same problem, I guess. Auto sharing to -- don't monitor. Change.
00:04:49.300 | Entire screen. Ta-da! Okay. Thank you. Yeah. So let's start with the -- don't care about the code.
00:05:01.860 | And one way to do this is auto-approved. If you look at chat auto-approved, it's a -- with caveats,
00:05:09.620 | cool option. And you can enable it also for, for example, your workspace only. But auto-approved
00:05:16.020 | allows you to avoid all these confirmation buttons that the chat otherwise annoyingly throws at you
00:05:21.140 | while you're trying to vibe. So while we're here, let's start this -- you see this little microphone
00:05:27.940 | button down here. And that is built into this code. It's actually a local model. Nothing leaves your
00:05:33.620 | machine. And it's really -- it's a great way to just chat with the AI. I -- you can actually send it back
00:05:39.780 | that it responds everything back to you. Let's try -- let's make our first app and then go back to the
00:05:46.020 | slides because we want to just make copilot vibe what we ask for. So, actually, the shortcut is for me is
00:05:53.700 | command I. I like that one. Let's make an app for water hydration tracking in React and Byte. It should
00:06:01.860 | use Material UI and follow nice Apple-esque design principles. So, yeah. Thank you.
00:06:08.020 | Okay. And off it goes. So, what you see now first is actually we have a create new workspace tool which
00:06:16.820 | let's you vibe code a little bit easier. It's -- let's do my --
00:06:22.500 | Is this just copilot or is this something like that?
00:06:24.980 | Just copilot. Yeah. The copilot agent load. It comes with that tool. So, demo one, two, whatever.
00:06:32.100 | It's vibe coding. So, we don't care about the code. But it has to be somewhere.
00:06:37.940 | Okay. Now, because we have the repo, our workspace, it will just continue. And now it will actually
00:06:45.300 | just see how it starts it off. Created React, workspace, water hydration tracking app, material UI,
00:06:50.740 | Apple-esque design. It made a plan in the background. And now it shares the hybrid plan with us. And it
00:06:56.580 | goes off. So, we can go back to the slides and not care about the code.
00:07:02.660 | NPM install. NPM dev. So, I trust it. It will do stuff.
00:07:05.380 | And the model used is the one that was at the bottom?
00:07:08.980 | Yes. Yeah. So, this is using Cloudson 4, which I found really good at UI. I actually ran the same
00:07:14.580 | demo with different models. 4.1 makes it look very wireframe-y. 2.5 Pro has an interesting design sense
00:07:21.220 | where it always looks somewhat different. And Cloudsonnet makes it always look like a blockchain landing page,
00:07:27.060 | if you make it wrong. So, lots of gradients and dark and big letters. So, to kind of -- as we -- seven minutes.
00:07:36.180 | So, we have YOLO toolbox. There's a new workspace flow that's really interesting. So, if you haven't
00:07:41.940 | tried it out yet. It can also trip you off if you ask for something, a new app and an existing project.
00:07:47.460 | Make sure you -- if you hit that. Voice dictation built in. Visual context. I might get to showing
00:07:53.220 | around. So, once it actually starts finishing, it will open up the page in browser preview in VS Code.
00:07:58.420 | And I can actually select specific elements. And then the auto accept option. There's another auto
00:08:03.780 | accept after delay if you don't have that on in VS Code. There's an autosave that I really like to drive
00:08:08.660 | any live updates in the background that are running. And the undo and revert I quickly show up here.
00:08:15.220 | If anything goes wrong, there's always these buttons up here for undo and going back.
00:08:20.900 | So, see where it is. Still installing. Beautiful WiFi. Making demos easier.
00:08:27.620 | Yes. Actually, when it -- when this runs and it runs in the terminal commands and the terminal commands
00:08:38.340 | fail, it will actually look at the output. So, if there's any dependencies missing, it will go off and
00:08:43.220 | install them. It's still like chat.cn had some changes in how you install it, for example. It will figure out
00:08:48.740 | because the error messages. Use this package instead, and the next command will use the right.
00:08:52.820 | Yeah, but there are console errors that you don't draw.
00:08:54.420 | Sometimes it will run things in the background terminal, but there's ongoing
00:09:00.100 | fixes to make it basically always find it. Okay. Let's keep going. Next one. While it runs.
00:09:07.460 | It's -- use YOLO VibeCoding. So, really try it out. Go. Embrace the exponentials to build that AI
00:09:15.060 | intuition. Like, what is AI good at? What AI can't do yet? And find that for yourself. Just baseline what
00:09:22.180 | AI can do. And that's where YOLO VibeCoding with, like, a very open canvas and being able to steer AI
00:09:28.180 | is an extremely powerful skill to inform all of other AI usage. Then the second one is using
00:09:34.740 | frameworks. I pick React invite in my demo because it gives a nice grounding and it's something that
00:09:39.220 | hasn't changed in a while. So, that's a good way. If you use any new ones, you want to be more
00:09:44.580 | explicit about how to read the docs and where to find information. And lastly, it's all about iteration.
00:09:50.020 | So, it's a whiteboard. You want to wipe things off completely. You want to start from scratch. You want to
00:09:54.580 | work on specific items. But it's really about, like, having this iterative workflow outlined.
00:09:59.860 | Quick check-in. Still working on some files. Okay. We keep going. So, structured VibeCoding. And that's
00:10:07.700 | where we bring in a template. And that template comes with a consistent tech stack. And that could be
00:10:13.460 | your internal stack. It would be a container that you give to developers. So, if you want to work on UX,
00:10:18.500 | bring this template in and you can just start vibing. That could be even for non-technical people.
00:10:24.500 | Just check out this repo or work from this template on GitHub, open NBS code, engage agent mode in voice
00:10:32.100 | mode and start vibing. But because it's a template, it comes with this consistent tech stack. And it comes
00:10:38.180 | with instructions to guide the copilot flow onto specific conventions that you're running with.
00:10:45.460 | And then, lastly, we want custom tools using MCP and other things to make sure if it needs information or
00:10:51.860 | needs more context. And that's really more reliable and more consistent than YOLO mode. If you ask YOLO mode,
00:10:59.300 | and if it wouldn't have given it material UI, it might have picked any other design framework, it might
00:11:03.620 | have went with Tailwind. So, that allows you to, internally, we use Fluent UI. So, you're going to use
00:11:08.740 | Fluent UI. This is where you get the package and just it's outlined and it's clear. And so, it's really
00:11:14.340 | great for bootstrapping these screenfield projects because you end up with something people can hand over to
00:11:19.140 | engineering. And engineering doesn't say, like, this is totally not what we're doing.
00:11:21.700 | And this is also, it's better at the off mainstream. Like, anything that's not popular, like Spring Boot,
00:11:29.380 | whatever latest version you have that the AI struggles with, you can add more instructions on top that it
00:11:34.340 | 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
00:11:44.660 | the internet speed here, making it slow. So, let's figure out -- this is a nice repo. It's actually
00:11:49.220 | on the -- on the internet. If you go to GitHub.coms.digitarout. And then I put it up.
00:11:59.220 | I think it's still on there. Frontend Vibes template. So, let's see if I'm in. If you want to take a
00:12:05.220 | screenshot for later -- again? How's the screen sharing working? I don't know. I'm not technical.
00:12:15.780 | It's this entire screen, right? So, okay. Yeah, I think every time I switch back to PowerPoint,
00:12:22.500 | it tries to do the mode screen again. Okay. So, GitHub again. Sharing the vibes here. Two minutes.
00:12:35.460 | Okay. We got good. Yeah. So, that's a nice template. Just going to do a quick roundup. So, one, we have
00:12:40.180 | chat modes. That's what I'm highlighted here on the left. GitHub. folder chat modes. And you can define
00:12:47.060 | already tools. You find what tools are in the mode and what's the system prompt. And then they show up
00:12:53.380 | down here. Actually, you can switch out agent. It's a new agent that's now doing test-driven development
00:12:58.820 | for you. And that description here I wrote in another demo earlier about how to do test-driven development.
00:13:04.740 | I didn't know there's a red, green, and anything else. So, that's up to you how you define that mode.
00:13:10.260 | But this basically now guides it. You have to write tests first. And then you write code and that has to pass.
00:13:16.100 | And only ask only move to writing code after I confirm because I want to review the test. And that's
00:13:20.580 | much easier for review to me. You can also create prompts. And that's a way for your team to create
00:13:26.100 | these reusable tasks that are then used across different iterations. It could be a new landing page
00:13:30.900 | for your design team. Like, we need a new micro landing page. This is how you structure it.
00:13:35.220 | And then you can just create it. And lastly, instructions. Those are new. Those are .github/instructions.
00:13:42.020 | And those can outline what specific parts of the code base do.
00:13:45.140 | So, to go back to the slides. Yeah, the thing again. So, you want to bring in workspace instructions.
00:13:54.420 | There's a good document on VS code documentation on customization. If you want to go deeper, there's
00:13:59.220 | instructions files I showed and prompts. You want to make them dynamic for specific parts of the code base.
00:14:05.140 | And you want to start bringing in MCP. Couldn't show up MCP right now because we're running out of
00:14:08.500 | time. Check out my MCP talk from the MCP track if you want to see some of those demos.
00:14:13.620 | Also, VS code has access to problems and tasks. So, if you have your task runners set up in VS code and
00:14:21.220 | your linters properly, it will actually start fixing code as it makes mistakes, which is a really powerful
00:14:27.140 | context to have for the AI. And lastly, if you haven't found that little sparkle icon and then you commit,
00:14:33.060 | it's really important once you start working and having workable code to keep committing that workable code
00:14:38.580 | so you don't get into weird areas where it worked before and now my Vibe coding broke it. And that's always sad.
00:14:44.180 | So, review is important.
00:14:48.260 | Always says on these instructions are important. Start with errors. Committing is important. So,
00:14:53.140 | commit often. Pause the agent to inspect.
00:14:56.100 | Lastly, in 10 seconds, spec-driven really brings this often repeat idea, which you'll see here as well.
00:15:02.900 | You start with a spec, you make a plan, and then you implement the plan.
00:15:06.260 | And that really brings it up to the large scale. And the features we have here, I showed off.
00:15:11.860 | Prompts, more MCPs, and more task-specific tools that you can bring in.
00:15:17.540 | And we're up. Happy to chat more outside.