Vibe Coding at Microsoft Build - Day 1

Key Takeaways

Oh, yep. I think we're real now. All right. Thank you. Okay. Thanks. All right. We are live from Build. Sorry for the technical difficulties. Classic. It wouldn't be day one of a conference if you weren't sorting out technical difficulties. True story. All right. So, I am Pierce. I am the product lead for VS Code. And who am I here with? I'm Sam. Awesome. And what team are you on here at Microsoft? Sam, I am a solution engineer on the GitHub team. Wow. Exciting. So, what does a solution engineer do? Uh, solution engineer helps customers understanding all different technical aspects of all the GitHub products. Okay. So, you know, you know all the GitHub products in and out then. So, I can ask you all of the questions about how all this works. You can. Okay. Good. Awesome. Um, just to kind of this is the kickoff for the stream. We just had our vibe coding. We had four games we built live on stage. That was super fun. U my game of course didn't work naturally. Um, but we had a nice I built a nice little 3D corporate nightmare frogger game. So that was a good time. And then we're going to be doing streams like this basically all week, right? All day every day. Um, so if you don't want to pay attention at your job and you just want to see like we're vibing out. We're seeing what's new inside of VS Code, inside of GitHub Copilot, inside of GitHub. Um, so we're going to be trying out different things, but all of us, we're going to have different speakers come in. We all have different passion projects, different technologies, different frameworks we use. So, what are you going to be building today? Uh, so today I'm going to be working uh to transfer uh one of my applications I built. So, to kind of set the stage, I I kite board and I wing foil in the mornings between 6:00 and 8 a.m. when the wind is good. But I have to get up at 5:15 to check the wind to see whether or not I should bother and go. I don't want to wake up at 5:15. So I built a quick little NodeJS app to to check the weather and see whether or not I should wake up. Probably what's windfoiling? What's is that the thing where you're like uh where the people like go way up in the sky like off the waves or is that something different? That's kite boarding. Yeah, that's kite boarding. Okay. You can do the same thing in wing foiling too. It's just different how you uh Is that the one where you like have to like do that? Exactly. That's it. For the people in the stream, they're going to enjoy that. Um, okay. Super cool. So, you got to get up early. You got to make sure that the weather's right. Uh, so how is this app going to help us? Uh, well, right now it doesn't help you because it's it's literally just a Node.js server. So, you can see kind of here here's like a prototype I quickly built out. So, I'm looking to see if the wind is consistent between 3 and 5 a.m. ring an alarm. But it doesn't ring an alarm right now. It basically just, you know, has a trigger inside the Node.js app. And what are we look are we looking for like it this slope of this graph to keep going up? Do we want it to be stable? Like what does ideal conditions look like? You want at least more than 15 mph for around an hour. And it says down here down at the 3 to 5 a.m. wind analysis. Hey, look, it's not alarm worthy this morning. It was poor conditions. Yep. Lucky because I'm out here in Seattle, not at home. Yeah. So, you can see I'm also verifying it like every day. So, I built out a Node.js prototype, right? It's running on an npm server. Okay. But now I want it to be on my phone so it can actually ring an alarm. Awesome. I have never built an Android app ever. Let's do it. In a past life, I I used to work at a place called Zamron, which was crossplatform mobile dev and C#. So, it's been a minute for me since I've done an Android app. I did a demo earlier today and it was native iOS and Swift. Been playing around with Swift a little bit. I love Net Maui, but I actually haven't built an Android app in a minute either. So, we're going to do it. We're gonna we're going to figure out how this goes uh live together. What are you thinking for like how you turn this into an Android app? Are you thinking like React Native? Are you thinking Net Maui? Are you thinking native Android app? I'm not thinking. I'm going to let co-pilot do it for me. All right, we're going to figure it out with the model. I love it. Yeah. And you know, there is a spec MD. Like I used a spec MD to originally kind of build this out and help me do the research and analysis to figure out how I was going to get the wind in the beginning. So I've already got a spec MD file and you can kind of see let's uh let's close the co-pilot chat over here. Uh you can see I'm right I'm around visualization, right? I've gone through, I figured out how I'm getting my data source, figuring out how I'm going to, you know, fetch the script, create a visualization, and now I'm kind of in the monitoring and automation step where I'm figuring out if the data is actually correct every day. But right here, future mobile integration, that's what we're going to do live. So, you basically the way you partner with AI is you like to build out these plans. It looks like you build out this spec document and this is kind of what you're partnering with the model to actually go implement. Yes, that's that's exactly how I like to do it. Um especially when I'm you know demoing talking to customers about it like I get a lot of questions about how I take a legacy application. Yep. You know I have cobalt insert legacy code here. How do I transform it? You have to have some type of spec MD or some other documentation to help the model understand what you're doing um as it like kind of maps through the application and figures out what everything's doing. You can't just keep it all in chat. Makes sense. Yeah. I I kind of have a similar workflow. Um, I maybe have like an intermediary step actually because I usually start with an idea, right? Like if I'm doing Greenfield and like I'll usually do like a perplexity research query or something like that uh with agent mode and the perplexity MCP server, then I go kind of feature spec like you have here. Um, I have like a particular format where I have like acceptance criteria and things like that. So it's maybe depends on the project, right? Like I might do this sometimes but I might not do this every time. And then I actually have a step after this where I'll take basically one of these, I don't know if this what you're about to show, and I'll turn one of these into like a plan and basically we'll implement the plan step by step. And that's how I like to do it because to your point like the more context and direction you give the model, the better the results you're going to get, right? Like if you you can just throw stuff in the prompt box and sometimes it will work, right? But like that's not how real engineering works. And that's where like being a developer is important because you know kind of how to prod the model of like yeah you might want to think about this you might need to do this and especially with these plans you can really like spend a lot of time iterating on the plans and then you just feed it to the model right and the model largely does what the plan says to do right exactly okay awesome that's what I plan to do because you asked me how am I going to go about this I'm like I have no idea how I'm going to go about it we're going to talk to co-pilot and we're going to build a plan together I love that um okay so um we got a question in the chat what data visualization library you using for that graph? What data visualization library? Um, I'll be honest. I don't know. I I vibe coded all of this with Copilot. I love that before this. So, I would need to probably go look at my package JSON and see. Looks like I'm using puppet. I'm using Puppeteer to scrape the data, CSV writer to write it to a CSV file simply and node fetch. So, um, let's ask Copilot. Yeah, let's do it. Right. I'm gonna shrink this. It's a little easier to see what library are we using for the data visual data visualization in this app. You know, something that I'll also do as I'm building out the project is sometimes uh obviously your project grows to a point that you can't chartjs. That's it. Um you can't fit everything in the the context window, right? Uh for the model. And so another thing I'll do is I also have like custom instructions set up so that I will basically extract details like this of like here's my text stack. Here's what all the files do. Here's what the files in different folders do. And basically you have like a almost like a markdown doc that describes everything. And are you about to show me what you did? I have a bit of that in the read me. Not not a ton. Right. like it's got alarm worthiness determination um accuracy the project structure because as I was iterating through this I was trying all different uh data sources right so in the beginning I had a just a ton of different files and I was like which ones can I delete at this point um we we've tried this site we've tried that site and none of these are giving me you know good accurate data so I had a lot of stuff I had to figure out uh that could be deleted okay awesome all right so we got our NodeJS server Let's let's start on this Android app. How how are you how are we gonna start this off? Yeah, let's uh let's just start. We're gonna pop pop over here and uh open up chat. The thing I love about these streams is you always see how everyone uses like the product slightly differently. Like we all write code in different ways. We all partner with uh agent mode inside of VS Code in different ways. And so it's cool to see like just how even on the you know in the stream we just did even people from the product team how we're using the product differently. Um, it's pretty cool. Even though we're all on the same team, we're like partnering with it differently. And I have coffee on the stream, which is very, very, very dangerous because I'm known to spill things. All right. So, you're you're kind of just saying, "Hey, this is what I want to do." Yep. And then I'm going to I'm going to talk about planning it. All right. And I noticed you moved over to Claude 37 here. Is that your preferred model for these sorts of things? Um, I use GBT41 as like my daily driver. Okay. Uh, however, um, I I wanted to use Claude 37 on this just to see how little I can oneshot it. Yeah. You know, I I want I want to do more oneshots since we're live. Uh, but I use GPT41 as my daily driver. Uh, and also I have no idea what I'm doing when it comes to Android applications. So, I don't I don't want to be double-checking as much. Yeah, that makes sense. I mean, I think I was just saying like in the last stream, like I like to kind of poke around and try different models. Like typically for like planning tasks, I like reasoning models, right? Like there's 37 thinking. You can't use it in agent mode, but that's pretty good. Um, and then for like back-end stuff, I really like 41. For anything UI like Claude and Gemini have really good UI taste, so I do like using that. All right, so we we've kind of prompted here. Um, it's going to help us turn this into an Android app. So, it's right now, what is agent mode doing? It looks like it's going and gathering context to figure out what it needs to do. Yeah, it's looking through all the files in my workspace, trying to figure out what we're going to do. It looked at my spec MD file. So, um, honestly, I think we're trying to stay in agent mode for this. Otherwise, you're right, I would have switched over to ask and I would said, "Hey, let's let's think about planning this with uh 37 thinking mode." Um, and then I would have probably taken the output of that, written it to a file, and then started agent mode. Yep. Yeah. I I'll sometimes use uh edit for that um as well because if you have the markdown file open, just be like write the changes to this file, right? And it'll do it. And so that's that's another good way to do it. All right, let's see what's happening. We're getting some some stuff streaming in here. So it's telling me to use React Native. All right, we can do that. I like it. That's been a minute since I've done some React Native, so we'll figure it out together. Um you know, it's kind of interesting because chat, I'd love to know if this has been your experience as well. I think when agent mode and kind of LLM just first came out, my uh opinion, I guess naive opinion was that it was going to be really good for stacks that had a lot of training data and it was going to be really bad for things that were newer. And I felt like I would not like it would basically like centralize all the stuff on a few stacks, right? And the interesting thing is like sure certainly the models are better at certain frameworks and languages than others, but like I actually find myself playing with more new tech, right? Like you probably would have never built this Android app if you had didn't have this, right? Oh, absolutely not. And so like it's kind of interesting because it's kind of counterintuitive. You end up actually exploring more stacks that maybe you don't normally work with. And you can immediately jump in and be productive, which is pretty cool. Yeah. I would have probably tried to think of some way to like stand up the server and host it and have it like ping something. Yep. Yep. And avoid doing anything with an app. And then uh Yeah. All right. So what's happening here? So, we're It looks like it's gonna have me create a new project directory. Okay. Uh it wants me to install dependencies. Then next step, make sure that you know the node server is not still running. Okay. Um yeah, let's do it. Let's do it. So, what's that little button you were just hovering over? What's So, that's going to insert into terminal. And I'm just debating how to do this in the live stream so it's easier to see because my screen is incredibly squished, but let's do it. So it's going to make directory make a new wind app server npm in it. Cool. Then it wants me to install the dependencies in this new folder. So we I see puppeteer cores express. This is interesting because I didn't see react native there. Um I agree. Then it says create a server.js file. Set up an express server. Interesting. Okay. Oh, I see. Okay. Okay. So, we were like in step six in the plan and doing that. So, we're going out of order. That's okay. You know what I would do? Say say like output this to like plan uh plan.md or something in my directory. And then we have the file. And the cool thing about that is like say you were to start a new chat, right? Uh all the context from your thread here with co-pilot would go away. But if you have it in a file, right, we can always refer back to it. um versus scrolling back up in chat and missing it because we're, you know, exactly talking and not paying as much attention as we should be as one does. Um yeah, I mean I think the other thing is like uh the model definitely biases towards the most recent thing it did, right? And so even if the plan is still theoretically in the context that we're sending to the model, right? It's way up in the history and the model definitely preferences the last thing that happened which definitely makes sense. I mean like if the last thing I did was read X file to understand what it does. You know, it makes sense the next thing I would do is to write to that file. So that like recency bias is generally a positive, but can result in some negative behaviors. Um, all right. While it's doing that, I think I'm just going to go ahead and set up the uh back up here up top. I'm do the npx react native. Add that into the terminal. We'll multitask with copilot. I like that. Cancel. I need a CD up because I shouldn't have been in that directory. Oh yeah, I forgot we ran that. What happens when you, you know, you don't follow directions completely, right? I start to get out of order. But I mean, this is cool. You're like B, like we, you didn't know how to build this app and it looked at your stack and basically said, I think based off this, React Native is the right choice for you. Which is cool. Um, and then we've kind of built out this plan. We're going to go do some installing a as one does when you start something new. At least you don't have to put aside like a couple days to set up your machine like you did to like that was even like five years ago, right? for sure. I remember when I first when Samron was acquired by Microsoft and we first started working here. I mean even then Visual Studio like had just started shipping not on a disc I think. Um and like you had to like set aside, you know, that's an afternoon to install Visual Studio back in the day. Um now it now it's all cloud driven. You can get that get that thing up and running it fast. Um okay, so we're going to install stuff. All right. Uh so let's let's bring that back into context. So now we got our plan MD file. It's back into context. Um, I'm going to double check myself because I haven't been paying attention. Um, so am I ready for phase two yet? Can you double check my work? I kind of I I kind of like that. Like, did I do what I needed to do to move forward? Well, that's not a technique I typically do. Well, we we went a little out of order here, right? So, let's just double check and make sure that we're ready for phase two. And then once it finishes that, I can typically prompt it to just keep working for me. And that's when I can kind of go on autopilot and multitask and do this in the back end, which is kind of how I do a lot of my vibe coding is do my day job and vibe code on the back end. Well, I was saying in the I had a session earlier and um I'm super psyched for the new coding agent, too, because you can kind of just like while like something's happening, you can already think about like the next task you want to do, right? And um I know for me, like probably many of you, I'm stuck in meetings most of the day, right? And but I do have like two or three minutes in between meetings and I can kind of go review stuff. And kind of my workflow recently, like internally as we got coding agent kind of into our hands has been like in between meetings going and kicking off the coding agent, right? Um and then like pulling down the PR, reviewing the PR, giving some feedback like maybe it needs to iterate, maybe it's good. But that's kind of been my workflow, you know, jumping in between meetings over the last few weeks, which has been pretty fun. Absolutely. I'm super pumped like once I get this published, a lot of the a lot of the people that I that I wing foil and uh kiteboard with, they're like, "Yeah, you know, we want to add features." I'm like, "Cool. I'm going to put it on GitHub and you just go submit your submit what you want and I'll have coding agent do it." That's super cool. Yeah, it does feel like I mean certainly there's still a time element and like you have to think about how you build these things for sure. you know, as a developer, it's still super important to have that context, but it does feel like for me, like I'm building more than ever, and you're almost constrained by your own creativity more than anything else, right? Like I find that that's often where, you know, the bounds of what I'm able to build is actually hitting a wall. It's like, oh, I'm just not thinking about creative enough scenarios. Which, by the way, you can also ask the models to do that, like brainstorm some more stuff for me. It actually works pretty good most of the time. All right, so looks like we didn't create our React Native project. Is that what we're doing now? I could have sworn I did, but All right, let's see. Let's see. We got switch to npm for identical behavior. You know what? Um, let's just ask Copilot. So, you know what else you can do? See that little sparkle icon? You could also click that like nope. Go down. Oh, yeah. Yeah. So, you can click that and that will also like insert uh stuff into terminal. you can ask questions about stuff. So, we are in ask mode right now. So, you're going to get um like this is why we're having to go and manually run these commands because in agent mode Oh, that's the Oh my gosh. When did we switch to ask mode? Uh that was an accidental thing. Okay. I mean, my my preference like I honestly find myself staying in agent mode like 98% of the time and then Yeah. You're like, "What's happening? It's not doing what I expected." And you're like, "Oh, dang. I'm in I'm in ass mode. I need to move over. I'll start working on the plan we came up with. It's not even necessarily like I think the other thing that I like often forget when I go to other modes away from agent is like you don't realize the importance of like codebased search and that tool because like I don't even set context really that often anymore. Um I just let the model figure it out but then you go back to ask mode and you're like oh I have to explicitly set context. Like there we go. It's tough. I'm like, why am I inserting into terminal still? You're absolutely Thank you. Yeah, no worries. Also, by the way, like we're in like a for those not at the venue, like we'll post some pictures online, but we're in like a a dunk tank situation. Like it literally looks like we're about to like fall into water if someone was to throw something at like a a target or be slimed, one of the two. Um, but it's super cool. Like I love this concept of bringing in different people, building cool stuff. Be a good time this week. I think Burke at some point's gonna stop by. Probably like 20 minutes. Dude has to eat. He's been in sessions all day. Okay, so we're starting on the plan. We're checking to make sure the app is running. We're collecting details. Look, looks like we're reading package JSON. It's going through a lot of the stuff we went through and ask, but now it's actually continuing working on itself. I can't believe I didn't realize that was in agent mode. Um, I should have caught that sooner. We should have something like in VS Code that's like, "Are you sure? Don't don't you want to be in agent mode?" Um, I love that. That explains why things just didn't keep running. Usually, you know, when I'm doing this, it's like, okay, it happens for so long. I had to click continue, like continue, keep agent running. Yep. Exactly. Yeah. I think I forget what we're at now. I think it's like 15 or 20 tool calls. Um, and uh and then we like prompt to make sure that like actually we're, you know, are you still there? basically because the thing is the model like to my point I was saying earlier of like uh biasing towards recent things sometimes it starts going down this path right and you're like this is not what I want you to do and so like it's a nice like kill switch of like are you sure you want to continue down this path 15 tool calls is a lot right but it's also speaks to kind of the power of these models when they're really like cooking and doing good work like to your point like they could just run for an indefinite amount of time in some cases and actually solve your task Um, just checking the chat. 03 model. That's a good one. I use the 03 model a lot for planning. Um, like I said, reasoning models are really good at that sort of thing. Um, hey chat, can you see like our our keyboard and every I mean, not literally our keyboard, but you can see like when we're typing, you can see our screen. Everything's all good to go. Oh, I'm seeing hands. Yeah, just I should keep my hands up here. I literally am not doing much. Okay. Um, so are we what are we doing now? Are we like introspecting the project to understand what it does? Is that kind of what's going on here? Right. So we're working on the plan, right? So it looks like it's actually going to to make the wind data available to the mobile app. It's going to create a simple backend API. That's what it's working on right now. All right. So we're so in the in the initial app you vibe coded it was just all kind of one thing like the front end backend we were just making yeah there was no such thing as a backend it was pretty much if we go examine which is what copilot's doing right now we go examine the code so we're going to do what copilot's doing um there's there's not a whole lot here right we're just scrape this uh scrape wind uh basically scrapes the wind data from a site right and then this just uh this HTML pages turns it into a visual ization. There's not a whole lot going on. Um, so we're going to make it into an API and then we'll call that API from an Android app. It It will be interesting because I I haven't done React Native in a minute. Um, it's sometimes tricky with APIs, right? Because you um like you have your API, but then the Android emulator, right, can't talk to the API because it's like a different cordoned off thing, right? And so sometimes it doesn't do a good job talking to the back end and you have to kind of tunnel in. Uh so we might have to set up a tunnel for this back end at one point. And then basically you replace the backend service you're hitting from your Android app with the tunnel Earl, right? I got in trouble in the last session for calling it Earl. Uh it's URL, but that's what I call URL. Um Earls. Um so yeah, like we may have to do that. That's already something I'm kind of mentally flagging when we get to that point of like when we start integrating the API, if it can't hit the endpoint for some reason, maybe we'll need to set up some sort of dev tunnel here. Do I do we ever find that we have to start a new conversation or switch model midstream if things start to go off track? Yes, definitely. For me, like I um I will try like in this case, okay, we got a sorry, your request failed. Like I might try again with 37. It might just be an internet failure with the model provider or I might try switch to a different model. Um I think it's hard because like every single tech stack I think there's models that are better or worse at that tech stack, right? But I do frequently change model kind of mid conversation and people always ask me they're like well is the is the thread history like if we just changed to 41 now like is that all going to also go to 41? It's like yes. Um we'll send the thread history as well. So it can kind of pick up where you left off. Now, if you were to start a new chat now, then there's no context, right? Um, and so you're kind of starting over, which is good and bad. So, this is kind of the challenging thing sometimes about agent mode and any of these prompt first things is you you really have to kind of almost work differently than you're used to. Like, you have to learn like, oh, I think this is going down the wrong track. I need to start a new thread or I want to change a model. Um, and so that's kind of a learn behavior. And I think that is kind of the good and bad of things like agent mode is you kind of have to learn the right the right place to do that. Uh favorite MCP. Oh man, I like context 7. Uh that's really solid. Uh so basically I think it's actually a side project for like another company, but essentially they go and they index a ton of doc sets, right? And the model has all of it has training data cut offs, right? You often have problems when you're using newer frameworks. Even then like if you're using a lesser known framework, it may not be in the training data and so you often like struggle with the model sometimes on some of these things. So context 7 actually like indexes doc sets, right? and uh for languages and frameworks and actually I think you can go index whatever doc set you want um if you just give it a GitHub URL and then um then you can basically use that context in the model and so that's super useful um I really like the Xcode build MCP I just sponsored the author of that one on GitHub um that one's pretty cool because you can basically stay in VS Code never leave VS Code and build like native iOS applications so it uses like the Xcode CLI and whole bunch of other stuff behind the scenes. Taskmaster and sequential thinking. Yeah, sequential thinking I see a in a lot of the samples. That's a good one. Chat, what MCPs are you using? There's probably some that we should be using that we're not familiar with. It's buzzing at this venue. We're we're in like for those that are at home, we're in the middle of like the the booth area, which so there's always people kind of walking around taking pictures of us. Um we're kind of right on the edge of the booth area and there's like a big stage right over here um where there's sessions going on. Um so it's pretty cool because you have people kind of coming and going and watching us as as we're building out stuff here. We got a big monitor outside the room. Um so people are following along on what we're building. So where are we at? I wasn't paying attention. What's happening now? Uh so uh should have started off with GBT41. It's flying so much faster than Claude 37. Yeah, I I was uh I was trying that out risky. Um, basically I'm trying to do an npm npx npx react native and um create the template, but I think it's throwing a fit because uh I think React needs a blank uh probably needs a blank folder, like a blank workspace um to do this command. We're going to try it one more time, but it says, "Hey, check make sure you have a stable internet connection. If not, delete the partially created wind app." So, yeah. So I mean this to the point about models earlier like um you know they they have different levels of capability and speed right um I for one is we're rolling out as the new default model inside of VS Code and uh I think internally we're seeing it to be very very capable. Um you know people seem to like it. It's also got really fast time differs token. So that's that time after you hit like enter like until we start getting stuff streaming into the chat. I think it's by far the fastest of all the models we have inside of VS Code right now. Um, so like there's the speed element, but certainly like there's, you know, speed isn't everything. Sometimes you're like, I want to use, you know, a model that's going to think more, so like a reasoning model. Sometimes you're like, oh well, this model isn't the fastest, but I like the outputs way better. So there's trade-offs there, right? Just because you're getting, you know, every interaction faster doesn't necessarily mean you're building the system faster. So yeah, kind of interesting to see like the different models people use. All right. I think we're just going to try and create a new workspace with the plan file. All right. And then we'll run uh we'll run this. Okay. Sweet. Yeah. I think the other thing about like Burke and I were talking about this and we had like a podcast recording earlier like I feel like you also there's my friend James on. Um, I feel like you also like the weird thing about AI is like you'll make like a ton of progress right away and then you'll hit like a roadblock for like two hours and be so mad or like the opposite can happen like you can have a roadblock at the beginning and then like you get unblocked and you just make so much progress so fast. And so it's kind of like not a linear thing, right? Like you kind of have these spurts of like productivity. Um, and so that's often actually reflects how real life development is too, right? Um, like you make a lot of progress, then you get stuck on some dumb issue. You forgot a brace somewhere, curly brace, and next thing you know, three days later, you find a curly brace and you're like, "How did I waste three days on this?" You know? Um, what's going on, James? Not much. How's it going, Peters? James is like, "Right." Oh, yeah. They can see you now. They can see me now. Yeah. All right. You can also do this. You want more code? Yeah. I want more code. We don't want our face. That's even better. Why didn't I Why didn't we do that sooner? There you go. Life hack. Life hack. Um James James is always nervous like giving me Streamyard stuff. Uh I always do it wrong. There's a coffee cup here. Oh, we got a Yeah, we got a coffee cup right here on the on the uh on the desk. We got a ton of AV equipment up here. So, that's always always good with me. James, what am I famous for? uh is basically famous for no matter what he does, if there's a soft drink or energy drink or coffee around, it will be on your laptop or Pierce's laptop. How many laptops a year do you go through, Pierce? I I'm better now. Um I'm on that Mac Mini Life, so you know, I'm actually okay at at the house. There was a time at Zamron, I think I probably went through three laptops a year, you know, and and the expense people here are like, you can't do that. Like there you you must be doing something with these machines. That's not right that you're expensing that many machines. Um, but I'm better now. You know, we live and we learn, right, James? We're trying to grow up. Um, but I definitely still spill things. I I got to get a carpet cleaner for my house. Uh, because we got a coffee stain right underneath my desk. Shout out to Bissell. Yeah. Um, not not sponsored on the stream to be clear. Not a personal endorsement, but it's pretty cool. We have the We have the steam cleaner for the uh for the couch. pretty clutch with the pet hair and the the kids. We got two kiddos, right? You're there's milk all over the place, right? Stuff being spilled constantly. What's going on with Sam over here? What's what's the what's the catch up for people just joining? So, for catching up everybody, Sam is We got a wind what is it? Not wind surfing. What am I supposed to say? Kiteboarding and we got a kite boarding weather prediction situation. He needs to know when I actually am going kite boarding. uh like the weather has to be right, wind has to be right, like all that stuff, right? And uh so we had like a nice little like front-end app and he's like, "Well, I kind of want this on the go, right?" Um and so uh we asked GitHub Copilot and VS Code, we said, "Okay, how do we turn this into a mobile app, right?" And the stack for this was, you know, it's a web stack. We had node, right? And so, um Copa told us to go down the React Native path. So, we're exploring that right now. Um, I think I've I think I've decided to bail on React Native. We're bailing on React Native. All right. I think uh after after I've getting all these errors with NPNX and NIT and being deprecated, um I think we're going to go a different route. Do it do a different route. And I'm just like I think the the best thing to do by btdubs is when you're starting a new project, like do it old school. Uh there's nothing wrong with a file new. Love a file new. Um, and honestly like the models are not so great at scaffolding new projects anyways. It takes two seconds. It's probably faster to do it without AI. So whatever you pick here, we should just scaffold it the old school way. Tell the AI to scaffold it with the commands. That could work too. Uh, so I'm doing a little bit of planning right now. It's giving me options like uh Cotlin or Java, right? Dart uh or a progressive web app or Cordova and Capacitor. No, don't don't use Cordova. Um I I think it would be interesting to do What about Dart? Yeah, Flutter is I feel I feel like Flutter Dart's some new hotness. That could be interesting. Yeah, we could try that out. The cons it's saying is you'd have to learn Dart, but that's what you're here for, Copilot. So, um I I've had decent success with with Flutter and and the models in the past. It says okay. Um so we can give that a try. I think the other interesting thing is like you can because anything that has you know a CLI to it you can basically use from agent mode right so like in the past you would have to go to like a different IDE or experience to use these things but if there's a terminal sorry if there's a CLI then the agent mode can drive it via the terminal right and so you can stay in VS Code your favorite editor you don't have to go anywhere else all right we got a we got a plus one for flutter in the chat I love it uh would you like to proceed with initializing Yes. Um, they do have laptop keyboard liquid protectors, says Eric from chat. Um, yes, but I there's there's no you can't replicate actually using a keyboard without one of those things. I don't have I don't I don't have my phone with me. I have no case no case on the iPhone. The $9.99 I pay Apple every month is worth it uh just to just to get that phone replaced. Right now, I literally have a hole in my phone. I just I don't know what it is. I don't like cases. I don't like protectors. I don't want any of it, right? I want to use the device as God intended, as Steve Jobs intended the device to be used. All right. So, it wanted me to uh jump out to a website, download Flutter. I'm like, no, thank you. Um, so fastest way to install is through Brew. I have Brew installed, so let's just rock and rock some brew. Um, and we'll install Flutter that way. That sounds good. And then I the thing I do like that they have is they have this doctor command which makes sure your environment is set up correctly. I like this. Yeah. Anything that helps me because I have no idea what I'm doing with Android apps is Right. Exactly. Well, you know, you you were planning on just having an Android app, but you know, now because you're using a crossplatform framework, gonna have iOS app, web app, desktop app. I'm I'm gonna blame this on you now. Uh like this app was just for me. Now everyone at the spot's going to be like asking for it. Love that. Uh well, that that is that is an upside, right? We can go back and take a look. I'm sure it said that was a pro, right? Yeah. Great for both Android and iOS. Yep. And and I mean hot reload's great, too. Especially like in agent mode. I actually haven't tried Flutter hot reload with agent mode, but you can kind of like as the changes are streaming in from the model into my file, it's like hot reloading. That's a really cool experience. I like doing that with web. Wait, what happened with React Native? We have So what did happen with React Native? Why if if someone were like I had a meeting and I came back, what's going on? You're using a different stack. How do we get here? Uh so as I was trying to set things up with React Native, I kept running into issues. Uh and I would ask C-pilot, you know, help me work around this issue, but basically it was all ran into kind of problems running the npx react native at latest innit trying to initiate the windapp template. Um and it kept pointing me to the documentation, right? Right. And I didn't really want to open the documentation and read it to try and prove a point. So, um, yeah, basically I couldn't get past the init command. Okay. Which I'm sure if I opened up the getting started and just read it would there'd probably be something simple, but we're trying to avoid cheating here, right? Yeah, exactly. Yeah, it is kind of interesting like there are certain tasks I think, you know, the models are are really good at and there are certain tasks they still kind of struggle with. And I do think ENV setup is still like a major one where it's like things can go wrong very very very quickly. Um, but it's interesting once the code's there, it like knows what to do. But like getting to that place, whether it's environment setup or even scaffolding like I was telling you, like sometimes I feel like it's faster to do that without AI. But if you don't know how to do it in the first place, right? Like playing with new languages like we're doing today. Um, kind of you need the help, right? Um, why Mac OS? I I like I use Windows and Mac. I'm I'm on both. Um I I have a dev box, like a Microsoft dev box. And so um I'll hop over to Windows and use that. Um little WSL action I like to use. Um Mac, I don't know like I I switched when I was when I was working at Zamron because I was doing a lot of native iOS development. And obviously you have to have a Mac to do native iOS dev. And so that was kind of like my history there. And then I don't know like these choices are so personal, right? You start using something and it's kind of hard to start using something else just because you're so used to it. But I kind of jump around. I like to use both. Um for sure. Um I had the option when I joined. It was Mac or Windows. Um I'll be honest, I made the switch around 10 12 years ago because I had to compile iOS apps to demo the solution I was, you know, showing people. And I I've been using Mac ever since. I still use Windows on a daily basis all the time, especially uh for my wife's business. But love that. Yeah. Um, sometimes I wish I had Windows, especially when I have to deal with PowerBI and I have to go like boot up a VM. Yeah. But yeah, um, preference. I mean, even like I I've been using a lot more Linux, mostly in code spaces recently. Um, because that's pretty cool because like if you're working on a lot of different stuff, you can just boot up a code space and, you know, you're off to the races. So, I I'll do that quite frequently. All right, so it looks like we installed something. Flutter's finally downloaded and installed. Always a big risk downloading something new on the conference Wi-Fi. Nah, I'm hotwired in. I got an Ethernet. All right. All right. All right. Flutter Doctor's running. Looks like everything's set up perfectly. Oh, perfect. Uh, it says Android Studio is not installed. Uh, that's okay. We'll see if we ever get that far. Well, we could run it as like a as a Mac app or something like that for now or a web app even, right? And then you don't have to probably faster iteration cycle anyways than going to the native tool chain. All right, so we're done. Flutter's installed, so I just told it to please continue. I'm really not prompting anything useful. Like if we if we if we talked about prompt engineering, I would get an F for sure. Um, so Michael Michael is also saying like we were using the wrong command for React Native um, and that we should just be using the doc. So something you actually can do now in agent mode which is pretty cool which I do quite frequently is you can literally copy pasta a URL into agent mode and we'll actually actually go resolve the contents of that URL and add it to the context that we sent to the model. So like that's something you can do. You be like use this doc and help me figure out what to do. Like that's that works in agent mode. And if you're an ask or edit you can use hashtagfetch. Does the same thing. All right. So we got we got it installed. We ran flutter doctor. We did a scaffold. Is that what happened? Yes. Um, and I I keep like I need to get better at uh actually telling agent mode to continue doing things for me instead of doing it myself. It asked me, hey, do you want to keep doing this? Let's just run this app, too. Like let's do flutter run. Um, and then um because it looks like it's scaffolded. Let's just make sure like it runs and everything works. I got Burke queued up here. He's about to come on live in like one minute I think technically now. Yeah, I this is a perfect time to jump in. Actually, we having a great time. Burke says he's just gonna leave me here just for the next like six hours. Just hang out here in BDD. Yeah. Yeah, we could all use an app, couldn't we? All right, we've we've got the Flutter demo page up and running. All right, this is actually a good time for you to jump in, Burke. We got we got we got a Flutter page. We got our new app actually up and going here and we're going to start building this Flutter app. So, I'm going to jump off the stream. It was cool hanging out with you guys for the for the last 45 minutes. I'll be around tomorrow. Think I'm going to show a little bit of native iOS with Swift. I got an AI cycling app I'm building. Yeah, of course I do. That's like my go-to demo. So, I'm going to be building that tomorrow. So, definitely check out the stream. We got a lot of mobile apps, it seems, that we're going to be building this week. Um, I wasn't anticipating that, but yep, mobile's always fun. All right, I'll see y'all later. Have fun with Bert. Oh, wow. This is like a whole thing. Yeah, we're we're moving. We're We're moving. You uh you missed the part where we were kind of uh struggling a bit. Now we're Now we're getting lots of commands. Agent mode's firing. All right. Um I have a question for you. What's What's going on here? What's going on? What are you doing? Start all over. Okay. Uh, so, so we have an app. Basically, instead of waking up at 5:15 to check the weather, um, I Who does that? Exactly. Uh, I have this app automatically checking the weather. Uh, however, it was just a Node.js app that I vibe coded last week and it's on my computer. That doesn't help me. I want to change my alarm so I either wake up if the wind is good or I stay asleep. Okay. Okay. Wait, whoa, whoa, whoa. Why do you care about the wind? What are you in Iowa or something? I I go kite boarding or wing foiling in the mornings between six and 8 am. No, you don't. I do. Are you serious? I I am. Wait a minute. Kiteboard? Is that the thing where you you have like a board and you hold on to the thing? Yeah. And you go flying in the sky? No, you don't. Do Do you actually Do you catch air? Yeah. Really? Yeah. Wait a minute. How do you How do How does this work? Like, do you have to get out there and be towed by a boat and No. No. The wind the wind carries you. Dude, I I don't even care about this anymore. I just want to know how this even works. Uh, how do you get upright on the thing? You have to dive with the kite and then it pulls you up onto the water and then you're riding with the wind. It think like wind surfing, but Okay. I've never done that. Imagine wind surfing flying a kite and then the other one is where you hold it in your arms. It's like wind surfing 2.0. Oh, wait, wait, whoa, whoa, whoa. One of them is an actual kite though, right? Where you're holding on to the thing and there's an actual kite pulling you. Absolutely. Now that looks amazing. Thank you. But but it could just pull you up into the air, right? Like it could for sure. Right. And then what? Then you're like the balloon, the guy with the balloon. You hold on to it. As long as you stay holding on, you just kind of float back down gently. But if you let go, yeah, you'll fall out of the sky. That's laughing about falling out of the sky. All right. What's up, chat? What's up, Michael? Yeah, it does. I don't know, man. I don't think it it sounds terrifying. I'm gonna be real. So, let's see where I can I must have accidentally installed this in the wrong directory. So, so you built you vibe coded a weather app and now you're downloading the entire Android SDK as one does. No, not doing anything with the Android SDK. We we installed Flutter. Um, and I accidentally installed and I accidentally installed in the wrong folder instead of listening to agent mode and having agent mode do it. So you can see I've got this wind app flutter up here with the rest of my projects instead of being in the correct folder. So that's why the commands weren't working. Directories are important. So now wait a minute. You're going to make it fix it or why just do why I not just open in the right directory? Um I guess I could but then I don't know man. I'm new here. I don't know what's happening. You love Linux. I love lamp. All right. I actually have a lamp in my bag. Not even joking. I brought a lamp with me. Are you guys deploying this on Verscell? I have no idea. Can you deploy a mobile app to Verscel? I don't think that's how Versell works at all. Is it? It might be. I don't actually know. I think you're building a native mobile app, right? What's up, Devin? Devin's out there. Hey, buddy. All right. What do we got here? All right. So, now it's going to make sure it CDs me in the right directory and we're going to create this thing properly. Okay. So, we're initializing the application. Oh, I understand now you're porting a node app that you built to a mobile app, which you said, no worries. Holy crap. What? This is a They should get me out of here. No worries. Fire me. All right. Scaffolding the basic screen files. Now we're Now we're going through all this again now that we're in the right directory. That was my fault because I went and manually typed it instead of having agent mode. Instead of trusting in agent mode, you didn't trust. Well, it's hard to know because sometimes it does like BS you and you have to call it out and be like, "No, uh, we're not doing that. That's wrong." But then sometimes it tells you something and you say it's wrong and it's actually right. That's what looks like that's what happened to you. I do not see any errors. It appears the wind app flutter directory was not created successfully. I'll be the judge. Whoa. Why is it not created? There's a real live James in my in my face. Well, it's in right here. It's there. Don't worry. Yeah. I don't see it in the I don't see it either. Let's just kill this terminal and start a new one. Okay. Yeah. React. Uh you know what I mean on the side, right? the flutter. So, we should be in wind app and then wind app flutter. Yeah. And then it should create it right here. But it it should be in your file explorer, but I don't see it. There it is. Now it's there. Flutter pub add http. What? Oh, that must be like some dependency or something. I'm just coming up to speed. I've been have I been wasting my time with Maui? That's the question. James is here. I don't think so. I've been building some Maui coding later this week. I don't know if it's working well for you. Awesome. Yeah. I I am I just I just did. They can't hear me. No, they can hear you. No, I can't hear you. Yeah, Rick, you No, you I'm wasting your time in Mac. There's a there's some We were talking about this the other day. There's all these mobile frameworks out there and I asked you about one. I said, "Is there's a good framework?" You were like, "Yeah, there's a lot of good frameworks." Yeah, a lot of great frameworks out there. Pick what you love and what you know. Um, looks like we're creating we're moving to some directories and adding some dependencies. There you go. Now we're cooking. Yeah. Now, now we're off, I think. Now we we're cooking with gas, as they say. Cooking with Yeah, now we're cooking with gas. Oh, it wants me to log how I'm feeling right now. I'm gonna log how you're feeling right now. How are you feeling? Uh, Sam, is this your first mobile app? This is my first time doing any mobile app dev. Never done any mobile. Yeah. Um, would you say neutral? Slightly pleasant. Pleasant. Very pleasant. Uh, let's put it this way. I wish I had just vibe coded the Node.js live. That would have been uh I already did it though. I'm looking for regretful in the menu here. I don't see it. It's all right. We It looks like we're working now. We're finally getting main Dart, home screen Dart. We're finally getting code created. Do you know Dart? No, I know nothing about mobile app creation. I have never done any mobile apps ever. We're the perfect two people to do this because ne neither have I. I know JavaScript. I can build a website. Uh yeah, exactly. That's what that's what that So I I had it up earlier. You didn't see it, but I did show the live running app originally and how it you know I have it all prototyped out. It's actually checking the weather and you know giving the alarm. Is it impressive? Does it look good? I don't know about impressive. I like I'm not a developer full-time. I think I might offend some people. I said it looked impressive. I just tell Claude to make it look impressive and it actually will. All right. You can now run your app and navigate between the screens using the app bar icons. All right. How do you run it? Uh, let's run the app. I think it's flutter run. Let's Let's run the app and take a look. I don't know how to run it. Copilot. Flutter run. Copilot is going to tell I need to kill these co-pilot instructions. Yes. O, it's gra. So, these are co-pilot instructions that I threw in for the npm server because I got tired of uh having to kill my npm server every time like some I would do changes. So, I need to Yeah. CD and then flutter run. But you're already in the right directory. But these are leftover copilot instructions from my old Node.js JS app, right? So, I should probably delete these for this uh branch that we'll eventually create because right now I'm just I'm on the main branch still. I haven't done any proper development techniques. I mean, that's that's the whole vibe. That's the definition of vibe coding. We we are vibing. There are no proper development technique. We're throwing all of that out the window. All right. Cool. These guys must be chefs. They're always cooking and present their work with a local host. Okay. All right, cool. Tamed craziness. Are you an AI? Welcome to the wind trend checker. All right. What's up? Great. We have the app running. Is it running? Yeah. No way. Let me see. We're running. There's nothing in there. Oh, I thought it was a mobile app. It's that it ran it as a web. Oh, because Flutter does it. Flutter does Chrome. And so, right now, uh, you missed the I had to choose an option. There was option one or two. I could run it as a Mac OS app or Chrome. Why not like an iOS app? I said, sorry, I said Mac OS. I meant iOS. It did say Mac. I think it said Mac OS difference. But regardless, uh, we're doing it in Chrome because we're live here. We'll I'll once I get back, I'll I'll go dink around with Mac OS. Okay. Uh, great. We have the app running. Let's start. Let's start trans. Let's start with the next phase. What is the next phase? I don't know. Copilot wrote it down for me. Let's start with the next phase. If we are done, you have literally offloaded your entire brain to co-pilot for this one. Absolutely. For sure. So, here's the plan. This was You missed this part earlier. Um, I I showed that I created a spec MD file when I first started building this out to help me research and figure out what sites and where to get the data and help building out a visualization. Um, like step seven in the spec MD file, which I'll show right here. Uh, steps, you know, step six. Oh, that's a long file. Did you didn't write all that? Maybe LLM write that. Of course, Copilot wrote it all for me. It helped me build this. I didn't do anything with this other than, you know, provide pokes and prods. I like it. Anyway, future mobile integration. That's where we were at today. And I asked people before this. I was like, "What do you guys think? Should we should we do this? I have zero knowledge of of Android." You're you're mighty brave because you're doing it with people watching you in a glass box. Ah, thank you. This is the perfect time to try something you've never tried before. Data fetching service is created to get wind data from your back end. And the home screen now fetches and displays wind data. You can now run the app and see the load spinner error message or if you update the app. Okay. Well, it's we'll be the judge of that. All right. So, we should be able to uh lies. Hold on. I have two I have two browsers open. I think that's the old one. Oh, that actually looked really nice. That was an impressive first attempt. That that was my Node.js app. So there there you go. See no wireless devices found. Chrome, Mac OS. You have look at the iOS simulator installed or whatever. I don't have any of that installed right now. Oh, and you're using GPT41 also. I am. We were using Cloud, but it was I saw it. I saw the thing. Yeah, it did the thing and then it and then it failed. Well, that's fine because we're we're not there yet. So, let's loading spinner error message or if you update the API URL. So, now that we're coding, I'm going to switch back over to 37. 37 was going so slow for kind of just planning and figuring things out and getting getting things started. Um let's let's have 37 help us with the code. All right. Why are you going back to 37 though? Um did you lose faith in 41 already? So 41's really fast, but I feel like it it um and this is maybe you'll know, but Pierce Pierce is saying like there's around 15 prompts. Let me type this in and we'll talk. All right. All right. uh proceed with phase two and bringing in the code and transforming. Uh Tuck with VTOR, will you create a public repository for this project? No, because we're going to monetize it directly. Just put Striper in front of it and we're going to retire. We're never coming back here. Yeah, I think we I think we probably will. This thing will end up being public for sure. Yeah, it'll be public. Yeah, for sure. For better or for worse. and and you know, I'm probably not going to publish the results of just today. You know, I'll end up putting it into an app. Uh it's already in a GitHub. It is published. If you went and look for my my GitHub handle, you'll find it and you'll find the original Node.js app. Let's see. Uh is the back end running? Is the back There is no backend right now. Um where where's it supposed to get the the weather from? So, it it pulls the weather live. It scrapes a wind website. And right it my old one was just dropping into a CSV. Um, like I said, it was just a quick prototype to see if this would work. Um, so now you're like scraping a web page as an API. Can you do that? Does that work? You can use Puppeteer. Puppeteer will scrape scrape it. So the the wind site doesn't I have a membership to it, so it's not like I'm But they don't have APIs available. Um, so I had to scrape the site. Um, anyway, there it seems like there should be a public API for wind data though. That's like like what am I paying taxes for if the government's not providing? There is a public one. There is absolutely public ones, but they're not as good as the private one that I have to. It's just better. Yeah. Um, so what were we talking about? Oh, why did I switch? Um, is that what we're talking about? I don't I'm sorry. That was like two timelines ago, man. I don't remember what we're doing. Back up. Start over. No, it was um No, so the thing ran. There was a spinner and then you said that's because we haven't done something. We haven't actually added the code in. Um, oh, so this is what I was Pierce was talking about earlier. There's a certain um there's a certain number of like prompts and that it'll go through an agent mode before it stops and asks you to continue. Yeah. Yeah. When it says it's been working for a while, please continue. Yeah. Yeah. So, I feel like GPT1 will stop sooner, right? It it'll like work, you know, do it does more steps faster is what happens. Yeah. Versus cloud like it'll run forever. Yes. Literally. And uh I've been getting a lot of questions. We've been talking a lot. So I needed to needed to offload some of my concentration to back. Yeah, that may You've been in here for You've been at this for an hour. For an hour, I would say we're not very far. Um how do you feel after being here for an hour? Uh I'm finally feeling starting to feel comfortable. I wish I had just voted to go with Flutter in the beginning and not try to mess around with something I had no clue about. The first hour was brutal. Uh the first hour was pretty brutal. Um I showed up for the fun stuff. So you can see we're actually now looking at this is what I should have expected to see a while ago was hey here's my wind visualization dark mode which is you know go back over here this is this page it's taking that it's looking at the scraping right we talked about how the original app scrapes from the wind site it's grabbing those and now it's putting it let's create the model classes and data services for our flutter app thank you because I have no idea what I'm doing with flutter yeah I mean I have no idea is that isn't java chat is flutter is flutter is flutter is dart And Dart is Java, right? I assume if it's Google, it's Java. No, I don't think it's Java. Yeah, that's like all Google does is J. I swear everything is a J is Java. What's Go then? Let's see what the chat says. Validating chat. What is Dart? Well, it's it must be some like language that can compile down to Java or transpile to JavaScript because we're in the browser. So, yeah, I don't know. Let's see what chat says. Now let's create model. Okay, it's creating the model classes. Yeah. So now um again, this is what I expected to see a little bit ago, right? Here's my wind visualization and the scraper because my original app, you can see we got a lot more files here. My original app was just two JavaScript files and then the CSV data because I didn't even want to build a backend. Yeah, because why? It's going to end up being an app. So you gota you got to love JavaScript. That's all you need. Two JavaScripts in a C. Again, it was it was a prototype just to see if I was getting the right data from the right place. Yeah. So, yeah, Java Dart is Dart. Dart is Dart. But yeah, it's like Google loves Java, right? I'm not Am I crazy? Um, why don't you create a Net Maui project? Everybody's So, you've got people freaking out. You should have used Maui, man. No, it's okay. He just didn't choose Maui. He chose Flutter for Maui was not on the uh that was not on the choice list. Yeah, I didn't I did not see Maui way back up here. We're at a build conference, I think, is the problem. That's Microsoft's mobile framework. Sorry about that. Uh, try Juan, we're sorry, we messed up. Don't tell don't Here you go. Here was my options. It was not It was not presented as an option. If you want to build an Android app without React Native, uh, Dart, progressive web app, Cordova. Whoa. I I threw that one out to Pierce and he was like, don't even don't you dare. That's a throwback. Um, wait a minute. This might help if you copy paste your package JSON in the air into Microsoft Copilot in a new tab. You want us to open another C-pilot, bring another AI into the mix? I'm already terrified enough to open more screens while I'm live streaming here. Like, I'm Yeah, I hear you. I was like, "Oh, man. I don't even want to open and build uh open up a new project." So, we're staying in this one. I think we're we're off to the races here. Things are actually happening. Feeling pretty good about it. I am. Thing is, we got to sit here and like let co-pilot I mean uh let Claude cook. Claude does take quite some time to run. That's This is why I was in GBT41. It's fast. It's exciting. It's so fast. That that's sort of like the double-edged sword of Claude is that it's really really good in agent mode, but then like also there's this issue where it's like uh come on man. Somebody the other day somebody posted and they were like vibe coding more like vibe waiting. It is true. I brought I said it earlier. I was like I think I I was I want to start in 41 because it's faster. It's exciting but it's like you know um it's very true. For 4-1's my go-to at the moment and I used to be clawed all the way but I do like 4-1 a lot. I'd say 4-1 is my daily driver for sure. Um, and what I usually do is 4-1 most of the time and then I'll flip over to 37 if I feel like I want it to go longer because I'm multitasking or if I get stuck. Like sometimes I get stuck and I just I need to switch models to try and get out of whatever it is. Yeah, it's almost like asking a different person like Exactly. Well, we can't figure this out. What does this guy think? Let's see him. Pedro Microsoft live streaming in a Mac programming in Dart. What a time to be alive or it's our last day on the job or your last day on the job. I'm joking. Uh yeah, no, Microsoft doesn't care. Uh believe it or not, we went through this earlier actually. Uh when I joined, I had a choice between Mac and Windows. Um and I said I made the switch like 10 years ago. I've just gotten so used to it. Uh because 10 years ago, I had to actually compile iOS apps and show those off. So yeah, I remember the the three months of painful experience trying to learn to alt tab to command tab. Oh, that's right. Because it is command tab. Yeah. So at at home, I use a PC that I built myself that has like I don't know 96 gigs of RAM and it's got a big GPU and it's got a like a 20 12 core 24 thread or maybe strike that reverse it, however that works because like there's an excuse to build a PC now, right? Because like you got to run models and stuff. So, you have this excuse to spend money that you don't have. And uh Jessica Dean's here. And um then I have a Mac that I use when I'm on the road traveling for stuff like this. Hey Jess, good to see you. So So what I really want is I want to have uh a Windows server at my house and then have my Mac as my like an actual server. Yeah, why not? But isn't a server? It's just a computer. It's just a computer. But, you know, that way I don't have to, you know, boot up a VM to use PowerBI and do other things. You know, would be dope though is if you had a whole closet that was just like full of these beefed out GPUs, you know, like Nvidia's got this thing that they're making um that's like a supercomput that they're going to sell that they announced it. I forget chat. What's the name of this thing that Nvidia is creating that you can buy? It's like four grand and it's a supercomput. It's like a consumer grade supercomput. I'd love I'd love to hear more. Are they going to talk about it, you know, uh, tonight at the the happy hour? But did they have a happy hour? I think Nvidia is sponsoring the happy hour tonight. I think we're working. I don't think we get to go to that, bro. That's not how this works at all. You sure? Yeah. Yeah. Uh, yeah. Chat's chat, if you could please Google that. There there's an Nvidia supercomputer that's like four or five grand. You can buy that mug and then you have a supercomput. I don't know what happens after that, but you own a supercomput. And right there, that's worth it. All right, we've finally got to what I think is a stopping point. Well, not a stopping point, but a stopping point for this model cuz it's a little bit too slow for for live excitement. Uh, yeah. Now, you must So, we've summarized the conversation history, right? Help proceed with phase two. I need to focus on implementing the settings functionality, integrating the backend API. Um, I'm going to move to 41 just to make this go faster and be more exciting. Let's do it. I'm not worried. We We use a lot of models. We don't care. There's no wrong way to vibe or right way. I There was a wrong way to vibe earlier. I was in ask mode for at least the first 10 minutes of this. So, there is absolutely a wrong way to vibe. I made sure to accomplish it in the inaugural kickoff of solo vibe coding here at Microsoft Build. Is it called digits? Is it digits? Let me pashan. Let me look that up and I'll I'm validating right now. Uh Nvidia digits. It might be digits. Let's see. The world's smallest AI supercomputer project digits. That's right. At Grace Blackwell supercomputer on your desk. Yes, that's it. No, it's not the Spark. It's It's definitely the digits because it's like it's all bedazzled, which I don't understand. Like they bedazzled uh the supercomputer for whatever reason. All right. wasn't what your wind data model is already correct. If you want to proceed with the next step, please proceed with integrating local storage. Are you already on to that step? Is everything working? Um, it's still not. Um, wait a minute, Chad, you may be right. It may be Spark. What is happen? It's project Nvidia DGX Spark is the name of it. Project Digits Spark is the name. I'm sorry I'm interrupting your the vibe flow. No worries. I'm I'm now that we got 41 cooking. We're gonna we're gonna go back and we'll be a little faster. So, it's telling me the next thing I need to go on with is implement local storage, then connect the backend and using this model in your UI. So, the UI is not showing anything yet because there's I haven't done that step. Can I ask you a personal question? Sure. Do you really use the mini map? The mini map? Yeah. Do you use the mini map? What is the mini map? The mini map is this thing taking up like all this space in in your screen. Oh, no. But I I'm not even looking at the code. You don't care. You don't care what's in there. You literally don't care. I I mean, this is annoying that that's up. So, I should have closed that. Um, we don't really need this. I mean, at what point do you just close the editor all together? I'm probably at the point where I should. I I don't even look What is the point? I I don't cool. That's the vibes. I don't want to know what's happening. I don't want to know what you're doing. I I think the only time I really start looking at the code is when things start going wrong and builds break or and but again, I'm only looking at the code and copilot's doing the same thing and it's going fast. Yeah. But at this point, neither you nor I have any clue about how this thing works. So what would we do even if we Well, you'd have to ask Copilot to explain it to you. So still in in which case you still don't need the code. All right. So, next steps could include reading these settings in your window. Oh, it's like trying to move on to next steps of the of the application. Truly vibing indeed. Do y'all vibe chat? Do you vibe? So, listen. I uh I tweeted this morning about a bunch of different stuff in the keynote. Okay. Okay. Now some of these things that we had were the open sourcing of GitHub copilot chat in VS Code, the open sourcing of WSL, MCP on Windows, Grock and Azure. Which chat of those things, one of those tweets went viral? Which one do you think it was? Of all those announcements, which one do people seem to care the most about? Would you like to guess? I'll let you guess. You remember your options are open- source chat extension for Visual Studio Code, open source WSL, MCP on Windows, or Grock in Azure. Those are the choices. Grock in Azure. Lock in your votes. That's your that's what you think. Why not? Okay. Well, let's see what see what chat thinks here and then I'll tell you it because it was not what I thought and the takes are spicy, man. Like not everybody is happy about it. I'm getting quote tweeted with some fairly harsh mememory. Doesn't feel good. All right. Now, what's wrong? Uh, nothing. Saying it's good. Oh, okay. However, let's start debugging because it's telling me it's good, but it's not right. It's telling me there's telling me the wind analysis logic uses the user's minimum. Okay. And that's not true. Uh, we're not seeing anything in the UI. No, we don't see it there. So, we got let's see Grock WSL extension open source. I'm gonna give y'all another 30 seconds to lock those votes in and then I'll tell you which one the people seem to care about the most. Press R because it's like it's not actually Yeah, it says press R on the terminal. Chat wants you to press R on the terminal. It's actually Chad's teaching me. Chad's teaching me how to now just paste all that in. Just I just just copy all that in and paste it in. No context. Uh Chad's telling me you don't know what you're doing at all. Is the elevating the console like forbidden in Chrome? I don't look. I'm the MC. Yell at him. Why would I do that when Copilot will go fix it for me? Yeah, tell just tell Copilot to go look in the This is a This is a question that came up earlier with Pierce, like what's your favorite MCP server? I don't know if there's one out there yet, but I would love an MCP server that will deal with Chrome dev tools so I don't ever have to inspect anything again. Play right will do that. Yeah. Yep. Done. It will open. It can inspect the page. It can look at all of the everything that's happening in the guts. I call it the guts. All right, y'all. The answer is the thing that people that seems to be most controversial, the the most controversy was MCP native support for MCP on Windows. Why is that why is that so controversial? I don't know. All right. Did you paste the error in? Oh, yeah. For sure. Now it wants to add another another package. We already added this though, I believe. Well, let's add it again. Ken, the beauty is to put guard rails before you start. Let's set up the tone of the tone and the context. Yeah. Yeah. The more uh instructions you give the model, the better your chances of absolutely getting something that works out the other end. Don't worry, you're going to see people that actually really know how to code show up here in the next, you know, couple sessions that'll probably set up co-pilot properly. The rules are you don't get to leave until I get this working until the thing works. I don't know if they didn't did they not explain that. Like that's why the doors are locked, man. Oh, man. Yeah. We'll see how this works out. I mean, I'm hoping we just get something in the UI, right? That that'll be a win if we can pull that off in 15 minutes considering the the stumbling blocks I've had along the way. Then most of these are user errors, right? you guys will see a lot more people that uh persistence. I think what I think this goes to show is that it really does help to know what you're doing. Probably the best combination of vibing and results is vibing something you understand. You know what someone explained? They they explained it this way like if you give someone a power drill Yeah. that doesn't make them a carpenter. That is very true. But it does make a carpenter hang cabinets hell of a lot faster. That is very true. Wow. That's that's really good. Although you can't you can't say hell because this is a it's a family show. Oops. Yeah. No, I'm just kidding. I don't know. Is is that a swear? Uh yeah. MCP on Windows. Why? I don't I'm not exactly sure. Although I mean it does it that is a pretty powerful thing, right? Like it opens up all sorts of possibilities. Native in the OS. Come on. Absolutely. Windows as a client when Windows is the client. It's kind of incredible. All right. What did you do? Uh, we inspected a lot of things. Searched a lot of text. You cleaned. Yeah. Did a clean flutter pub get flutter run. I feel like clean is a is a call for help. That's a cry for help from the from the AI. That's like I I I don't know. Clean the project. Let's see. Couldn't resolve the package shared preferences. Yeah, I can't find that that freaking package, man. Let's see what it wants to do now. High pressure game show. No, this is this is the Oh, well, yeah. And the fact that you don't get to leave, no rest. Let's do one more Flutter run. And then I do I do prefer Claude for debugging, like when I start running into errors. GPT41 for sure for going fast. Um Claude tends to get me out of trouble with debugging. I like how you ran it and it didn't work. So the solution in your mind was to run it again. That's the most developer thing in the world. You ever heard the joke about you have like a developer and a project manager and an IT like an infrastructure person and they're on a road trip, right? And they're in a car and they're on the road trip and they're driving down the road and the car um they um like you know it it breaks down, they almost crash. They pull off to the side of the road. Everybody's like, "Right, terrified." And uh and the and the the project manager is like, "Look, here's what we're going to do, right? I'm gonna write up a a spec for what might have gone wrong here, right? And then we'll get all of the stakeholders here to talk about what we need to do to get this fixed and we'll get this car back on the road, right?" And the uh the infrastructure uh the infrastructure person's like, "No, I think what we need to do is just replace the back plane right on the car. We'll just replace the whole back plane. I've got the order into CDW. It will be here in 24 hours. That's what we're going to do." And they look back at the developer and he they're like, "What do you think we should do?" The developer's like, "I think we should just try it again." I like it. The AI is stuck in your environment trying to adhere to to your requested iterations. I'm suggesting a new browser tab. A new Somebody suggested opening a tab because I think this is what people do. This is what I do too, by the way, is they'll open a browser tab to like Gemini or chat GPT or something and like throw it over there and see what it says. Oh, yeah. And see if it can point you in the right direction. Yeah. But it looks like Let's see. Looks like it's I mean Claude's telling me that we're missing something from the pubsec lock which um that sounds legit. I mean the pubspec is where all the packages are defined in. I actually happen to know a thing or two about flutter. I'm going to be honest. I've been lying. Well, I mean if it's anything like you know any of the other package managers, right? My lock file is out of date somehow. So I I don't I I don't know what that means. Lock file being out of date. Like it's it's the lock file is not in sync with your actual main file, right? So your pubs sec and then your pubsec lock. I I have a I have a deeper question though. What is a what is a lock file exactly? A lock file defines exactly what all of your dependencies are. Why do I but that's defined in the package JSON. Why do I need that? No, the package JSON especially for like npm can do like carrots and do sim ranges. So it could be you know when it actually compiles well or you don't know what it will be. You don't know what you're going to get especially for all your transitive dependencies. So, the lock file tells you each specific dependency and the transit dependency and what version you've got. All right. Um, $60,000 question. Are you Are you supposed to put that sucker in source control? Yeah, absolutely. Always check your lock file. Okay. Because then I feel like Dependabot just slaps me around with outofdate dependencies. Well, and I don't know what to do with opening PR is like, leave me alone. I'm just trying to live my life. You should be trying to stay up to date. I'm not. I'm trying to play overwatch. Well, the best way it was explained to me once upon a time is uh think about going to the dentist. If you didn't brush your teeth every single day and then you went up to went to the dentist, he's going to need to drill maybe versus keeping your packages up to date. Like if there's a vulnerability that occurs, upgrading, you know, a year later is a lot harder than if you just upgrade every time a new minor package comes out. Yeah. And then you know that there's a major package coming out, so you need to put that in your backlog as an item that you need to work on. And maybe you could have co-pilot coding agent work on that as an issue. Yeah, it's just like no. So this is where I really want an agent. This is exactly where I want it, right? When I've got like I got PRs. There's 50 PRs and 48 of them are from Dependabot. And like I don't have time for this, man. I'd assign all of that to C-Pilot in a heartbeat. Fix those freaking Dependabot alerts. Man, you got a crowd now. What did you do? Um we're we're debugging. I don't know. Uh let's let's take a look. We've been chatting. Super exciting to debug live debugging. Uh let's see. So we fixed the shared preferences dependency by adding it properly. So we didn't have the shared preferences dependency in our pubsec yaml and now we're downgrading FL chart from one to 0.55 which supports tool tip bgolar. Uh we cleaned up the build and reinstalled. Um all of that sounds made up. Is that from you or chat? Is that the chat or you? I'm looking at the chat. Hey, does Visual Studio also have this co-pilot? Yeah, it does for Sean. Yeah, but lay with this. We listen to you complain about it being slow while it was writing all your code for. It's so true, man. The thing is writing all the code and all we could do is moan about it not doing it fast enough or the right way. Look, we don't have time for this. We don't have time to wait on Claude. Stop justifying Claude's freaking behavior. Delete your package log file in npm install. Well, it's not an npm project. Well, we we do have an npm. He is right. There is a there is an npm in here. I basically put both apps together in one repo to avoid having to open mono repo additional. Don't worry, this is not how it works. You have eight minutes to land this plane. We will see what happens. Like I can see people out there looking scared just like me. Um, cool. So, let's continue testing app. Make sure all the features are working. Let's focus on cute few key aspects. So, it's verifying the theme change, checking the wind data uses user settings. All of that sounds very official. I'll be honest. I don't know. See, this is where you kind of get yourself in trouble is you jump to a different terminal and do things behind co-pilot's back. Um, yeah. And then it doesn't know what you did. It's It's like, I want to start the project. It's already started, bro. It's already started. See, we're still getting errors. Yeah. All right. Hold on. Hold on. Here's what I would do. What do the errors actually say? Look at them. Uh trying to use a constructor or factory that have you just wholesale pasted the error into the We did earlier and then those were completely different areas errors. So now we're we're working through we're working through that. We're actually not working through these areas. I would literally take that and paste that error wholesale no context into the window. And the other thing I would do is I'd start a new chat session because the longer that thing gets, the tougher the time the agent has because you're stuffing the context window. It's got to deal with everything above you. That is very true. And all of the tabs that are open plus all of the context that it's gathered. And yeah, that's a pro tip, chat. Like clear that chat out as often as you can. Otherwise, your context window is going to be like bloated and I mean, we're still we're still working through things. It's still coding for me. Yeah, it it has. It's not. You know what? I feel like it's never going to give up. There's At no point will it be like I I don't know. It's true. If this was me on my own trying to learn Flutter, uh this would have ended at least an hour and 15 minutes ago for sure. Should have used Maui. Should have used Maui. I can say that it's build. I tell you what, start all over. No, we're not. No way. No way. As soon as this finishes up, we're gonna we're going to debug this last last section with probably 41 and then you're going to go sleep for two days. Yeah. No, I'll be back here tomorrow. Are you? What are you doing? Uh I actually gonna moderate in two days. Really? What are you gonna moderate? Um Martin Woodward is going to be coding. Oh, really? Yeah. He's got a like a Oh, you're moderating him vibing. I will be I'll be taking your position. I'm actually vibing tomorrow as well. And I chat, look, this is I got to show you this because this is actually get this is happening. I lugged with me all the way from Tennessee an actual lamp. Oh boy. I've been carrying this thing around for days. You You got to hold it up to the camera so they can see this. This is I I brought a lamp. Okay, now check it out. I have a I have a bulb or as we say in Tennessee, a bub. I have a bub. It's an internet connected lap bub. It is a TP link. Yeah, it is a TP link. Yes. No, it's actually not. You just had that box. That's just the box. It's an LFX bulb in a TPLink box. Stay with me. And I'm going to code an MCP server that controls the light bulb. Oh, yes. So that the agent can then turn the lights on, change the colors. Why, you ask? Because I can, right? Love it. Yeah. And um also I have a a site that I'll give you and you can just change the lamp color as I'm vibing which I also vibed but I previously vibed before the vibing that will happen tomorrow. All right. What's the word? Where are we? We we are uh we're we're testing now. We're finally ready to run the command in the terminal. Let's make sure that you know I like that you've burned $1,000 in Azure compute. Trying trying to be so true. Uh all right. Unable to find utility Xcode build. It's going to tell me I don't even have Xcode build because I haven't installed Xcode build probably on this machine. Why? What? Let me ask let me ask you a serious question here. What on earth does Xcode have to do with anything that we're doing right now? Are you're not building a a native Mac app, are you? Uh uh Flutter allows you to do Mac. Yeah, but you're not you're building a web app, right? No, this is supposed to be a mobile app that can be in Mac or Android. I wanted to do it in Android because I have an Android phone, but Flutter allow we ended up switching to Flutter, which allows you to do both. I'm clearly not paying attention to anything you've said in the last hour. Ask it to summarize context and open a new chat. Yeah, let's let's uh you're right. And actually, we do that for you behind the behind the scenes. Uh okay, so you have your other co-pilot here. The problem here is that you don't have Xcode installed. So, it can't run X code. So, you just need to run it on the web. Just tell it to run it on the web. I hit two though, didn't I? Or did I hit one? No, no, no. It ran one for No, it ran one for you automatically. Copilot. Yeah. So, this would be a good custom instruction. Always run it on the web. Never run it on Mac OS because I don't have Xcode installed. You could install Xcode, but then that will take the rest of the day. We have no idea what we're doing. Chat, listen. I'm about to get out of here because I've been here for 45 minutes and that's all I signed up for. I'm leaving. I'm going to go watch my favorite streamers on Twitch in the hotel room play Overwatch. Are there any other Overwatch players in the chat? Where you at? Don't forget to add codebase when you open. That's a good tip. What's that? Yeah. Are you in? Am I out? Oh, another 15 minutes. Oh, wait a minute. No, I I got started at Didn't I? No, I got started at 2:45. I'll stay with him. I got it. So, we had someone live here come in and assist that actually knows Flutter. Um, let me know that we were we were running into Please click Please click keep all the time. Yeah, that's you should you should keep more often than you're keeping. He has that too. Um, why is there errors? I thought AI writes perfect code. It does not. Spoiler alert. Let me add this as a custom. Do you play Overwatch? Who's your main? Who do you main? Who do you main? And are you playing the new stadium mode? I'm curious. All right. All right. So, the issues that it was running into uh looks like it was from the FL chart library when it was running on the web, right? It was trying to do it for running on Mac OS. Ah, so again, someone said it in the chat right here. I'm, you know, dogging on cloud while it's written everything. I haven't done anything. Literally have no idea what I'm doing. That's true. You're complaining about code you didn't write. But, well, isn't that what a lot of people do? I mean, oh, you're a Hanzo, man. Oh, never mind. We're not friends anymore. I'm just kidding. I'm a Reinhardt man. So I'm and and and Road Hogs. I'm a huge fan. Sorry. I'm having a side conversation over here with the chat. That's okay. Has nothing to do with vibe coding. I I mean I probably should be like moving around and showing how things are actually changing in the code instead of just leaving it on the pubspec. YAML. Yeah, that's not terribly interesting. YAML. I like how people were like, "Ah, XML is not great. Here's YAML." That was the solution to that problem. All right. So, did update my copilot instructions um to make sure that we always run in Chrome. And uh we can go take a look at it. How we doing? I mean, got a lot of green there. I like the green. Uh lots of green. Green is good. You know what? I uh yesterday I bought one of those giant Reese's candy bars. It's like it's called like a nut rages or something. It's called a nut rages. That's That's what it's called. It's chat. It's literally like this big. And I eat half of it at 4:00 a.m. And the other half is sitting on my knife stand. And I just want to go back and be with my Reese's candy bar. Stuck in the hot box. Stuck in the hot box. Stuck in the hot box. Flutter nightmare. Personally, I hate Yale. I always prefer Jason. Yeah. Significant white space. No one likes it. It's never been a good idea. Not once. yet we keep doing it. How do you know if your YAML is malformed? Don't worry, it is. Oh man, you that's that same joke about Vim users like how do you know somebody uses Vim? I I don't know. Don't worry, they'll tell you. Just wait for chat. Somebody from chat's about to say they use Vim in three, two, one. Yeah. Is co-pilot available for Vim? Yes, actually I think it is. I actually think it is. Neov. It's for Neoam. Yeah. But is Neoam Vim? I mean, come on. Time to scrap Flutter and go with Vit plus React. Oh, you know that is my original app. I mean, there's no React in it, but it it is Vit. Um, so the original app was VIT. VIT is such an remarkable piece of technology. Like we you take for granted like how good VIT is, how fast it is. That's one of the most impressive pieces of technology that's ever been created in my opinion. Chat is VIT. Literally, it's Vit. It's underrated. It doesn't get enough credit. I actually take that back. I I vibe coded another app that we could have worked on and that one was Vit. This one was not. We talked about this one earlier on. This one is just chartjs. Gotcha. That was um another one I was gonna So, you lied to my face. I did. Sorry. I'm like V. Yeah, I literally vibe coded V this week. I just did it. By the way, y'all, Sam and I, we do not know each other. We We just met. Just met. He just sat down in the seat next to me. I'm like, let's rock now. Now we're best friends. Vit is actually That's what I'm saying, right, Michael? Like it's just a remarkable because remember what was before that is this Webpack and I don't want to dog on Webpack but I do want to say that I never understood it and I I found myself in trouble a whole lot and Vit just like things that just work in the land of things that just work. Vit seems to just which is what I need. I'm not smart enough to debug problems. So if if you look at what actually happened here um there seems to be an issue with FL chart. It actually needed to use the newer version. So when we downgraded earlier, um, apparently that broke some things. Okay, so you're back on it. We've got less errors. That is That is success. We're down to two errors. That's great. What is SWC, Nicola? I know what Pog is. Poggers. Pog and Pogers. SWC. Well, Pog is like I used to think Pogment play the game, but that's It doesn't. I don't know what it means. It means like dope, I think. Um, so basically there's a manual on debug. Yeah, you're we're manually just feeding things back through. I'm not touching anything. I haven't typed in probably two years. Let's scroll back up and see when I last typed. Um, just I did hands off the keyboard to show that this is really vibing. Um, let's go back up. I think the last the last time I typed was let's work on debugging this. We are still getting errors. Um, that was quite some time ago. And they stay there. And they stay there. Um, that's the vibe coding. I am clicking though. I So, anytime it tries to run a command, you do have to click to confirm. So, you're not just going to be running willy-nilly commands. There is a setting. You can tell it to just do it for the session. Uh, which I do it for the vibes. I actually don't know where that setting is, though. Pebbs would know if he was still here, but he left. He left us. He took off. Hey, James, go get me a donut. I I do I do prefer to have donuts on whether or not it's gonna run. Actually, I just want something to drink. If you could just get me a drink, that'd be great. Yeah, I'm watching my figure. All right, we're going to update again. We're still updating this uh looks like issue with the media query API this time. Okay. I mean, all of these things. Look, the thing is like, if the AI is making it up, it's so good at making things up that like it sounds legit. We have no way of knowing. It's just bully. Yeah. Right here is like, see, exactly. Think about the amount of time it would take me to look through this and figure out if AI was hallucinating or not. There you can't. And that's why context is extremely important. Um, somebody somebody once explained it to me like this was like one of the engineers at Microsoft who works on the Azure extension for GitHub Copilot. And when you have these agents, what you want them to do is like call these tools or look at documentation when they need to do so. In other words, like if it doesn't know what to do, it would be nice if it would just call a tool to go out and look at the documentation. Okay, so it's like why doesn't it do that? Well, because that isn't how LLMs work at all. LLMs are really, really confident, right? Like they're like a senior dev who's like, "I know the answer to this." And feels like they don't need instructions or directions. And so it's really hard to get them. Oh, dude, Rice Krispie treats. It's really hard to get them to use tools to like What? You're not Do you just rejected my Rice Krispies? I can't eat a Rice Krispie treat live with a microphone in my mouth. Why not? Show me. That's ASMR. Hold on. Rice. So, we're we're down to one error now. Uh we started with at least I don't know. There's way too many. It filled the screen, especially in this uh smashed smashed window. We're down to one now. So, it's debugged all of this the entire time. So, I'm hoping I'm hopeful in the next seven minutes we get a We're down to one error. We're down to one error. We get either that or it will turn one error into 10. I'm gonna y'all I'm going to eat this R Christmas tree. I don't care. There's a mute button right here. No, don't turn it on. That doesn't mute you. It just mutes me. Oh, just what mutes me? The one over by you. Wait, it literally says cop. Yeah, if you press that, you're you're on mute. No, this is I'm providing the ASMR component of the um of the live stream. Hey, we're on we're on TV. Wow, there is a lot of people here. There's a camera. There's people filming us there. We have some water. water for sure. We're making ASMR as we vibe code. We've got Rice Krispie treats and we can do a little crinkling. Oh yeah, we're vibe coding. Oh, Sam, you're being interviewed. Tell them what you're building because honestly, Chad, I don't really know. I I honestly can't hear you. Say it again. Oh, so just to kind of recap what we did earlier, um I built a uh a wind. So I I kite board and I wing foil in the morning. So, I don't want to wake up at 5:15. Uh, I want this app to change my alarm. So, I built it in Node.js. So, I look at the weather, but I don't know how to build anything in Android. I've never built a Android or iOS app ever in my life. So, we're using Copilot to do this for me. Um, it was a rocky road in the beginning because I didn't know what I was doing. But, we are almost I mean, we don't have a fully finished application, but I think we've actually got something we can show to cap this. I like how you said in the beginning. In the beginning. As if the situation has improved in the last hour. Oh man, this is the Dude, this is the highlight of my day for real. Is this is this gonna work? Is this gonna work right? Is my whole hour been for nothing? We will see. If so, I'm never speaking to you again. This is officially the last time. Yeah, that's right. I am team light mode. I don't just I don't do dark mode just because everybody says that that's what you're supposed to do. Yeah. Pro dark mode. Yeah, that's Sam. I have no control over Sam. Yeah. Yeah. All right, so we've got six minutes. Uh, it actually stopped finding errors. Um, I think by the way, the official recommendation from chat is to rewrite it in Rust. That is not a joke. No. Please tell me that is not just rewrite it in Rust at this point. Wait, did it did it actually implement fetching of the wind data that you previously did with Puppeteer? Did it actually do that? Uh, let's go take Let's Let's go look. Uh so here's the wind data dart uh about settings. Here's the main function. Be honest, I'm not seeing anything in here with puppeteer. Oh, it's a negative ghost rider. I think so, too. By the way, you got five minutes. T-minus five minutes. T-minus five minutes. Let's see what we get here. One more error. Just always just one more. Just fix that last one and then you can go home. Simple wind chart. It's the charts, man. The charts are messing you up. I mean, it wasn't a complicated app for sure. Listen, are you going to eat this or can I have it? I'll eat two Rice Krispies. Go right ahead. Looks like we need to make the simple. How are you going to eat that? I provide zero value this whole setup. I mean, you did let me know I should recode it in Rust. It's like, no, that was that was Nicola suggested that. Thank you for your constructive feedback. Oh, man. I'm going to search and see if we've got anything in here with Puppeteer. No, I definitely did not implement any of my puppeteer stuff. There's no puppeteer. Nah, I like how 183 people have decided to spend their afternoon watching me struggle. Uhuh. Yeah. Learn learn to use Flutter and Dart. Simple. It exists, but it appears to be Himpy. Let's add the content again. Yeah. Why don't you try that again there? Thanks a lot. Yeah, I think maybe you should start to get rude with it and just yell at it. You know what? I should have honestly now that I've gone through this learning experience uh what I could easily do is create a new Flutter project um take the plan take the three files from my Node.js app and just say build this mobile application using these specs and plan and it would probably be faster than the nonsense I'm going through right now. Why didn't you just do that to begin with? That makes so much sense. Well, we we didn't come straight to Flutter. We we started off with round You took a roundabout way. We we took we took uh at least 10 minutes of me using ask instead of agent. God bless the broken road that led you to this broken No way. Are you serious? No way. No way. That did not happen. Wake up. Good wind conditions. No way. That h that did not happen. Again, I know nothing about Flutter or Dart other than I understand the package management. Chat, did you just see that? Here we go. I did not think that that was There's no way that There's no way. There's no way. What? Let's compare. What in the world? Oh, man. Look at this. Look at this recent readings, right? Showing me the time from this morning speed, gust, direction. This is all accurate. So, if we go we go back to my other um this is my the one I built, right? Um, again, I vibe coded this one, too, but I actually knew what I was doing. Uh, so you can see 6 to 8 a.m. verification analysis. Should I wake up? Right. Um, and it's got current data for different days. Here we go. What? I still can't believe that, dude. We were We were utterly broken, confused, lost. You were crying, right? I I think there was some tears for sure. Yeah, it was hard for people to tell from the video, but you were crying and now it's working. Um, no errors. You know, we just had we had to struggle through those errors. And uh let's not forget to click the keep button. Uh I tend to do that. I forget to click keep. You should you should commit right now. Stop what you're doing and commit this monstrosity feature. Flutter ship it. Yeah, Nick. We're going to ship it. It's going to be in the app store in an hour. Uh 99 cents a month. And you know what? I have no idea what happened. So, co-pilot's going to do that commit message for me. Dude, you're one minute. You have you have less less than 60 seconds. You pulled that off. This is seriously the greatest moment in technology, right? There's like the announcement of the iPhone and then there's you somehow salvaging this train wreck at the 11th hour. Local host delivers once again. That's what I'm saying. Absolutely. Nicholas says, "Okay, now rewrite it and rest. H unbelievable, man. So, I think I will, you know, to to kind of recap this, I do think I'll continue down the Flutter uh path. I'm not going to go back and do React Native. Um and see how far I can get this for sure without a live audience watching me. Um your ne your next prompt should be make it look modern. No, seriously, like Claude and just say make it look modern. For some reason, Claude really likes that word. All right, chat. Thanks for being here. Nick already approved the PR, so I g I don't know what what PR Nick, what PR are you telling me about. All right, ship it. Yeah. Uh, all right. Thanks for being with us, chat. I guess we're swapping out, dude. I don't know how anyone's going to top that. I I think it'll be uh be pretty easy. All right, chat. We're out of here. See you. Heat. Heat. Heat. Heat. Heat [Music] up here. [Music] Hey, hey, hey. [Music] Heat. Heat. N. [Music] I love the blue. Heat. Heat. N. [Music] [Music] [Music] [Music] [Music] [Music] Heat. Heat. [Music] [Music] [Music] [Music] I'm doing [Music] something. Heat. [Music] Heat. Heat. Heat. [Music] N. Heat. [Music] [Music] Heat. Heat. [Music] Heat. Heat. Heat. [Music] [Music] [Music] Heat. Heat. Heat. Hey, Heat. [Music] [Music] [Music] [Music] [Music] Heat. Heat. Heat. [Music] [Music] Heat. Heat. Heat. [Music] [Music] [Music] Heat. Heat. [Music] Heat. Heat. [Music] [Music] [Music] [Music] Heat. [Music] Heat. Heat. Heat. [Music] [Music] Hey, hey, hey. [Music] [Music] [Music] By the way, [Music] [Music] Oh my goodness, we are live. Yeah, finally. Not without Wow. Okay, so let's think about all the things that blew up. One is you had to install Windows updates. Well, of course, it wouldn't be a demo without having to do Windows updates 3 seconds before we demo. First of all, the uh Wi-Fi wasn't working, the the Ethernet. So, then it's like, okay, let's test this. then reboot and then anyhow we're live. It's happening. We're live. We'll do it live. So Shane, I'm very excited here. You are going to be coding something with Azure. Something with Azure. Yes. What you got? What is the You're married. I am married. Right. And what's the biggest trouble? End of the day, work's over. We get home. Number one question we have is what's for dinner? What's for dinner? What are we doing? It's like, I thought you had it. I thought you had it. Okay. What do we have? And you're like opening the fridge. got an old pie crust and I got some like uh what are these? Um Cornishes or you know I found I found a chicken breast and there's like a half a bag of frozen corn and whatever. So So I I've always wanted to have an app on my phone or website or something like that to be able to put in the few ingredients that I have and just like give me some some ideas. Yep. Right. I thought that that's super useful. It's real. Yeah. and um you know, maybe I have 15 minutes, I have 20 minutes, whatever the time frame, that would be cool. And I thought uh I I'm a pretty good cook. And one of my favorite shows is um those cooking challenges, right, where you open the basket of crap. Yeah, it's like I got frog legs and and spaghetti sauce. I don't know how about you, but I got frog legs in my office. Um so, but yeah, to have those types of things like what can I make? And some people can are really good if like I know my mom could throw together something with like Doritos and a and a you know bag of beans or whatever. It'd be great. I call it magicking it up. Magic up dinner. So I would love to be able to create something that did that for me. Okay. Um and and um and I'm also terrible at front end. Okay. Perfect combo. A lot of things. Um I I like uh there's some things that I do like. Uh I like Nex.js. I think it's really easy for me to work with. I've been doing Node and JavaScript for a long time. Yep. So, I'm gonna start with um nothing's more more daunting than a blank canvas. There you go. Right. So, we'll start with a blank canvas. Right. Okay. Um I'm gonna pop into our favorite coding friend, co-pilot. Um uh James and I were talking earlier. We're both kind of clawed Sonnet 35 guys, you know, when it comes to the model. I'm all about Sonnet 37. It's right. I use 35 because it doesn't exhaust a lot of my my tokens. Yeah. Uh I don't hit those limits fast. 37 is a tad bit faster, but okay. There's 41. Use whatever makes you happy. Yeah. Right. So, I'll use this. So, I think the first thing I'm going to put in here is um create let's see um create a next JS app. um where I can use Azure Open see Azure OpenAI uh to you know suggest you know three to five recipes uh based on a few ingredients uh few ingredients uh input right I think that's a good one I find that the more information that I give, yeah, the better results I'm going to get out the gate. Now, I don't want to be, you know, biblical, right? I don't want to write some like independence. Yep. You know, type of thing. You know what? I've pivoted to almost doing that though lately. I'll I'll like write up a spec and I'll include like an outline and mark down bullet points and stuff. some I mean you know a lot of time to get started you can iterate and stuff but sometimes I'll just be like this is what I want you know and save the back and forth. So, I'm gonna say, you know, please provide the results in card style. Yep. That has uh the ingredients and uh steps uh to um to make the meal, you know, I think that's pretty good. um you know let's say designwise um let's say let's make it modern you know style right let's just start with that let's see where we go hands off the keyboard let the magic happen as they say let it cook let it cook right so cool I love this that it tells me back like cool we'll we'll create this nextjs app for you use Azure open AI um and let's see where it goes. Um, since we're working with Azure, it's going to get best practices. Now, um, my job, I actually work on the Azure developer tools. And, uh, I love that it knows I've asked for Azure. It's going to use the, uh, the best practices from at Azure, which is the GitHub co-pilot for Azure. Cool. Yeah. Um, it knows I've asked for Nex.js, so it's automatic going to use the create next app from them. Uh, and I'll say, great, let me open. I love that, by the way, that it's like it gives you the command so you don't have to figure it out, but it's going to say like, "Hey, I can run this for you. Let me do it." You know? Now, one of the things that I I kind of dislike about some of this is I've done the let it cook motion, you know, I might go grab a coffee or whatever and I come back and this thing is still spinning. I'm like, "What's happening?" Yeah. And even I saw in our previous Vive session, people are yelling, "You got to press R. I got to press R." Right. So it says okay to proceed. I'm going to hit yes. Oh, right. So because I've run the MPX command, it's now I'm in the terminal context. Right. It'd be cool if there was like a dashy or whatever. And then it's going to ask me all these other questions that are specific to Nex.js. Okay. And maybe I don't know that. Sometimes the when you ask these questions, it'll automatically make assumptions about the frameworks and things like that. I've asked for NexJS because I'm familiar with the framework. Okay. What's the elevator pitch for NXJS for like uh I'm an ASP.NET dev. Yeah, it's just a really easy fast framework. Uh it also provides some front-end tooling. You'll see as we get a little bit further like when the browser is rendering like local, it gives me automatic debug information right in the browser. Super nice and you'll see that when it comes up. Okay. Okay. Um, and I believe like uh Blazer and some of the other frameworks that are out there also do very similar things where I can kind of get some information about the components that might be broken and give me some debug info. So, Turboac, yeah, I'm just going to accept the defaults. Um, so now it's going to install all my dependencies for me, which is great. We're waiting for all this stuff to happen. Um, I think you're slightly you're like way in the corner of the camera. Oh, you want me to come over here? There you go. All right, cool. You're the star, Shane. We don't We don't need to see John the whole time. Just GitHub stars. We only want GitHub stars. That's right. So, the one thing that I do enjoy too is that we know that copilot the co-pilot here has executed a terminal command. Yeah. And you'll see it's spinning. So, it's know it's waiting for this to happen. Mhm. It's just kind of waiting for this output. Every once in a while though, I have seen it kind of stall. I found some workarounds for that. I want to know them. Yeah. What's really cool is if you see it stall or pause, I'll actually copy the command and I'll run the command myself and it picks it up. It's like you you're kind of smacking on the head. Just gave it a little kick like go and says, "Oh, now I see the command's running." It's like it almost loses a context. Okay. Uh sometimes sometimes that helps. We're doing some things. I'm not. There we go. So, success. It's done this thing. Now it's done our created our initial app. And you'll see on our files, it's there. Okay. Um, so now it's going to run npm install. Again, we've asked Azure to OpenAI to be a part of this thing. Y. So now it knows what MPM packages we need. It's going to go and get those as well. It also knows I need Azure identity, right, for security. Okay. So we'll hit continue. I think that's kind of one of the big I don't know selling points of the whole like where uh Azure fits in where Microsoft like the value Microsoft adds into the AI stack is actually integrating in the identity and security and all that stuff right all kind of fits together here's another cool thing I really love about this is so cool they did this I wasn't sure if it was going to do it or not it's added av f file right so it's going to use the keys that I'm going to need from my open AI instance in order to use the endpoint. Now, I've already gone and done the endpoint right on on Azure OpenI. Um, so I just got to paste those values in there. Cool. So, I'm being approached. I feel like a goldfish now. Oh my gosh. So, um, we're being stared down by Debbie. Hello, friends. So, I love that it's got that already in there. It's awesome. I don't have to think about where I put my keys. How do I How do I manage those? Yeah. No, I got a question for you because these ENV files super awesome. Great to have like one place. Are they are those like secure? Do I have to worry about accidentally checking that ENV into GitHub? Like Well, the good thing is most of these frameworks um when you're doing like a a setup of your initial one, most of them are now including the ignore files. Okay. and then the net getit ignore should automatically include excluding those right okay um but if you are kind of in the ecosystem and been using GitHub you kind of know what the normal practices are I have done as a cleanup before I do my commits I'll actually go and ask co-pilot hey can you make sure we're not committing any files can you double check my git ignore y just double check my git ignore and it'll look at maybe things you've added yourself Yeah. Other things that's done and just to do a double check. Oh, I see you have a Blazer app, ANET app, a Java app. And there might be certain patterns of those frameworks that it needs to add in to right because we're working in you know monolith repos doing various things and sometimes it's not going to automatically do that. Yeah. The other thing you can do as well, uh, which we can show maybe as we get a further along, is you can have copilot custom instructions to to make sure that it kind of cleans up for on itself. Yeah. And just say, "Hey, as you add files, make sure you check my git ignore file." Cool. So, you won't have to go back and do it. It'll automatically do. It's just part of the process. Right. For sure. So, let's see what's going on here. Now, it's creating the actual pages that we need in our source file, source folder. It's got our page, our layout. It's going to add all that stuff, which is cool. Uh, and we'll just continue to let this thing move along. Now, uh, it even, it's very apologetic. It's messed up something. Says, "Hey, I apologize for the error. I didn't even know it created an error, but cool. Thank you. Apologized twice." Yeah. So, now it's doing some autocorrection uh, as well. Um, so now it says, "Hey, let's create a get ignore file to exclude the ENV." So, and the node modules, right? So now it knows also uh it'll probably go back and and do the node the node modules too. Um the other thing I find that it's very good at too is when you're creating new things or adding large features for me anyways, I notice it likes to create a lot of markdown files. Yeah. Around what it's added or a feature that may have been difficult. Oh, okay. Right. So I recent project I was having a hard time doing some deployment things. It was a complex deployment and it started making notes for itself. Mhm. Almost. And it was really cool because I was using some new practices. Yeah. And uh as you pass it on to other teammates. Yeah. Uh they might be may or may not be using co-pilot and now they can look at it and go, "Oh, I forgot to put the setting in or check the stuff like that." I really like that as like a markdown being a a format that's human readable but but Copilot's super comfortable with it's structured enough that it can like make lists and check stuff off and all that. Yeah. Yeah, for sure. That was something I first picked up from Pierce was the thing of making a to-do text or a requirements.mmd or whatever, right? And it's like basically like here's what I'm building. go through these steps and then so when I was watching him he was saying like okay do the next step and it would like check the requirements and just go on to that next thing. Yeah, for sure. So now it's going to run. It says look we've got all the things in place. Let's start the development server and test the app. That's not that's not long. Yeah. For us to get to a point where it's got some some things here. So now we can actually see if it's actually going to work. Yeah, I do want to allow that to run. That's cool. Thank you. The other thing too is now while it's running it, it's also going to watch the terminal, which I really love. Says now that the dev server is running successfully. Uh, now it tells us to use the application. Make sure you go and and change your OpenAI stuff, right? Says now access the the local host. So, let's see if we can actually do that. Let me know if you need me to take you off screen or something. So, cool. Look at this. Like we've got a recipe generator. Generate recipes. Let's try it now. I know it told me to go put in my keys. Yeah. But you didn't do that. I didn't do that. Oh my gosh. So, let's see what breaks. You've been warned. Uh I'm typing, but I can't see it. Okay. Um probably because the text is wrong. Like the color is white or something. So, let's say I'm going to type in chicken. Um let's say greens uh and beans. That's that new minimalist web design. It should fail. Yeah. Boom. Why? Because we don't have our credential keys in here. So, what I would probably do, I don't want to put all that stuff in there just yet. I'll just keep everything. And it's got a 500 in here. I'm going to leave it running. And what I might say is um for testing can we add in um mock data? Oh while uh I can't spell here while we are um working on the design and I tend to just work with co-pilot like it's a pair programmer. Yeah. you know, uh, don't try and do like machine speak or anything like that. That that's a great normally I would think, yeah, I probably should set up test data, but it's going to be a pain in the neck to do. Yeah. But it knows the structure, so that's like nothing for copilot to do. Sure. So now it's in the page. Yeah. And I should you'll see that like it's going to fetch this API generate recipes. Right. So, it's going to uh hopefully go and find out should go to our API should go to the routes is where I'm expecting it to go make that change and see if it gives us some mock data. And while it's doing that, you can see here in the request that it's passing to the prompt to generate those three to five recipes with a name, ingredients. So, it's telling the Open AI what I want, which is really good. It's exactly what I want. So, let's see where it's going. Page is still making changes to page. Okay. Lot of output here. Yeah. Okay. Let's see. To test the application. Huh. Interesting. So, it's giving me a toggle button to switch between my API calls and the real calls, which is very interesting. So, let's see if So, you can still see the error if you want, but I guess well, let's let's see here. Well, let's see here. Uh, can we run the app? the app to test the toggle. Uh here's something that I know it's going to mess up on. Yeah. So, this is this is cool. The app is already running. Oh, just Yeah. Right. So, if I hit continue, it's going to try and run the app on port 3000, which is the typical port. It's going to fail. Yep. But like, oh, wait a second. It's already in use, so let's just run on 3001. Okay. Right. This is a this would be feedback that I would probably give. Is this now? Now it's running on 3001. Cool. Now I've got like two node instances running. And it even tells me what things to try. Here's the mock data that I've got. Uh we can open this here. Oh, that's cool. Um so now it tells me I'm using mock data or using the API. That was kind that's kind of nice. That's cool during dev. I mean, I would think you'd want to have like an automatic like Right. Right. But yeah, that's neat. So, I'm gonna I'm gonna tell it like, hey, I can't see the output, right? I can't see what you're what you've generated here for me. That seems like bug number one. Toast and green beans. All right. Let's see what So, cool. And that gave me those results, right? That's nice. But I can't see this text. Yeah. Right. So, let's see here. Uh, say it looks good, but I cannot see the text in the input box. The style uh, has it too light. Let's see what it says. While that's running, I'll actually kill this other instance here. All right. So, it makes it and you can see like it's compiling as it makes changes. That's the other thing that I like about Oh, next as well. I'm sure other frameworks do it, too. But it's a it's a server that applies like those hot whatever updates. It's so it changes it. Text gray 900. Thank you. Awesome. All right. So, now it looks like it's fixed it, right? That's really great. So, I can just say like, you know, beef greens, uh, and I don't know, flour. See what it says. Now, it's going to give me the same results because we're using mock data, right? And that's totally fine. Don't care. Right. So, I think this is pretty okay. We'll work on the design as we move along. See what else we can do with it. So, what I want to do now is add in the uh, OpenAI stuff and see if I can fix it. And I'll show you how we can do that. So on um my Azure subscription, I'll just use my Azure resources here. We have um one of the version one of the u extensions that got released uh today or updated today is the azure AI foundry. Yeah. Um one and I have a project I've been working on here. So let that load. I'll pick that here. It shows me my models, my agents, the model catalog, the playground, all that thing there. So, um, I've got a model here that I've already deployed. Uh, let me go to my model catalog. Let me set my default project again. There we go. So, I've got a GBT40 mini. project that I have. Let me turn my terminal off real quick. Um, so it's got my name, my deployment. I've got a global standard deployment I created a couple of days ago. U, and this is this is really cool. I've got my key here. It's got my endpoint, which is fine. That's great that that's all integrated right in. So, you don't have to go over to the browser and copy and paste. And I could I could just very easily go over to the browser and get that stuff as well. Um, it's got a couple of there's some other things that I probably need to know. Um, there's one other piece of information I might need to go to the portal, but it's not here. We'll see. Um, at any rate, I can also go to the model playground. Maybe that will not load. It's thinking perhaps. Choose a model. Cool. See, there's my model. And in my model playground, this is the actual like a place where I can kind of test out yeah what I want. And I could say like give me uh a you know recipe for you know chicken and uh greens and that's great. That's the kind of stuff that I'm looking for, right? super fast and I could adjust and give it some context instructions about how to do it, but this is the model that I actually want to use. Uh, and I can actually look at view code and gives me some test code that's there. Uh, which is that I could use in my app as well and pull that in. So that playground's really helpful for doing that like shopping for models, picking out is this going to be the right model for me or not. Right. Right. Does it perform fast enough? Can I take that model then kind of test the temperature, test the context and build it and shape it the way I need to for whatever my project is. Okay. Um, and I can do it right here in VS Code or I can go to the OpenAI uh portal and Azure OpenAI portal and start to, you know, do the same thing there as well. Whatever you're comfortable doing. Cool. I'm a developer. I like stay my dev tools. Yeah. Uh, so it works great for me. So I close that out. Uh, don't save. And what I need to get now from this uh is a couple of things. I need my target URI. Uhu. So, I will go back over to our ENV file that it set up for us. Um, there we go. So, the endpoint I don't mind showing because you can't do anything with that. Yeah. No, no problems there. Let me make sure. Do you want to Do you want me to make your screen invisible so you can Okay. Not just yet. Okay. Not just yet. That's fine. Um so so we need to have that which is totally cool. The key we'll add in in a second. Okay. Uh we need to know what the deployment name is and you know the deployment name was that uh GBT4 mini right? Um is right there. So we would need to copy that in. And then your version that's there um should [Music] be I should don't I probably don't have to touch the version. I think I'm okay with the version. And the other thing I need to have is this key. Right. So I'm going to copy that key. So ahead and blank me out there. All right. You are blank. All right. We'll paste that in our key visible. No picking pictures out there. Okay. All right. So we're good. We'll take out of that and I'll make sure I close my EMV. Oh, say that's all right. It's fine. We'll change it later. Yeah. All right. So, now that I have that in place, I can actually try and hit um the main code, right? So, now make sure our test still works. That's exciting. Right. So, we'll take off that and it's going to error out. We might have to rebuild. We'll see here in a second. uh because it doesn't pick up the environment change. Yeah, exactly. So, let's close this out here. Let's go back to here. And what I'll say is, you know, added ENV um values. Let's restart. Restart and test. So, I can close this out. Close that out. Cool. So now it should restart this here. So Enzo's asking if this is if uh copilot's in preview. Wants to change from preview or from cursor but wants to make sure it's in good shape. Is co-pilot in preview? No, we're G. Yeah, we're G. Yeah, we've been G. Full on GA. I mean, I'm using it 247. That's right. I use it for a lot of things, not just coding. All right. So, now hopefully let's try chicken. Not chicken. We are chicken, rice, uh, and beans here. Very basic. Nixon flex is saying that there's extensions too like cloak for Visual Studio Code that hide your environment. Exactly. Exactly. Here. Okay. So now we're getting some errors here and it says that the this is an error. So what I will say is says we're getting one issue. This is the kind of in um in browser error that we would get. What's really cool about this is I can actually copy this. This is cool. Oh, right. Super pro tip, right? Super pro tip. Just give it the line numbers, everything. Just say fix it. I'm going to send this over. Right. And what I like to do is let it know like, hey, got some errors. uh errors with the uh Azure Open AI and I pay just pass it in. Yep. Let it cook like and it's like oh I see we've got some issues probably and let's see if we can fix that up for you. And it looks like they imported it incorrectly. Oh, that the imports were just wrong. Okay. So, uh it's a little JavaScript error. Yeah. And they should be able to if it I say they it should be able to be able to pick it up and fix the routes real quick for us. Um so yeah, right here they've got they've got an uh a missed import, right? So they're going to uninstall some stuff. Okay. And then fix it with the latest. Okay. And of course this is a common thing too. Now I'm using PowerShell here. By default, it loves to send bash scripts in here. So on my my home machine that I dev on a regular, I actually have copilot instructions say when you give me a command, make sure it's power command. Yep. Right. Or it's a bash command if I'm in a WSL or something like that. Right. Right. Uh that would be nice if it was able to Yeah. understand. One of our engineering managers calls me the like the co-pilot whisperer because I all these things that just common things that happen, I'll just put in my co-pilot instructions. That's a great idea. like set yourself up for success, but set it up for success as well. Yeah. The stuff that you see common, don't accept it. So, a funny thing here, we on the net blog, um, we do a lot of stuff with like, uh, GitHub reviews, p pull request reviews, and I wrote a whole style guide in my copilot instructions. Yeah. And it has it's like this should be like this, YouTube embed should look like this, blah blah blah blah blah. Yeah. And now when I do a request a pull request from uh review from co-pilot it like justes everything just does it just does it and otherwise you'd be like h that error again error again it's like you keep accepting it but just tell it this is the content and yeah and everything is cool all right so I love this I apologize for the confusion now it's going to install open AI which is interesting I wonder why it's doing That's probably not the right thing. We'll see what happens. But that's probably not the right thing because now I'm going to have to give it a hint. If this doesn't work, I will have to go in and look at that example code. Yeah. And I'll some I'll give it actually example code and be like, "Yeah, here's what it should look like. Here's what I'm looking for." Yeah. Try this. All right. Now, it's changing my model a little bit, the parameters, which I didn't really ask it to do that. Like, you messed up. All you did was mess up the Right. Right. I have run into that recently. Like, I I wrote a whole workshop with all this markdown. Yeah. And I would tell it to fix one thing and it would go through and it's like, yeah, I changed everything. I'm like, you're trying too hard here. Yeah. You work it. And it's funny because you can actually go back and say, you're trying too hard. Yeah. You're making this more difficult than it needs to be. All right. Okay. Now, it says, "Hey, I've done this thing." I think this mouse is connected to your computer. Is that possible? No, you're seeing the machine. All right. Okay. So, let's see. Let's search for something else. Beef. Um, what else do we have in our little pantry here? We have some flour. And, uh, maybe we have some beans. I happen to like beans, I guess. Okay. This looks promising. Spinning. We're cooking maybe. Oh, failed to generate light. Okay. I asked the chat for some ingredient suggestions. We don't have them yet, but And then Muhammad's asking, did anything they tried to do today work? And I'm going to say absolutely yes. The last session they nailed it right at the end, but it was beautiful. So, this just had failed. We just for some reason it just was no reason. Console error. So, let's just I'm gonna say it again. Like maybe it was a a fire up issue. We'll see. Let's see what happens. Is there something in the console window or something? Possible. Let's uh let's look like there or also in the um I wonder in the VS code like you know that we do have a console error handle submit console error. So these are cool too. Um, so I like to do this like we can just like here. Hey boss, you you messed up on this. You messed up on this. Uh, failed. So Sane's saying uh possibly the model version in the environment variable. Well, it should be able to tell me that. Yeah, it's true. Yeah, I can go get that while it's running. Let's see if he can fix it. In the meantime, I will go look at something else here. All right. So, what I've done now is I went in over to OpenAI's portal, Azure Open. Oh, right. Right. And I'm going to look at what they've got here as some things that I need. So, it tells me my model name, my deployment, uh, stuff that I need to have. So I could really just you could copy that copy this whole thing be like or you could copy it into copilot and say here's the sample code I was given. Right. So what I'll do is like I'll just do this right and let's go back here. See what it's figured out. It's still working on some things. So we'll see what happens. Oh duplicate variable declaration. See they screwed something up there. No, we when it is time we've got a ingredient list. Oh, we got beef, flour, eggs, wine, salt, and pepper. Uh, beef burgundy. That sounds pretty good. That sounds like beef burgundy to me. Yeah, but I want to see what the alternatives are. Let's see. See what comes up with. And sometimes even after the corrections that it makes, I will still go, I understand you made some changes. However, here's the sample code I was show. Yeah, just in case. It says, "Hey, I apologize for the error." Um, now it's going to add some specific logging because we don't have a lot of logging. So, it found out like I don't have enough information to try and fix this. Uh, let's see if we can do better. Now, in this particular instance, it says to run the error again. I already know that it's already running, right? Um, so I should be able to come here, hit the refresh button, and we're still good. All right. So, we want to use Apen Apen. So, beef, wine, flour, eggs, man. What was the other thing we had there? Salt and pepper. Salt. Well, I don't You're always I think salt. Look, it even suggested salt and pepper. Look at that. All right. Well, how how's it doing that? Is that your browser autocomplete or is that in the app? I don't know. I don't know. Okay, we're still getting a post an internal server error here. We're still getting errors. Okay, so all I'm going to do here is I'm going to go back to here and say still getting some errors. And now let's look at this. Now we've got some terminal output here. Oh yeah. So what I will now say, hey, still uh some errors. You can see in the terminal, it'll actually go and look in the terminal container. Um, but just in case, here is sample code that might help. And what I do is I will also put in the triple ticks. Yeah. Okay. And you'll see what happened when I put in this and I hit go. You can see then now it also puts in this scrollable thing as well. Okay. just for readability, not for co-pilot, but also for me. That makes sense. I've always done it passing it to Cop-lot because I'm like, maybe it'll parse it better. But that's it's true. Just the scroll bar and the formatting is great, right? And it look ah thanks for the sample code. I see the issue now. Okay. We need to use Azure OpenAI instead of OpenAI. Right. So that is uh sometimes just hinting. Yeah. Right. Uh a really good example. Oh, it was trying to use the open API. Oh, open AI. Remember I said it changed it to open AI and you wanted the Azure Open. Azure Open AAI and I was like, I don't think that's right. Sample code for the win. Yeah. So, always give a sample code. Um, sometimes too, I will it'll I'll be hitting error and sometimes you get on a swirl. It starts to hallucinate and do some things. I'm gonna run out just a second. So, I'll continue to talk. So sometimes the co-pilot will swirl and just continue to do some things. So what I'll actually do is uh go out and find a GitHub issue that has solved my problem or has helped with the problem and I'll take that URL and put it in the actual uh query or input prompt uh and it's helped out. Okay, so let's see what we got here. Okay, it looks like it's done some stuff. So, as I was mentioning while you stepped out there for a second, John, sometimes I will actually go I was having a I was actually having an Aspire problem uh last week on a project and it the co-pilot just kept continue to swirl like it was just trying and trying and trying and trying and I was like, you know what, I'm going to go do some some searching on my own and I actually found a GitHub issue. Oh, right. That addressed really close to my error. Yeah. And it was closed. And I was like, "All right, let me give the link to the GitHub issue." Whoa. Right. I'll take the GitHub issue and I'll put it in my prompt and say, "Hey, here's a GitHub issue that addresses my prompt." They're really close. Yeah. It download. I said, "Please read through the issue and the related ink links." Yeah. It brought in the GitHub issue with some permission. You have to say, "Yes, it's okay." And it searched through the solution. Wow. and then was able to fix the problem. Right. And it was something very obscure like a port mapping or something like that. Wow. Right. So now um I'm going to let it run this app again. It's going to kick off. Oh, keeps kicking off the server. It doesn't need to do that. It need to learn. Maybe I'll tell it next time. Yeah. All right. So now we can test the application using the API mode. Cool. Let's see if we are successful this time. What port are we running on? We're running on 3002. Cool. Let's refresh this. All right. So, we're going to take off the mock data and we'll try some some beef and um eggs, salt, pepper, and greens. Okay. Hopefully everything is good. Come on. now fail to generate again. So, we're still having an error here. Let's let's make sure that we're still getting cards back. So, that's still good. All right. So, hopefully we have an output in here. So, we've got some setup errors here. Yeah. Right. And now I'll say like uh check the output. Oh, and remind it that it's still running so it doesn't try and restart. Yeah. I I'll say that when it tells me to. Okay. So, I just tell it check the output in the terminal. Yeah, like I'm not going to copy and paste a bunch of stuff. It's all there. That's a great tip. I didn't know that you could do that. That's awesome. You'll see, hey, let me see the terminal output to help to diagnose the issue. Um, so now when it says checking the check the back terminal output, it's actually reading this one here. And you'll see we actually did get a response from the from from the API. Wow. Okay. All right. Which is great. So, it got farther, but then it had some sort of problem and like just Okay, so now it's going to add some JSON parsing logic, which is Oh, right. messed up a little bit here. I was wondering about that. you know, like you can request results in JSON format and sometimes I I don't do that often, but I think about it, you know, it's like would it be a little bit more like deterministic or whatever, you know, but then you run into JSON parsing issues. So, it's it's adding reax. Oh, well, now you got two problems. I don't have to deal with the reax. Okay. Okay. Copilot does. This is great. All right. So, it's going to also give us some more um console output logs, which is great. And now, this is I got to say this is my biggest takeaway so far is just setting up that console like ensure there's logging and then telling it like check the logs. Like, so now it says, hey, response should be good. Now, you'll notice it did not tell me to reload the sign. Okay. Didn't tell me to run it again. Oh, okay. It doesn't mean that it doesn't know. Yeah. Right. I could change this. And I'm also watching the F12 to see what's going to happen. The uh Oh, look at that. Success. It's happening. Okay. Come on. Yay. Hooray. So, now we have good output. Okay. We got one more request here. All right. Try egg. Well, this is kind of similar again. I don't think you need to say salt and pepper. Eggs, salt, and corn flour. Eggs, salt. Oh, and butter. Corn flour. Corn flour. Uh, and butter. Yeah. All right. Let's see. Can I add a a feature request? Yeah. I would like to see some sort of color in there. So, at least emojis, but maybe also some like images. Is that too fair? There you go. Cornflower on. All right. So, now we're hitting Azure OpenAI. That is cool with the things. Now, this is plain. Yeah. Yeah, just very that's very very plain. I think this is a good spot. The first thing I'm going to do is I've learned once I get to a stopping point. Yes. Is I'm going to go here and I'm going to commit. Now, yeah, if you notice there's my little friend here, generate a commit message. Nobody likes writing commit messages, right? So, this is really cool, right? Feature implement the generation feature with Azure OpenAI. It's added the route for the recipes created mock. Right. It's everything I would never type. Yeah. I would be like init project. Yeah. Created. Yeah. Made a new project with John. Yeah. Right. So, I'll commit that. Yep. Cool. Done. That's there. Success. Right. Now, do you have to hit When do you have to hit that keep thing? Whenever you feel like it. All right. All right. It's all It's all saved anyways. What you don't want to hit is undo. Oh, somebody said we need dark mode. So, okay. We'll get there. We'll get to dark mode. I I think it's a great suggestion. What I want to do now is make my cards a little prettier. Yep. Right. Yeah. So, I might date myself because I don't even know if folks still go to this website or not. My favorite one of my favorite places to go to when I was a dev was Code Pen. Yeah. Yeah. Yeah. Right. I love Code Pen. It gave me I thought you were going to say like CSS Zen Garden or something. Zenard's coming way back. So, this is a really cool I I did some searching before I came in here. Yeah. Right. I kind of knew what I wanted to build. This has got uh it's got ingredients and a method. It's got a little bit of coloring to it, but also gives me sample code. I don't want to go through the trouble trying to figure out how to integrate this into my next.js app. Right. So, what I'm going to do is I'm just going to grab that URL. No way. Right. And now I'm going to go into co-pilot. And what I'm gonna say is um let's uh make the cards uh a little prettier and use the design from here. Now, the other thing I want to make sure is I'm using I'm using a design that's in the open. Yeah. Right. So, Michelle made this design. Yeah. That person did the work here. So, what I want to make sure is um can we also make sure that the contributor is given credit. Yeah. Uh in the site. So, it's actually going to go out. It should, I hope. Mhm. Go look at that reference and redesign my cards to meet that to meet that design. Yeah. Right. Inspiration from that design and add credit to the original designer. Exactly what I want. That's what open source is all about, right? Y um I don't want to steal anybody's stuff or purposely borrow, right? Uh without credit. I mean, normally when somebody shares something on code pen, they want people to remix it. They want but but so this is great to credit them, right? So that's all I'm doing is I went out there and I grabbed that. It's look at my recipe card. Cool. It's going to make the changes. That's huge, dude. Inte CSS setup, whatever, right? integra up CSS and HTML. Uh update the main page and add credit and adjust the layout. Okay. That's that's what that's all I'm asking. Right. So now it's going to summarize the conversation history which is sometimes great. Tells me all the things that it did. Yeah. Right. I wonder when it does that. I've noticed that more lately and I wonder if it's basically creating a digest so that it can be more efficient like if it's summarizing the conversation so that it can pass that back and forth or use that the conversation history as you're going through this are the the the blocks that it uses when you start to add other things you're going to refer back to things I yeah this is my belief I believe it goes back to those conversation history blocks instead of trying to read the whole context yeah exactly right um so Now it's going to try and make this component. So I don't know if I can go back to here. Oh, you'll see it's made some changes. Ah, okay. Right. It took some inspiration, which is kind of cool, right? It's kind of cool. Mhm. Still going. Now it says, "Let me create a new recipe card component with the design." It looks like it's already done that. Yeah, we'll see. It's still doing some work, right? I like that. This is neat that you can watch it live though in the design view. That's cool. It's pretty neat. Still doing some things here. Um, and then we'll take the request. Who was requesting the dark mode there? The dark mode. That's Nixon flex. Nixon flex. All right. Yeah. Let's see if we can do a dark mode. All right. I apologize for the error. Since the file already exists, I'll use the insert. So, this is an this is something that I see sometimes where it's trying to insert the changes into an existing file and it's like, I can't make all these changes. I'm just going to completely rewrite the file, right? Right. It just like throws it out. Yeah. Throws it out and does something completely new. All right. So, that can happen, too. I'm asking for some more challenging things. Like, I want jalapenños and cherries and whipped cream. I think that's good. I think I think I think those are fine suggestions um for us. So, it's still working on this recipe card design. I didn't think it would take this this much. All right. I've updated the component with a new design uh and inspired by Michelle Barker. So, I didn't even know Michelle had a last name on the on the page. And it's cool. It means it went deeper into the links to find out some things. Cool. And this is really great. So now it's got some little animations on there. It's got some steps that are highlighted and design inspired by Michelle Barker, right? Very cool. We get credit to the cool. You might you might over time like have that move to the footer or something. It doesn't need to be in every card, but that's cool. So this is really great. I love this. Um, now let's just make sure we keep I'm going to go ahead and make sure we make a commit. I want to make sure. Yes. Enhance the recipe card. Cool. Come commit that. Done. Nice. All right. So, would love to have an option for dark mode on the website. This is a challenge. Dark mode. dark mode. Yeah. Bam. All right. Yeah. Especially because I don't Well, you're using Tailwind, I guess, right? Tailwind does have those toggles. It should hopefully. And it says right there. Look. Yeah. Using using Tailwind dark mode classes. That's something I think has gotten better about Copilot because it used to just spew tons of code. So, be like, "Oh, you want dark mode?" And it would override every single CSS. Now lately, it's like, "Oh, okay. You got you've already got something cooking. We'll just work with 8,000 lines of CSS that nobody can read. Right. Right. So, I really love it. Just like applies the edits. It's super great. All right. Looks like a recipe card is taking the taking the the beat here. Oh, we see things happening. I actually like that. That's kind of nice. Cynthia wants some pineapple. Pineapples. Huh. I think that's one ingredient. We need some We need to mix it up. Now it's going to add a dark mode toggle. Yeah. And it's only toggled the recipe cards, right? We need to toggle the whole site. We'll see. We'll see what happens. Copilot's like, I'm on it, man. Yeah. It says update the main page with dark mode and and support the dark mode toggle. Now, it's going to update the dark mode page. So, this is another thing that I really like about Nex.js. Again, other frameworks might do it as well. Is that I can just have it running and as I'm doing things, I can see things happening and it's cool when you have like big screens or multiple screens at the house, you have this thing up on one, you know, VS Code or whatever on the other and I'm just doing work. Yeah, especially like you're showing there when you've got like VS Code is or I mean uh agent mode is doing its thing. Yeah. To be able to watch it live like Yeah. Yeah. I wish you could catch it and be like, "Stop." Yeah. Stop doing that. Oh, Patrick has an interesting idea. Add a button to randomly generate recipe ingredients. I mean, that's that's kind of a little going a little deep. Defeating the purpose, Patrick. I know. I know. This is going backwards. Wait a minute. Patrick, I've got some options. I'll get to that one. I like that. Patrick is like just assume I have everything or I'm going to the store, right? Oh, okay. Right. What if I was going to the store and I want some give me some recipe ideas? That's a good one, too. Um, let's see where we're at here. Oh, look at that. Here we go. Oh, you got dark mode. We got dark mode, but Okay, but it's not quite done yet. Yeah, I think it's still doing some work. Uh maybe we need to refresh. Let's see here. Maybe. Okay, so that's cool. Like looks great except the toggle is not working. Great start. Like sometimes you feel like you're working with a brand new developer. Yeah. It's like a junior developer. Junior developer. It's like a really hardworking junior developer. Yeah. And they it went off and worked and like they can write code faster than anybody but not necessarily I'll follow all sometimes they miss Yeah. the last thing. It says let me help you fix the dark mode. I didn't write it. You did. You messed this up. But that's fine. Just fix the toggle. Yeah. Right. Waiting. Come on. All right. That's fine. Still doing things. Yeah. So, it's funny. This this amount of coding here is probably the dark mode is more more work than it did complex Azure API open AI, right? We can suggest random recipes on based on ingredients, but we can't get dark mode. Right. Brooke says the toggle doesn't need to actually work because everyone just uses dark mode. A very good point. That's why it's disabled, Brooke. Kudos to you. But for those of you that want the flashbang of the bright mode, wake you up in the morning. Say nothing lights up a room like like light mode. Okay, now they're gonna now it's going to update this here in this provider. So one of the things that uh as I was thinking through this app which is a great app I want to generate these things like you said when you come home or like what's for dinner I have got you know a frostbite version of chicken yeah you know whatever but there's also dietary restrictions that you know it's just life you know some people are gluten-free some people don't eat bread some people don't do that so that would be a nice little thing to also add in right like we have these things. Yeah. But don't suggest to me to make a pizza if I'm gluten-free. Like doesn't make sense. Unless it's like a cauliflower crust or something like that. Um so that might be a good little option for us to add in is like dietary types. Yeah. You know, low calorie keto. Yeah. You know, whatever it is. Um no dairy, vegan, whatever it is. So that might be a good thing to put underneath uh as options for us. So let's see if it's fixed our toggle then. Maybe we'll do that. Let me just refresh just to make sure some comments here. So Patrick says notice very happy to take credit when it works but as soon as there's an issue it'll say we yeah let me fix you let me fix your problem and then whatever it doesn't work. Uh Sosa is saying can vibe coding be used for big projects and does copilot remember the previous code written yesterday for example? It looks at the context of all of your code, right? So provided that you have all of the code in your working app. You know, sometimes we work in multiple repos and things like that. Yeah. But whatever the context of your code that you have in your code editor, it should know it. And I can also pass in specific files like right now. That's exactly. Yes. I right now I have my current file here uh is focus but I can also designate a specific file with my um with the word file and I can then pass in a a specific name of a file like an SVG or something like that. Going back to what you were saying earlier is you can actually have like a context. You could have a markdown document and say here's what we've worked on so far and then at the end of a session you could say go update the markdown document of our work log you know what I mean and you could pass in this context and then as can it be used for big projects I mean I think what you're showing here is if you scope it and you also um you know you're doing your regular commits um I mean yeah it can work across real and in fact it does a great job across going across a pretty big repo code. Um I don't know. Yeah, these. So, I'm adding in those dietary options. Yeah, options uh to um uh AI. Let's see what it does for us. It still didn't get the toggle right. But we're moving on because uh was it Brooke? Yeah, Brooks. Yeah, Brooks uh suggested that um that dark mode dark mode doesn't matter. So, so we had another uh thing here, another feature request, but uh create a SQLite database um to save your favorite recipes and add CRUD operations. Mark one is mark one as favorite. That would be cool. We could do that. Cool. Yeah, I'm marking a few here. That's a good feature request. Yeah. So now it says, "Hey, I'll help you add the diet preference checkboxes and update the recipe generation to include the preferences." Okay, so that's pretty cool. Now it says, "Let's define the diet types and update the page component." So now it's going to look at the actual component of the page itself, this homepage here, and add those in. Look at that. Okay. Boom. That's nice. Um, so now we'll be able to add those in. And it's even defined the ones that I Yeah. Right. I didn't I only said like he said like dairy free like gluten free like keto. So it took those in and I even put in the suggestions of what the descriptions of what they are. That's nice to put that in. And something I didn't think about but it allows their checkboxes because you could allow combo. Correct. Glutenree and free or whatever. Now they're going to update the API route. Yeah. To include those to pass it along to the to the LLM to the model to make sure it includes or excludes those. Cool. So, I am likely going to be tagged out in a couple of minutes. I got to run over to my lab. So, I'm I'm I'm in I'm in the vibe coder uh goldfish bowl. There you go. I gotta say I would rather I I'm like this. This is awesome. Super fun. No problem. So, um it looks like it's probably just about done. Let's look at the route.js. Um it likes to generate errors and then fix it. Like it's getting credit for fixing things that it broke. I'm sorry I fixed I made an error, but I'm going to go. It's like it gets paid by each issue it fixes or something. Getting a dollar for every everything it fixes. The token gets paid in tokens. Okay. So, they've made several changes. Has added the dietary preference support. This is really cool. I like that it does that. Right. Says, "Would you like me to make any additional dietary preferences or adjust the current ones?" Right now, we'll just keep all those. Um, let's go and check it out. So, let's refresh this and let's say exciting chicken. Oh, we did have pineapple. Pineapple. I like chicken and pineapple together. Pineapple. Uh, mash. Let's see what else we put in there. Um, eggs. Let's see what it comes up with. Chicken, pineapple, eggs, and green beans. I don't know why I keep putting green beans because he's tight. Let's say I went gluten-free, paleo go. This is pretty I don't even know how to check if it's true or not. Maybe you should tell me on that thing. But I know for instance like Mediterranean pasta. Well, Mediterranean pasta would not be gluten-free. And then unless you had glutenree unless you had gluten-free pasta. Yeah. Right. Bean and vegetable soup. Okay. No way to really validate that unless we said can you indicate Oh, indicate on the cards. Yeah. Which dietary uh Oh, that's great. Yeah. I don't know. Version. What's the right word? Dietary virgin. restriction restriction. I can't even spell is met. Um, so valid issue like we just said I just said like I don't even know if this is gluten-free or not. Whatever, right? So, let's make sure we can if we were actually selling this app or people are using that there's no liability on us u that hey it's marked as gluten-ree or marked as keto or whatever. Yeah. Um, and somebody doesn't make it and be like, "Hey, you told me your website's dead." So, a couple of questions here. Is the mock option active? So, I think that was your toggle with the test code. Oh, good question. That that'd be interesting to check. And then here, a question from Omar. Can you add in context of the API the fact that we need to follow certain design patterns? So, somebody caught my caught me. I did. We had we did have it on. Oh, good. Good catch. Okay. Good catch. Yeah, kudos to you whoever said that. Yeah. Um, that was Sanvon. Sunvon. Good catch. Yeah. So, but you can definitely give specs on I want to follow a design a specific design pattern. Yeah. So, there's there is a concept of, you know, you can do that in copilot instructions. If you want to set spec patterns around your business or around a specific design style, yeah, you can put that in there. That way, you don't have to constantly tell it. Yeah. you know, you can say, "Hey, follow these spec patterns." Y I want a front end that's like this. I want an API that's like this. You know, stuff like that. So, you could do that. Okay. Um, so there certainly uh there are methods to do that either by project or globally within your uh your IDE. Uh you can certainly do that. Yeah. Cool. All right. Where's your tag? You got a tag. I know. I know. I'm gonna ping him. I see Pierers is hanging out there. I'm I've got some time, but I got to run across the street. The lab's in there. Across the street. Yeah. All right. So, it says it's going to update the recipe card component for us to display those those badges. Good catch on the mock data. I wonder if the mock data was also disabling our No, it wasn't. Wasn't disabling our button here. All right. I wonder if I click that. Okay, let's see what else we're doing. What are we waiting on here now? It's really working on this like notification of what's going on. So, so a couple requests we had, one of the other requests is like being able to save it to a database. Yeah. um save favorites and then I you know I am kind of this is I mean just for trying it out but randomly generate some recipe ingredients. We can do that next. I think that's kind of you know to be like because sometimes you also what you're lacking is inspiration right you know it's like so now I I want to talk about this one here refry is saying concept vibe coding add developers get distracted by shiny new things avoid doing what we're supposed to be doing. I kind of actually disagree on this one because I feel like this is what you wanted to get done and you were getting it done super darn fast. You know what I mean? Yeah. I think it's a I think that vibe coding is a little bit of a way for us to get in the flow of being creative and, you know, trying to maybe vet an idea. Like I might not be coding an entire website like I'm doing right now, but I might be like, "Hey, I've got an idea around maybe an API. I got an idea around a certain feature." Yeah. So I might be able to just code it up really quick without a lot of restrictions that might exist in my enterprise app that I'm working in. So I'm able to kind of just spin it up quickly and deal with it. So I think that's one way to to look at it. Uh but there are there are some projects out there that we started as kind of a vibe coding project and it ends up being a thing. A thing. Yeah. Right. U well I got a tag out now. Thank you sir. This has been awesome. I'm going to put on cough just while we switch in. Okay, thanks Jeff. All right, let's go back to our cards. Let's do a quick refresh on this site. Make sure we're not using our mock data. And let's see. We got ham and cheese and macaroni recipes on. [Music] All right, I think we've tagged in here. All right, Jeff, welcome. All right, so what we have vibed our way into is a recipe generator based on you get home. Yeah, you're busy family. They go, "What are we doing for dinner?" Oh gosh, I hate that question. Oh, I hate that question. They're like, "I thought you had it." "No, I thought I had it." Yeah. Right. Right. And then like, "What do we got?" Ah, and then the picky kid. You know what? I'm not really into Yeah. And you're looking at you look in the fridge, you're like, I I found found some chicken and Yeah. There's We got some pasta and you know, we got half a thing of pesto and Oh god. You know, whatever it is, right? It's Friday, right? That type of thing, right? So, you know what I found in the fridge? What's that? We're ordering a pizza. Yeah. Exactly. We're out. We are out of suggestions. Yeah. You know, we haven't got to that point yet. So what the way I started this off was is I said, "Hey, I want an Nex.js app. I want to use Azure Open AAI to give me some recipe recommendations based on a few ingredients." That's where we started. Cool. Okay. Um now we're into refining the UI. Uh I just recently added I saw you walk by and go, "Hey, I know Jeff's got some restrictions." Yes. Yes. And I said, "Hey, I want to be able maybe say I want dairy free or gluten-free or like I love the allergen reference. That's important. My wife and our family has some allergies related to certain things." Like, so uh wanted to put that in there. So like, hey, ham, cheese, macaroni might be in our cupboard and now it's like, cool, here's some cool things that we can generate, right? And now we've also added the indicators as to what it meets uh as far as the restrictions. So, I could just say, "Look, I only want vegan." And now, now I get a little echo there. We got our DJ over here messing with her volume. I don't know. All right. So, uh, generate the recipes. There is no vegan options available for ham, cheese, and macaroni. Well, it cheese. It's not vegan by definition. What if you have vegan cheese? Oh, all right. So, what if we said paleo? Let's see. Is there Impossible cheese? Like the impossible meat? Is that a thing? All right. So, we have some paleo options, which is cool. All right. And I like I really like this. In fact, one of the other things that I did, too, is No, wait. Where's it getting the list of recipes from? Is it just conjuring that up? Azure OpenAI. Okay. So, I connected it to that and I have a GBT4 model and just pass it like, hey, here's some ingredients. Here's the parameters we want. give me those things back. The other thing we did too is I went over to good old Code Pen. If you remember Code Pen. Oh, we love Code Pen, right? And I found a recipe card. Yeah. And I just gave it the URL. I said, "Hey, can you make this some take some inspiration from this design, but also make sure that you give credit to to Michelle up here in our design because it's open source to make sure she gets credit or they get credit." And it looks like they've taken the credit off. We we did have a design in here. just said inspir inspired by Michelle Booker, I think her name was. So, what I'll go do now and I'll just let it know. Uh, looks like the card designer uh is not given proper proper credit. And I know it doesn't care about my spelling because I've been anymore. Now, while you're typing that, um, Lee on YouTube writes, "I would I wouldn't trust AI with allergens or dietary. That ham and cheese was labeled vegan." You might have a good point there. Yeah. Um, it's a good point. We probably want to put a disclaimer on the website. Le, thank you for that disclaimer. I I've been told that sometimes you want to have the AI double check itself on some of these things. Like, okay, you fetch this recipe, double check that it's actually vegan. Yeah. Yeah. So, yeah, I think you're on to something there, Lee. Um, oh no, that's our friend Mr. Magoo. Oh my goodness. Hello. Um, a couple folks are saying here, could we use Azure AI vision API to take a picture of the fridge and find the ingredients to generate the recipe? I think you could probably just in general take a picture of the pantry, right? Take a picture of the cabinet. We could do that. Uh, hard to test today. Yes. Right. I don't think you even need Azure AI vision. You could just bounce that off of Chat GPT and its vision capabilities. Yeah, we could do that. Uh, for sure. Um, but a little bit more for this that's a little bit too far in depth for this session. Yeah. Yeah, for sure. But are we publishing the source code for this? Um, I could I certainly could. And and then some folks that may want to wrench on that, they can certainly tinker. Yeah, we can certainly do that. Um, it looks like they have missed uh they the co-pilot here has uh lost the reference to our designer. So, what I might do is I do a little bit of hinting. So I'll go and grab the URL again. Uh let's see if they have fixed it. Right. And let's see here. Um we we should add the attribution in a visible but unobtrusive way. So now it's going to look for it's going to make a footer and add it in the footer. Nice. That's pretty good, right? And we know that anytime we're sharing open source things, we want to make sure we get proper attribution. Absolutely. Folks are contributing. Let's yeah, respect their contribution. Let's see what the footer looks like. Uh code pen trending community designs. It looks like it's giving attribution a code pen. Um let's see. Let's be sure to credit this designer. Uh Patrick, I like what you're what you're suggesting there. I've I've seen benefit in doing this. Patrick on YouTube asks, "Does saying please and thank you, being polite to the AI, does that help improve the output?" I've been angry with the AI, so I know that that doesn't help. Oh, I've actually I've actually had it start to um follow commands a little bit better. I've said you're really not good at this. You know, uh after like a lot of time trying to fix a problem and sometimes with very specific andor new technologies, there's just not enough runway for it to really understand everything. And I would enough of a code base for it to, you know, recognize. given you everything. Um, and I would be like, "Hey, you're just not really good at this. Like, we're spending too much time." As if I was talking to you. Like, we're not good at this. You know, you don't you're spending too much time on you're making it too difficult. Yeah. Right. And most of the time response is, I understand your frustration. What where I've I've kind of used a little bit of and and it feels weird to get angry at AI and and I I'm the folks here at Build. Don't tell my boss that I said this, but when when we get when we ask the AI to do something and I'll I'll write a final sentence that says, "If you don't do this right, I'll be angry at you." And it actually improves the quality of some of the output. We'll see about that. Right. Tell it to do better. Yes. Um, okay. So, we've got it. It fixed our attribution. Oh, look at that. And it linked to the specific design that we use, which is really cool. I really love that. Um, the last thing, one of the last things I want to hear, I'm going to ask it one more time. We've tried to get this this to work. We wanted dark mode. It switched to dark mode. Oh, we did have one participant here let us know the reason that the toggle doesn't work is that everybody uses dark mode. So, that's why it doesn't work. Of course, so let's see. still looks like. Now, see, when I'm live coding, as you're writing that prompt, when I'm live coding, not only do they ask me to put in live uh light mode and dark mode, but they always ask me to add hot dog stand. Not working. That's just wrong. Hang on. Hang on a second. Not working. Can you fix? And also add in I don't know if um Tailwind has hot dog mode. Add in hot dog color mode. Let's see. Uh uh is it Tharushia on YouTube uh says being angry with AI is foolish. Just accept AI like a friend. Friends can always build great things. You're right. Absolutely. Um, but it's it's being firm with the AI, right? We you can be firm and and tell a friend, you know, if you don't do this right, I'll I'll be disappointed. Yes. Yes. Disappointment is okay. Now, I I see you've only got three commits here. What something I struggle with when I'm when I'm vibe coding is what are the commit points? When should I do a commit? When it works. So I and I said this like once I got the initial app to a point I'm like it's there I'm able to test it. I feel good like there's no broken parts. Okay. Commit. Right. Okay. Then I'm going to add my next feature. Yes. Right. And it might be like I think we stopped when it was at a good point like now I'm going to add Open AI Azure Open AI to it. And the point is like I I call it my throwaway points. Like if I'm like I'm now gonna try something new. It's not working. Yeah. And I need to just like throw it away and branch to something different. That's when I think my commit points are okay. We've been swirling a little bit now. We're like at our design point right now, right? Um so now it's going to try and fix our theme provider. Uh which is good. So I really think about like where's the point where I'm like I think I'm done and I'm done. Would it would a good place to to kind of draw that line and box it be around not quite a feature card, a conbon card or right or an issue in GitHub, but but something maybe a finer grain inside of that that issue or conbon card. Yeah, possibly. Yeah. Yeah, possibly. Yeah, I I struggle with that too because sometimes you get in the you just get in the mode and you go, "I missed it." Right. I missed my spot. It went too far. What do we have to do? I have I've actually have gotten to the point where I have swirled a long time trying to fix something and try something and I have asked Copilot, can you back up to the point where we did this? Yes. And been pretty pretty successful. Okay. Getting it back to a what I would consider a stopping point where I can kind of like, hey, we were still not great there, but we can shape it and be a good point. That's where I think that undo button in Visual Studio Code is so nice. Yeah. Like as long as I'm comfortable pressing that undo button, I think I'm okay to commit. Yeah. As soon as I'm uncomfortable pressing the undo button, commit. Commit. At this point, I forget everything we've done since my last commit. So, I'm to the point where I need to get it to a stopping point and commit. Yeah. Right. Because if I hit the undo, oh, I don't know where it's going to take us back to. Definitely. Right. Um, so once we get this uh toggle button and our hot dog mode working, hot dogs is going to be very frightening. I don't know if I'm going to get a red background or a yellow background. Um, it's interesting because it's done this before. That's always what's curious to me is that we've done some Tailwind. We've done some CSS already. We implemented the dark mode. And I feel like sometimes when you ask or prompt uh Copilot to do some stuff, it's like working with a toddler. Yes. Sometimes like Oh, yeah. And I mean that in a positive way where you're starting from scratch and like we've been here. I I I'd describe it as you're talking to a seven-year-old. They know enough to be dangerous. But if you're not completely descriptive with them, look out. Yeah. And I and I I explain now we know we've been working too long because it says, "Do you want me to keep working on this thing?" Yeah. Yeah. But I like that the more information, the more context you give it, typically the more success you're going to get. And if you're like, "Build me a website." Yeah. All bets are off. Oh, yeah. You just have no idea what you're going to get. You say, "Build me a website with these, you know, 10 features, um, with this framework, with this testing thing." I think that you're going to give it more of an idea of how to guide the road, you know, as opposed to just like, "Hey, go do this thing." Yeah. You know? Yeah. It's much like uh it's much like when search engines first came out, you know, and folks were like, you know, what's a flower, you know, or what kind of flower is this? Instead of saying like, hey, this flower has five petals and there's white, it's got a blue stripe and some green on the inside. Like, give it a lot to go figure it out. Oh, yeah. You know, uh so people who are really good at doing searches are going to be really good at prompting and getting great results. So, think about the prompt that you're giving to ensure the better success. That that seven-year-old's art teacher is going to be great at this. Yeah, seven-y old art teacher for sure. So, um it's taking a long time to do CSS. I feel like I'm doing this myself because this is how long it would take me to do CSS. I I struggle at this point with is it is it spinning its wheels? Is it is it going too far? Have I not pro given it enough context in my prompt? Jeeoff, the problem was your suggestion. It was hot dog CSS it was creating that that's what was taking so long. Primary. Yeah, that was the Oh, body color. What are we getting? Primary. What's our primary color? Hot dog mustard. It looks like we're getting yellow as a background. Oh, there we go. Beautiful. That's right. Ah, so now that now it's going to update our global CSS to get that background. Terrific. I think the next thing I'm going to try and do um well, we'll see see we have any suggestions on what I somebody wouldn't be able to add favorites and save it to a database. I've got maybe 25 minutes to make that land. Okay. So if we can get this right the other the other direction if you're feeling adventurous that that I would that I would ask can we put this in net aspire? Uh it's it's already in nextJS. Yeah. No [Laughter] I was just talking to our friend Glenn. Yeah. about my challenges in trying to make I was now different a lot of hotel trying to use the dashboard in hotel for that. Yeah. And I was like I was really having some pain getting that to work. So okay it's like yeah we know we're making a lot of great changes right now. Um, if I if I started out as an Aspire app. Cool. I think maybe we'll uh What's the database that? So, maybe I'll use like a MongoDB database. Sounds fun. And maybe throw some containers and a little Docker compose. Is there a database vendor within eyesight of us here other than elastic? Uh, that's their search. That's more search. Yeah, I don't see one. I am working on an ARM device. Our friends that are here at Microsoft Build, name a database that that we could use here. Hopefully it has a container. Postgress, a gentleman right outside the Postgress. Okay. Can I put it in a container? It's cool. It's doing a lot. Jeff Jeff suggested hot dog CSS. That's what this thing is swirling on right now. Come on now. We Microsoft at 50 years. You got to have hot dog stand. dog CSS. This is what I'm waiting for. Beware, back away from the screen because when I turn it on, there's going to be a lot of yellow. Uh Steve on YouTube suggested Prisma. Imran says SQLite. Patrick is suggesting SQLite. I wanted to give a chance for some of our friends here live at Microsoft. Build that last one. Rock to help out. All right. This is recipe card. Hot dog theme. Come on. Right. You got to have a hot dog theme. Look at that. If you're going to go ugly, go ugly in style. Still doesn't get our light theme. It wouldn't fix the light theme, but it'll give us a hot dog. It'll give us hot dog theme. Absolutely. All right, cool. Let's let this continue. That's just fine. Let's make sure that uh everything else is still working. All right. What if we have coffee, steak? Yeah. And uh tortillas. What are you making, dude? I don't That's just what I have in my cabinet, right? That's what That's what I have in the pantry. Got coffee, steak, tortillas, and a hot sauce. I know what I would make with that, but let's see what it says. Yeah. I think it also makes some assumptions like you have this general spicy coffee steak wraps. Yes. So, it's assuming that I have lettuce and tomato. Not likely on a Friday night at the end of the week. But yes, you marinate the steak in coffee and hot sauce. Really? Yeah. And then you put it on the grill. Okay. Delicious. All right. So, I'm gonna have to try that. Yes. So, a coffee rub, coffee rub on a steak is very good. Okay. Yeah. All right. Channel. All right. And you'll see even like coffee rub fajitas, coffee steak tacos. It's all about coffee grounds, right? But yeah, you put that all on there. It's fantastic, right? Really great. All right. So, we're still getting good results there. Um, they even gave us a hot dog icon up there a little bit. Looks kind of looks like a hot dog, right? This is It's better than a hamburger icon. Better than a hamburger icon. That's right. We're not getting light mode. We get dark mode and hot dog mode. Sorry, kids. That's all we're getting today. Cool. This is not true. But I'm not going to fight with co-pilot anymore about that. All right. So, let's keep everything. Now, this is this is a moment where we commit. Yes. Right. We'll hit our generate commit. And oh, we did. We added dietary preferences, restrictions on handling, and I'm going to say and hot dog mode. Hot dog theme. Yeah. All right. All right. So, we added those things. So, we'll commit that. I've become more and more a fan of the co-pilot generated messages for commits. They've been really good. Really great. So, really great. Some of our friends that are here at the at the booth, have you been try have you tried the GitHub copilot generate messages for your commits? Have you have you tried that? Yeah. No. Nobody's tried it here. You make me sad. This This is your hit sparkle in the whole world. Oh my gosh. It looks everything that you've done since your last commit and summarizes that into text. That's much longer than what I would ever write because usually it's just like made changes. So yeah, chat room there watching on YouTube. Uh you got to check it out. It's really really cool to be able to do that. I feel like it it simplifies anything that I'm trying to write for a commit message. Okay, so we had a friend outside that said Postgress. They want us to add Postgress. So this is going to get into a little bit of a prompt that we want to put in. We've got some features that we want to add. We need to store the features. We've got about 20 minutes to land this. Okay. So, what I want to do is uh add a new feature to allow saving recipes as favorites to a post gray SQL database. I would prefer the app and the database to be running in Docker containers and also use compose to run locally. Uh, that's a pretty good prompt. Sound good? Yeah, sound good. Okay, let's see what happens. And while you kick that off, let me go back to the chat room here. Patrick says, "I use that um the cop generate message function all the time for commits." Super nice. Which wishing it also could get the work item. I found it often gets it wrong. That that would be that that would be really cool, Patrick, if it if it could. But I think that's more something we want to do on a pull request, right? Because you might have several commits that make up a pull a a pull request that you're submitting to fix an issue or create a feature. Yeah. Um I think there are some features in the pull request uh extension in VS Code that when you create the pull request and do the commit, it references that. Nice, I believe. If not, we can put in a a request for that. So, we've asked that question. We want to add saving recipes to a postcress database. And I even spell Postgress wrong. Um, prefer the app to be in a database to be running in Docker containers and use compon. It created my compose file. Cool. It's mapped the ports correctly. It's got my volumes mapped locally. Put in my environment variables, which is great. There's one thing I know it's going to mess up. I'm waiting for it. Yeah. And it's going to be with my environment variables that I need for my Azure OpenAI. I'm wondering how it's going to handle it. I know how to handle it in Docker. Yeah. Because I've done this before with another app, so I'm curious how it's going to do it. Um that's why I'm slowly scrolling through this because I'm not sure where it's going to put it. Um it's created a Docker file for this looks like my main app. Yeah, dev node modules going to run build. Cool. Set it to production, which is great. And yep, good. Now it's creating my favorite button on the component. Um, there's a question here from team craziness. Uh, they write, I read somewhere around the 500,000 context window, AI will start to daydream a little. Realignment would be key here. I guess if tokens are not an issue, context certainly is. Daydream. Do we mean like hallucinating? Hallucinating, I think, is what the they're referencing there. Yeah. Yeah. The the hallucinations do happen. I I say that this um when I see it happening, I will apply correction. Meaning that I'll hit the stop button. Yeah. On the engine. Okay. on the on the working process. Like I'll hit stop or pause. It's it's right there in the bottom right. Right. You hit a stop. Okay. Right. And there's an alt backspace which seems like a weird combination on a Windows machine. Um or pause the request. If you hit the stop basically every all work has stopped. And at that point I will say seems like you're over complicating this right? Can we reset and and try and keep it simple? And sometimes I'll even my prompts I'll say here's what the task that I want to do. Can you let's keep this simple and not over complicate it. Okay. Right. Okay. So trying to like do the correction. It's kind of like when you're training a puppy. Yeah. Right. And a puppy's like has it gets the you know the zooies. Right. Don't do that. Don't do that. Wait little hank on the chain correction. same thing like and I just let let the the engine know the LM know like that's not don't go off and create a thousand bash scripts for me because it it'll do that you know and it's like hey I've tried to do this I've tried to do this tried to do this and you'll see the output be let's try a different way and sometimes you see let's try a different way hold on put on a seat belt because it's going to get a little nutsy I've I've I've run into that several times I'm planning I have a demo session delivering, showing little bit of co-pilot on Wednesday. Yeah. And sure enough, it comes back. Oh, let me try a different way. And it does it two or three different times. And each time I cringe like, oh, is this the right is it going to get it right this time? Yeah. Yeah. You know, and I'll sometimes I'll just say, okay, let's see where this goes. Right. Yeah. And there are certain tools that we have, right? Azure developer CLI, the Azure CLI, you know, there's things like that. Well, it'll start to write all these crazy scripts and I'll go stop and I know why are we don't need I'll say we don't need a a bash script for that because add does this right and sometimes the response will be you're you're right ACD does do this let me try this way when when you see those types of interactions with co-pilot does it make sense to kind of wrap that up and turn it into an entry in your co-pilot instructions um we have good MCP P servers right now. Okay. And typically what that means is the model that you're using like right now I switched to claw 37s on it. Um might not be good at calling the tools the MCP tools. MCP's relatively new. Mhm. Um, you know, our base model in Copilot 4.1 has had like as it was coming out, as we were testing it was not great at knowing about certain tools and we've made some corrections for that and that's that's us. We just let the folks that are running that, you know, um uh there's other other um models as well that have challenges around certain things. And again, sometimes it goes back to like it just doesn't know what it doesn't know, right? Okay. And and with Aspire, Aspire is relatively new, right? Hasn't been around for 20 years, right? It'd be different. It'd be different. Yes. You know, but now I will just do the hinting, right? I will go out to GitHub and find an issue. I will go out to the docs and be like, "Hey, here's the doc on how to configure open telemetry and have it bring that in and go, you know, it'll it's nice. It says, "Thanks for letting me know, right?" and it will then maybe self-correct, you know. So, okay. Okay. It's it's co-pilot instructions is really helpful when you're setting context, if you have patterns, if you have things that you want it to do like follow these practices around maybe I'm a Java developer and I only want to use Maven, right? Okay. I might tell it in my compil make sure you use Maven, make sure you're only using PowerShell scripts, you know, make sure you're only doing this type of repository patterns. Okay? you know, that's super helpful because that's what I like to do or it's what my company does or other developers I work with. It it feels like a very prosoriented FX cop to to call back to Yeah. Yeah. FX Cop for sure. Tech from yesterday. Yeah. I would love to have FX Cop, you know, in a way to where like fornet apps. I think FX Cop if you could build FX Cop into um into C-pilot fornet in a selective way. Yes. Yes. Like enforce these here's here's the ways that I like to write code. Yeah. And enforce these rules. Yeah, for sure. Yeah. John was saying earlier when he was here like for the pull request on how to do a uh a YouTube entry or whatever entry like he made his co-pilot ent his co-pilot instructions that way. It's one of those things where like every time a thing comes up, you're like put that in your co-pilot instructions. Yes. It'll catch it. It'll catch it. Um, how we doing? Is it? Yeah, we've got it. It looks like it's got a toast provider. It's adding for us for something. Um, I think I saw earlier it was adding a toast provider for some reason. I don't recall some notifications. Probably like when I add it to my favorites, it's going to let me know. Thanks, I've added it. Okay. Right. That's kind of cool. Uh, didn't ask for it. I'll take it. When my kids are preparing breakfast, they're my toast provider. It might for sure. Um, so I like to like while it's iterating, I do like to go and look at the things that it's made changes to, right? See what's been added. Um, see what layouts have been. So here's my here's the toast provider it's added, which is cool. I like to look at the Docker file, see what's going on there. I know it's missed my environment variables. That's fine. I'll figure I'll figure that out. We could just use the mock one for now. Okay. Uh yeah. So I can use mock data or I can use API. So look, it's created a favorite recipes. Probably going to be able to query and list our favorite recipes. That's there is nice. Um we have a a question here from Steve on YouTube. Uh Steve asks, can Copilot use the developers context of Azure CLI? the developers context we it only uses the local context. Okay. Um it depends on uh what the the prompt is. So, for instance, uh if I might need a little bit more context, Steve, about what you're asking, but um we know about your resources, like if you're logged in to the Azure CLI on your local machine and you say, "Hey, can you generate me a script to insert um a test file into my blob storage?" Sure. Right. We the copilot will um copilot for Azure tool will do this. it will create that script with your subscription and your things in the actual file. Okay, which is really great. Um, it's very it's context aware if you're logged in. I can ask it like, hey, what's the list of my URL for this particular uh Azure container app? Yeah, right. If it's yours, we can query your Azure resource groups and give you that back. So, we know the context of where you're at. But uh I hope that answers your question, Steve. Um, but we do have some awareness of your Azure resource uh graph as well. I could see if you're logged in, I could see some system admins and ops folks then using uh using copilot to do some of those system maintenance things then for sure. Yeah, if you like custo queries huge huge to like writing those really specific queries are hard. Yeah. Um it was just try to it's trying to create what's it what's it doing there? So, the first one I tried to do was um looks like setting some databases in my ENV files. Uh and it I like that it it pauses when it attempts to run some sort of command locally. Yeah. One thing I showed John was I think it was before he came here is sometimes it'll perform some like hey we fixed this thing run the app and console output will come here and I'll say you've messed like there's errors can you look at the terminal and it will actually read the terminal say oh I see where the error is let me go ahead and fix that good so you don't have to like copy and paste it oh that's very cool yeah yeah um getting copilot to analyze logs error messages and and provide that fix. Tremendous. Uh so helpful out there. Look at that. We got hot dog stand working still. That's great. Yeah. Everything's like I like to test things as it's doing some stuff, right? And I could still put in, you know, um here. This will be a good one. Some yuka, some black beans, and maybe have some tortillas and maybe some, you know, empanada. All right. banana and let's use live data and let's see. Well, it's not going to fit any of those. So, let's fine. Is it? Oh, man. Now, there's one issue. This is cool. Now, it's making changes live. And it looks like there's probably some JavaScript error in there. One of the reasons I like Nex.js too is I can just copy the from there and bring that in. But it's still working on some stuff. So I'm not gonna not not gonna mess with it right now. It's probably connecting the databases and stuff in the API. Uh but and that's okay. So now the other thing that's really cool is it actually likes to create readmes a lot as note as a notetaker. It'll actually tell you all the things that it's doing. Really? Yeah. Uh I haven't seen it do that. Let's see if I can open a preview here. Uh open preview. So, it'll tell you how to get started with the app, where how to run it. Uh, thanks for deploying on Versell. This is not Thanks. Thank you. Thanks, GoPilot. Thanks. We'll fix that. But it's NextJS is a Versell framework. All right. So, that's probably why it's probably coming right from their certainly from our thing. It's totally fine. So um there's a comment here from uh the Russia saying these days I'm learning DevOps vibe coding apps like this is pure joy. I'm I'm I'm learning to appreciate it more but something that I struggle with. Help me out with this change. Okay. We've seen particularly when we asked it, hey generate a hot dog stand theme. It was going for a couple minutes there. Yeah. But when I'm when I'm coding and I've got the ideas flowing and I'm in the zone, what do you do with that energy while while the agent is cranking away and generating that code? Yeah, that's a good question. Um, sometimes I will I can just type in the prompt. I sit there and type so I know what's going to be next. Okay. Right. Okay. You're kind of queuing up the next one. Yeah. Queue up stuff. I like to use just I'll open up Notepad and type like here's all the things I want to add to stuff. Yeah. share some ideas. Okay. That I want to do. Yeah. It's there's a there's a delicate balance in my opinion between giving it enough and too much, right? I like to develop a feature at a time in how I would if I was using this to develop on a on a an enterprise app, right? I'm not going to say go add these 15 features to my enterprise app because then it's just going to get confused on what to do and how to implement it all. Yeah. It's one thing at a time. So I might start to spec out maybe in a readme file. Right. So I can go I can open up another file in this app while it's spinning. Sure. Right. I can look at here and I might say browse around. Browse around. I can open up and just maybe I want a specs spec file. Now now I'm just I'm here. I'm doing my thing and I can say like you know we need to add a way to deploy the app to Azure. Yeah. you know, with, you know, maybe ACD. Um, uh, probably should should add playright for testing. Definitely. You know, these and while it's doing some stuff, I'm watching if I can I can these are just some features that I may maybe want to add to things as I'm as I'm going along. So that's kind of how I a you air quote deal with the the time continue that energy that that you've got flowing around this because now that I've started to do all this like oh I could add this oh I can add this but now I'm like oh I'm waiting you know so yeah I can just these are some things that I could probably do Michael comments multiple windows is there any benefit to opening another Visual Studio Code and tell it hey in this other section of the application go start working on this Yeah, that's hard. That's hard because there will be collision. I think um because sometimes and I think John mentioned this earlier in our session is that um John would be like, "Hey, can you add this button to this page?" And it'll add the button. It goes, "Hey, while I was here, I also did these other 15 things." You know, it starts to just like sometimes just jump off the rail and do some other Wasn't Wasn't that a Malcolm in the Middle meme? Yeah. Yeah, I guess. Oh, I need to change the light bulb and change the light bulb and then I was like, next thing you know, he's like shackling the roof or something like that. Yeah. Yeah. So, it's very much it can do that. It's like, oh, I noticed like while I was adding that button, there was an error in the TypeScript. So, I fixed the TypeScript and oh, and I saw there's an error in the TypeScript and I need to go fix my TS config. Oh, the TS config is too long. I need to break that motor files. I've seen it in C# files mentioned, hey, there's a compiler warning around this. I took care of that for you. Yeah. And does all those things. It's like it's like it's got add almost right like almost. Yeah. Let me So let let me tell you the the fact that it's it takes that boy scout rule of leave your code better than when you started reading it. It really takes that to heart. And as somebody who has hundreds of compiler warnings at last count in my my other projects that I'm working on, that makes me so happy that it cleans those up. Yeah. Now to to sometimes get around that Yeah. I I will I have in the prompt like I need to do this only do that like just make this one change and I will say this file is good this file is good like don't change that file don't touch this yeah don't touch it if you touch this you will make me angry don't touch it you know and I will be disappointed with you usually the response would be I understand that we're good on those files yeah like we'll make the one change to routes ts or whatever oh that's And and I'll say 99% of the time it's usually pretty good at doing that. Yeah. Um and it's almost like I wanted to come back and say, "Are you sure?" Because I'm going to touch it anyway. Stop. Right. And now So now it's doing some things like Docker Start.sh. I bet that's just like come on now. Yeah. So these are just echoes. Like I don't I don't need that. MPM run db setup. So now it's now it's created a bunch of npm commands. Let's update Docker Compose to use our start script. I only need to run Docker Compose up and Docker Compose build. Copilot, you're you're you're being too helpful. Right. Now you're just over complicating the challenge here. I just want a database. Now it's finalized by creating a Prisma a Prisma migrations directory. Right. So now it's doing migrations. I don't need migrations. This is a nit. Right. So yeah, it's trying to cover all bases, which I appreciate. Um, and I think we're just about time. Yeah, I'm I'm not sure what time the session ends. I would have to check the board. Actually, I took a picture of the board. I can tell you. Did you? Yeah. So industrious. I'm efficient like that. John Jeff very efficient. Let's see here. John was the other guy. John was the other guy. Jay John Jeff. He I'm I'm the guy with the hat. He's the guy with the 545. 545. We are We are at time. Here's a summary of what we've accomplished. It says, "Wow, did I land it last minute? Do we have another last minute land?" He needs to the birdie. Can we do Docker Compose up and see if it works? Hold on to your hats, folks. We're going to try it. You can do it. I am going to guess not. No thanks. Mapping values in and not allowed. Well, is there a sad tuba sound effect on this stream deck? W compose up failed. Fix it. Watch C terminal. Let's see what it if it can help us out here as we Is there somebody after me too? Wrap up. Yeah. Den. Good old Dan's coming. Den's coming in next. And we're gonna I don't I didn't hear what he wants to build. He says his little thing says vibe coding something awesome. That's We'll see. I mean, can we just put that into the co-pilot prompt? Make me something awesome. Make me something awesome. Yeah. So, I will um I'm going to take a seat out of the circle tables. I will get it to a point where compose up will fix will finish so we can save our things and I will commit it to my GitHub. SP Voyer is my GitHub and uh folks can pull down the template and give it a try. Give it a shot and uh see what we can do. Make sure my keys aren't committed because that's important. Yeah, I have to change my keys because I docked myself earlier. I'm blaming John for that. He didn't hold the button down long enough. Uh, let's see if we can get this last fix here. I don't know what it's changing. I think it's just got the format correct incorrect here. Okay, that looks good. Looks better. We got a check mark. Green check marks are always good in the command. Usually means it ran without an error and it's uh now it's going to pass that up. Looks like it's now valid. Yeah. Now it's going to check the override file which I think is just probably variables. Yeah, I feel like this should be a lot faster when it comes to just a couple of text files, but it's YAML, so I'll give it a break. Yeah, watch it. Insert tabs instead of spaces. It's gonna get formatting wrong. Well, I'm looking at line eight there and I'm I'm feeling the formatting wrong. Yeah. Consideration. expected a string. Well, I Yeah. Yeah. And that that command should probably be on the next line. Uh yeah, you're probably right. Let's see here. Yeah, I'm sure script has the right line endings. Come on now. Let's get her done. Here we go. All this because you wanted a database. Yeah, I didn't want it. It was suggested. It was suggested. I would have gone with the text file. Okay, chat room. This is all your fault. I would have gone with the text file, kids. Text file for the win. Do it old school. Give me a CSV out there, right? That's all you need. Like now, now it's like, hey, now we just need simple. Let's just make this nice and simple. All right. While that's still running, just test this just for fun. He's just make sure we can get a good Is it gonna Hey, just get this our mock data and get your hot dog mode. Fantastic. Yeah, we're good. What more do you need? Yeah. All right, I'll commit this to my GitHub and uh we'll get that Docker stuff working for you. All right, I think that's where we're going to leave off for now as we transition to our uh next guest vibe coder. Thank you so much, Shane. Appreciate it, man. All righty. Thank you. And uh we'll see you in the chat room in just a few minutes as we get set up for another round. Cool. Heat. Heat. Hey, hey, hey. [Music] Heat. Heat. [Music] [Music] [Music] [Music] [Music] Hey, hey, [Music] [Music] hey. Heat. Heat. [Music] [Music] [Music] Hey. Hey. Hey. [Music] [Music] I can do something. [Music] [Music] [Music] Heat. Heat. [Music] [Music] number. Hey [Music] Hey down. [Music] [Music] [Music] really heat. [Music] [Music] [Music] Heat. Heat. Heat. Heat. Heat. N. [Music] [Music] I'm feeling [Music] [Music] [Music] Heat. Hey, [Music] Heat. Heat. Heat. [Music] N. Heat. Heat. [Music] [Music] [Music] [Music] There we go. How you doing there, Jim? I am good. How are you, Jeff? Oh, it's so good. I've I've enjoyed the live coding experience here and and interacting and talking to folks that are passing by here at the at Microsoft Build, talking to our friends that are watching live online on YouTube and and we're going to do something new here. Why don't you take a second, introduce yourself to to our friends that are watching out there? Cool. Yep. Hey folks, I am Den Delmarski. I'm a product engineer at Microsoft and I'm excited to be vi coding with you today. Oh, let's let's have some fun. So, do you have an idea where you want to go, what you want to start with here today? I I think so. I I think I do. As you can tell from my t-shirt, I'm a Halo fan. Oh, leaderboard that exists on the Halo Waypoint website. Sure. And I thought I'm gonna build a more modern one. Okay. Okay. Just for my own purposes, just because it's, you know, something that I care about. I I love that idea. Can we switch over to your code then and and start Let's do it. Start iterating through this. Let's start iterating. So, uh I'm going to use copilot agent mode, of course. Yes. And let's see. I'm going to switch to agent. I want this to be a web app. I want this to be a web app. And I think what I will do is I will just ask agent to go and bootstrap something for me. I think react react is good. I think it's good. Okay, let's bootstrap a React app that can be a Halo player leaderboard. All right, I'm excited to see what actually is going to happen. I love that you started with just one sentence and let it figure out and give us something to start with. Yeah, I I like this because I have this idea, right? Like I have this kind of a concept of I I have it in my in my head. I know what it should look like. Yeah. But I also a