Vibe Coding at Microsoft Build - Day 2

Key Takeaways

Heat. Heat. [Music] [Music] [Music] [Music] Heat. Heat. Heat. Heat. Heat. [Music] [Music] [Music] money. Hey [Music] Heat. Heat. [Music] Hey, hey, hey. [Music] [Music] Heat. Heat. [Music] [Music] Heat. Heat. N. [Music] [Music] Whoa. Welcome back everyone to Microsoft Build the Vibe Coder booth. Day two. We did it. Day two. How about that keynote? Oh, that was a fun keynote. Some interesting things there. Yeah, I love that. Deep dives into what we kind of saw in some of the highlights yesterday. Yeah, definitely. Did you know that uh Copout's open source? I have heard about that. That's pretty cool. Going open source, I guess technically is an ongoing process here, James. Going open source. We're headed that direction. MIT license. That's pretty right. Yeah, exactly. Um, so we're here live in the Vive Coder booth. We are live actually happening here at Build. We are looking at theater sessions. We're vibing with people. People are coming in asking questions. We're streaming live on the VS Code YouTube and the Microsoft developer YouTube as well. I'm James Montagno. I'm one of our leads on our developer communities. With me is Mr. Pierce Bogen. How's it going, buddy? It's going good. Day two, you know, day one, you're always in a high, right? Like you have the keynote, you have I had four sessions yesterday. classic. But I actually prefer it that way because then you get it all over with, right? You're done with your talks. Then I can come hop on the stream, build some cool stuff, right? No pressure. Just build something cool with my friends. So, I'm excited. We saw some really awesome apps from day one. Uh three different apps. Uh Sam tried to build a mobile app and then he actually got it in the last two seconds. The wind surfing app, right? The wind surfing app. Yeah, it actually happened. Like he got it all working in the last three minutes. I love that. And uh Claude was just grinding on errors package issues uh for a while in Flutter and then just kind of happened. And then uh we got a awesome app from Shane for this recipe application that he built with OpenAI and AI services and Azure AI uh to do recipe generation. And then the last application uh Den made which was a a Halo leaderboard. Oh. And it was awesome because we added floating emojis and like a bunch of like cool things and it was like really awesome. What was the tech stack for that one? You remember that one was a React V app. Okay. So, we're getting a little bit of everything. A little bit of everything. What you got for us today? Because we uh started building you started build well co-pilot started building an application. Uh let me bring up your screen here on our show on the VS Code YouTube. So, if you're not a subscriber there, Yousef, yeah, we love our we love Pierce's energy too. uh every day we started building copilot started building an app called dropped and we did this live on the vs code YouTube like subscribe ring that notification bell so you stay up to date with all the things we put out but we have a show on Fridays called let it cook let it cook let it cook in the rice cooker we're there um yeah oh check this out you can actually show comments on stage I don't even know what that means oh there's a new beta feature that's oh we got some beta features aren't always good to try out right now not putting that on uh there we go uh feel free to to jam on the codes what we got going on pier Curious, what are we vibing today? Okay, so yeah, I guess maybe to start I can kind of show what we've been building. So the idea is like uh I got limited time. Turns out I have a job. What? Yeah. Crazy. Un unfortunately slashfortunately. I love it to death, but I have less time to train than I used to these days. Ah, yes. And so um I was like, what if I could build like a training plan app? And there, to be clear, there's some awesome AI training plan app things out there in the world. Um, but I like building things for myself as a developer does. You have to spend I'm going to spend 40 hours building this application that I could have just paid $9.99 to someone else for a month to use. Oh, you to be your own. Exactly. Yeah. And so, um, that was kind of the basic idea for this is like I have limited time. I want to do an AI training app. So, this is like just the onboarding screen. We vibed out on this last time. Nice. We got the imperial and metric units. I didn't know that's what we call the freedom units, right? And apparently there's a thing. If I go back to Imperial, look at that. Stones. We got stones. That was a feature request from chat last time. Chat let us know what we should be building into this application. Um, so we got metric imperial and then I say how much time I have to train like kind basic metrics about uh, you know, my current power output, what my goals are. I'm just trying to have some fun. James, got to have some fun. So then I go generate training plan. This all mock data right now. That's what we're going to maybe try to fix. Oh, cool. Nice. Um, and so like at the top it's just kind of like stats and then this is kind of like the idea is like I get my weekly plan so I can dive in. I did this yesterday actually in my session. We added this feature in your vibe session. In my vibe session. So we had I Yeah, I think all these are recorded. Are the recordings up? Most of them are up. Yeah, if you go if you go to build.microsoft.com I think you have to register to see them, but they'll put them out on like Microsoft developer. Yeah, eventually I'll be on YouTube and everything, right? I think the session sessions but not the demo sessions, but I'm not sure. They're also recording them. Mine was in one of those biggestish rooms, so I think it should be recorded. Big deal. Um, kind of a big deal. Um, so, um, well, we were at six. This is a little inside baseball. We were at 6:00 p.m. for my session. Competing with an open bar. So, you know, the fact that I had anybody in my session, I was excited about packed room. Packed room. Packed. I I we should have actually had the open bar in the room, right? Bonus. Uh, but it is a corporate event, so I'm sure they would not would have frowned on that. But I went to the open bar and then got a non-alcoholic salt syrup. Well, wait, we probably can't say which brand you got, but Topo Chico, sponsored by Topo Chico. The I So, if we're just going to name drop then uh the Heineken Zero also really solid zero. I had one of those last night. Went out to dinner with Matt PCO, Jason Lang last night. So, just name Mine was actually just a fizzy water. There was It's not even non-alcoholic. It just it's it's just fizzy water with flavor. You know what I don't like though? We're really off track on the stream, but I don't This is what happen when you hang out with your friends and write some code. Um, what I don't like Nothing's even cooking. No, we haven't. We literally haven't cooked yet. Um, we're just heating up the stove right now. Stove is We're preheating. We're turning the knobs. We got the preheat going. While while we put up this, why don't we put up this banner called Get Get Up Copilot. It gets copilot free. Look at that little work promo. Um, doing our job. So, yeah. Uh so yesterday in the session I we kind of added this detail view and it says okay here's all my intervals and like here's this nice visualization. You know this isn't even a charting library. This is all just like drawing right the best way to do it. Yeah old school. I love Frank. Shout out to Frank. Um dude if he can build that is that circus app but he probably did all that. That's all custom drawing, right? Yeah it's all custom drawing. All right. Um so yeah um so this is like all mock data, right? And I'm thinking maybe we actually make it generate real stuff if you want. Um, oh, we got an interview going on out here. I'm also I don't technically have ADD, but I get very distracted and I'll keep you on. We're in like a a fish tank situation here and there's people walking by and I see my friends and there's Shane Boyer over there. You know, we're just waving at people. We're live on the stream. So, um, I'm going to get very distracted as I build this, but I need to let it cook. to your point. All right. So, let's talk a little bit about this app. Hey, Shane. Um, so this is an iOS app. Um, this is written with Swift. So, um, pretty straightforward. We use this approach that I talked about in my session. Shout out to my session. Go watch it. I'm really really promoting my session, which happened in the past. Uh, yeah, go pull it up. Thank you. Um, and basically like I think the the session was basically like when you think vibe coding, when you think prompt first, you think I'm just throwing stuff into this prompt box and hoping for the best, right? Yeah. And you're throwing it over the wall and really hoping for the best results. And that can work, right, for new things, prototyping, that sort of stuff. But that's not really how you get the best results out of agent mode, right? So Harold and I, Harold on the VS Code team and I talked about this kind of a spectrum of approaches you can partner with agent mode on. There's the yolo approach on the far end of just throwing things into the prompt box and iterating, but then also like maybe a little bit more. Okay, we got some custom instructions. We have a little bit more structure to our project. And then I wouldn't be a PM, James, if I didn't say, hey, you know what we could do? Turn vibes into specs, right? A classic PM move. But it actually works. So like here, let me show you kind of my general structure here. So um like to generate this thing, this is actually the spec that I did in the session. Um we'll walk through this flow for this next feature I I'm I'm going to do. I just kind of generate this highle doc and it says okay I want to add a detail view like here's the basic user journey right um here's the different requirements I have um here's the different acceptance criteria this is super useful because if you're writing like unit tests or UI tests you basically just say make my acceptance criteria uh like a an integration test of some sort. So then we generate that you iterate with the model right on that does this look good and then once you have the basic like there's no implementation details right that's just all talking about what the user can do high level yeah then we come over here we got a plan right and um so I'll show this off but I basically have custom instructions set up so that after we generate this plan I basically ask agent mode to implement step by step and it marks off in the markdown file as you can see as I go through this like let me open the shout out to the preview you can mark preview markdown with that little button over there. I know you love a button, James. So, I specifically did not use a keyboard shortcut. I love a UI. I appreciate that. But yeah, you can see like, okay, like here is kind of what I want. Maybe there's a little bit of kind of here's how I want it to be done. Sometimes I have pseudo code in these. Um, and so I spend a lot of time on the plans, whether it's the spec or the implementation plan. And then the cool thing is like you can pass it into agent mode. And like normally I would use something like maybe Cloud35, Claude 37 Sonnet, Gemini 25 Pro. Those are great models. Um, name dropping the model name dropping in all those models you can use um but GBD41's really fast right and the interesting thing is if you spend a lot of time with the upfront planning it doesn't feel like you're making progress but then you throw it into something like 41 41's super fast and super capable it actually like you'll end up ahead almost and you avoid a lot of those mistakes that happen when you start building something and it's like oh no the model's going in the wrong direction I need to go back another way you backtrack you have an error right the nice thing about the plan is you're at least paving a little bit of structure right? So that if things go wrong, I can I can intervene. Um, so let's go ahead and what do we want to do? I think we want to make this real. It is an AI cycling plan app. Let's go to my read me and double confirm that. That's how I've claimed it's my favorite iOS apparently. Oh. Um, it's your next. It's my ne it's my next favorite. Okay. It doesn't promise anything in terms of being AI driven, but that's fine because it's not AI driven right now. We need to make it AI driven. So I'm going to show you my workflow. So, okay. Big big fan of prompt files. You know what prompt files are? No idea. I've never heard of them. All right. So, let's open this GitHub directory. I'm going to bump up my font to like an absurd level. Um, and I have this GitHub prompts directory. And so, if I pop in here, I have a spec.prompt. And I have several prompts in here. And basically, think of like prompts is like, do you ever find yourself like in agent mode, you keep typing like a similar version of the same thing over and over again? Yeah. It's like almost like refactoring a prompt out into a dedicated file. And I don't show it in this one, but like here, let me go to my research prompt, which I sometimes use. Like a good idea would be like, oh, I built this is how I build APIs. Like here's how I build an endpoint. Exactly. And it can follow the steps. So like if I take if I take a look at your code, you take a look at your code, someone else takes a look at your code, you could implement basically an endpoint in a very similar fashion based on your best practices. Exactly. Yeah. Like stuff like that. Like you have kind of like uh stuff like what I'm doing here of like planning and that's a prompt. you have um like refactorings like here's how we re here's how you might refactor something in this project right like here's where different stuff can be found and so like I actually find like it's pretty useful because once you have these these are living in the repo but you can also actually use settings sync in VS code I didn't know if you knew this this is a new thing so like I could in theory just sync these across all of my VS code workspaces with my account and so like I could have them on the workspace level or I could say like this is something like probably these planning prompts right I want everywhere so the cool thing is like at the top of these file is not it's just a markdown file. It's nothing fancy here. Um but you can see here I have mode. So I can say I want you to run this prompt in agent mode. Makes sense. Um here are the different tools you can use. So like when you click on this and you click this tools thing, we have tools from VS Code. We also got tools contributed by extensions. So that's web search for copilot and then MCP servers as well. Um got 112 tools here, James. That's a lot of tools. That's a lot of tools. Wow. And um so you can specify like oh I want you to use these specific tools when you run this prompt. And then description is kind of like mostly just a user thing right now. But you can imagine in the future like say I you know I I type something into the prompt box. I'm like actually before I do this I need like a mode needs to go research something right. So in the future what we really want to do is have this description be also something we give the model so the model can say actually btdubs you should use this thing. You should use this thing. So it'll auto dynamically pull in whereas right now it's all kind of a manual process to run these things and attach them. And this is great for like teams best practices and building out like after you get out of you know your prototype phase or in real production application you want to kind of streamline this stuff. Exactly. Yep. Um and like I always tell people like if if you find yourself doing things more than once make it a prompt file. And if you see the model doing something wrong and you have to correct it multiple times it's like tries to put a file in a certain place or you know it's generating code in a certain way you don't like immediately your first reflection should be boom that should go in a custom instruction. Right? So, um, like a lot of these things people are like, well, do I need to spend a ton of time writing these things up front? No. Right? Like there's some structure that I like with these things when I get started on a project, but a lot of the things that end up in these files kind of happen as a result of things I notice as I'm building out the project and then I'm just refining and tweaking it over time, right? Yep. Totally. Yep. Yeah. Every time like it does something I like or something I don't like, then I put it into a custom instruction. Exactly. Yeah. Um, what do we build? Okay, so this is my my spec prompt. And so, um, I could just kind of like, uh, run this prompt and provide context. Like you can pop over here. I could go spec blah blah blah blah blah, right? Um, but like I kind of and also I want us to have like input parameters. So I can like have like this this prompt file takes in an idea, right? Um, but like we don't have that right now. So like basically what I do is I come in here and so this is the one I had yesterday. Like okay, your goal is to generate a spec. We're going to start with a spec, right, for implementing this feature. Here's my idea. This was the idea I had yesterday. Detail page. We're not doing that today, right? So, we need to replace that. Before you get started on that, look at this idea file which describes my project at a high level. I generated this at the very beginning. This describes the app at a high level, right? Um, go back to my spec file. Um, here's the rules I have for you, right? Define the user journeys, number the functional requirements, have acceptance criteria. So, the things you actually saw in that spec that I um Yeah, this is a big one. Like the model is very smart, but sometimes it like tries to do too much, right? You're like, you're making this way too complicated for the user. So, like these feel like kind of s Exactly. These feel like silly things to say like keep the UI simple and easy to digest, but like I I they do make a meaningful difference in kind of the quality of the outputs you get because you can always iterate on the UI later. That's a thing too, you know? Exactly. Yeah. And and like I think the other thing is like the more depth your UI has, right? It introduces more problems, right? It's more for the model to wrangle like if you have a ton of components and things like it's got to go look to different files every single time it reads that component, right? So it introduces complexity for the model and then also like just normal, you know, UI performance engineering stuff. When you start getting these super nested trees, right, the the view just takes so long to build and rerender, right, for any if you're doing data binding or whatever. So, I also just like in general to have that rule. Yeah. Um, so I have like here's my rules. After you do that, hey, let's make sure I'm happy. I got to keep Pierce happy. You got to keep happy and give me some things to think about that I I you know, I may not be thinking about, right? Come up with ideas. Come up with ideas. Help brainstorm with me, right? I thought about this, but then I was 100% sure. So, it's not like a I'm not just throwing this over the wall and saying, "Generate this back. All right, move on. Now, I'm going to move to the plan." Like, generally, there is some back and forth. We'll show that. And then when satisfied, finally output your plan. So put it in that specs folder. This is this is a Claude 37 special right here. Do not under any circumstances write any code unless I tell you to. It wants to. It really I appreciate the bias for action. That's always a quality I like in people. Like I want to have a bias for action about my day. I agree. All right, so let's pop over. Um so I'm going to go ahead. If I just hit play, by the way, I'll just do that real quick. It'll start running. You going to hit play on a prompt? Yeah, I just killed it because I don't want to actually show you that because I right now. So, the other thing we're we're talking about features we're thinking about delivering on the stream. I'm not just telling you what we're doing today, but what we will do. I want to have like model claude ah uh 37 sonnet, but not just 37 sonnet. I want a thinking variant, right? For planning reasoning models are really good. Yeah. Right. And so, I don't want mode. I wanted like model. And of course, this doesn't work. But like I think this is like also something I want because by default right now if I just ran this prompt and click this button it's just going to use the model that I have here. And so that's why I popped open chat and said and by the way you can also do command shift P little keyboard shortcut action here. Got to have it. And then we can do run prompt. There's also a keyboard shortcut for that. The keyboard shortcuts on Mac are so scary looking like the option key. Like that's the option key. The second one. Yeah. I can never figure it out. I it kind of hurts my brain sometimes. All right. So I can go run prompt. You can run it there. So you got you got the play button for people like James. You got the shortcuts or you can come over in here little slash command action. Love that. Um okay. So I'm going to select three sevens on at thinking. And um let's see here. Um I'm going to just run Oh, I I need to have my idea. What am I doing? We were going to run just my old idea. All right. So um what do we want to do? We uh let's actually I'm going to not do this as like super stream of consciousness. That's how I prompt, right? And so sometimes when I go these prompt files, I do try to be a little bit more structured. Okay, so let's say um generate an uh a training plan for cyclists with AI. Um then let's say uh there you go. It should be Yeah, I'm getting some ghost text completions here. It should take in the user's FTP. Um, wow. It knows. It does know. Power. Wow. Actually, I probably will keep that. It should take in the user's FTP. Um, based on the workout type, like yeah, endurance. It already knows what you want to build. It does. It knows. It's already threshold, right? Um, and I should say this while you're typing that out is like the the model you have selected in the chat is not the model that's running ghost text, right? Ghost text is a custom model that the the team builds, correct? And it is always updating too. Um, you can select the model in the in the picker. There's a there's a change that we have internal previews. I don't know. Does people have external previews? I think April candidate may be flighted externally. Um, so yeah, like if you come in here, you'll see like GPD40 co-pilot. To your point, this is like a a model we built internally, 36 languages. Bam. Um, like we obviously have evals for a ton of different languages like .NET it does way better on than just like an off-the-shelf model. So much better. Um, and the latency is better as well. So there's like things like that that were really It's not just the quality of suggestions, right? You want them to be snappy, right? Yeah. And it's quick. Yeah, it's really good. So, um, we're constantly iterating on that. And so like yeah, this this got a big upgrade. I don't know if it was one or two ver three versions of VS Code ago. Yeah, it was a while ago something like that. But um so we're also same thing with next edit suggestions, right? Um we're constantly evolving the model based off the feedback you get and fighting new stuff. And so appreciate all your feedback on what we can do better there. So generate a training plan for cyclist with AI. Um use um we're going to use open AI uh to generate the plan. And then I'm gonna say let's let's actually I'm gonna show something cool. Always scary. I should open I should open incognito, shouldn't I? On the stream. There you go. All right. So then let's like open AI API. We're going to have to hide my screen here at some point. By the way, James, you tell me when. No, I have I have the power to do that. So you just let me know when. I will say the nice thing about like a lot of these AI providers is I actually prefer the credit based thing if you got to load money on like a gift card. Yeah. Right. cuz then I'm like, if I make a terrible mistake and push my key, it's like, you know, most of the time when I'm like debugging, right, $10, $15, you're like, okay, that I can live with that, right? It's not like $80,000 bill, right? Um, so let's actually come in here. Um, no, I I'm going to have to log in at some point as well. Um, so let's go to docs. I right now I don't care about that. I just want uh let's see what models we got. So there's a lot of models now. So I don't think I need a reasoning model. I think that's probably OP for this task. Yeah. Right. Um I might want a chat model. These are all reasonably priced, right? Um maybe a little OP. And right because they're doing a lot more. They're, you know, they're uh larger models, they will take longer time to return a response. That's good and bad, right? I might get a better training plan. Yeah. But it might also take longer to give you the plan in the first place. I'm a big uh GBT41 nano. Oh, you're nanoing, dude. It It's literally the fastest, most costefficient 41 model. And I I re I've been building this app, which I'll build out tomorrow on the stream, the feedback flow. And I switched from a 40 mini to 41 nano. Definitely different results, but at the same time, super powerful and and really good. It's like way faster. Yeah. Yeah. I need to get somebody from like the the Azure Open AI, what are we calling that service now? Sorry. Foundry found a AI foundry team to come because like I'm always interested like how do I actually like say we build this app, right? And we have the AI stuff. I want to know what's the thing I'm supposed to use from from our team to like kind of evaluate the results of these different things. There's there's now this new uh AI foundry router. So it'll automatically route it'll automatically it'll figure it out what It's like kind of all these different parameters like cost performance, right? It's kind of like can you dial it to how you want or it just kind of does thing. All right. I imagine it routes if it doesn't I'm sure that's a feature of the lab. Exactly. Um yeah. So nano looks I didn't even know nano dude it's new. It's hot. It's in it's in a foundry as well. It's where I use it. Oh these real time models. That's too complicated for what I need. But um but yeah. Okay. So like let's look at the 41 Nano. Oh yeah. Look at Look at that. Per I think these are per million tokens. It's basically free. Yeah. I mean 10 cents for a million input tokens. 4 cents for a million output tokens. Million. We got vision, right? Um what doesn't it have pricing? So cheap. Every everybody loves looking at pricing. That's exactly why we're doing this stream, right? To review the pricing details of products. Um the modalities are interesting, right? Like I I don't really imagine myself ever giving images, but it's nice to know it supports that, right? Yeah, totally. Yeah. Um embeddings. Okay. I don't really care too much about some of this other stuff. Like I'm not doing any of that. Streaming streaming is important because like Yes. Um in my case, actually, maybe not because I I probably want like a structured JSON back of the plan, right? And then um basically, yeah, cuz then I'm not going to like return the plan before it's it's not like chat, right? Like it's not where I want the tokens to stream in. So maybe it doesn't actually matter. Structured outputs matters though. Yes. because I want I want to make sure that like we're conforming to the schema that I have for the plans that I expect because basically I imagine the way we'll we'll do this is API call to the service get something back deserialize the JSON map it to our data model right and then show it in the UI something like that. Um, wait, what's this? Snapshots let you lock in a specific version of the model. That's interesting. I didn't know that was a thing. Okay, so um, how do I get to like docs on like how to even call this, right? Um, um, so here's actually before I do that, I'm going to pop over to agent mode and have I actually configured this tool or not? Um, so let's go. I want to go to my MCP server. um MCPJ JSON. And I'm not scared to show this file even though it has in theory API keys because you can't actually see my keys when I put them in here. Security. Um. All right. Let's see. I'm worried when I boot up my Perplexity that it's going to ask me for a key. All right. Take me off the stream. All right. Why am I taking Take me off the stream. It's just gonna be a blank page. Right. Here you go. All right. It's fine. All right. Can they see us at least? Yeah, they can see a little tiny. Okay, I'm also going to log into open I'm going to take this opportunity to log into OpenAI at this moment as well. Log into Open AI. It's intentional. We're hiding his API keys. Yeah, Chain is like we can't see anything. And that's Well, can can they put us on the B on the screen over here? We have a monitor like in the conference center. Yeah, hold on. I'll do this. Let me do this. Hiding hiding APIs keys. Oh, now use Okay, now I'm touch IDing to get my my password for the people at home. Riveting. Okay, now I got to check my email inbox for the verification code. Two-factor off, y'all. There you go. There you go. I put a big Look at Look at what it says. I have a I have a get off my lawn moment, which is um Why do we Why do we make things so complicated, James? I you know, I I I like a text for a two-factor author. the API key. Okay, fine. Let me do it. Let me figure this out. All right, hold on. I'm going to go ahead and uh we're logged in there. What was the other Oh, I wanted my perplexity key. That's right. You don't have the perplexity. It should save it. Well, so that's a this is the workspace versus user thing. I had configured it as a you as a workspace level setting. So, actually, no. Right. Um, so let's see. Rivet riveting content. I should have and hashtagpreparation should have prepared this in advance. Okay, hold on. We're almost back, folks. Um, okay. My profile. Okay, let's go to my API keys. Okay. Um, so I'm going to start my perplexity server. Copy pasta. No, I don't want to use Siri to copy pasta. Do is docker running? No. Docker is never running. I I I had to go through. Do you Does this ever happen to you? Like you have to I'm sorry. Do you ever have to like You can share my screen again, by the way. Um, do you got your keys? Yeah, keys have been gotten. I'm going to have to go back to OpenAI at some point here soon, but that's okay. Um, okay. Transitioning back. Transitioning back. Do you ever have this thing where you're like, it sounds good in theory. Like you're like, "Yeah, boot up Oama, boot up Docker, boot up everything." When you boot up your machine, you're like, "Yeah, sure." When you're installing it, you're like, "Go for it." Next thing you know, you're booting up your machine. Like, why why is it taking so long? But then I hit this problem of like, "Oh, now I need Docker." Every time. Every time. Docker is never running. You know, I have like different stuff I'm using here. Like I'm using Docker for some of these, right? Shout out to uh Cam. Cam Cam. Shout out to Cam for the Xcode build MCP. Xcode build MCP. It's a nice one. Sponsored Pier and I sponsor that personally with our own money. That's how much we believe in it. Not like a corporate thing. We have an awesome MCP. My LLC will sponsor. Um, so what I wanted to show is if I come over here now, I think I booted up that tool appropriately. Let's see. Uh, also I should have just searched. So you can come over here and watch this. Hashtag perplexity ask if I really want to use a tool. I like that. And I want to say um, hey bro, how can I call the OpenAI APIs in Swift? Um, no SDKs, please. Yeah, no SDKs. I I think in when it's when I'm deeply integrating with something like I might consider it, but I also like for things like this where I'm just, you know, throw in HTTP calls over the wire, right, and getting back some JSON and DC serializing. It's like feel like it's kind of overkill. Um, okay. So, we got back a response here. So, this was using Perplexi. So, this went out and did a web search for me. Um, and so what I'm going to do is I'm just going to like copy pasta. I'm going to actually I'll save this for later. um because I think we're going to need that when we generate our plan. Okay. Right. Um but let's go back to the spec. How's what's going on in chat? Do we have any questions so far? Chat's looking good. Uh people are are uh there's people are getting ready to watch some developer conference stuff. Sensor asked, "What are we making?" PICE is uh writing he's typing code, which is I'm typing words. Typing words. He's working on a fitness cycling application. We're adding a feature to it to add some open AI uh stuff into it right now. Um, so people are saying that there's a there's a cloak for VS Code, although it already cloaks at 100%. So the thing is there's there's is a cloak extension for Edge and Chrome and other browsers, right, that you can get. Uh, so if you're in GitHub or in Azure, it will it will mask those things for you. Um, I'm not sure if that works in OpenAI or obviously Perplexely. I'm not sure if it's using a rejax or something like that in general, but um I was very surprised. I set up a Plexity account and dropped 10 bucks in and uh when you create an API key, it's just like there. It's like it's like not hidden ever. Like there's not like an exposed like here's the key. Yeah, I did notice that. That was interesting. Well, that's why I was extra scared when when I needed to fetch my key. Oh, it is. Um All right. What's What's What What are you doing? All right. So, uh let's see. Um, I'm gonna come in here and we're just going to basically run this spec. Uh, the idea is in the idea tags in the spec file. Um, so we were talking about models earlier. I'm using Sonnet 37 thinking. It is a thinking model. So it's a reasoning model. So it's actually like going and being like, okay, this is what the person asked me. Let me do like chain of thought. Let me think about what I need to do. And so typically you get better uh typically you have better results like when you use a thinking model. Um so 03 is another example like if I didn't want to use claude I wanted to use something else right. Yeah. And I do a lot of model tourism. I don't know about you. I like I like to tour around try different things figure out what all these models are good at. So all right cool. So we got our uh training plan generator. Okay. We need to go to a workout generator screen. um select my desired workout type. Um get the FTP, generate the workout plan, review the plan. I kind of like that. Um and then save the workout. Um and so and this has no no implementation details kind of like high level. I'm actually almost wondering like should I just start with like generate me a single workout, right? And then like scale it, right? Like basically in the UX like it's just an array of workouts, right? And I'm thinking about the way that like I would want this as a user like sometimes like some of these platforms are like I got 30 minutes I need to train now, right? Like give me a workout based off like what I've been doing. But then I'm like also like for the model this is simpler, right? Because I'm not SC, you know, I can kind of play with the prompts and I'm not there's no real real reason to scale the complexity quite yet, right? So, I think I'm going to say like actually let's just have it generate a single workout and not one from the weekly plan view to keep it simple. Um, let me review that workout um before accepting. Let's see. Let's see. Let's see. And that adds it to the top of the schedule for the week. Okay. Okay. So then I'm kind of just going to keep scrolling stream of consciousness into the prompt box here, right? Um workout type selection. Uh so I can pick kind of like what I want to do. So the these are like the training zones, right? You got endurance, threshold, V2 max, sprint, recovery. Lately been a lot of recovery workouts for me. I haven't been working out, but I don't I don't have the energy to do much more than that. Um and this is what we're viewing right now. Sean was asking, did co-pilot generate the plan to build the app? And yeah, it just did. It just did. It just it just generated this markdown file. Well, and so what's happening if I if I was just like go build this, right? And I just prompt this in agent mode. Like these same types of things are kind of happening behind the scenes in a way with the the way the model is predicting the next token and things like that. But the problem with that is like say there's I mean we've already seen details I'm correcting, right? And it would just go do something, right? And it's like actually the point at which it's better to intervene is now versus when it's actually doing those things. Exactly. Um okay, so we got FTP integration. Um, so I could just say like FTP info is always available from the profile. So I can see there's like if it's not available, you need to enter it. Okay, we don't we don't worry about that. AI workout generation. Okay, it should include warm-up, main set, cool down, duration, and target power. Um, it should, that's a good one. I didn't specify that. Like it should actually generate a workout that matches like what I said. Um, the workout duration is reasonable. 30 to 90 minutes. Um, I like this. This is kind of an implementation detail, but that's fine. Like consistent outputs. Um, error handling. Sure. Workout review. Um, review the workout before saving or starting. Uh, so for FR Functional Requirement 4, already got a screen, a detail screen that does this. BTDubs. um workout management, save or start. So, I'm going to actually say like let's let's uh kill uh F FR5. I think that's out of scope. Like right now, I just want to generate it. I'm not actually doing the like play workout and like Yeah, cuz that get that's going to get complicated when we get to that on the stream cuz then we'll have to think about a lot of stuff cuz that's that's going to use Bluetooth and a whole bunch of other craziness. That's going to be a multi-day stream. We're not we're not going to get that done in one day. Agent mode's amazing, but not quite that amazing, right? Um okay, so there's some other stuff here. Security security security um usability performance okay technical consideration sure all right so let's just kind of like is this going to use prop so copilot did generate this along with perplexity originally is it going to use perplexity again no I have toate yeah no I'm not using because I did the thinking model it's going to use the thinking it's using the thinking model right so and that's actually fine because I don't need it to go to perplexity to research something right like I just basically want you to do stuff and actually like for this second iteration I find you cannot use the thinking model right you can go a four because like basically I'm just asking you to delete stuff, right? I'm not I don't really actually I'm it's OP. You're massaging it, right? And so like I often see this sometimes as well where people are like, "Oh, I'm they're in like a thinking model and it's like I need you to change the markdown to do this." And it's like, well, yes, that will work, but it's not actually necessary. We got folks saying hi in person over here. Sessions are starting, lunch is cleared out. I think people are are starting to take their naps. Um, all right. So, we got our plan. Let's make sure that all looks good to me. It looks like we updated it. Deleted 15 lines or added 15 lines. Deleted 24. Updated some of our requirements. See, deleted FR5. Yeah. So, all right. So, this looks good to me. Um, so now let's move over to the next stage. So, this is the planning stage. So, I'll actually go ahead and open my plan prompt just to show y'all. So, we're basically going to take this spec and then we're going to say, hey, also like take that spec and generate a plan based off of that. And I'll actually go ahead and add in as context that idea file I mentioned earlier. I haven't shown this yet, but I have this memory file. Look at this. I'll show it later when we're implementing. Basically, I have a custom instruction. Anytime you create or modify a file, make sure or delete. Make sure it's reflected in this. And this is kind of like a highle architecture summary. So you can see like okay, these are the you know, it's describing the docs, it's describing this. So you know how agent mode will use the codebase search tool, right? So it can go like search for things and find stuff. But this is like even more hints. Like you're basically saying like if you need to find something that's roughly this like I've already kind of summarized that information for you here, right? So the search works even better when you do this, right? So I'm going to go ahead and add in the memory is context. Drag and drop. Always a classic. Um I did here's the research like I had earlier. I don't I don't think that's relevant here. Um the plan's already attached because it's in or sorry the spec is already attached because it's in context. Let's go back to the plan. And so um what are we doing here? Generate an implementation plan for this spec doc. Do not overarchitect. Don't do it. Miguel Miguel is rejoicing like we used to work for this guy Miguel and he hated interfaces and like overarchitecture thought it was all you know and I was like but that's like what you're supposed to do. And then like I've kind of come around you know. Yeah. I'm like why why especially likenet and certain stacks like the pattern is like I need to like create like 80 interfa and you're like well I'm only using this interface literally one time why did I create an interface for this you know it's true it's true don't you don't need an interface until you need an interface and then have it generate an interface for you exactly yes if you're using it multiple times that's the right way to use that design pattern but you don't need to just like constantly be like I need an I something for everything right um then like DI is like oh have we made software engineering so complicated I feel sometimes. Um, so keep it simple, right? Keep it simple. Always a good always good advice. I Hey, I'm not trying to get you to generate the app. Just give me some pseudo code, right? We're trying to guide things along. For each step, include the objective, the steps to achieve the objective in any pseudo code. And so this is nice because then when the model gets that, it's kind of like it's not you're not just telling it like do this. You're saying, well, this is kind of what we're trying to achieve, which is again more context for the model to do a good job. If I need to do anything, please let me know. Sometimes you do need to do things sometimes um like there's c certain stacks that like they haven't like totally uh it's not all accessible from like terminal or things you got to go do stuff by hand accessibility like I also have this in my uh in my custom instructions but like sometimes the model will be like accessibility is a separate step and I'm like I just want you to like think about that when you're jittering code in the first place. Yeah. No, I this is an important step too. Like one thing that uh specifically happened to me, we're doing this Visual Studio wallpapers website and we went through the accessibility checker and it like just failed everything. So I was like hey go make this way more accessible and like and just like you know baseline accessibility here's a criteria and it's like cool I got you and it like went through everything and like added all sorts of good stuff. It's really rad. Uh yeah. Well, and I think when you're when you're act like always it's better to think about these things upfront because even though in your case you were successful going and adding it after the fact, right? Like if you have like a massive real world application, you're like I got like 100,000 lines of code, right? And now I need you to make this accessible. Like that might work, right? But it also then basically has to traverse the entire tree of your app, right? To make everything accessible, which could be kind of unwieldy. Okay. Um so kind of similar, I start like my formatting for these prompts. I start with rules, right? I say your goal. I say, "What rules do you have?" And then I say like the steps, right? So, first look at that idea file I gave you. Yeah. Um, and if I didn't attach this, I'm in edit mode, so it won't go find it. But if I was in agent mode, it would have it would find it. Um, review the attach spec. Okay, it's already attached, right? So, I just basically calling out it's already attached in the context, but please like look at this thing before you do something. Then let's generate a plan. Um, structure your plan like this. So, basically spit out a markdown doc. I want you to have different steps. I want you to say this is what you're trying to do, right? Here's the files you touch. Um, here's any dependencies. There's really good like open- source prompts. And I've got this from like someone I think it was takeoff AI. They have really cool like open source prompts and like in the community there's a lot of websites and stuff and so like you can kind of go and look at these things and you find like interesting things and you kind of pick up on it and pull it and make it your own. So, it's cool to see like not just like for code like how like open source is a thing, but also these prompts like are becoming open source as well, right? Totally. Yeah. All right. Um, explicit callouts test, right? Like, um, this is a good way like as your codebase scales, especially in this case, I'm literally writing this all with agent mode. I haven't gone to the editor once, right? Like you want to make sure you're not regressing functionality. It's not so much the new stuff you're building you're worried about. It's like, did I break something else, you know? Yeah. Same thing. explicitly iterate with me um until I'm satisfied and then similar as last time like I love that all my prompts have that. That's like it's a classic. All right, so let's come in here. I can hit play or I can go slash plan. And so we're going to go ahead and start doing that. And yeah, and someone was asking like is coding just markdown files? And I think like the fun part about this is everyone kind of vibes a little bit different, right? So like how you are doing it is like you know if you had a PM that was PMing this project or you took the time you might create a bunch of GitHub issues that have these implementation details and the thought behind all this stuff but you are you are actively doing that. So part of your vibe coding is also the construction of the application or the features on how you want to build it and guiding the AI towards this and everyone kind of codes a little bit different but you you would do this in like you may not do it in this exact way but my challenge to you would be you would probably do this similarly when you build things mentally right you're like this is what I need to build okay let me break that down like that's how your mind works right as an engineer when you build new functionality right and you write code the other cool thing is like to your point that everyone does it differently say you're like I don't I don't want to use agent mode I want to go write the code for this myself. Use HMO to generate your plans. Like exactly like we're doing here. Like you could do the opposite, right? Like do the opposite. Yeah. Like I still like writing code. I want to go write the actual code for this myself by hand in the editor. Old school, right? Like great. Like use AI to help you with the plans. That also works. Um okay. So let's just quickly review this plan. Make sure there's nothing crazy going on here. So we need to create a workout type model. All right. And an AI generator workout service. Okay. That sounds somewhat reasonable. Um, okay. So, there's two new files we're dropping. Um, create a workout generator view model. What does that mean, James? Little MVVM action. I like how this Let me You taught me. James taught me MVVM back in the day, right? I like that it implemented it in this application. I don't know if that's a common swift practice or not. It is. It is. MVVM is super popular. There's not like it's not like how it was like in or maybe still is question mark and Maui like it's it's frameworkless for the most part right it's kind of just like roll your own um now when you start getting into DI and things you know you might need to pull in stuff but like the basic bare bones implementation a lot of times like it's frameworkless and that's actually something I try to do I'm trying to use as few frameworks as possible right like because then you can always uh you know add more context to the model about your stuff like we use context 7 mcp and stuff like that but that's just like more places for it to trip up right totally And so I try to like explicitly not bring in frameworks if I don't have to. Yeah, we saw this yesterday with Sean or no Sam which was like he was building this app with Flutter and it was like just grinding and having such a hard time with different dependency versions of different graphing frameworks where I'm like I bet you could just ask it to self-draw it itself instead of actually like us