[Full Workshop] Vibe Coding at Scale: Customizing AI Assistants for Enterprise Environments

00:00:00.000 | .

00:00:15.000 | Okay, thank you.

00:00:16.000 | We have Vibe Coding at Scale.

00:00:18.800 | It's a talk, I'm going to give you the Expo in a very short version

00:00:21.200 | without all the hands-on stuff.

00:00:23.000 | So this is whatever, how long this will take.

00:00:25.000 | It's all about Vibe Coding.

00:00:27.000 | We're going to give fully into the Vibe's, embrace Exponential,

00:00:31.000 | and forget that code exists.

00:00:33.000 | It is about focusing on the output and not actually on the code.

00:00:38.000 | And that's where people disagree.

00:00:40.000 | Like, if I don't look at my code as an engineer, what am I?

00:00:44.000 | And what does even embracing Exponentials mean in this case?

00:00:49.000 | So we're going to get into that.

00:00:52.000 | But we're definitely going to forget that code exists.

00:00:55.000 | And I think at the Anthropi conference two weeks ago

00:00:59.000 | was a great chart of how exponentially agents run longer and longer

00:01:03.000 | and generate more and more code.

00:01:05.000 | So slowly forgetting that code exists and you want to review every piece of code,

00:01:10.000 | but building trust and adding guardrails to the AI is what this talk is about.

00:01:16.000 | And this Vibe Coding journey starts kind of initially what most people saw,

00:01:22.000 | just like I build an app in just one day and I put it online and I made money

00:01:26.000 | and then things happened to the app and things got leaked and things were no longer fun.

00:01:33.000 | And that's that fun chaos state of Vibe Coding.

00:01:36.000 | And we're trying to move to professionals then.

00:01:38.000 | And that initial state is what I'm now terming YOLO vibes.

00:01:42.000 | It's the unofficial wording, but it's all about creativity and speed.

00:01:46.000 | And it's a good place to be.

00:01:48.000 | It's because there is instant gratification.

00:01:50.000 | It's getting things up.

00:01:52.000 | It's about learning.

00:01:54.000 | It's not about shipping products.

00:01:58.000 | And so we need to get there.

00:02:00.000 | Second stage is structured wipes.

00:02:02.000 | It's all about balance and sustainability.

00:02:05.000 | Like how do you bring maintainability, more readable code,

00:02:10.000 | like things you might actually, somebody in the end might want to read that code

00:02:14.000 | and you'll have a handover to somebody else.

00:02:16.000 | And you want to have some quality control that what you built is maintainable

00:02:21.000 | and not just a throwaway project.

00:02:24.000 | And lastly, we get to spectrum vibes.

00:02:27.000 | And if you have done anything on Reddit or on blocks in the past,

00:02:31.000 | then the past few weeks you've probably seen people sharing their kind of best practices.

00:02:35.000 | This is how I finally got good value out of AI.

00:02:38.000 | And those best practices are emerging.

00:02:41.000 | But they bring you that scale, reliability, and velocity that comes with that.

00:02:47.000 | While still hopefully giving you some speed and gratification along the way.

00:02:51.000 | But reducing that chaos.

00:02:53.000 | Well, maybe keeping the fun.

00:02:55.000 | So vibe coding initially where we see this outcome first, as I said, it's all about,

00:03:03.000 | you don't even want to look at the code.

00:03:05.000 | Like if you're in an editor and I see actually people framing their experience in AI editors of low code mode.

00:03:12.000 | So they just look at the chat panel and look at whatever comes out of it and that's the outcome first.

00:03:17.000 | It's all about natural language.

00:03:19.000 | It's all about just staying in the flow and working with the AI.

00:03:24.000 | And it's what auto-accepting changes.

00:03:27.000 | So until it maybe no longer works, we might want to undo.

00:03:31.000 | But otherwise we just keep talking to the AI.

00:03:33.000 | I know you did this wrong.

00:03:34.000 | Try again.

00:03:35.000 | Fix it or go to jail is a very popular one.

00:03:40.000 | So you can try all kind of.

00:03:42.000 | But stay in natural language.

00:03:43.000 | Don't be too specific.

00:03:45.000 | So there is a use case for that though.

00:03:48.000 | You want to get a sense for YOLO vibe coding for rapid prototyping.

00:03:53.000 | For proof of concepts where you just want to get something out.

00:03:56.000 | That's where I actually have a ton of conversations with larger companies who want to start a conversation like, how can we do vibe coding?

00:04:04.000 | And for them it's all about getting people who are non-technical to be able to communicate ideas.

00:04:10.000 | It's about UX people just making a mock-up and being able to bring that to a meeting and being able to communicate what they want to do in the mock-up.

00:04:18.000 | It's all about learning.

00:04:20.000 | Like we had last, two weeks ago I built, we had one hour vibe coding on stage live.

00:04:27.000 | And people build games.

00:04:29.000 | And I use 3.js, which I have tried many years ago.

00:04:33.000 | But I haven't used 3.js in a while.

00:04:35.000 | But once I got the code running, I could start getting into the code is structured.

00:04:39.000 | How does it make shapes?

00:04:40.000 | And I could actually understand technology because I have something working.

00:04:44.000 | And that's really the power of getting something up and running that gives you the technology, something hands-on to actually try out.

00:04:52.000 | And of course personal projects.

00:04:54.000 | So I'm not sure how many of you had sit down with somebody who's non-technical and showed them vibe coding and just build your water tracking app or you build something with your kids.

00:05:03.000 | There's all kind of personal projects you can now finally solve over the weekend thanks to Yolo vibe coding.

00:05:12.000 | So let's do some Yolo vibe coding.

00:05:14.000 | This is AI generates.

00:05:16.000 | So images do reflect the vibe.

00:05:18.000 | So this is really about voice input, relaxing.

00:05:21.000 | I guess coffee is in there as well.

00:05:23.000 | But let's get it going.

00:05:25.000 | Okay.

00:05:30.000 | So in VS code for Yolo vibe coding, we're going to start with an empty VS code.

00:05:36.000 | So hit Command + Shift + N.

00:05:39.000 | Sorry?

00:05:40.000 | Are we supposed to use Insiders?

00:05:41.000 | I might show off Insiders stuff, but all of what I'm showing is also unstable.

00:05:45.000 | If you have Insiders, use Insiders.

00:05:47.000 | Insiders is the pre-release version of VS code that ships on a daily basis.

00:05:52.000 | It's like Firefox Nightly, Chrome Canary, Def, or Ships Nightly.

00:05:59.000 | So on your left side, you will have no folder open.

00:06:02.000 | On your right side, you will have co-pilot open.

00:06:06.000 | Everybody got this?

00:06:07.000 | Raise your hand.

00:06:10.000 | Cool.

00:06:11.000 | Awesome.

00:06:12.000 | So who has used agent mode?

00:06:17.000 | Just checking.

00:06:18.000 | So I don't have to explain everything.

00:06:19.000 | Okay.

00:06:20.000 | Cool.

00:06:21.000 | So agent mode, probably the default you want to have set and default with setting.

00:06:26.000 | Clots on the four is great at front and stuff.

00:06:29.000 | So for me personally, my favorite.

00:06:31.000 | Is that big enough?

00:06:32.000 | Yeah.

00:06:33.000 | And now what's interesting, so just one quick tour of how we're going to do vibe coding.

00:06:39.000 | is there's actually this interesting setting here.

00:06:42.000 | Is this zooming?

00:06:43.000 | Yeah.

00:06:44.000 | Is new workspace in VS code.

00:06:46.000 | And for this first round of vibe coding, I want you to go into this tools picker down here

00:06:52.000 | and actually disable scaffold new workspace.

00:06:56.000 | Because it will help you scaffold your workspace, but it will lower the vibes if you're just trying to do HTML coolness.

00:07:07.000 | Oh, yes.

00:07:08.000 | Tools picker down here.

00:07:10.000 | That's the little one.

00:07:11.000 | How to get into this menu?

00:07:12.000 | There's a tool.

00:07:13.000 | There's a tools picker.

00:07:14.000 | Okay.

00:07:15.000 | Uh-oh.

00:07:20.000 | Yes.

00:07:21.000 | It might be.

00:07:22.000 | It was in a different spot before.

00:07:23.000 | If you don't see, check that you're in agent mode.

00:07:26.000 | Otherwise, you don't have tools.

00:07:27.000 | Oh, okay.

00:07:28.000 | Yeah.

00:07:29.000 | Okay.

00:07:29.000 | First step into the panel is switch to agent mode down here.

00:07:34.000 | It might be an ask by default.

00:07:35.000 | Yes, it is.

00:07:36.000 | Cool.

00:07:37.000 | And then second step, go into the tools menu, which only appears in agent mode.

00:07:47.000 | Soon, agent mode is going to be default and this whole where is my tools picker is less of a problem.

00:07:54.000 | Okay.

00:07:55.000 | So, and then what you want to uncheck is this new section.

00:07:59.000 | And we're going to check out new.

00:08:00.000 | Yes.

00:08:01.000 | Do you see nothing?

00:08:02.000 | And I see those two items and nothing else.

00:08:03.000 | That's not enough.

00:08:04.000 | I see more of you.

00:08:05.000 | You might be.

00:08:06.000 | Yes.

00:08:07.000 | I think that's fine.

00:08:08.000 | Let me just.

00:08:09.000 | Shoot.

00:08:10.000 | Okay.

00:08:11.000 | Good answer.

00:08:12.000 | Yes.

00:08:13.000 | This is actually, it's very recent and we're actively working on that.

00:08:15.000 | So, keep it going.

00:08:16.000 | Okay.

00:08:17.000 | So, keep it going.

00:08:18.000 | So, keep it going.

00:08:19.000 | All right.

00:08:20.000 | Okay.

00:08:21.000 | So, let's actually use it.

00:08:22.000 | Let's start with our first Vibe coding using you because it's so hard to disable.

00:08:36.000 | And the way we're going to do this is create a, let's do React Vibe.

00:08:43.000 | And that's first lesson for Vibe coding.

00:08:45.000 | Use stacks that are kind of popular in front end where the AI doesn't have to reason too much

00:08:50.000 | to make wild guesses.

00:08:51.000 | So, React and Vibe are good ways to run a project.

00:08:55.000 | Website.

00:08:56.000 | That for, what do we do?

00:09:02.000 | Hydration tracking.

00:09:04.000 | Water.

00:09:05.000 | Hydration.

00:09:06.000 | Water consumption app.

00:09:10.000 | Simple.

00:09:12.000 | And big accessible UI.

00:09:15.000 | Following.

00:09:16.000 | What do we tell the AI to make it really beautiful?

00:09:19.000 | We tell it.

00:09:20.000 | I like to tell it Apple design principles.

00:09:24.000 | You can infuse it with whatever design sense you have.

00:09:30.000 | Mine is just make it look pretty.

00:09:32.000 | Which always helps.

00:09:33.000 | So, I'm adding that extra.

00:09:35.000 | So, right.

00:09:36.000 | Water tracking.

00:09:37.000 | Hydration.

00:09:38.000 | And that's what we see.

00:09:39.000 | So, we don't give it any constraints.

00:09:40.000 | We don't tell it how many buttons.

00:09:42.000 | Like, is it mobile friendly?

00:09:43.000 | Is it not mobile friendly?

00:09:44.000 | Is it what CSS language to use?

00:09:49.000 | I might actually not do React right.

00:09:51.000 | But might.

00:09:52.000 | Oh, yeah.

00:09:53.000 | Let's do that with material design.

00:09:54.000 | With material.

00:09:55.000 | Material design.

00:09:56.000 | So, yeah.

00:09:57.000 | Now we got the stack.

00:09:58.000 | We got a design direction.

00:09:59.000 | And we've told it to make it pretty.

00:10:00.000 | Okay.

00:10:01.000 | And then hit run.

00:10:02.000 | So, we're now in a no folder state.

00:10:04.000 | So, what's first happening.

00:10:05.000 | It's going to tell us to empty.

00:10:06.000 | To open an empty folder.

00:10:07.000 | Everybody got that?

00:10:08.000 | In their flow.

00:10:09.000 | Okay.

00:10:10.000 | It's going to hit continue.

00:10:11.000 | Now it's going to actually ask me to open a folder.

00:10:12.000 | We're going to make a new folder.

00:10:13.000 | Vibing@naiengineering.

00:10:17.000 | Put that anywhere where you put your stuff.

00:10:18.000 | Where you put your code.

00:10:19.000 | And now it's actually opening a new folder.

00:10:20.000 | And it's going to continue to set up.

00:10:21.000 | And to explain a bit what's happening here.

00:10:22.000 | So, this is using the new command.

00:10:23.000 | So, this is using the new command.

00:10:24.000 | So, this is using the new command.

00:10:25.000 | So, this is using the new command.

00:10:26.000 | So, this is going to open a new folder.

00:10:27.000 | And it's going to open a new folder.

00:10:28.000 | It's going to open a new folder.

00:10:29.000 | And it's going to open a new folder.

00:10:30.000 | And it's going to open a new folder.

00:10:31.000 | And it's going to open a new folder.

00:10:32.000 | And it's going to open a new folder.

00:10:33.000 | And it's going to open a new folder.

00:10:34.000 | And it's going to open a new folder.

00:10:35.000 | And it's going to open a new folder.

00:10:36.000 | Where you put your stuff.

00:10:37.000 | Where you put your code.

00:10:38.000 | And now it's actually opening a new folder.

00:10:41.000 | And it's going to continue to set up.

00:10:43.000 | And to explain a bit what's happening here.

00:10:45.000 | So, this is using the new command.

00:10:47.000 | A new command is optimized for creating projects from scratch.

00:10:51.000 | Which, if you look at the internet of how people evaluate AI coding tools.

00:10:57.000 | Is what every second person does.

00:10:59.000 | Can it make me a water tracking app?

00:11:02.000 | Can it make me a movie database app?

00:11:04.000 | And so, we optimize for this flow.

00:11:06.000 | But also, it makes for this nice Vibe coding from scratch.

00:11:10.000 | Because everybody struggles with what is the right stack.

00:11:13.000 | How do I get started?

00:11:14.000 | And this is what this is here for.

00:11:17.000 | We got the latest.

00:11:18.000 | So, we can now review the commands.

00:11:20.000 | And this is maybe where we do the first tweak of our settings.

00:11:24.000 | So, if you go into settings and search for approve.

00:11:27.000 | You will find the auto-proof.

00:11:30.000 | And that's the first rule of Vibe coding.

00:11:33.000 | As we said, we don't want to look at code.

00:11:37.000 | And we just want to have the AI do stuff.

00:11:39.000 | So, what you can do.

00:11:42.000 | In my case, I'm going to actually go over to workspace.

00:11:45.000 | From user to workspace.

00:11:46.000 | And that means that setting is only set for this workspace.

00:11:49.000 | Which is the safest way to use this setting.

00:11:52.000 | So, use with caution.

00:11:54.000 | I'm going to auto-proof.

00:11:55.000 | Which means all of these continue buttons won't happen anymore.

00:11:59.000 | And we're just going to get results.

00:12:01.000 | So, check that box.

00:12:03.000 | Close it again.

00:12:04.000 | And we can hit continue here.

00:12:06.000 | This is using Vibe.

00:12:08.000 | This is fine.

00:12:09.000 | Now we're going to stop worrying about the code.

00:12:11.000 | But I can still read the plan.

00:12:13.000 | So, install Material AI.

00:12:14.000 | Dependencies.

00:12:15.000 | Create hydration tracking.

00:12:16.000 | Apple-inspired design.

00:12:17.000 | And project structure.

00:12:18.000 | So, it's running commands.

00:12:22.000 | Wait.

00:12:23.000 | Is there files already in here?

00:12:29.000 | Okay.

00:12:30.000 | Cool.

00:12:31.000 | What did it create?

00:12:41.000 | Oh.

00:12:42.000 | Where does the music come from?

00:12:48.000 | Because I already did something.

00:12:49.000 | Cool.

00:12:50.000 | Okay.

00:12:51.000 | Yes.

00:12:52.000 | Keep going.

00:12:53.000 | In this case, it tried to create something.

00:12:56.000 | And then it ran another terminal command.

00:12:59.000 | Keep going.

00:13:00.000 | That's fine.

00:13:01.000 | Is it doing stuff for you?

00:13:04.000 | Do you see things popping up?

00:13:06.000 | I can't find the auto-proof.

00:13:10.000 | Oh.

00:13:11.000 | The auto-proof?

00:13:12.000 | It doesn't look like it's in the.

00:13:14.000 | It's not insiders.

00:13:17.000 | It's not insiders.

00:13:18.000 | I'm not using insiders.

00:13:19.000 | I guess I should be.

00:13:20.000 | Oh, wait.

00:13:21.000 | Did we?

00:13:22.000 | I thought it was in the last version.

00:13:24.000 | I have insiders.

00:13:25.000 | I just haven't switched back.

00:13:26.000 | Okay.

00:13:27.000 | Okay.

00:13:28.000 | Okay.

00:13:29.000 | Let me check in VS Code stable.

00:13:38.000 | Yeah, that's my problem of not being enough in stable.

00:13:43.000 | I shouldn't run workshops.

00:13:44.000 | Okay.

00:13:45.000 | Wait.

00:13:46.000 | Why is that different than what came from Jesus?

00:13:50.000 | So you found it in.

00:13:51.000 | Yeah.

00:13:52.000 | Thank you so much.

00:13:53.000 | There's two ways to get to the same thing, but it's a different menu.

00:13:54.000 | But it looks.

00:13:55.000 | Oh, it just.

00:13:56.000 | Anyway.

00:13:57.000 | Yeah.

00:13:58.000 | The settings.

00:13:59.000 | There's settings from the bottom and settings from the top and they're not the same.

00:14:14.000 | Okay.

00:14:15.000 | Okay.

00:14:16.000 | I'm happy to go figure that later.

00:14:18.000 | The settings up here.

00:14:19.000 | The one.

00:14:20.000 | The one.

00:14:21.000 | I used the gear.

00:14:22.000 | I used the gear setting from the bottom.

00:14:23.000 | Yeah.

00:14:24.000 | It didn't work.

00:14:25.000 | But anyway.

00:14:26.000 | The settings.

00:14:27.000 | You got it.

00:14:28.000 | Okay.

00:14:29.000 | Where's the other one?

00:14:30.000 | Like the one in that.

00:14:32.000 | Oh.

00:14:33.000 | In the other setting.

00:14:34.000 | Yeah.

00:14:35.000 | Yeah.

00:14:36.000 | I have customized my UI too much as well.

00:14:38.000 | Cool.

00:14:39.000 | Question.

00:14:40.000 | Is there a way for this to run?

00:14:43.000 | I know you keep telling you to run this main terminal.

00:14:46.000 | But like cursor, it gives you those.

00:14:50.000 | It gives you those.

00:14:51.000 | It actually had to run.

00:14:52.000 | Yes.

00:14:53.000 | That's why I think.

00:14:54.000 | I should have said auto-approved before.

00:14:56.000 | So it's active for the chat session.

00:14:57.000 | But this is the setting I just showed.

00:14:59.000 | It's the auto-approved.

00:15:00.000 | So all the continue buttons are basically gone.

00:15:03.000 | And it just auto-approves.

00:15:04.000 | Yeah.

00:15:05.000 | Yeah.

00:15:06.000 | Yeah.

00:15:07.000 | And for MCP tools, we actually do have dropdowns to allow, always allow for session and always

00:15:15.000 | allow for workspace and, or not always allow.

00:15:18.000 | So there's some more fine grained things.

00:15:19.000 | We're rolling out to more tools.

00:15:21.000 | But for, yeah.

00:15:22.000 | It still prompts you to continue when it works.

00:15:25.000 | Yeah.

00:15:26.000 | I think it's the auto-approved is not applied to the current session.

00:15:28.000 | That's, I showed it too late.

00:15:30.000 | I should have done it the other way around.

00:15:32.000 | Okay.

00:15:33.000 | We got some material design coming in.

00:15:37.000 | And this is where you need to get your coffee and just wait.

00:15:41.000 | Okay.

00:15:42.000 | That's a good idea.

00:15:46.000 | Let's do that.

00:15:47.000 | Okay.

00:15:48.000 | Open your window.

00:15:49.000 | Okay.

00:15:53.000 | What prompt did we use?

00:15:55.000 | Create a write.

00:15:56.000 | So, okay.

00:15:57.000 | Now in the new window, I'm going to do auto-proof first.

00:16:00.000 | A proof.

00:16:03.000 | Auto-proof is already on.

00:16:06.000 | That's good.

00:16:07.000 | This is another window now.

00:16:09.000 | And we're going to do the same thing.

00:16:10.000 | And we're actually going to use material design.

00:16:13.000 | I guess and is still out there, right?

00:16:14.000 | And?

00:16:15.000 | Or fluid.

00:16:16.000 | Fluent.

00:16:17.000 | That's the Microsoft one.

00:16:19.000 | Let's see what that looks like.

00:16:21.000 | Again, it's going to prompt me for folder.

00:16:24.000 | Vibing@aie2.

00:16:34.000 | And this is, I think, one of the key takeaways.

00:16:37.000 | Like, trying out different ways to get to the same result is where vibe coding really shines.

00:16:43.000 | Is continue.

00:16:46.000 | Is just trying.

00:16:47.000 | I had really, really quick success of just, like, what are different signup flows that we can create.

00:16:52.000 | Like, create three different versions of this design to explore what this could look like.

00:16:56.000 | Okay.

00:16:57.000 | It installed.

00:16:58.000 | It's updated in the index in the one script.

00:17:02.000 | And that's where it gets confusing.

00:17:03.000 | If you have multiple open now at the same time, you've got to figure out what's running what.

00:17:07.000 | And now this flow actually over here runs without any confirmation.

00:17:10.000 | So we set auto-approved in the correct order.

00:17:13.000 | And it's now just creating byte, installing, installing Fluent.

00:17:23.000 | And notice that we got the wrong Fluent because there's a dependency.

00:17:27.000 | Now it's fixing those.

00:17:31.000 | Can you show one more time how to do that auto-approved side?

00:17:34.000 | I'm sorry.

00:17:35.000 | Yes.

00:17:36.000 | So the way I did command, comma, is the quick way.

00:17:41.000 | So I don't use menus.

00:17:42.000 | I should use menus.

00:17:44.000 | So you go up here.

00:17:45.000 | I have my settings up here.

00:17:47.000 | Most probably have them on the other lower side.

00:17:50.000 | And you go in here and go into settings.

00:17:53.000 | And this is what it should look like.

00:17:56.000 | Do your settings look like this?

00:17:58.000 | And then if you look for approve.

00:18:01.000 | Sorry.

00:18:02.000 | Can't type auto-approved.

00:18:05.000 | Do you see it?

00:18:08.000 | Do you see it?

00:18:10.000 | It might be insiders.

00:18:15.000 | It's all blur.

00:18:17.000 | We're shipping on a monthly basis.

00:18:19.000 | And I thought we tweeted about it end of last month.

00:18:21.000 | So we found it.

00:18:25.000 | Yeah.

00:18:26.000 | Yeah.

00:18:27.000 | Yeah.

00:18:28.000 | Yeah.

00:18:29.000 | Yeah.

00:18:30.000 | Yeah.

00:18:31.000 | Yeah.

00:18:32.000 | Yeah.

00:18:33.000 | Yeah.

00:18:34.000 | Yeah.

00:18:35.000 | Yeah.

00:18:36.000 | The good thing.

00:18:37.000 | The person who owns the AI terminal integration just came back from it.

00:18:40.000 | paternity leave.

00:18:41.000 | So we're back on the game.

00:18:43.000 | Yeah.

00:18:44.000 | But there is definitely.

00:18:45.000 | we've been looking at.

00:18:46.000 | how to allow a specific.

00:18:47.000 | terminal commands.

00:18:48.000 | So.

00:18:48.000 | Yeah.

00:18:49.000 | Yeah.

00:18:50.000 | Yeah.

00:18:51.000 | Yeah.

00:18:52.000 | Yeah.

00:18:53.000 | Yeah.

00:18:54.000 | Yeah.

00:18:55.000 | Yeah.

00:18:56.000 | Yeah.

00:18:57.000 | Yeah.

00:18:58.000 | The good thing.

00:18:59.000 | The person who owns the AI terminal integration just came back from paternity leave.

00:19:08.000 | So we're back on the game.

00:19:10.000 | But the.

00:19:11.000 | There is definitely.

00:19:12.000 | We've been looking at how to allow specific terminal commands.

00:19:16.000 | And that's how most tools do it.

00:19:18.000 | But if you think about the scary parts of chaining and running multiple commands in one command.

00:19:23.000 | So terminals are not as.

00:19:25.000 | Predictive as you would think and how you can easily allow list things.

00:19:29.000 | So if you're mostly thinking about the.

00:19:31.000 | How to do it right.

00:19:32.000 | Right.

00:19:33.000 | Okay.

00:19:34.000 | And I got two vibe coding sessions going on here.

00:19:39.000 | And hide this one.

00:19:40.000 | This is not.

00:19:41.000 | This is for tomorrow.

00:19:42.000 | This is vibing is happening.

00:19:45.000 | So you see it.

00:19:46.000 | It creates an app.

00:19:47.000 | TSX.

00:19:48.000 | It creates an app.

00:19:49.000 | CSS.

00:19:50.000 | It also creates copilot instructions.

00:19:52.000 | Who's been using copilot instructions before?

00:19:55.000 | Yeah.

00:19:56.000 | So that's.

00:19:57.000 | That's one way.

00:19:58.000 | This out of the box experience.

00:19:59.000 | Just.

00:20:00.000 | Does things for you.

00:20:01.000 | It.

00:20:02.000 | Comes with instructions.

00:20:03.000 | Baked in.

00:20:04.000 | Which is nice.

00:20:05.000 | It understands.

00:20:06.000 | Which stack you're using.

00:20:07.000 | That's mostly about it.

00:20:08.000 | It already captured my design principles.

00:20:10.000 | That I eloquently put in.

00:20:12.000 | Please make it look like apple.

00:20:14.000 | And now it's actually.

00:20:15.000 | There's a clean minimal intuitive interface.

00:20:18.000 | Consistent UI.

00:20:19.000 | And everything else.

00:20:22.000 | It broke down the technical stack.

00:20:24.000 | Even things I haven't mentioned.

00:20:25.000 | Like CSS.

00:20:26.000 | And responsive design.

00:20:27.000 | So it calls out some of the assumptions.

00:20:29.000 | That AI will fill in.

00:20:30.000 | If you give it a high level task.

00:20:36.000 | Okay.

00:20:37.000 | This is still working on the index CSS.

00:20:39.000 | And.

00:20:40.000 | The other one.

00:20:41.000 | Is working on.

00:20:43.000 | The HTML file.

00:20:44.000 | Yeah.

00:20:45.000 | It would just do it for you.

00:20:50.000 | It would usually do it.

00:20:51.000 | As it.

00:20:52.000 | Creates.

00:20:53.000 | The project.

00:20:54.000 | I haven't typed anything else.

00:20:55.000 | So far.

00:20:56.000 | And we're just.

00:20:57.000 | We're just vibing.

00:20:58.000 | It.

00:20:59.000 | Here.

00:21:03.000 | Created one.

00:21:04.000 | For a page.

00:21:06.000 | Let me see if it.

00:21:07.000 | Created one both.

00:21:08.000 | I didn't see it.

00:21:09.000 | Okay.

00:21:10.000 | There we go.

00:21:11.000 | Intro.

00:21:12.000 | Our first app is done.

00:21:13.000 | Hydration tractors.

00:21:14.000 | Stay healthy.

00:21:15.000 | Stay hydrated.

00:21:16.000 | Today's progress.

00:21:17.000 | We're on a quick add.

00:21:18.000 | 500 milliliters.

00:21:19.000 | And it went with.

00:21:21.000 | Metrics.

00:21:22.000 | Isn't that beautiful?

00:21:23.000 | Just how I wanted it.

00:21:26.000 | Maybe I got my.

00:21:27.000 | Accent.

00:21:28.000 | I don't know.

00:21:29.000 | You can do plus minus.

00:21:31.000 | It's interesting how mine looks different.

00:21:33.000 | Yeah.

00:21:34.000 | I know.

00:21:35.000 | So does.

00:21:36.000 | Does everybody looks as nice as mine?

00:21:38.000 | Do you already see yours?

00:21:40.000 | Okay.

00:21:41.000 | Yeah.

00:21:42.000 | Yours better?

00:21:43.000 | Yeah.

00:21:44.000 | Yeah.

00:21:45.000 | Yeah.

00:21:46.000 | That's.

00:21:47.000 | Like a very wide open by coding workshop.

00:21:49.000 | I ran these a few times.

00:21:51.000 | And this is probably one of the nicer ones.

00:21:53.000 | So.

00:21:54.000 | But it's also like actually running these with different models.

00:21:57.000 | And getting a sense of how good each model is at design.

00:22:01.000 | And having design sense without me telling it how to do everything.

00:22:05.000 | And Claude is definitely usually rocking the icons.

00:22:10.000 | It got the colors really nicely.

00:22:12.000 | So.

00:22:13.000 | That's been great.

00:22:14.000 | This is a really nice app.

00:22:16.000 | So now.

00:22:17.000 | Next on.

00:22:18.000 | Because we're visual.

00:22:19.000 | Like we haven't even checked the code.

00:22:20.000 | We haven't read the CSS.

00:22:21.000 | We haven't looked at the TSX.

00:22:22.000 | Like is this the doing.

00:22:23.000 | We're just doing functional programming.

00:22:24.000 | Like how does it handle the state?

00:22:26.000 | I don't.

00:22:27.000 | I don't care.

00:22:28.000 | It works.

00:22:29.000 | So now you can actually do a new feature we landed.

00:22:32.000 | You can now say.

00:22:35.000 | Work visually.

00:22:36.000 | So I can now say this header up here.

00:22:38.000 | I don't know what it's called.

00:22:39.000 | Like whatever progress indicator.

00:22:42.000 | Let's make this.

00:22:47.000 | More animated.

00:22:50.000 | Adding particles.

00:22:52.000 | Maybe.

00:22:56.000 | That's good.

00:22:57.000 | So movie paper.

00:22:58.000 | So this is all.

00:22:59.000 | Is this material design?

00:23:00.000 | This is material design.

00:23:01.000 | Yeah.

00:23:02.000 | Did you copy the component name?

00:23:04.000 | I didn't.

00:23:05.000 | I hit start down here.

00:23:06.000 | If you have the browser preview open.

00:23:08.000 | Yeah.

00:23:09.000 | Did it open fail?

00:23:10.000 | Cool.

00:23:11.000 | So this is to point out two features.

00:23:14.000 | So one is in this flow at some point.

00:23:17.000 | It basically started the task.

00:23:19.000 | It did npm run def.

00:23:22.000 | And then the next step it did.

00:23:25.000 | It opens simple browser.

00:23:26.000 | And simple browser is this VS code in browser preview we have.

00:23:32.000 | And it will just.

00:23:33.000 | And what we're injecting here.

00:23:35.000 | What just went away.

00:23:36.000 | Is a little toggle.

00:23:38.000 | You can now use.

00:23:39.000 | To select specific elements that we then attach as a visual reference.

00:23:43.000 | Reference.

00:23:44.000 | And as CSS into the current chat.

00:23:46.000 | So if I scroll back down.

00:23:48.000 | Here.

00:23:49.000 | I see what's being attached.

00:23:50.000 | I actually click it.

00:23:51.000 | So everything you see under a message.

00:23:53.000 | Is in the context.

00:23:55.000 | The element screenshots.

00:23:56.000 | Somehow didn't.

00:23:57.000 | Didn't make it through.

00:23:58.000 | But this one made it in.

00:24:00.000 | And that's basically the.

00:24:01.000 | The CSS description.

00:24:02.000 | And HTML.

00:24:03.000 | Of the element we attached.

00:24:05.000 | So I didn't have to.

00:24:06.000 | Describe the element.

00:24:07.000 | Where it sits.

00:24:08.000 | It just did it for me.

00:24:10.000 | for me. Okay. Ran into snacks. We don't care about that. Let's check the other one. Ooh.

00:24:19.560 | Number two, fluent design. This is what it came up with. It's a little bit plain. This

00:24:27.880 | is sad. Okay. At least it has a goal reach. That's nice. And it has recent entries too.

00:24:34.480 | It made similar assumptions on what we want. So feature-wise, it somehow got to the same conclusion,

00:24:40.920 | but design-wise, this is definitely more corporate. Yeah. So that's the simplicity of Vype coding

00:24:49.840 | and using the new tool out of the box. If you are an insider so you can disable new tool,

00:24:56.840 | it's easier to do like a single file HTML thing because new tool is definitely biased towards

00:25:01.420 | using npm and installing packages. So it always ends up a little bit more complex.

00:25:07.860 | Do you work with the insiders team at all?

00:25:14.300 | Yes. The team I work on. Hi, I'm Harold. I work on VS Code.

00:25:16.300 | Sorry. It would be really cool to understand when you open up for new insiders, what are

00:25:22.300 | the new things that just changed? Like a quick diff somehow. If someone could show me, like,

00:25:28.740 | I have both of them on the machine. Right.

00:25:30.740 | And I use them both. But then I, like, fall behind a couple days back. It's like, what are the new things and why I should be using insiders?

00:25:37.180 | Yes. So the best way to stay on top of what's new is, so 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.

00:25:52.180 | We should make an AI to summarize it.

00:25:54.540 | That's a great idea. We're going to make an MCP server that summarizes what land is.

00:25:58.540 | Yeah. Yes. I like that. I like that. I like that. I like that. Let's do it for the next demo.

00:26:04.540 | Yeah, the next five, 30.

00:26:05.540 | Next demo. Okay. So what do we have in our YOLO vibing toolbox? We have the agent, which sometimes is hard to find. Now you're all on the agent, so that's great. It's all about -- I actually didn't show that. I could have shown that. It's --

00:26:22.180 | different panel styles. So if I go back here, you can actually move this into the editor, which is nice. So some people like that, more space for your chat.

00:26:34.540 | You can also -- if I go back into my panel -- Oh, I moved into the dropdown 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 code. So you can use

00:26:52.180 | all the window management things. Can you run them in separate windows?

00:26:55.540 | Yes. Wait. How did you know?

00:26:58.540 | Okay, where did we go? In your window. There you go.

00:27:04.540 | Now you have a chat in its own window. You can put it on your own monitor. So feature can succeed. And you can actually pin it on to be top.

00:27:13.040 | So now if I run this, and I can close this --

00:27:20.040 | let's move that away first. So I can accept this. This we're all going to keep.

00:27:25.040 | 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.

00:27:39.040 | Yeah. So that's one way that you can really manage the space how you want it. New workspace flow we showed. So it's really this optimized CLI first.

00:27:51.040 | Good question.

00:27:52.040 | Okay. Okay. Yeah. And then voice dictation I haven't shown. Who has tried voice dictation in GitHub Copilot already?

00:27:59.040 | Okay. Magic moment of add a dark mode, please. And maybe give it a cool name that works with a younger audience who needs to drink more.

00:28:18.040 | Maybe my kids. Make it for kids. So a little more kids friendly. Thank you. Bye.

00:28:24.040 | Okay. So Command-I is actually the default shortcut. It's a local model, which is great for privacy. And it's really fast. It's accurate. And there's an option as well, when you use Command-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 --

00:28:51.040 | don't put that coffee down and just keep vibing. There's a Hey Copilot as well. I think we did at some point, which I haven't used in a while.

00:29:02.040 | Okay. I said all that. Keyboard shortcuts. There's a keyboard shortcuts. You want to customize it to actually hold down while you talk and then let go.

00:29:12.040 | Visual context I showed attaching. It's great for wireframes. The in-letter preview gets hot reload. It just works. And you can attach the elements using that little send button.

00:29:23.040 | And then auto-accept. I showed you auto-proof tool. There's also an auto-proof tool setting. There's also an auto-accept after delay. If you don't have that on, I love auto-save.

00:29:35.040 | It's a great VS Code feature that's already working after delay or after focus change. It will just save it for you. And what I haven't showed -- let's see if this works here -- is the undo button.

00:29:47.040 | Is this still going? What is this still doing? I forgot. Oh, this is adding these particles. Cool. It still worked on that. Good Copilot.

00:30:01.040 | 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 -- no, look at bubbles. Okay. I don't like it. Undo up here. Those are basically our checkpoints.

00:30:24.040 | 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.

00:30:30.040 | But if you already accepted stuff or if you want to go back to something like this is -- I like these particles, but for V0 -- oh, that's just beautiful. I love it.

00:30:40.040 | We don't need that. Then you can also bring that back. Just need to see that again. That was really nice. Okay. So for people who don't like particles, we can now undo.

00:30:52.040 | And it's now back to the original version. So it has stages for each of the work it did.

00:30:58.040 | And you can easily go back and forth to see the before and after as well. Yeah.

00:31:03.040 | But in VibeCode, you don't want to look at the code because we don't look at the output.

00:31:09.040 | Okay. That's the YOLO toolbox. And I think, as I mentioned before, you want to try it out just to get into DFT AI.

00:31:17.040 | Like, in my case, I mentioned, I like getting a sense of how good AI is at design.

00:31:21.040 | Like, can I just give it wide tasks to explore a space and it'll, like, come up with something interesting?

00:31:26.040 | Or do you need to -- how detailed do I need to be?

00:31:29.040 | 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?

00:31:36.040 | Next one is known frameworks. We went with Vibe, material design, things that are kind of off the shelf and haven't changed in a long time in a large scale.

00:31:48.040 | So you want to use something that's popular and has been consistent.

00:31:52.040 | And lastly, we use it as a whiteboard.

00:31:54.040 | We showed just attaching a visual element, change this, add some particles.

00:31:59.040 | It's really about not becoming too attached with whatever you're working on, but being able and willing to throw it out and start from scratch if things go wrong.

00:32:10.040 | Structured Vibe coding is this middle stage, tries to balance the YOLO, the fun and chaos with a more structured approach.

00:32:22.040 | And there, it's -- I think it's the biggest impact I see from talking to customers on, like, this is how Vibe coding can work for us.

00:32:33.040 | This is where we can bring some non-technical in, give them a good starter template that has a consistent tech stack that comes with clear instructions for the LLM and how to work on it and keeps it in its actual guardrails.

00:32:48.040 | And already brings in some custom tools that bring in expert domain knowledge or internal knowledge that you would need to work on as code base.

00:32:58.040 | So that's really kind of YOLO on guardrails.

00:33:01.040 | It's faster and gives you more consistent results.

00:33:03.040 | So you don't end up with something, oh, it used material design, but it should have used Fluent or it should have added dark mode and should have been responsive.

00:33:12.040 | All of that can already be baked into the instructions.

00:33:15.040 | So I see a lot of companies bring that into their bootstrapping for Greenfield projects.

00:33:20.040 | So we have something -- and you can oftentimes -- you go into a meeting and you have a product that looks already finished because you Vibe coded it with your go-to stack and uses your internal design system, so it already looks way more polished.

00:33:35.040 | And the last piece, I think, out of mainstream workloads is where YOLO, by default, will always bias towards whatever is top of the training stack.

00:33:45.040 | With this one, you can then customize it further down to internal stacks, internal workloads, internal deployment infrastructure that makes it work better.

00:33:54.040 | So let's do structured Vibe coding.

00:33:58.040 | This is now -- the image, as I explained, it now has wireframes and more charts.

00:34:04.040 | So that's what makes it more structured.

00:34:06.040 | There we go.

00:34:10.040 | It's open.

00:34:11.040 | So what I'm going to do now, I think I'm going to push this -- oh, it's still running.

00:34:23.040 | Let's see if this runs.

00:34:24.040 | I did create this Vibe coding.

00:34:28.040 | So I do have another one that I can share.

00:34:30.040 | Just look at this one, and I'm going to push it to GitHub.

00:34:35.040 | It's going through.

00:34:40.040 | You can be fine.

00:34:41.040 | Cool.

00:34:42.040 | Front-end Vibe.

00:34:43.040 | Perfect.

00:34:44.040 | This is all Vibe, so we're going to make this live.

00:34:48.040 | This is commit.

00:34:50.040 | And then -- yeah.

00:34:53.040 | Oh, yeah.

00:34:54.040 | This is one.

00:34:55.040 | Who has been using this commit button here?

00:34:57.040 | So Copilot will write your commit message.

00:35:01.040 | Done.

00:35:04.040 | Looks good.

00:35:05.040 | And sync changes.

00:35:06.040 | And I'll share the repository.

00:35:13.040 | This repository might still be an old name.

00:35:14.040 | Let me see.

00:35:14.040 | Yeah.

00:35:15.040 | Probably.

00:35:16.040 | Let me just check where it sits.

00:35:17.040 | Because I forgot where it sits.

00:35:18.040 | Oh, it's perfect.

00:35:19.040 | SleepVibes.

00:35:20.040 | This is one of my Vibe exercises.

00:35:21.040 | Okay.

00:35:22.040 | What's your name for browser window?

00:35:22.040 | For browser window?

00:35:23.040 | Yeah.

00:35:24.040 | For browser window?

00:35:24.040 | Feeling your --

00:35:25.040 | Oh.

00:35:26.040 | Which?

00:35:27.040 | The --

00:35:28.040 | It just opens sometimes.

00:35:29.040 | Oh, yes.

00:35:29.040 | Yes.

00:35:30.040 | Yes.

00:35:31.040 | Um, yes.

00:35:32.040 | Um, yes.

00:35:33.040 | The --

00:35:34.040 | The --

00:35:35.040 | The --

00:35:36.040 | So I forgot where it sits.

00:35:37.040 | Oh, it's perfect.

00:35:38.040 | SleepVibes.

00:35:39.040 | This is one of my Vibe exercises.

00:35:40.040 | Okay.

00:35:41.040 | This --

00:35:42.040 | What's your name for browser window?

00:35:43.040 | In the VS Code?

00:35:44.040 | Feeling your --

00:35:45.040 | Oh.

00:35:46.040 | Which --

00:35:47.040 | It --

00:35:48.040 | The --

00:35:49.040 | It just opens sometimes.

00:35:50.040 | Oh, yes.

00:35:51.040 | Yes.

00:35:52.040 | Um, yes.

00:35:53.040 | The simple browser.

00:35:54.040 | So we're going to simple browser show.

00:35:59.040 | That's it.

00:36:00.040 | Okay.

00:36:01.040 | The repo we're pulling down is --

00:36:06.040 | Whoa.

00:36:07.040 | Whoa.

00:36:08.040 | This one.

00:36:09.040 | SleepVibes.

00:36:10.040 | It doesn't have a dev container, but it's only in Node.js does.

00:36:26.040 | So it shouldn't be too gnarly.

00:36:28.040 | We want to get the agent to do some special magic.

00:36:33.040 | You can pull this or should we do --

00:36:35.040 | Should I try it?

00:36:39.040 | It's a --

00:36:41.040 | It's a --

00:36:42.040 | It's a good clone.

00:36:43.040 | You can ask the agent to get clone it for you.

00:36:46.040 | Yes.

00:36:47.040 | I'm curious if there was a special tool that would be more than that.

00:36:52.040 | It's the user --

00:36:53.040 | Oh, sorry.

00:36:55.040 | Digiderald.

00:36:56.040 | That's me.

00:36:57.040 | Yes.

00:36:58.040 | Yes.

00:36:59.040 | Okay.

00:36:59.040 | And then npm install on it.

00:37:16.040 | And then --

00:37:17.040 | Yeah.

00:37:18.040 | It would have prepared better.

00:37:19.040 | It would have been a code space and a dev container and you just click open in code spaces and things work.

00:37:28.040 | Come to my next show and then we'll get that fixed.

00:37:33.040 | Yeah.

00:37:34.040 | Let me just open the code space to see.

00:37:40.040 | Now I'm curious if it just works.

00:37:45.040 | Anybody that's been using code spaces on GitHub?

00:37:48.040 | Not many.

00:37:49.040 | Okay.

00:37:50.040 | Occasionally.

00:37:51.040 | Yeah.

00:37:52.040 | Yeah.

00:37:53.040 | Yeah.

00:37:54.040 | Yeah.

00:37:55.040 | Yeah.

00:37:56.040 | Yeah.

00:37:57.040 | between insiders, the regular version, all the plugins, and some of them don't work in...

00:38:02.040 | Out of the bug-in, yeah. Yeah.

00:38:05.040 | If everything just works the same, would it be?

00:38:07.040 | Yes, it mostly does, right? But mostly, yeah.

00:38:10.040 | It's 95% there, but it's the 5% where when something doesn't work, you just go back to the other tool.

00:38:16.040 | Yeah.

00:38:18.040 | So VS Code is offering me to reopen it in a container. Is it a data container?

00:38:25.040 | You can try. I'm actually not running it in a container, but if you want to...

00:38:30.040 | That's all right.

00:38:31.040 | The container is just a Node.js one. And it should work, too. I did add a container, see?

00:38:37.040 | You just did one.

00:38:38.040 | I vibe-coded my container, too.

00:38:43.040 | I can now check. So, have you ever wondered what you did on a project?

00:38:48.040 | So, this is where I created my container. This is where I just asked GitHub Copilot to update my definition.

00:38:55.040 | DevContainer. Just look at my code base and update my DevContainer. So, I did a good job here.

00:39:00.040 | I should have maybe remembered that I did that as well.

00:39:08.040 | Okay. If we're ready, meanwhile, while you clone, while you npm install, anybody got it working already?

00:39:16.040 | Still? Okay. Cool. I'll give the tour of what we have.

00:39:20.040 | So, one is we, again, start with good Copilot instructions. And they live in .github/copilot-instructions.md.

00:39:32.040 | It's a markdown file that's included with all your agent requests, all your chat requests, all your inline chat requests.

00:39:39.040 | Just Copilot basically gives a grounding foundation knowledge about your code base.

00:39:46.040 | And sometimes they feel a bit repetitive, like, depending on -- I saw some demos of, like, use -- basically, it repeats linting rules that you expect the AI to just follow anyways.

00:39:58.040 | But I like -- my go-to is just a one-liner on what's your stack. 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 it uses.

00:40:16.040 | Okay. Question?

00:40:17.040 | I was experimenting with just figuring out what would be the best way to have that be a standard that gets included in. But, like, let people -- not mess with that. Like, give people some coding structure.

00:40:30.040 | Yeah.

00:40:31.040 | If you have a whole team of live coders, but you probably don't want them touching that.

00:40:35.040 | 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.

00:40:43.040 | Yeah.

00:40:44.040 | You can put this in your user settings as well.

00:40:47.040 | You probably don't want it with each app. You probably want it as a different repo, right?

00:40:51.040 | You could do it, yeah.

00:40:52.040 | A set of a way that you code and then each app codes. I've been thinking about that, too.

00:40:56.040 | I've been really thinking about it.

00:40:57.040 | Yes.

00:40:58.040 | So, I've been trying to convince my peers on a GitHub site this should be an organizational setting that people can set easier on, like, an organizational level.

00:41:06.040 | And, like, something -- as a team, you can select which ones you want to use.

00:41:11.040 | So, we're working on that discovery sharing.

00:41:14.040 | Is there always one file or can you opt in for, like, because if you have different languages, different settings, different things you're building?

00:41:19.040 | Yes.

00:41:20.040 | Great question.

00:41:21.040 | It's an API.

00:41:22.040 | Yeah.

00:41:23.040 | So, we have this one now.

00:41:24.040 | These are new instructions.

00:41:26.040 | So, these become rather monolith and large and unwieldy.

00:41:32.040 | And now, just to point out here before I go to the new ones, I do also guide which tools to use.

00:41:39.040 | I do have my first MCPs in here.

00:41:41.040 | And I already tell it for a front-end Q&A review.

00:41:44.040 | Use the browser tools that come from Playwright.

00:41:46.040 | Research, I use Perplexity.

00:41:48.040 | I have context 7 in here, which has library docs.

00:41:52.040 | And it keeps using this ID tool to look up IDs.

00:41:56.040 | But I just gave it these are the IDs you should use.

00:41:58.040 | Don't use the other tool.

00:42:00.040 | So, there's ways you can already guide it to specific tools you want it to apply when needed.

00:42:06.040 | The rest is just syntax formulating, optimizations, key conventions.

00:42:12.040 | Yeah.

00:42:13.040 | And then the other format we have is .github/instructions/name.instructions.md.

00:42:20.040 | And those have this front-matter syntax that's becoming more popular for rules of what files it should apply to.

00:42:29.040 | So, they start to be scoped with a glob pattern.

00:42:32.040 | And then, right now, they're limited to being applied.

00:42:36.040 | You actually have to have the file in context.

00:42:38.040 | So, a TypeScript file would only be applied if I actually do have a TypeScript file in here.

00:42:44.040 | Or I do have one open and then I enable this context and then it would be applied.

00:42:50.040 | But if I only have this right now, which means this isn't included, it wouldn't actually apply the rule.

00:42:56.040 | So, we're fixing that and it's going to be more working as expected, probably.

00:43:02.040 | But that's right now.

00:43:04.040 | That's like the biggest question I get.

00:43:06.040 | Like, it didn't include my rule because right now, it really wants to see that file.

00:43:10.040 | Yeah.

00:43:13.040 | So, those are new.

00:43:14.040 | Those shipped, I think, the last version.

00:43:16.040 | So, they should be also in stable and we're actively working on those.

00:43:19.040 | So, and then the new, new thing is plans or prompts.

00:43:23.040 | And then, we have the first kind of reusable tasks.

00:43:27.040 | For as a team, how do you think about ingraining?

00:43:31.040 | Like, oh, we now have finally a way to tell GitHub Copilot to write tests.

00:43:36.040 | And your AI champion in the team handcrafted this perfect prompt which one-shots your test consistently.

00:43:45.040 | And now, everybody shares it in Slack, copies it around.

00:43:48.040 | Once you run the right test, you go back to Slack, copy it back.

00:43:51.040 | And that's what you want to use prompts for.

00:43:53.040 | You can finally put these prompts into a place where they can just be used by everybody.

00:43:58.040 | And how can they be used?

00:43:59.040 | So, I showed these can actually be attached.

00:44:02.040 | So, I can also go in here and attach instructions.

00:44:07.040 | So, you can do it manually too.

00:44:09.040 | So, that's one way.

00:44:10.040 | But I can also now go in here.

00:44:12.040 | I'm in the chat window and hit slash.

00:44:15.040 | And I can now actually run user prompts that are my own, that I create for myself.

00:44:20.040 | And I can use my plan and spec prompt you see over here on the left.

00:44:26.040 | Can you make that a customer?

00:44:27.040 | Yes.

00:44:28.040 | These are custom ones.

00:44:29.040 | So, the ones I have here, these are already custom in the workspace.

00:44:34.040 | And then the other ones, I don't have.

00:44:37.040 | I'm not showing.

00:44:38.040 | So, I think we do.

00:44:40.040 | Wait, there's a new menu.

00:44:41.040 | Can you help a ridiculous name?

00:44:42.040 | Yes.

00:44:44.040 | Yeah.

00:44:45.040 | You can name them for you.

00:44:46.040 | So, let's make it here.

00:44:48.040 | So, this one actually just landed yesterday.

00:44:50.040 | Because insiders, we can now finally have an entry point.

00:44:53.040 | Because everybody kept asking, how do I create prompts?

00:44:55.040 | And then I have to tell them which command to find it in.

00:44:58.040 | So, this is the new prompt configuration file.

00:45:01.040 | And I have some already here.

00:45:03.040 | So, as you mentioned, this is one that's interesting for this one.

00:45:08.040 | If I open this one, this is like defining how I want to write custom instructions.

00:45:11.040 | So, whenever I'm in a new project that doesn't have custom instructions yet, I do run this prompt to bootstrip them for me.

00:45:19.040 | And, yes, there should be a prompt sharing website where you can find these amazing prompts that I create.

00:45:28.040 | And next week, we're going to...

00:45:30.040 | So, each prompt is like a separate, it's like separate from each other?

00:45:35.040 | Yes.

00:45:36.040 | So, that's the main difference between instructions.

00:45:38.040 | Instructions are...

00:45:39.040 | You can have multiple.

00:45:40.040 | If you work on, for example, if you have one for TypeScript and one for your front-end folder, they do combine.

00:45:47.040 | Because there's multiple instructions that hopefully don't conflict with each other.

00:45:51.040 | But they allow you to be attaching multiple instructions.

00:45:56.040 | And they're really more about code.

00:45:58.040 | Whereas, prompts are basically easy ways to inject something in this prompt field.

00:46:04.040 | And they stay in the conversation.

00:46:06.040 | But they're mostly around a task and maybe giving the AI something specific to do.

00:46:13.040 | Instructions, you wouldn't necessarily give it like what to do, but more how to do it.

00:46:18.040 | What about if you wanted to, for example, teach it to always do TDD when it's writing code?

00:46:30.040 | Yeah.

00:46:31.040 | So, TDD, good point.

00:46:34.040 | That would be a good way to use custom modes.

00:46:38.040 | So, if we go into here, custom...

00:46:42.040 | Sorry.

00:46:43.040 | So, this is only insiders because it just landed.

00:46:45.040 | Sorry, you can't follow along or if you're not insiders.

00:46:48.040 | So, custom modes will show up in the dropdown.

00:46:53.040 | So, this is like going to...

00:46:54.040 | It just went into the menu, created a custom mode.

00:46:57.040 | And now I can pick where it shows up.

00:46:59.040 | So, it got GitHub/chat modes, which put it into the repository.

00:47:04.040 | Or I just want to keep it for myself.

00:47:06.040 | So, a good pattern if you just want to experiment, put it in your user folder.

00:47:10.040 | 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.

00:47:19.040 | And then we're going to name this one, TDD.

00:47:25.040 | And then we're going to ask AI to fill it in.

00:47:30.040 | Right?

00:47:31.040 | Prompt.

00:47:32.040 | Expert.

00:47:36.040 | Expert prompt.

00:47:37.040 | We need a prompt that enforces test-driven development for GitHub Copilot.

00:47:49.040 | So, it should probably first make sure it understands the problem, then write tests first.

00:47:54.040 | 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.

00:48:03.040 | Cool.

00:48:04.040 | Thanks.

00:48:05.040 | That's important.

00:48:06.040 | I didn't know.

00:48:14.040 | I didn't say it.

00:48:15.040 | I'm not worried because I didn't actually activate my file as context.

00:48:18.040 | Let's see if it...

00:48:19.040 | I think it should have a tool to just create more for you if you ask it.

00:48:26.040 | So, it's going to make that an MCP server next.

00:48:29.040 | Okay.

00:48:30.040 | Oh, it got it.

00:48:31.040 | Okay.

00:48:32.040 | Wonderful.

00:48:32.040 | So, we have a test-driven development assistance.

00:48:35.040 | This is my code.

00:48:36.040 | We don't want to read the code.

00:48:37.040 | Test-driven development, assistant, core principles, understand.

00:48:42.040 | Red.

00:48:43.040 | Write failing tests first.

00:48:44.040 | Beautiful.

00:48:45.040 | I wouldn't have not.

00:48:46.040 | Green.

00:48:47.040 | Wow.

00:48:48.040 | It does follow.

00:48:49.040 | Re-factor.

00:48:50.040 | Proof code quality.

00:48:51.040 | Strict rules.

00:48:52.040 | No implementation of the tests.

00:48:53.040 | Beautiful.

00:48:54.040 | Beautiful.

00:48:55.040 | So, this is our new TDD mode.

00:48:57.040 | Okay.

00:48:58.040 | We've done it for.

00:48:59.040 | We've done it for.

00:49:00.040 | Looks pretty good.

00:49:01.040 | It has emojis.

00:49:02.040 | Example.

00:49:03.040 | Should we try it out?

00:49:04.040 | Yeah.

00:49:05.040 | Okay.

00:49:06.040 | Yeah.

00:49:07.040 | Okay.

00:49:08.040 | Yeah.

00:49:09.040 | Yeah.

00:49:10.040 | Okay.

00:49:11.040 | Yeah.

00:49:12.040 | Did it say there was a framework?

00:49:13.040 | Did it say there was a framework?

00:49:14.040 | Yeah.

00:49:15.040 | Um.

00:49:16.040 | Did you scroll back up?

00:49:17.040 | There was something that said.

00:49:19.040 | I thought it said framework.

00:49:20.040 | These are framework.

00:49:21.040 | It's framework independence.

00:49:22.040 | Looks like.

00:49:23.040 | Is it?

00:49:24.040 | I thought there was something.

00:49:25.040 | Oh, just.

00:49:26.040 | Yeah.

00:49:27.040 | I think it does some.

00:49:28.040 | Yeah.

00:49:29.040 | Okay.

00:49:30.040 | So, it has it right there.

00:49:31.040 | It does make some stuff up.

00:49:32.040 | Yeah.

00:49:33.040 | Wouldn't need to do that.

00:49:34.040 | I can take this out.

00:49:35.040 | I already have my.

00:49:37.040 | So.

00:49:38.040 | Um.

00:49:39.040 | Cool.

00:49:40.040 | Test drive the design.

00:49:41.040 | Wonderful.

00:49:42.040 | Okay.

00:49:43.040 | Let's do it.

00:49:44.040 | So, we have this project which doesn't do anything.

00:49:46.040 | If you just run this.

00:49:48.040 | Um.

00:49:49.040 | NPM run dev.

00:49:51.040 | Probably doesn't.

00:49:52.040 | I think I already did this before.

00:49:54.040 | So, this is just a basic plain landing page.

00:49:57.040 | So, let's do the.

00:49:59.040 | Um.

00:50:00.040 | What feature do we have?

00:50:01.040 | I want a dashboard for GitHub issues.

00:50:04.040 | Just use mock data because I don't want to wire it up to GitHub.

00:50:07.040 | So, we want to have maybe some interesting contribution metrics.

00:50:10.040 | And.

00:50:11.040 | But first, actually, let's make a plan.

00:50:14.040 | Meanwhile, while I type this in.

00:50:17.040 | Let's.

00:50:18.040 | Stop it.

00:50:19.040 | Um.

00:50:20.040 | TDD.

00:50:21.040 | So, a dashboard for GitHub.

00:50:26.040 | Um.

00:50:27.040 | Don't wire it up.

00:50:29.040 | So, now, again, we give it a very broad task.

00:50:32.040 | But we can now put it into.

00:50:34.040 | TDD mode.

00:50:35.040 | Which is our new, amazing.

00:50:39.040 | Test development mode.

00:50:40.040 | That follows all the best practices, I assume, that the AI knows about TDD.

00:50:43.040 | And.

00:50:44.040 | Let's see.

00:50:45.040 | So, you.

00:50:46.040 | Wait.

00:50:47.040 | That's it.

00:50:48.040 | You created a new mode there.

00:50:49.040 | Yeah.

00:50:50.040 | Because.

00:50:51.040 | So, we went.

00:50:52.040 | Previously went into configure chat modes.

00:50:53.040 | We create a new mode.

00:50:54.040 | This mode is now.

00:50:55.040 | Enforcing the technique.

00:50:56.040 | We can actually.

00:50:57.040 | In a mode.

00:50:58.040 | You can say which tools it's supposed to use.

00:50:59.040 | So.

00:51:00.040 | Is the mode.

00:51:01.040 | Is the mode.

00:51:02.040 | That's kind of confusing.

00:51:03.040 | Is the mode.

00:51:04.040 | In agent mode.

00:51:05.040 | But based on.

00:51:06.040 | Yeah.

00:51:07.040 | Markdown file.

00:51:08.040 | So, it's a custom agent mode.

00:51:09.040 | Yes.

00:51:10.040 | Yeah.

00:51:11.040 | When is that going to be live.

00:51:12.040 | It's an insiders now.

00:51:13.040 | Because it's going to ship next week on the 11th.

00:51:14.040 | Yeah.

00:51:15.040 | So, it's a custom agent mode.

00:51:16.040 | Yes.

00:51:17.040 | Yeah.

00:51:18.040 | When is that going to be live?

00:51:19.040 | It's an insiders now.

00:51:20.040 | It's going to ship next week on the 11th.

00:51:21.040 | Yeah.

00:51:22.040 | Yeah.

00:51:23.040 | It's an insiders ship.

00:51:26.040 | Insiders ships daily.

00:51:27.040 | But it only releases monthly.

00:51:29.040 | Yeah.

00:51:30.040 | And we're one.

00:51:31.040 | One week.

00:51:32.040 | Late.

00:51:33.040 | Because there was a short.

00:51:34.040 | Short week.

00:51:35.040 | So we adjusted our schedule.

00:51:36.040 | Yes.

00:51:43.040 | So.

00:51:44.040 | For most of you.

00:51:45.040 | This menu will just have these entries.

00:51:47.040 | And the.

00:51:48.040 | In insiders only.

00:51:50.040 | If you look for modes.

00:51:53.040 | In the.

00:51:54.040 | Command palette.

00:51:55.040 | So command palette.

00:51:56.040 | You can also click up here.

00:51:57.040 | Show.

00:51:58.040 | Run commands.

00:51:59.040 | And then modes.

00:52:01.040 | And that's.

00:52:02.040 | That's the place.

00:52:03.040 | Yeah.

00:52:14.040 | Yeah.

00:52:15.040 | Are they in.

00:52:16.040 | In the output.

00:52:17.040 | Or in the problems view.

00:52:18.040 | It's in the output.

00:52:19.040 | It's in the console.

00:52:20.040 | Right.

00:52:21.040 | instead of me copying and pasting that error into--

00:52:24.280 | Yeah.

00:52:25.080 | Are they in the output or in the problems view?

00:52:28.660 | It's in the output.

00:52:29.660 | It's in the .

00:52:31.680 | OK.

00:52:32.080 | Yeah, yeah.

00:52:32.660 | Like this one.

00:52:33.480 | I previously did something wrong, and I wanted to see,

00:52:37.100 | like, the error code is in the terminal.

00:52:41.520 | Yeah.

00:52:42.020 | In order for-- and it goes, tell me if you need anything else.

00:52:44.660 | Yeah.

00:52:45.500 | I want you to look at my terminal when there's an error,

00:52:49.340 | right, I think, right now it's like on the base.

00:52:51.720 | Yeah.

00:52:52.220 | Is there a mode where it just constantly

00:52:54.960 | is looking at the terminal?

00:52:57.700 | If it runs the commands itself, it will start looking at the terminal.

00:53:01.980 | So the easiest way, if you run the deployment and the script

00:53:06.100 | itself through co-pilot itself.

00:53:08.200 | But otherwise, there's also context, actually.

00:53:10.700 | If you look here, we have the--

00:53:14.340 | That's my terminal .

00:53:18.240 | It is, actually.

00:53:19.340 | There's terminal last command, which includes the output as well,

00:53:23.960 | in terms of selection.

00:53:24.960 | Now, if you ask me why they're not in the context,

00:53:27.960 | like, I couldn't tell you right now.

00:53:28.960 | Yeah.

00:53:28.960 | But that's working.

00:53:34.220 | I think I did this thing wrong, though.

00:53:36.220 | TDD, let's just see.

00:53:42.960 | Oh, it did tools.

00:53:43.580 | Oh, it did tools.

00:53:44.580 | It configured-- it made up tools.

00:53:45.580 | So it did.

00:53:46.580 | That's the part it made up.

00:53:48.580 | There's actually-- those are not the right tools.

00:53:50.580 | This is why it didn't do anything.

00:53:54.580 | It just basically acted like chat and gave me the code.

00:53:57.580 | Because all the tools it tried were--

00:53:59.580 | It didn't have any right access.

00:54:03.200 | So let's try this again.

00:54:05.200 | So this is probably a good thing to point out.

00:54:12.200 | So in now, prompts as well.

00:54:14.820 | Let me open the plan prompt.

00:54:15.820 | So this one can actually now set tools.

00:54:19.820 | And if you just make a tools entry here, to tools,

00:54:23.820 | you can now actually click here and say which tools.

00:54:26.820 | In this case, this is a planning prompt.

00:54:28.820 | So most of you probably wanted to look at perplexity.

00:54:32.820 | To come up with anything it needs to find on the internet,

00:54:36.820 | I can select that.

00:54:38.700 | So that's the way you can now have tools

00:54:43.480 | constrained for specific prompt, which always

00:54:47.940 | helps with kind of high quality.

00:54:49.200 | Because if you have many tools, which

00:54:50.740 | as you install more MCP servers, you always

00:54:52.740 | have this tooling explosion.

00:54:54.320 | And they might solve all the different problems

00:54:55.980 | you're having throughout the day.

00:54:57.660 | But now you can configure it more specifically for domain.

00:55:01.540 | And also insiders only.

00:55:05.200 | We have tool groups, tool sets, as we call them.

00:55:12.700 | So tool sets, I can--

00:55:15.820 | how did I get here?

00:55:17.580 | Down here in the tool dropdown, configure tool sets,

00:55:22.020 | and add more tools.

00:55:23.080 | This, I think, sends you to add server.

00:55:24.800 | But configure tool sets, opens this one here.

00:55:29.180 | And that's only for anything, both built-in and MCP.

00:55:34.000 | Actually, a lot of the tools you see here,

00:55:37.120 | we cleaned this list up.

00:55:39.460 | If you use insiders, you see them.

00:55:41.500 | Then these are actually tool sets already.

00:55:43.540 | So we use tool sets internally, because edit files

00:55:45.800 | has multiple ways to edit files.

00:55:47.840 | We give the AI a few ways.

00:55:50.200 | Code-based search has grep, has file search,

00:55:53.160 | has different searches as well, depending on what you're

00:55:55.160 | looking for.

00:55:56.200 | So all of these actually are tool sets in our own back end.

00:56:00.100 | And we expose this now as something

00:56:01.760 | you can create yourself.

00:56:03.580 | So my research tool, for example,

00:56:05.080 | has the Proplexity tool to ask deep research questions.

00:56:09.760 | And it also has fetch.

00:56:11.200 | No, I didn't.

00:56:21.540 | No, we can show--

00:56:22.480 | Can you talk about it?

00:56:24.620 | Yes, I can.

00:56:25.960 | Wouldn't be a talk without MCP.

00:56:27.140 | Also, there's a talk to more about MCP,

00:56:33.600 | a whole talk track where I'll be talking about MCP,

00:56:36.820 | if I can finish my slides.

00:56:40.620 | OK, there we go.

00:56:41.320 | So let's talk about MCP.

00:56:42.480 | This is doing something.

00:56:46.200 | Let's see.

00:56:47.000 | Not understanding the requirement.

00:56:49.720 | It create mock data.

00:56:50.820 | Red face, writing tests.

00:56:52.260 | It wrote tests.

00:56:55.120 | Oh, it found that there's a no package library.

00:56:56.820 | That's sad.

00:56:59.420 | And it created the test utility.

00:57:03.220 | And then it tried to run the tests.

00:57:05.060 | And then it asked to proceed.

00:57:09.280 | So that's cool.

00:57:09.880 | So I did the first stage of that mode.

00:57:13.420 | But I don't need to go 2D.

00:57:14.800 | But that's modes.

00:57:16.060 | 2DD will ask now for--

00:57:18.220 | because we asked it to ask, actually, for confirmation.

00:57:20.340 | So that's why it's now pausing.

00:57:21.720 | It wrote tests.

00:57:23.320 | They're all red.

00:57:25.000 | So that's good.

00:57:27.460 | OK, we're going to accept it.

00:57:28.420 | And let's go into MCP.

00:57:30.100 | So MCP servers--

00:57:32.200 | who has already MCP servers set up in their VS Code?

00:57:34.700 | One way to get MCP servers is editing JSON.

00:57:44.460 | And there's a few other ways.

00:57:47.120 | But let me show you another way.

00:57:48.960 | Playwright MCP-- who's been using Playwright MCP?

00:57:52.800 | It's probably one of the coolest ones.

00:57:56.160 | So Playwright MCP is a browser testing framework.

00:57:59.080 | And it allows people to access the browser locally

00:58:02.400 | and just take screenshots, run websites,

00:58:05.100 | get accessibility audits, a whole bunch of utility in there.

00:58:08.780 | And how to get it for VS Code, there's a JSON blob

00:58:11.760 | that you can all ignore and just hit Install Server.

00:58:17.880 | So Install Server is just a VS Code protocol

00:58:21.020 | that we use to just wire things up into VS Code.

00:58:23.580 | You see the same if you go to the extensions marketplace

00:58:26.280 | for VS Code.

00:58:27.300 | You can hit Install Extension.

00:58:28.640 | That powers the same process.

00:58:31.160 | So now I can--

00:58:33.080 | don't hit Show Confirmation.

00:58:34.380 | We need to move this down.

00:58:35.760 | But Install Server actually puts this now into my user settings.

00:58:39.960 | And as you can see, you can have MCP servers, both for yourself.

00:58:44.480 | And I have the one for GitHub and for GIST Pad,

00:58:47.760 | which is a cool one.

00:58:48.700 | I can recommend this one.

00:58:50.900 | And then, yeah, Playwright Now.

00:58:53.760 | So you can already see how many tools are provided.

00:58:59.000 | You can see if anything fails, you can get to the output.

00:59:02.900 | So if there would be configuration, I can show that here.

00:59:07.940 | There's actually GIST Pad needs a GitHub token.

00:59:10.040 | So it's a local MCP.

00:59:11.680 | And what-- have you ever seen that one?

00:59:15.360 | So yay, no tokens in my configuration.

00:59:18.620 | So you can use inputs in VS Code configuration, both in the MCP.JSON

00:59:23.260 | and your settings.

00:59:24.420 | And inputs, you might have already seen those in tasks.json.

00:59:27.560 | That's how you configure your tests and your build steps in VS Code.

00:59:32.400 | It's the same system.

00:59:34.660 | They're defined up here.

00:59:35.960 | So inputs are just an ID, a type, description, a default value.

00:59:41.420 | And the password true means it's encrypted at rest after you put it in.

00:59:47.100 | So it doesn't ask me anymore.

00:59:48.660 | That's going to prompt you then?

00:59:50.960 | It would, but this shows basically that it already has a token.

00:59:54.780 | But if you enter it the first time, and we can actually try that, if I--

00:59:58.660 | Or is it actually key?

01:00:00.940 | In VS Code's key storage.

01:00:02.800 | So on Mac, it actually uses keychain.

01:00:04.760 | Oh, OK.

01:00:06.040 | Yeah.

01:00:07.140 | So--

01:00:09.240 | What other MCP servers do you use?

01:00:12.000 | Yeah, so I can show--

01:00:13.800 | GistPad is fun.

01:00:14.800 | It's done by-- actually, somebody at GitHub, so gistpad.dev, gistpad.mcp.

01:00:20.300 | It's mostly-- I'm going to show it off tomorrow, as well, in my talk.

01:00:24.000 | But it's a fun one that uses Gist as a knowledge base and also for prompts.

01:00:31.040 | So we like this one.

01:00:33.120 | It adopts a ton of recent MCP stuff.

01:00:36.040 | But I think the main ones we usually see is GitHub MCP server, gistpad.

01:00:41.980 | Is it from--

01:00:45.420 | Lost in tangent.

01:00:46.220 | OK, yeah.

01:00:47.220 | So if you just want to play around with a really well-done MCP server,

01:00:51.940 | then that's one.

01:00:54.460 | Not saying GitHub one isn't as good.

01:00:57.160 | But it's-- there's a lot more coming here, as well.

01:01:02.320 | So they're all in reactive development to figure out what the best way for MCP is.

01:01:06.820 | And so just a couple of stuff went pretty fast on.

01:01:10.260 | So this is using API, so we're using SSC, like let's say Python.

01:01:14.760 | Yeah.

01:01:15.260 | So how can I-- where did the-- you had the MCP JSON.

01:01:20.780 | Yeah.

01:01:21.260 | OK.

01:01:22.260 | Where-- how did you connect to the-- let's say I have a Python, custom Python,

01:01:26.180 | and then I have a Python server on SSC port one time for--

01:01:29.620 | Yeah.

01:01:30.120 | Just exactly what I have.

01:01:31.620 | I can understand how you just did that.

01:01:33.620 | How do I-- how do I hook it up?

01:01:35.620 | To SSC?

01:01:36.620 | Yeah.

01:01:37.120 | Yeah.

01:01:37.620 | OK.

01:01:38.120 | Right now, it's in your case.

01:01:39.620 | OK.

01:01:40.120 | For example.

01:01:41.120 | And in your case, that server is already running.

01:01:43.560 | So how to hook up--

01:01:44.560 | OK.

01:01:45.560 | Cool.

01:01:46.060 | Yeah.

01:01:46.480 | Let's do that.

01:01:47.360 | So SSC, same way, basically.

01:01:50.120 | So what-- just finding my-- max it out.

01:01:54.660 | So go back to my MCP.JSON.

01:01:57.780 | And down here--

01:01:58.620 | Can you talk about this?

01:01:59.540 | One thing is just for workspace.

01:02:02.320 | Yes.

01:02:03.060 | So to clarify, you know, mcp.JSON sits in .vscode right now.

01:02:07.800 | And it's per workspace.

01:02:09.060 | And that's shared across everybody.

01:02:10.860 | So hopefully it puts stuff-- either you work on it alone,

01:02:13.900 | and it's just for you, or everybody is happy to have those MCP servers.

01:02:17.280 | Oh, that's awesome.

01:02:18.280 | Yeah.

01:02:18.780 | That was a little--

01:02:20.200 | Yeah.

01:02:20.700 | That was a per workspace.

01:02:22.380 | And now, .

01:02:26.000 | Yeah.

01:02:26.580 | Yeah.

01:02:27.380 | OK.

01:02:27.880 | And then the-- what's now?

01:02:28.940 | If you hit @Server, you will find what you're looking for.

01:02:31.340 | And then from @Server, you can hit down on HTTP.

01:02:37.600 | So we actually do support both SSC, which is actually deprecated,

01:02:41.440 | and streamable HTTP, which is the new fangled, easier to scale,

01:02:47.780 | better for your cloud.

01:02:49.440 | SSC is deprecated over?

01:02:52.560 | It's no longer in the spec, yes.

01:02:54.460 | And we do fall back to it on the client side.

01:02:56.980 | But it's-- the SSC is really hard on hosting, right?

01:03:01.300 | Because they have these long running connections.

01:03:02.940 | It's a long pull.

01:03:03.840 | Long pull, yeah.

01:03:04.820 | Yeah.

01:03:05.320 | Yeah.

01:03:05.820 | Yeah.

01:03:06.320 | So that's where you put in your MCP SSC server.

01:03:12.040 | And if you want to do it manually, it's really just--

01:03:13.920 | you get a nice autocomplete, too.

01:03:18.020 | So if you pick a name, example, and this would be--

01:03:29.680 | the type would be not studio.

01:03:34.600 | Actually, it's HTTP.

01:03:35.820 | Yeah, you already would use HTTP.

01:03:37.340 | And then it would already yell at you that you don't have a URL.

01:03:39.880 | So I'm going to put a URL.

01:03:40.760 | So this is how-- everything is by default as the IDO.

01:03:47.040 | Once you have a URL, I think I can take this out.

01:03:49.800 | Yeah.

01:03:50.300 | So it would be just that entry.

01:03:51.660 | So are you just starting your chat in ASC?

01:03:56.900 | Is there a page in Dev and then it's leveraging the MCP server?

01:04:03.280 | Yes.

01:04:03.780 | So to get-- yes.

01:04:05.700 | So many demos I see, people hit start here as well,

01:04:10.260 | just to see that it's working.

01:04:11.820 | It's a nice configuration.

01:04:13.060 | I just make sure it's working.

01:04:14.460 | We actually do cache the tools once we saw them the first time.

01:04:17.840 | So how MCP works is that on the first initialization

01:04:23.020 | from the client to the server, it shares its tools back.

01:04:26.340 | And that's what you see here, the one tool.

01:04:28.920 | So if you would do it right, you would never

01:04:31.460 | know the tools unless you start the server.

01:04:33.420 | We actually cache them so you don't have to--

01:04:36.020 | we don't have to start all the servers proactively

01:04:38.280 | once you open Copilot just to get the tools.

01:04:41.460 | OK, I just make sure.

01:04:42.580 | So that plus symbol on top of chat,

01:04:45.320 | you wouldn't be just--

01:04:46.720 | it would now be an IDP server.

01:04:49.500 | Yes.

01:04:50.000 | Yeah.

01:04:50.500 | So we have to get on agent mode, right?

01:04:53.060 | No, actually you want to be in agent mode.

01:04:54.460 | Agent mode-- ASC mode will not run MCPs for you.

01:04:58.600 | You can go-- because ASC mode is not actually--

01:05:03.700 | there's no function calling in Henry, right?

01:05:05.960 | ASC mode is really this traditional Ask ChatGPG

01:05:08.460 | question will answer based on its training there

01:05:10.620 | or its context.

01:05:13.000 | OK, it's very good, right?

01:05:15.180 | Yes.

01:05:16.420 | So there is also an Ask mode.

01:05:17.780 | You don't have tools.

01:05:18.660 | You would see it.

01:05:19.600 | But I can do actually--

01:05:21.080 | does this still work?

01:05:21.860 | Let's do that more quickly.

01:05:31.480 | I think we actually do this still.

01:05:34.860 | Yes, so we're actually blurring the line a bit now.

01:05:36.940 | So if you do--

01:05:38.520 | that's not working.

01:05:39.300 | OK.

01:05:41.700 | Yeah, but if you actually reference specific tools

01:05:44.300 | in Ask mode, it will invoke them for you.

01:05:46.160 | But by default, the way where you want to execute tools

01:05:49.740 | is in agent mode.

01:05:53.240 | Oh, I am-- these models come up.

01:05:55.620 | You're using, what, more?

01:05:57.620 | Yeah.

01:05:58.620 | Or a model?

01:05:59.180 | I'm just going to find a configuration as to, like,

01:06:01.620 | how does it know that that whole model, or the GPP model,

01:06:06.620 | what's the structure of it?

01:06:07.620 | They're all coming through GitHub co-pilot.

01:06:12.080 | So are they all using your paid--

01:06:18.300 | you can add your own models.

01:06:20.500 | Anybody has tried it, managing a model?

01:06:22.840 | So I have Gamma 3 through Ollama, which runs locally.

01:06:27.660 | And I have open routers, Perplexity R1,

01:06:31.360 | which is actually a fine-tuned model of DeepSeq R1

01:06:35.460 | from Perplexity.

01:06:36.960 | So if you haven't tried it yet, basically go into the model

01:06:39.300 | picker and hit Manage Models.

01:06:40.700 | And then we can actually custom configure your own API keys

01:06:44.460 | from Anthropic, Azure, Cerebras, Grammati, Grog,

01:06:47.940 | all of these.

01:06:49.080 | Ollama is the local one.

01:06:50.460 | So if you have a beefy M4 Pro, I'm still

01:06:53.220 | sad how many models I can actually run on this.

01:06:56.080 | But eventually, it's going to be small, powerful models

01:06:59.580 | that make sense.

01:07:00.840 | So--

01:07:01.340 | Is there a reason, when I do that,

01:07:03.120 | if I don't see quality 4 of this show up?

01:07:05.460 | And at least there's like 3.5 because I don't know what it is.

01:07:08.660 | It might be because of your Anthropic tier, right?

01:07:12.120 | That's-- or is it--

01:07:15.380 | I have 7.4.

01:07:16.960 | You have 7.4?

01:07:18.620 | Oh, the other one-- yeah, you might be in agent mode.

01:07:21.740 | So we do actually filter them down.

01:07:23.200 | So that's an ongoing improvement we're doing.

01:07:24.820 | That's why it's not-- it's right now a preview feature only,

01:07:27.360 | because we're still having to correctly wire up which model

01:07:31.260 | allows tool calling.

01:07:33.100 | So there's some-- every provider has different indicators

01:07:37.020 | of how tool calling works.

01:07:38.320 | And that's one of the matching things we're doing right now.

01:07:40.920 | So you might not see it because it's not on our list yet.

01:07:43.900 | Is it verbose enough to say what tool is it calling an MCP?

01:07:55.480 | Yes.

01:07:56.060 | Yeah.

01:07:56.560 | You will see that.

01:07:57.400 | So if I do just one example here.

01:08:00.740 | So just-- so A, you can disable them.

01:08:06.000 | If you want to be faster, you can do command down

01:08:09.120 | and just go through.

01:08:10.500 | So context 7 is the one I want to keep.

01:08:12.340 | Play right, I can disable right now.

01:08:14.220 | But once you start using them, this is command up and down,

01:08:20.480 | the power user way of navigating those.

01:08:24.140 | So these are all built-in MCP servers.

01:08:26.020 | And once you start, you can actually now--

01:08:28.480 | if I want to be very explicit and I know which tools I want,

01:08:31.020 | I can use my tool sets.

01:08:33.140 | Or I can mention the specific tools that are in my list.

01:08:38.300 | But I can also now just go in and say,

01:08:40.340 | what do we want to do here?

01:08:43.680 | Research GitHub metrics.

01:08:50.920 | Let's actually use the research one because we created it.

01:08:55.280 | Sounds better when I use research here.

01:08:57.020 | Use it in a sentence for productivity.

01:09:01.540 | And now what happens now is this one has now--

01:09:06.700 | is in agent mode.

01:09:07.540 | We have the research group set or tool set.

01:09:10.300 | So we'll either use perplexity or fetch.

01:09:12.780 | And one of my perplexity keys actually

01:09:18.260 | outdated because it failed before.

01:09:20.080 | Let's see.

01:09:20.420 | OK.

01:09:20.960 | So you see, I already actually proved this before.

01:09:23.440 | So you see, A, that it runs the server and you actually

01:09:27.440 | click the server to see where it comes from.

01:09:31.480 | If it would have not auto-proofed this, because auto-proof is still

01:09:34.600 | on from our previous session, you can actually go in here

01:09:38.180 | and edit what it's sending, which now doesn't make sense

01:09:42.400 | because it's already sent.

01:09:44.640 | And then it writes up what it found in this case.

01:09:47.460 | Does that underscore ask if anything can do with what it's doing?

01:09:51.780 | And that's just the odd name for the perplexity tool.

01:09:54.880 | OK.

01:09:56.080 | It happens to coincide with it?

01:09:57.840 | Yes.

01:09:58.300 | Yeah, yeah.

01:09:58.800 | It's just the verb should be before.

01:10:02.260 | So it's their naming.

01:10:03.800 | Yeah.

01:10:04.300 | Yeah.

01:10:07.640 | So that's not run to.

01:10:09.060 | It actually did a follow up query as well and explained it.

01:10:13.800 | I know I could put this into a spec as well.

01:10:15.980 | Actually, I did this before.

01:10:17.960 | So I wrote a spec using forward community dashboard.

01:10:21.380 | So I did the research using perplexity

01:10:23.560 | and then ask it to write a spec from it

01:10:26.260 | using a little query I have here for the spec.

01:10:28.860 | So that's one way you can quickly get things done.

01:10:35.220 | And just to point out this one, it's pointing it to a spec.

01:10:40.000 | So these are actually resolved by the AI.

01:10:42.000 | So if you point it to specific files, we do actually

01:10:44.180 | validate those as well.

01:10:45.260 | So if you get them wrong, I think they're on the lane.

01:10:48.980 | You can also click them.

01:10:49.800 | So you get all the markdown goodies.

01:10:54.620 | And then you just ask it to write on the spec.

01:10:56.680 | Do nothing else.

01:10:58.080 | Use perplexity to look up stuff.

01:11:01.540 | Don't lose details.

01:11:02.380 | Keep updating the spec.

01:11:03.720 | So that's one way to work on specs.

01:11:05.900 | That's probably more tools we're going to add here.

01:11:09.980 | Yeah.

01:11:10.200 | So that's MCP.

01:11:11.240 | Any other MCP questions?

01:11:12.980 | per MCP.

01:11:19.960 | So the MCP itself doesn't run anything except when you

01:11:24.200 | support sampling, which we do on Insiders.

01:11:29.880 | Sneak preview for tomorrow.

01:11:32.240 | But if you use sampling, actually, I guess I have to explain sampling.

01:11:36.540 | So sampling is a way for MCP to reach back out from the server to the client to use the LLM

01:11:43.260 | on the client.

01:11:45.220 | And you can often think the best use cases are to summarize.

01:11:49.080 | Use cases are if you want to reduce the amount of tokens you send back to the client to explain

01:11:56.200 | something.

01:11:57.540 | So there's a few ways.

01:11:58.920 | But overall, there's not enough integration of sampling.

01:12:04.440 | But so we're the first ones to get it out there because we already have the LLM exposed.

01:12:08.920 | So that's cool.

01:12:09.920 | So, like, it is more, like, some of these tools just want better sort of a level.

01:12:20.940 | Is there a way, is there a non-deterministic way?

01:12:25.080 | Yeah.

01:12:26.240 | To pick the model, kind of?

01:12:27.440 | No.

01:12:28.440 | To pick the Darn tool.

01:12:29.440 | So you clearly have multiple tools.

01:12:32.440 | Yeah.

01:12:33.440 | And one is deciding what tool you need.

01:12:36.440 | Yeah.

01:12:37.440 | And you can prompt your way to do it, but it's still highly non-deterministic.

01:12:41.440 | Right.

01:12:42.440 | So, yeah.

01:12:47.440 | Yeah.

01:12:48.440 | So what I recommend is, A, in your modes, boil down the tools to what you actually need.

01:12:54.640 | So reducing the tools manually.

01:12:57.340 | Either deterministic already in your prompt.

01:12:59.340 | So this prompt could have tools for, like, what it should actually do.

01:13:03.340 | Right?

01:13:04.340 | That would be one way.

01:13:05.340 | And then I can configure what I actually want to have here.

01:13:07.340 | Like, this should be only doing perplexity because it needs to do research.

01:13:10.340 | And that's all it should do.

01:13:11.340 | And that's all it should do.

01:13:12.340 | With custom modes, that would be so much better.

01:13:14.340 | Yeah.

01:13:15.340 | Custom mode.

01:13:16.340 | Yeah.

01:13:17.340 | Right.

01:13:18.340 | Then you kind of pick your pockets of tools.

01:13:20.340 | Yes.

01:13:21.340 | So custom mode is one way.

01:13:22.340 | And then the other one is you can actually mention specific tools.

01:13:25.340 | So if you go in here into add context.

01:13:27.340 | And then you can actually point it to specific tools.

01:13:29.340 | So you're not doing, like, the look up things on GitHub and you try to find the right verbiage

01:13:35.340 | that it gets the right tool.

01:13:36.340 | you can just actually mention the tool of it should, for example, resolve library ID.

01:13:42.340 | So you can just add these here.

01:13:44.340 | And then it will be handed to the AI of, like, these are the tools the user wants to use.

01:13:49.340 | Yeah.

01:13:50.340 | But you use select, you see, like, do you, in general, basically select that tool?

01:13:54.340 | It's still, yeah.

01:13:55.340 | It's not like the end user application.

01:13:56.340 | Right.

01:13:57.340 | No one, no end user is not going to say, here, they don't care about tools.

01:14:01.340 | The end user is working with the chatbot.

01:14:03.340 | Yeah.

01:14:04.340 | Yeah.

01:14:05.340 | Yes.

01:14:06.340 | Yeah.

01:14:07.340 | Tool calling is inherently always, even in this case, we're telling the AI you should use it,

01:14:13.340 | but it might not use it.

01:14:14.340 | Yeah.

01:14:15.340 | Yeah.

01:14:16.340 | Yeah.

01:14:17.340 | Yeah.

01:14:18.340 | Yeah.

01:14:19.340 | So my timer's down to zero, maybe just go back.

01:14:32.340 | to the slides to wrap it up.

01:14:35.340 | There are more, right?

01:14:36.340 | Vibe coding.

01:14:37.340 | So we showed workspace instructions.

01:14:41.340 | We showed dynamic instructions, which only apply to parts of the tool set.

01:14:46.340 | We showed custom tools, a little play write, deep research.

01:14:51.340 | I haven't showed using web docs.

01:14:53.340 | Like, actually, one of my favorites just pointed to an existing repo and say, read this repo if you have questions.

01:14:58.340 | MCP works great for that.

01:14:59.340 | MCP works great for that.

01:15:00.340 | When I work on MCP server, just tell it, look in the TypeScript SDK server for model context protocol if you have questions.

01:15:06.340 | Because we have cross-repo search, it just works.

01:15:10.340 | The agent actually has access to problems and tasks.

01:15:13.340 | So if you have tasks set up and you have linting set up, things will just work.

01:15:17.340 | So make sure those are set up in your template.

01:15:20.340 | Generate commits I showed.

01:15:22.340 | And then fine-grained review.

01:15:23.340 | You can pause at any time.

01:15:25.340 | If it asks you questions, you can always type something in and keep steering it into the right direction.

01:15:30.340 | And you can trust read only in specific tools.

01:15:34.340 | And I showed you also editing.

01:15:36.340 | So, yeah.

01:15:39.340 | Instructions, keep refining them as it makes mistakes.

01:15:42.340 | One of the key ones is commit often.

01:15:44.340 | I didn't show commits now.

01:15:45.340 | But any time you have a working state, just make sure you commit it so AI can continue making mistakes and be creative.

01:15:52.340 | And then last one, there's a clear pause button in the lower end.

01:15:56.340 | So if AI goes off and you're like, what is it doing?

01:15:59.340 | Like, is it doing the right thing?

01:16:00.340 | Just pause and review.

01:16:01.340 | And that's possible as well.

01:16:03.340 | I showed a bunch of this for Spectrum development already.

01:16:07.340 | But it's really about having a spec, having a blank and done plan and doing more custom prompts and tools, which I showed.

01:16:13.340 | I showed user prompts.

01:16:17.340 | There's more MCPs for database access and logging and project tracking like the GitHub MCP.

01:16:24.340 | And there's also access to actually tests and do debugging within the agent as well.

01:16:29.340 | 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.

01:16:35.340 | And then we talked briefly about models as well.

01:16:37.340 | So if you want to use O3 for any of the cool stuff, the deeper thinking, you can do that as well.

01:16:42.340 | Spec-driven is really about focusing on the spec.

01:16:47.340 | And I think a great way to do that is just create the spec from all the conversations you had about the spec.

01:16:56.340 | 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.

01:17:04.340 | It's a great way to have meetings, but it's also a great way to not write the spec yourself in the end.

01:17:10.340 | Are there any tools to determine whether the spec is good or not?

01:17:15.340 | Like on the opposite side of that, like it's a big way to spec for a project requirements document.

01:17:19.340 | Right.

01:17:20.340 | It's like a...

01:17:21.340 | One of the...

01:17:22.340 | I would ask AI.

01:17:23.340 | Yeah.

01:17:24.340 | Yeah.

01:17:25.340 | What he does is he has to generate the spec and then he has to critique the spec.

01:17:31.340 | Yeah.

01:17:32.340 | And say what are things that it's missing and how could it be better and stuff like that.

01:17:36.340 | And he basically argues with the LNM about the spec until he gets to the state that he wants.

01:17:41.340 | Yes.

01:17:42.340 | Arguing with AI is one great way.

01:17:43.340 | So if I focus on one run prompt or prompt is...

01:17:48.340 | Where's one critique idea is one I like of just ask me three questions about my idea.

01:17:53.340 | Right.

01:17:54.340 | Just have AI go into thinking mode.

01:17:57.340 | Like what would you ask somebody for feedback and have it critically analyze your stuff.

01:18:04.340 | So these prompts, like those are basically the next level of prompt crafting where you don't just ask it to code,

01:18:09.340 | but pull it in as a thought partner, as a design partner, as somebody who can poke holes in your...

01:18:16.340 | I do a long way.

01:18:18.340 | So...

01:18:19.340 | Yeah.

01:18:20.340 | Frontline review steps is...

01:18:21.340 | Yeah.

01:18:22.340 | Good.

01:18:23.340 | Client.

01:18:24.340 | Client.

01:18:25.340 | You now can create one.

01:18:28.340 | So we haven't...

01:18:29.340 | Don't have a plan mode built in, but we also know ask edit agent will not be there forever.

01:18:33.340 | So it's a series of evolutions.

01:18:36.340 | Ru has way more modes that you can customize.

01:18:39.340 | So I think we want to allow developers to create their own.

01:18:43.340 | Because I even see very few demos of people inclined using plan.

01:18:47.340 | They just give it a thing and then it runs.

01:18:49.340 | Right.

01:18:50.340 | So...

01:18:51.340 | Yeah.

01:18:52.340 | It is.

01:18:53.340 | Yeah.

01:18:54.340 | I mean, planning...

01:18:54.340 | In Vibe coding, you even do planning and then writing the implementation plan.

01:19:03.340 | So you wouldn't spend way more time on an initial just what and how we're doing things and then you let it implement.

01:19:10.340 | So that would be even plan, write the implementation plan or write the spec, write the plan and then implement.

01:19:17.340 | So you would even have three modes if you do it correctly.

01:19:20.340 | And then...

01:19:21.340 | Yeah.

01:19:22.340 | So...

01:19:23.340 | That's already the last one.

01:19:24.340 | So takeaways.

01:19:25.340 | You've got to experiment.

01:19:26.340 | You've got to figure out what works for you.

01:19:28.340 | Like at what point can you just give it a task and it runs with it.

01:19:31.340 | At one point you want to give it a task and write a spec first.

01:19:35.340 | And then implement.

01:19:37.340 | Keep giving it feedback and iterate.

01:19:38.340 | So never just accept a bad answer.

01:19:40.340 | And then really work on your process.

01:19:42.340 | Like what works best for you?

01:19:43.340 | What works best for your team?

01:19:45.340 | And use modes and prompts and instructions to ingrain that.

01:19:49.340 | There's some bonus mistakes.

01:19:52.340 | You can screenshot.

01:19:53.340 | I'll make them all.

01:19:55.340 | Yeah, please.

01:19:56.340 | One more.

01:19:57.340 | There's one more.

01:19:58.340 | One more screenshot.

01:19:59.340 | You can end up like Emacs where it has major modes and you can have multiple minor modes.

01:20:03.340 | Minor modes, yes.

01:20:04.340 | That's how you end up with prompts and custom modes right now.

01:20:06.340 | So I've got to clean this up too.

01:20:08.340 | And then, yeah.

01:20:09.340 | Lastly, I think there is a sweet spot for how you define your code basis for AI.

01:20:14.340 | So you want to have well-structured, self-explaining code.

01:20:17.340 | Want to have the instructions set up.

01:20:19.340 | Want to have examples in your instructions.

01:20:21.340 | I want to keep instructions updated.

01:20:24.340 | So that's it.

01:20:26.340 | That was my unplanned workshop.

01:20:29.340 | Thank you for coming.

01:20:32.340 | It was kind of planned.

01:20:33.340 | I learned about Monday.

01:20:34.340 | - Thank you.

01:20:35.180 | - Thank you.

01:20:36.000 | - Thank you.

01:20:36.840 | We'll be right back.