Vibe Coding at Scale: Customizing AI Assistants for Enterprise Environments - Harald Kirschner

Talk transcript

1. 0:00

   [upbeat music] Uh, gonna dive right in, no introductions.

2. 0:17

   Um, if you wanna follow along, get out your VS Code. Uh, some of the things I'm showing are VS Code Insiders. Who's an Insiders user? Anybody? Oh, I gotta explain that.

3. 0:26

   So Insiders is our pre-release that's built basically by whatever the build- the team landed the day before. It's gonna release actually twice a day, um, and it has all the latest things we're working on.

4. 0:39

   Uh, VS Code otherwise releases on a monthly basis. The next release is coming up next week on the 11th. So,

5. 0:46

   uh, who has done vibe coding? Anybody? Some, some. Who has negative feelings about vibe coding?

6. 0:57

   Okay, some. Uh, so yeah, it's, it's... We wanna fully give into the vibes in this presentation. Uh, it's gonna be a lot of screenshot-able slides to bring home to your team, so get your phones out now.

7. 1:08

   We're gonna embrace exponentials and forget that code even exists, how Andrej Karpathy created that vibe coding idea.

8. 1:16

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

9. 1:33

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

10. 1:52

    It's about speed in simplification. There's creativity in there. And it's really about this fast learning. Hopefully, I can highlight that.

11. 2:01

    Then next, uh, and these are all made-up terms. This is a [laughs] ever-evolving space. You can find-- If you have better words, please bring them to me. But structured vibes br- brings guardrails to how these things actually act.

12. 2:13

    And if you have an LM in this first space, it will just do creative things. Guardrails add it to, uh, br- en- enter this state of maintainability and balance it to bring you some more sustainable code in the end.

13. 2:26

    YOLO vibes are not meant to be used in a long term. Structured vibes are what, where you bring actually the, the enterprise state in, in the end that somebody, you feel comfortable handing it over.

14. 2:38

    And lastly, we have the spec-driven vibes, where I think most of you probably wanna 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, that velocity of everybody feeling the vibes and generating code, but in a-- generating code in a way that, that

15. 2:57

    fits into the code base. So quick YOLO, uh, outliner. Um, as Karpathy termed it, it's all about the outcomes. You don't look at code. You iterate using language. Best even talk to the AI.

16. 3:12

    Then auto-accepting is really part of it. You don't wanna-- You talk to the AI, you look at what it creates, and all the rest just lands. Um, if it ever goes wrong, you just reset everything completely.

17. 3:23

    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.

18. 3:34

    You just wanna explore. It's where creativity really shines, and you can focus on the outcome, and that's, that's a thing where vibe coding really shines. And while you do it, you can learn.

19. 3:44

    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?

20. 3:59

    Have AI explain the code back to you. And lastly, personal projects is, uh, 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.

21. 4:11

    And I'm not shipping it to production, but it's my app.

22. 4:16

    So we can do some demos. I think the easiest way to show it off, um, just open a new VS Code window. This is my Insiders. Uh, if you haven't done it-- Oh, I have an update pending.

23. 4:24

    Oh, this is Insider, so it's every day something new. I'm excited. But not updating now. Okay, um, in--

24. 4:31

    So make sure you're in agent mode, which right now isn't yet the default. We're working on that. Uh- We don't see it. Oh, shoot. Dun, dun, dun. Same problem, I guess.

25. 4:43

    Auto sharing to... Don't monitor. Change. W- Entire screen.

26. 4:55

    Ta-da. Okay. Thank you. Um, yeah. So let's start with the don't care about the code, and one way to do this is Auto Approve. If you look at chat Auto Approve, it's a, with caveats, cool option.

27. 5:10

    Um, and you can enable it also for, for example, your workspace only. Uh, but Auto Approve allows you to avoid all these confirmation buttons that the chat otherwise annoyingly throws at you while you're trying to vibe.

28. 5:23

    So while we're here, let's start this. Um, you see this little microphone button down here, and that is built in to VS Code. It's actually a local model. Nothing leaves your machine, and it's really, uh, it's, it's a great way to just chat with the AI.

29. 5:38

    I-- You can actually set it back that it responds everything back to you. Let's try the, uh, let's make our first app and then go back to the slides 'cause we wanna just make Copilot vibe what we ask for.

30. 5:50

    So, um, actually, the shortcut is, for me, is Command+I. Like that one.

31. 5:56

    Let's make an app for, uh, water hydration tracking in React and Vite. It should use Material UI and follow nice Apple-esque design principles. So yeah. Thank you.

32. 6:10

    Okay, and off it goes. So what, what you see now first is actually we have a create new workspace tool which lets you vibe code, um, a little bit easier.

33. 6:20

    It's... Let's do my-

34. 6:22

    Is this, uh, just Copilot or is this something else?

35. 6:25

    Just Copilot.

36. 6:26

    Okay.

37. 6:26

    Yeah, the Copilot agent mode. It comes with, with that tool. So demo one two, whatever. [laughs] It's vibe coding, so we don't care about the code,

38. 6:36

    but it has to be somewhere. Okay. Um, now because we have the repo, or workspace, it will just continue. And now it will actually just see how it starts it off.

39. 6:47

    Create a React workspace, water hydration tracking app, Material UI, Apple S design. It made a plan in the background, and now it shares the Hyro plan with us, and it goes off.

40. 6:57

    So we can go back to the slides and not care about the code.

41. 7:02

    Uh, npm install, npm dev. So I trust it. It will do stuff. [laughs]

42. 7:06

    And the model used is the one that was at the bottom?

43. 7:09

    Yes. Yeah. So this is using Claude Sonnet 4, which I, I found really good at, um, UI. I, I actually ran the same demo with different models. 4.1 makes it look very wireframey.

44. 7:18

    Uh, 2.5 Pro has a interesting design sense where it always looks somewhat different. And Claude Sonnet makes it always look like a blockchain landing page, uh, if you make it wrong. [laughs]

45. 7:29

    So, so lots of gradients and dark and big letters.

46. 7:34

    So to kind of as we... Seven minutes. So we have, uh, Yolo Toolbox is UH mode. Um, there's a new workspace flow that's really interesting, so if you wa- haven't tried it out yet.

47. 7:43

    Um, it can also trip you off if you ask for something, a new app in an existing project. Make sure sh- make sure you... if you hit that. Voice dictation built in.

48. 7:51

    Visual context I might get to showing around. So once it actually, it starts finishing, it will open up the page in browser preview in VS Code, and I can actually select specific elements.

49. 8:01

    And then the auto-accept, uh, option, there's another auto-accept after delay if you don't have that on in VS Code. There's an auto-save that I really like to drive any live updates in the background that are running.

50. 8:12

    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.

51. 8:22

    Still installing. Our beautiful Wi-Fi making demos easier. Um-

52. 8:29

    It's working. With this approach, so how do you get console errors and things like that? Are you able to-

53. 8:34

    Yes. Actually, when it-

54. 8:35

    Yeah

55. 8:35

    ... when this is runs, and it runs in the terminal commands, and the terminal commands fail, it will actually look at the output.

56. 8:40

    Okay.

57. 8:40

    So if there's any, any dependencies missing, it will go off and install them. It's still like shadcn had some changes in how you install it, for example. It will figure out because the error message is, "Use this package instead," and the next command will use it right.

58. 8:52

    Yeah, but for example, there are console errors that do not show up in the terminal.

59. 8:56

    Terminal. Sometimes it run things in the background terminal, but there's on- ongoing fixes to make it basically always find it. Okay, let's keep going. Um,

60. 9:05

    next one, while runs. Um, it's use vibe co- use a little vibe code. So I really tried out, uh, embrace the exponentials to build that AI intuition. Like what is AI good at?

61. 9:17

    What AI can't do yet? And find that for yourself, just baseline what AI can do. And that's where Yolo vibe coding with like a very open canvas and being able to steer AI is this extremely powerful skill to inform all of other AI usage.

62. 9:33

    Then the second one is use known frameworks. I picked React and Vite in my demo because it gives a nice grounding, and it's something that hasn't changed in a while.

63. 9:40

    So that's a good way. If you use any, any new ones, you wanna be more explicit about how to read the docs and where to find information. And lastly, it's all about it- iteration.

64. 9:50

    So it's a whiteboard. You wanna, uh, wipe things off completely. You wanna start from scratch. You wanna work on specific items. But really about like having this, this iterative workflow outlined.

65. 10:01

    Quick check-in. Still working on some files. Okay, we keep going. So structured vibe coding, 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.

66. 10:14

    It could be a container that you give to developers. So if, if you wanna work on UX, um, bring this template in, and you can just start vibing. That could be even for non-technical people.

67. 10:24

    Just check out this repo or work from this template on GitHub, open in VS Code, engage agent mode and 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, uh, the Copilot flow onto specific conventions that you're already running with.

68. 10:46

    And then lastly, we want, like, custom tools using MCP and other things to make sure, like, if it needs information or needs more context, that can that get. And that's really more high-- more reliable and more consistent than Yolo mode.

69. 10:58

    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 and that allows you to internally we use Fluent UI.

70. 11:08

    So you're gonna use Fluent UI. This is where you get the package, and just it, it's outlined, and it's clear. And so it's really great for bootstrapping these screen-filled 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."

71. 11:23

    Um, and this thing also, it's, it's better at the off mainstream, like anything that's non- not popular, like Spring Boot, whatever latest version you have that the AI struggles with.

72. 11:32

    You can add more instructions on top that it gets it right more often.

73. 11:38

    Gonna show a quick how does it look like. Still vibing.

74. 11:44

    Yeah, I think it's mostly internet speed here making it slow. So let's figure out, um... This is a nice repo. It's actually on the, on the internet. Um, if you go to [REDACTED:url],

75. 11:58

    and then I put it up. I think it's still on there.

76. 12:02

    Frontend Vibes Template. So let's zoom in if you want to take a screenshot for later.

77. 12:07

    I-- Well, now you know this is-

78. 12:08

    Again?

79. 12:09

    Yeah

80. 12:11

    How's this screen sharing working? I don't know. I'm not technical. Um, is this entire screen, right? So- It says you're one on desktop too. Okay. Yeah, I think e- each time I switch back to PowerPoint, it, it tries to do the mode screen again.

81. 12:25

    Okay. So, uh- Where's the GitHub again? GitHub again.

82. 12:33

    Sharing the vibes here. Two minutes. Okay. We got it good. Um, yeah, so that's the nice template. Just gonna do a quick roundup. So one, we have chat modes.

83. 12:41

    That's what I'm highlighted here on the left, GitHub dot, uh, root folder, chat modes, and you can define already tools. You define what, what tools are in the mode, and what's the system prompt, and then they show up down here.

84. 12:53

    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 [laughs] earlier about how to do test-driven development.

85. 13:04

    I didn't know there's a red, green, and, and, uh, for 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 then it has to pass.

86. 13:16

    And only as- only move to writing code after I confirm, because I wanna review the test, and that's much easier for review to me. Um, 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.

87. 13:29

    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 they can just, just create it.

88. 13:37

    And lastly, instructions. Those are new. Those are in .github/instructions, and those can outline what specific parts of the code base do.

89. 13:46

    So to go back to the slides. Yeah. The, the thing again. So you wanna bring in workspace instructions. There's a good document on VS Code documentation on customization. If you wanna go deeper, there's, um, the instructions files I showed and prompts.

90. 14:02

    You wanna make them dynamic for specific parts of the code base, and you wanna start bringing MCP. Couldn't show off MCP right now because we've run out of time.

91. 14:09

    Um, check out my MCP talk from the MCP track if you wanna see some of those demos. Um, also VS Code has access to problems and tasks, so if you have your task runner 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

92. 14:27

    to have for the AI. And lastly, if you haven't found that little spark like in any commit, it's really important once you start working and having workable code to keep committing the, 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.

93. 14:45

    So review's important. Um, always says on these, instructions are important. Start with errors. Committing is important, so commit often. Pause the agent to inspect.

94. 14:57

    Lastly, in ten seconds, spec-driven really brings this often repeated idea, which you'll see here as well. You start with a spec, you make a plan, and then you implement the plan.

95. 15:07

    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.

96. 15:17

    And we're out. Happy to chat more outside. [outro music]