Instruckt: UI Feedback for AI Agents w/ Josh Cirre

Hi everyone. We should be live now. Hey everyone. I went to say like happy day like what day it is and I forgot what day it was. Uh but happy Wednesday everyone. Happy Wednesday. I almost said happy Friday and I was like wait it's not Friday. Does it feel like a Friday to you Leah? That wasn't I kind of hope it was Friday. I flew back home yesterday from Florida. So, yesterday morning, I think we left at like 6:00 in the morning. My flight was at 8:00 and we got back to Colorado at like 10 something. So, I'm all out of it. Like, time zones are fake. I finally like caught up on sleep a little bit last night, but I have no clue what day it is. There you go. I'm just here. Yeah, there you go. I came originally jetlag, but I was going to say, are you still uh are you still no uh monster zero? Like are you still cold turkey it? Yeah, still no Monster. I've been drinking less caffeine, too. Um I feel like I drink more caffeine when I'm other places. Like when I was home, I had more coffee, but in general, some days I like don't have any tea or coffee and the only caffeine I have is like Diet Coke. So that's a that's a big thing for me because I was drinking big thing like one or two monsters and then Coke. That's awesome. I have a I have a Diet Coke ready for today. So should be good. We actually have no sodas in my house right now because we need to go grocery shopping. So I can't I don't have a Diet Coke. So you have to drink another Diet Coke for me. I I I should like I I think I have I think I have two ready to go. So, we should be we should be ready to go, too. How's everyone in the chat doing? How is your lovely Wednesday? Okay, we're good. Yeah. How's your Wednesday? Um, where are you tuning in from? That's always fun to see because of the time differences that people are watching at, too. because I know it's morning for me and Josh. Yeah, I think we have a time difference. Yeah, I think one of my favorite things always is uh whenever I get the chance to be on um whenever I get the chance to be on a stream is like seeing uh how spread out the Laravel community is where it's like hey uh there's probably if I could name 24 hours which I guess I can because it's there's 24 hours in the world but if I can name 24 hours there's someone who is it is that time at that specific place in history. Mhm. We already got Hi there, Hempworth. Welcome in. Tuning in from UK 4 PM here. Yeah. See, That's fun. We're in um lovely Wednesday afternoon for you. Yeah. Yeah. I'm in Mountain Time, so it is 10:00 a.m. for me. Josh is Pacific right now. Yeah. I'm the weird one where technically I am what we would call in the states mountain standard time, not mountain daylight time, which is right now Pacific time. It's a whole thing. So confusing. So yeah, it is it is 900 a.m. my my time for me. And then we have Vancouver Island. Vancouver Island. Nano, BC. One of the things I I love about Canada is like the names are so much cooler than the states like the pro provinces and uh regions are so much they're so much more fun. I like those. I want to explore Canada more. I've gone to Vancouver, but I've only gone to Vancouver airport and that's it. Okay, I think the same same for you, which is a nice airport, but I'd like to see more of Canada. Let's see. Hi, Peter. How are you doing? Happy Wednesday. Tuning in from Belgium. 5 in the afternoon. Okay, so a lot of people in the afternoon. Let's see what this is about. Yeah, you're going to find out all about Instruct, which is a tool that Josh built that provides UI feedback for AI agents. um for like the second half of the stream, we'll also be building an app from scratch using Instruct. So, that'll be fun. But I know um we'll be getting into it more in a couple minutes. But Josh built Instruct using the Laravel MCP and a boost skill under the hood, too. So, we get to dive more into that kind of stuff as well. Yeah, I'm excited for it because I think uh the funny thing is is like everything that we'll we'll see Peter and and everyone else in the chat is is stuff that um you know, it's not like I set out one day and be like, "Hey, let me create this." It's stuff that as I'm building things like on my in my own free time or just things for uh for demos within Laravel, it's it's things that I've always wanted and then it turns out a lot of other people like having them too. And so uh it's good good uh good lesson overall I think too. But I'm excited mostly because I I haven't gotten the chance to show how I build apps now in the agentic world. So hopefully in the second half of the stream uh maybe I can learn something too. Maybe like maybe I'm doing something uh slower or different than other people are. Maybe you'll learn something. I don't know. We'll see. I think I'll definitely learn something. And I think that also ties into how um multiple people have said it. Taylor said it. You even have a blog post about it saying why um Laravel is such a powerful stack to use with AI tools now. like how it being so structured allows you to build quicker with AI and just like lends well with AI and showing from building an app from scratch using instruct and AI agents. I think we'll just show that off push back said chat should we bring this to boost? There you go. I'm I'm I love bringing something like this to boost. It seems like more and more people are getting onto this uh annotation type world and like I'll explain in a little bit once we once we jump into like why why I built it and why I think it's useful. But uh that'd be interesting. So you'll have to let people in the chat you'll have to let push back know uh if this is something that is useful or it's kind of more of like a personal preference thing. Also Josh this is a question for you. Um this live is related only to Laravel apps or can be used generally. So for instruct yeah so this particular live stream that we're on we're I'm mostly going to like I not most I am only going to be talking about Laravel apps uh just because there's the the fun part about Instruct the package that I built um is Laravel's MCP integration with a boost skill um that I think it's just it's just easier to kind of have that first party integration. But all of this that we built and I I'll kind of show this in a little bit within the code is a JavaScript library at its core. And so uh there's already it's funny because someone already built a uh a um an Astro integration for Instruct. And so there there's there's ways to use this particular tool outside of just Laravel apps. Um but this live is going to be talking about Laravel apps specifically. great answer. Um, also, hi Zane from Indonesia. Hi Juan from Puerto Rico. Hi Wendle. I guess this is a gift probably on Twitter that we can't see, but hi Wendle. I bet it's a great gift. Wendle from Rwanda. U, we have people from India. Yeah. Hi everyone. Welcome in. I always love like the 30 minute time difference from India. It's it it makes me smile every single time I think about it. It throws me off. I was like scheduling the stream a push pack and um he's like I'm available at like I think he said he was available at like a time with 30 minutes on it. So it was an easier like easier for me to book it. He's like I'm available at 9:30. We could do 9:30 to 10:30 like his time. So then my time it was like a normal one. It was just like 9 to 10 or so whatever. But that threw me off. I didn't realize there was like a 30 minute difference. Yeah. It's so weird. That's so cool at the same time. Yeah. No, I I I like it. I think it's cute, but when you go to schedule stuff, it like throws me It's probably annoying. Yeah. Yeah. Also, hi, Rich. Um, what's up, Rich? Let's go ahead and jump into it then. Sweet. So, as we've kind of talked about today, we're going to be talking about built. This stream is going to focus on the implementing it with Laravel and how he built it using um Laravel MCP and Laravel boost like a skill using boost. So it'll be focused on Laravel, but you can use instruct even if you don't use Laravel. Like uh Josh said, someone's already built an adapter for Astro for it. But we're going to get more into what it Instruct is, how it was built, and then a live demo building an app from scratch using it. But before we get into that, let's do some quick intros. So, hi everyone. My name is Leah Thompson. I am a Devro engineer here at Laravel. And I work closely with our online communities and doing live streams like this. And then I'm here today with Josh Siri, who is also a devro at Laravel. But Josh, do you want to do quick intro? Yeah. Hey everyone. Uh my name is Josh Siri. Yep. You pronounce my last name just like the iPhone. And uh I am also a dev rail engineer, developer relations engineer. And what I mostly focus on I guess is a lot of um our video content as well as kind of demo content specifically around just new things that the Laravel open source community and our Laravel products are putting out. So um I'm a big advocate specifically in the last couple of months of AI and Laravel cloud. And it's not just because I work for Laravel, it's because I think they're great, too. And hopefully we can show that off in the stream. Yeah, exactly. And we we already got a W Josh. W Josh. Okay. Thank you, Brut. I appreciate that. Which is basically synonymous with HYB, right? Hy. I I like that. Yeah. I I'll take a W. We got really into HYBs. And so HYB. Yeah. I don't know. Like it feels weird saying it like that, but I like typing it. Yeah. Because I guess when you type in read it, you read like, "Hell yeah, brother." But sometimes I just like saying the acronym because it's funny to me. Yeah, exactly. Like it's a little too long to say, but like I when I read it, I read it as like hell yeah, brother. But like it's it's weird to say. Do it the same way. But yeah, let's kind of jump into what is instruct. How would you explain what instruct is? Um yeah, I I I'll I'll give a brief explanation then I'll start sharing my screen kind of like walk through the problem that I had specifically. But basically like a a a very high level overview is I think in this term in this realm of agentic UI development it's more important than ever how precise we are with AI. Um, especially when it comes to I think especially when it comes to UI. Um, and the and the neat part is AI has already done a great job with screenshots in the sense of like, hey, I'll take a screenshot of this and tell it what to do. Um, but I think the more AI gets better, the better, the more we can kind of adapt into how we work with AI. And so, Instruct at its core basically gives you um a a floating UI box across your local development server. And I'm experimenting with what it would look like like on a hosted application too. But on your local development server, it gives you a floating UI box to be able to pinpoint and select specific elements. Um, and then be able to say uh write down specific instructions for the AI that you can then paste into your cursor or clawed code or codeex um to basically take note of what you're trying to fix and trying to tell the AI to fix, but then be able to give it in a standardized format that the AI would expect. And so, um, I'll kind of share my screen right now, but, uh, let me go ahead and share the entire screen, and I'll wait until I plop open this right here. Good to go. perfect. Okay. And I'll try to be watching the chat, but Leah, I know you're great at that, so just interrupt me if there's any awesome questions. Okay. Um, or if there's or if they're not or if they're just questions at all. You don't have to try to come up with an awesome question, just any question. Um, but yeah, this is at uh my GitHub right now. This is kind of like a JavaScript package that then has a Laravel adaption to it. And the Laravel adaption is the part that I'm that I'm really excited to to show off. But the goal of Instruct is what I would call a visual feedback for AI coding agents. So, I kind of want to paint you uh a little bit of a picture. This is a app that I have that I don't have instruct running on. Um, so I'm just going to fire this up real quick. Open this up. Um, I don't know if I have an account with my local dev real quick. So, I'm just going to That's going to bother me. So, I'm going to see if I have one. And I do. Sweet. Okay. So this is how I would typically uh work within a application before I started building instruct and kind of the reason for this. There's a fantastic there's a bunch of different tools that this was kind of inspired by but most of those tools were built for react. There's React Grab, which I think is created by Aiden uh I can't remember his last name, Aiden Bay. Uh but the ability to click on something and kind of have this ability to kind of select something and add context to it. And that's the core of what Instruct is. I I haven't I didn't uh innovate on top of these ideas. I just wanted it for uh for my own stack which 90% of my applications right now are probably built within livewire but then sometimes I'll use because I am a developer relations engineer for Laravel I like to use all of our starter kits which is felt view react and I wanted something the exact same across all these stacks. So um agentation is another one that is also again built for react fantastic tools. Um and so I wanted the ability to say okay this stuff is great how can I build this for Laravel and I think I guess like I I'm one of those that's I'm I'm always trying to find uh learning opportunities when I'm when I'm sharing about why I built things. But it's one of those things where um I think we have an interesting time where like if I have an idea of like hey I I want I just want this for Laravel apps instead of waiting for someone else to build it. I'm like, "Hey, why don't why don't you build it?" Because if you have an idea, you're watching on stream and you're like, "I need this. I need X for Laravel um or I need X for my stack or I need X that fits specific within my use case. Well, then uh do it." And so I with within Instruct, I kind of took all of those ideas and I uh again, I'm I didn't innovate on them. So I I'm inspired by them and I put those in like the GitHub as well to say like hey this is largely inspired by agentation and react grab and all those other ones. But when I'm building a application, this is a little demo that I built for the AI SDK. Um it's live actually on larcon.larville.cloud if anyone wants to try it out. whole separate uh whole separate video, but I went through this with uh Taylor um on the stream a couple maybe a month or so ago. Um but when I'm building out an application, let's say I don't quite like that I'm trying to think of something that I don't like right now about this. Um let's say I don't quite like that this starts off uh hidden. Um, if I wanted to, there's a couple of things. This is probably a bad example, but um, I could either open up my terminal, I could go to my code editor and I could find, uh, where that particular place is, or I could go to um, I could go to my uh, clawed code, which is typically what I'm doing within building an application. And I would do something like um I'll do something like uh hey this library stats the library stats dropdown. Can we make this uh open by default? Library stats drop down. Can we make this open by default? Okay, that's great. Sometimes I might even take a screenshot. Mhm. Um, my mouse is wigging out on me. Sometimes I'll even take a screenshot and I'll just drag and drop that in and kind of say the same thing. Uh, the library stats drop down, make it open by default. Okay, that's great. But then as this is working, let's say this is the even longer prompt that I'm doing, like um I went into chat and for some reason this is just broken and the layout's all shifted or I had a a duplicated header down here. If I do the same kind of prompt, but then I'm work walking through my application and I find something else. The problem that I always had was uh as I'm kind of testing out my UI, I go through everything and then I take notes, but within the AI SDK or within um Agentic World, I could maybe open up a new terminal and spin up Cloud Code and then type that new instructions on here. I could just wait until this is finished and or uh or ceue up that message. But I got to this point where I wanted to have things be more concise because typically what I'm doing is I am when I'm testing out and building out application on my local environment, I'm clicking through the app, I'm making sure it works as I expect and it looks as I expect. And so that's really what Instruct came out. So if uh I'm going to go ahead and create um a new application to show this off a little bit and then we'll dive into the code of what actually happens within instruct. Um let's go into this and we'll say larville new uh we'll say instruct demo. Perfect. Use spelt today because that seems like a pretty on topic thing. There was like a there's a couple of Twitter shout outs to Spelt yesterday. I saw yours about it. I still haven't really gotten into Spelt. I want to I think I would like it, but I'm still react. Yeah, I the the thing I I like and the reason why I like Livewire and spelt specifically too is like especially with AI. Um, so within React, I feel like it's very hard to just write JavaScript. People are going to get mad at me for this, but it's it's very hard for the AI to just write JavaScript because then people are like, "Oh, React is just JavaScript." But there there's so many ways to do one thing within React. And I think sometimes unless you have particular uh extreme preferences on, hey, this is how I do it and you're writing it into your agent and you have it as a skill or whatever that might look like or every time you prompt it, you like include it. Cuz I think that's what I did. It's like if I wanted to do something, I would think about how I wanted it architectured before, like how I wanted it to be, and then I would provide that context. Because if you leave open-ended prompts with maybe it's like specifically with React like that, you're gonna get crazy results. Yeah. Especially if like it will start writing a whole bunch of uh like use effect hooks and or like it will try to do within Laravel. And I think sometimes I think with boost helps this a lot as well, but it also like might try to do um you know like a use effect to update an inertia page instead of just using the hooks that inertia provides. Um, the thing I like with Livewire and spelt and it just might be my own bias of course too, but I like that it's AI if it defaults to being like, oh, I'm just going to write a like just some plain JavaScript. Um, because spelt is compiled to JavaScript and then Livewire you can just put a script tag in. It's okay. No one I I don't I don't care if it's not if it's not like this nicely formatted JavaScript and stuff like that, too. Um, but I'm going to install instruct now. So, I have this new fresh Laravel 13 demo application. We'll open this up right here. Perfect. Okay, new fresh Laravel 13 demo application. That's great. Um, I'm going to install uh composer require uh josher/instruct laravel-dev. Um hopefully I didn't break anything when I was like updating some things uh last night. Fingers crossed. Fingers crossed. But the only thing that we have to do now and uh after installing it is PHP artisan instruct install. Um and what this does is a couple things. It will publish a uh configuration file. it will install a specific Laravel boost skill and then it tries to detect like what framework you're using because again my goal with building this package was I want to I want to have the same uh experience whether I'm using our React application, our spelt application or our Vue application or LiveWire. Um and so it has a little V plugin that just injects into here. Um, so if we were to take a look at our demo and we take a look at our vit config. Um, we're just starting the demo and we already have a wow, which is how I feel too. Thank you. Hopefully hopefully it continues to be more wow because that's not the fun part yet. Um but it it just it's this little uh instruct uh V plugin and this is again I wanted everything that I I try to build and I think AI is a great way to do this. I didn't I I had AI help me build a lot of Instruct because I wanted it to be applicable for people who are using Laravel and and Spelt, but maybe you're using a Laravel API and you want this for your uh you know spelt front end or your Vue front end. And so this kind of sets it up for Laravel specifically to say, "Hey, we we we don't need a a server for Vit because we have a Laravel endpoint." um it's going to use this endpoint and it's going to have the adapters of spelt or if we're writing any blade in this application because it picked up on that as well. And then the MCP server I think is my favorite part about why I built Instruct and the cool part I think to show off. But just one install and we'll kind of walk through like what the that particular skill is as well. But now when I open up my um browser as well I have this little thing over here and uh hope yeah everyone can see that. Perfect. the little like toolbar thing. Yeah. Yeah. So, this toolbar is um the neat part is it's customizable as well. So if someone doesn't like all of these things, uh the configuration that we um see in the instruct configuration kind of gives us the ability to have specific um uh to have specific uh keys where maybe you don't want some of the keys on the on the on the or some of the uh toolbar visibility on here. if I wanted to have any of the things I'm walking through hidden or you just don't use them as often. Um, all of this is kind of built to be as flexible as possible and also to be able to give you as the user of okay, how do you like to build with AI? Uh, it's it's kind of default my own setup and my own preferences, but hopefully it has enough config that you can make that happen. So, uh, if I press A, which is this little pencil icon here, you're going to see that I just start having this, uh, little little selector where I can then select something. Um, let's say this little box right here. And I'm going to say, uh, let's remove the bullet points. Um, I'm going to add that note. We have this little note added for us. And because we know that this is a Laravel application, all of this is going to be saved to our browser session. So the neat part is if I was to refresh this page, we still have this little note here. If I was to go into register and then go back, we still have this little note here. Um, and this is the goal of this is to have this ability of as you're walking through your application, as you're clicking around to eliminate as much context switching as possible. So, we have a little annotate element. I can drag this around if I want to and have it be over here if I want. Um, but we have this little uh screenshot region as well because I like to take screenshots a lot. So, if I wanted to say um let's make this and that's I press C to like start the capture item. Um, let's make this uh get started instead of register. I'm just going to add that note. And then there's a couple like uh neat little fun ones like if I was to register and I'm going to create my own account here. The next one is a little freeze item. So let's say you have some animations on the screen. This was mostly inspired from React Grab and agentation. Let's say you have some either animations or um if I click like a little drop down, I want to freeze and not be able to click. I'm trying to click off of it right now. Now, that drop down is still going to stay up because sometimes you're wanting to tell an agent about something and but it's hidden within a modal and then maybe a drop down and another modal. Um, this is going then when you go to screenshot it or something, you have to click off of it and then it closes and then you get mad because that happened to me so many times. Yep. Exactly. And so this little freeze button is is hope is the goal is to like kind of stop that. So if I was to drop open this up, press freeze, all of a sudden I could then press annotate and select these particular items. I could press C and capture. Well, that broke. So I can't do that. I guess I can annotate though. That's the biggest thing. Um, I can annotate on like specific uh items within uh within a dropdown. And then the neat part is like I said any annotation that I have if I wanted to. Let's um let's go ahead. Let's remove these links. And then I'm going to go into settings. Again, these are completely different pages because we're on settings/profile. So, it bases it off of an individual URL. If I go back and back into settings, um maybe for this uh delete account, I'm just going to do a fun one. Let's say can we make this uh so you have to say Laravel is so cool instead of writing your password. Now all of a sudden I have all these notes. But the thing that I think is interesting within the AI world is we've gotten to this point of context switching where in the past before I built Instruct I would have to take this note go back into my terminal back into uh fire up claude code like for this particular application and I would have to start typing take screenshots go back take a screenshot go back and all of a sudden I'm I'm I'm working on individual elements at a very slow pace. Um the goal and I think this is where Laravel MCP and Laravel boost particularly with like a skill really helped this and why the Laravel implementation of instruct is so awesome in my mind is we have the ability then to say all these instructions that I gave across the whole app are automatically copied to my uh clipboard. I could also copy them right here using this. But if I go back into my um cloud code, if I go into MCP, you see here we have this little instruct MCP already ready to go because when we ran instruct install, it installed it for us. But now I can just paste. And this is 38 lines. And we'll see what it looks like in a little bit. But everything that we did um for removing the bullet points and this is a particular ID. um it has uh specific classes and what file it is. So this is in welcome.sfelt. All of a sudden the agent knows where to work on specific things because it has context around the surrounding area. Most of the time I think in our um like our human to AI interaction most of the time we like to think about it from like a visual perspective of hey change this login and register button but maybe there's two login register buttons across two dashboards and it's so much easier to then have the AI know where specific files are where specific elements are. Um here we have are on it. Yeah, exactly. because that's easier to search for for the AI. Then we have a screenshot as well. Um, and that's actually stored in our storage app. So, it's it's it's it's not it's not something that we are copying into the terminal. It is there and ready to go. Now, there's a couple things that are really cool that's happening. Um, it's going to update everything. And then you see here it says after making changes, use the instruct.resolve mp tool to mark each annotation as resolved. Because if we take a look at this, we have these annotations that stay because they are persisted. What it's going to do is it's going to make all these changes, but then at the end of it, it will call the instruct MCP and say let's actually resolve all these. Uh so now it's trying to do like that Laravel is so cool confirmation change. um and it's finding that particular element but then because it's AI and because it's smart it knows that we need to actually use this in the delete user and change the backend validation. Y. So, all this is stuff that at least I would typically be doing within an app, making changes, asking the AI to do stuff, but now I have it in a list format and I have it in a way that I can copy and paste it and kind of have it start working on all these little things even while I'm back in the app doing things. You can see actually it just ran that MCP looks like. Yeah, ran this resolve tool MCP and yeah, all four annotations resolved. Sweet. Let's see if it see if it did it. I'm just curious of the delete account one. Uh was so cool. Nice. Um and yeah, so that's the that's the basics of it. And hopefully as we in in the in the second half of this stream I I'll walk through first of what it actually looks like within the code like within the instruct MCP server. Mhm. But then the second half of the stream walking it through like a a real app is a fun fun treat as well because I think it's that that's that's the purpose of it is to be able to have all these elements stored and ready to go. And real quick, because of the demo, I've got to do it. It's not the one as good as the um the the one that I had. It's like, woo. Yeah. But it's pretty good. It's so much. Oh god. I love how it just goes on longer than you think. And then Oh, yeah. I should probably start start uh winding down about around now. Yeah. Um someone said yeah any questions so far? Najib said MCPs seemed to increase context usage due to tool cost. Any best practices to manage that which I know is general about MCPs but yeah great question. So the the the interesting thing about MCPS, and I know maybe push back's still on the call, so he can he can correct me if any of this is wrong. I don't want to lead anyone astray, but at least to my knowledge, the interesting thing about MCPs that are that are kind of different than skills. So, um they're they're separate, but one of the things to keep in mind is that uh when you have an MCP that is automatically loaded up into an available for your agent to use. Um it's not going to call that every single prompt, but it's going to be available. And and one of the things that when we talk about Laravel's MCP um let me go to when we're talking about Laravel's uh MCP there we go clicking through everything we talk about Laravel's MCP package which is what Instruct Laravel package is built off of. Mhm. Um, this description is really crucial because the description is what your agent is going to look through all of these descriptions of available connected MCP tools. Anytime I create a prompt, it's going to look through the description of all tools to see, okay, should I call this MCP if the user has not called an MCP? And then it's going to load up every single if if that MCP is called, it's going to load up every single tool, every single prompt, every single resource that an MCP server actually has available. So yes, it can increase context usage due to tool calls if you are using that MCP server within that particular prompt. So, one of the things that like we we like to I think that the the team at Laravel has done a great job and I think one of the things that makes Boost super incredible is you then have skills to be able to help load up specific context only when you need them and then the skills can then tell Laravel Boost, hey, we don't need to use this MCP server until this particular moment. And so I think it's this it's this balancing act within AI of making sure that we don't give too much context so it just automatically overwhelms itself but then also making sure that everything is described or um or detailed enough to know so the AI doesn't have to guess of um and I actually had this issue last night which I I fixed last night. Uh, every now and then, um, if I went back to this, every now and then, um, I ha I used to have this prompt of, uh, call instruct.get screenshot. I used to have this as a general prompt that was tagged on at the copy at the end. Kind of similar to here. I said I said for screenshots call this. But because it just loads up the whole MCP server, it loads up all of the tools. It started to try to call screenshots with uh specific annotations, specific ID instructions that didn't have screenshots and then it would just fail. And so it's a it's an example I think here of of the prompt always still matters but the description of how a MCP tool works or the or a skill that helps load up an MCP tool matters as well. But Najib, I think one of the things to keep in mind too that's also interesting is like I think we're getting to this point now with AI where because there's so much context window already available, it doesn't really matter too much about how much we're giving to the AI, it matters how specific and uh focused we're giving it to. So like if claude code by default at least currently like the opus version has um 1 million tokens of credit I believe by now which is so big. So then it makes us when we're writing MCP tools for our own applications or for client applications how do we make sure that we keep things focused within a tool. So tools like we'll see here within the instruct Laravel package there's three tools which you think for like this little little application there shouldn't be that many tools but there's a get all pending tool to get all of the pending annotations because um let's say I'm not copying and pasting things in but maybe I have my agent checking every five minutes for annotations and so this tool allows us to call um that uh that MCP tool. We have get screenshot tool to get the screenshot image that's specifically attached to annotation. It's base 64 encoded. And then we have the resolve tool. That's the one that we saw at the end to make basically mark them so they don't show visually on our local instance as well. And so the goal of each one of these tools, again, all of this is built with the Laravel MCE package, laravel.commcp. Uh, all of these tools then are passed to our agent at the time of when the prompt is happening. Uh, but they're not actually uh called and all of the context is loaded into the agent unless the MCP is triggered to be called. And in this case, my particular uh my particular prompt that says after making changes, use the instruct.resolve mcp tool. That's exactly going to say, hey, let's use this. Let's use this in instruct MCP. So, it's going to load up that context at once. And I added the links in chat for laral.commcp. And I also shared the boost link as well. which is larbal.com/boost. Yeah, the boost one is is is fun and it's it's it's one of those things that um we uh the the Laravel team and Taylor and myself feel that Boost was really ahead of its time and now it's kind of like we're uh it's it's 10 times better than everyone else just because I think Laravel Boost and Push back if you're still in the chat you can correct me. I think Laravel Boost was released in like August of last year. I like I think it's coming up like I think this year like I think it was after Laron US but not too far after. So maybe October September maybe September October it was announced August 13th. There you go. There you go. I found the the blog post. But like that's so long ago in the AI world which is crazy. Um but I think there's so many things that boost gives and one of the things that uh the reason why instruct works really well is all of this is very hard to do outside of Laravel for a reason and I think that's a good reason is not just having these MCP tools and a server that then can resolve all of those annotations. um you know you can build it within your own like node package but this is all stuff that is automatically given to us within the framework. If you install this locally in your command, even that install that install um command that we that we ran after installing instruct, it uses this boost skills instruct. And I actually have a video coming out later this week about how to write boost skills for your package so that boost can use them. Basically, um, if we go back to when we see if we still have the still have the uh I don't think we do. We do not. I was trying to find where um where where we installed the uh I guess I could install it into that one. I could install it into this too. when we run uh composer require um instruct mhm and then we run php artisan instruct install it automatically calls this boost update command which then checks to see hey is there any so we'll see um php arson instruct install um it automatically calls this boost update command. Um, so if I was to run this by default boost update, it's going to automatically load these guidelines and skills that we that we already have. So if I was to go into claude, we should see this skill now. See, let's see. Let's see. Yeah, project skills instruct. Perfect. So, boost automatically kind of uh knows where this skill lives because we ran that boost update command. So, because um boost is only checking for things that are in this boost/skills directory. And I think the neat part within Laravel boost for skills and MCP is they can work in tandem so well together. Because I could instead of having this skill, I could in that copyable prompt that after we make a bunch of annotations and make a bunch of instructions, I could within that copyable prompt say, "Hey, this is this is how you fix everything. Fix everything and then call this and then call this." But instead, Laravel boost automatically knows to load up this skill. Your AI agents automatically know to load up this skill. And say, "Okay, here's what's actually going to happen. I need to make the fix. I need to uh check for any screenshots." I probably could flip this around, too, like check for screenshots first and then make the fix. Um but then uh for each uh it kind of gives instructions to the AI agent of how to deal with the things that we're giving as well as instructions on how to use MCP tools. So you can think of boost skills as elements of how to do something in your application and I think they work great within MCP because Larvo Boost itself has skills to work with the MCP servers itself. Um then the last thing to kind of look at for here is uh that particular MCP route. So this is what makes Instruct so nice and also if I was to make a hosted version of it, it's actually incredibly easy to do because MCP gives you local MCP server instances. So that when we run MCP, we have this instruct already connected for us. PHP, Artisan, MCP start, instruct. Same thing with Laravel boost. They're just local MCP servers. And but Laravel makes it incredibly easy with that MCP package to say, let's just spin up a local server and here's like the here's like the specific server class that we're giving it. Here's the tools that it has available to it. So, uh it's crazy how easy this was to make in all in all way, shape, and form. I think I did it in an a in in an evening or afternoon or evening or something like that. Uh u of course I've iterated over the couple of past couple of weeks, but it's it's it's crazy how easy something like this is. Yeah. No, that's really cool. I know there was some questions. So Bruno said, "Can you have a package where we auto inject a skill for the package?" Yep. I think I think so. That would probably be similar to like our install um our install command for let me go to so that would be similar to like the install command where you can definitely create a package um that then calls boost update to make sure it is aware of it. Um so in this case like it's calling I have like detection of the framework and then um afterwards it should update Laravel boost. Let's see. Yeah, here we go. So here's where it installs that skill to basically go into resources boost skills and boost then knows um once it's boost then knows if any skill is available within these within this particular directory resources boost skills it is automatically injected into the runtime anytime you call a prompt. So, if you're writing your own package or you're just wanting your own specific skills maybe for like a starter kit that you're building or just an application that you have, anything that you create or put into that. So, if I was to go and pull this up and go into um resources, what is it? Resources. Resources. Boost skills. Instruct. Oops. Yeah. So then boost automatically takes that skill and adds it to your particular agent. So the reason why um I don't have that resources boost if your package has a source resources boost skills it'll automatically take that skill and then put it. So we have this inertia react development. This is a skill created by Laravel specifically for Laravel boost. Um this is like if I was to run I I know the Laravel team just created as of this morning a new one. So if I was to run composer update, I think it's called can't remember what it's called. I think it's called Laravel best practices. Yes, Laravel best. Yeah, Laravel best practices. I actually had already saved the URL of Taylor's tweet about it to share during our stream today because I was like, we should we should mention that because we're talking about boost skills. Yeah. So if you want the latest skills, it's as easy as running composer update to make sure we update to Laraveville boost, which we do here, 2.4.0, which I think should be the last one. And then artisan boost update updates those guidelines and skills. And we should have yeah, Laravel best practices. So there's rules um which are just smaller skills and then a skill.md to talk about how to apply each of those rules. So I'm actually curious. I actually just updated my uh starter kit that we'll use to build the build the demo application here. And I'm curious of like how how these work. We might actually be able to do it quicker than in my test. Yeah, that'd be fun. All right. Are there any other questions before we jump into like a little let's build something demo? Bruno had said earlier too, hey Josh, could you make a CLI? The issue is context bloat. We can use skill plus CLI to resolve the issues and then under it he said or I make a PR. Yeah, I think uh make a PR like C a CLI instead of using the UI. Is that I I think I'm understanding you. I think so. I think clarify Bruno if that's not what you mean. But I think so. Yeah, clarify if that's not what you mean. Um I think like the difference is uh it it might be hard like I think the the goal of it is to have that little UI layer so that you can um we said instead of MCP the CLI instead of MCP. Yeah, that makes sense. I I think like with that you don't have to run the um you might be able to create a PR and to optionally like maybe like an with an optional fly. we should be able to just not use the MCP server within the Laravel package. and then it would just be the front end vit uh config which still saves all those screenshots so that you can still reference them to your agent but that way you don't have to have it calling the MCP. So that might be a good PR for that if you would if you don't absolutely want the MCP for sure. for opening up the PR. Would that be on the one itself or the instruct Laravel one? For that particular one, it would probably be the instruct Laravel one because we would probably if you if you want to because it's probably possible for us to um just because uh it might even be a config option that you want. I actually don't know if I have this actually as a config. Let's see. Um I thought of a lot of things that was like, "Oh, that'd be a good thing to add." Mhm. Um, yeah, I don't we I think the vit config. Yeah. So, I think if you just passed MCP false here, I think it should not call the MCP server. I don't think that MCP server would then be loaded up. I could be wrong though. So, yeah, pass try out try it out and then uh create a PR if it's not working the way you intend. And if you do end up opening the PR, I linked the GitHub repository for instruct- Laraveville as well in the chat. Says github.com/josheri/instruct-arvel. Let's see. I think those were um it for questions. I know Nib earlier said, "I've been using playright MCP feels heavy. I think instruct might be better for AI UI feedback. Um, and there was a lot of excitement when you were showing off it as well. Awesome. Well, thanks everyone. I'm glad I'm glad. Uh, yeah. So, in terms of Playright MCP, I think they solved two different points in my mind. So, we'll we'll see this in a little bit and I'll actually get started as I as I'm talking. Um, I'm going to clone my specific starter kits. Uh, no one has to use this. This is my own personal one, but we're going to make an app called uh would you rather. It's a well, it's a voting app. Um, and I have this starter kit uh mostly because I'm going to run the composer setup command uh which does a whole bunch of things. Mostly because I have my own personal preferences kind of loaded into this application of um what I start out with. It already has Instruct installed for me. Uh, but it also uses this playwriter MCP. Um, and the reason I like playwriter and so let me open it up to playwriter. Oops. Playriter.dev. It's a Chrome extension because the one thing I dislike about the Playright MCP and I think they solve different standpoints within Instruct and Playright. Mhm. I think playwright MCP is great for having the agent try to resolve itself. Instruct is where I would use my own taste and skill of saying like, hey, I don't like this or I like this. Uh I think playwriter specifically gives it the ability to use your instance. So I can spin this up um and it will start using my Chrome browser instead of using a headless Chrome browser. Um but yeah, I think uh for your feedback for your uh comment, Najib, I think I think they solve two different use cases and I personally use both. Um but if you were using Playright MCP to say, "Hey, go check out this. It should be blue instead of green. then yeah I think instruct might be a great option for that particular use case. Um Bruno I see that you said PHP RS instruct resolve. Okay so like instead of MCP using the CLI to resolve things. I see what you're saying. Yeah. Um yeah I would say yeah create a create a uh um create a PR for that. I would I would love to love to see I think I think it's a good use case. I think the reason why I use MCP and I can see that I can see the use case for a CLI. The reason why I use MCP, one is I like learning new things and I hadn't gotten to build a local MCP server yet. Uh but two, I also wanted it in this way of uh if I was making changes, I wanted that uh like I wanted to watch for annotations so I didn't have to copy and paste the instructions and it just automatically start resolving things as I as I go if I spun up my agent to do that. Uh yeah, being able to call instruct resolve. Yeah, do it. And then Zane said layer vote question. Lay a vote. Yeah, basically um let me pull open my terminal again. Okay, so I ran cuz I just thought it was a name. It's funny cuz I just thought it was a name. Like I was reading his word with a Y. I was like, I guess Josh is just trying to be edgy and spell it differently. And then you said would you rather. I'm like oh it's an acronym. Yeah. I I I didn't I didn't like just W do y so I was like would you rather d like wired? I don't know. I This was me. This was me late last night. Um but uh I figured I figured we could create an application. Um and so I have everything like ready for me. Uh this is my personal starter kit. Uh there's nothing too crazy about it. Um it's just my own personal preferences. It uses LiveWire. It uses Flux. Uh it has all of my the packages that I typically use installed. It has a lot of very strict static analysis and a lot of very strict testing that I think AI leans really heavy into. Um but there's nothing that What's that? Sorry. It's fision, right? Vision. Yep, that's correct. Repository. I don't know if anyone would like to use it like because it is very opinionated for my specific use case of spinning up demo applications but there there are some good learnings I think from it if you like to learn about okay how does AI work because I I have very much optimized especially in the last couple of months for me building within AI and I think hopefully we can show specifically why but all that to say um I'm only doing it because I it's familiar to me. We could probably spin up this same application within um any of the starter kits just as quickly because of boost and because of uh like the skills that Lar Boost has. So, I'm going to say you're going to build a I'm going to use this uh would you rather um API. I think it was called would you rather? This one right here. Okay. I found this little API that you call it and it sends back would you rather questions and so I want to create a a voting app which already existed. Yeah, the API already existed. So we don't have to build that out. Uh we're going to build a voting app for would you rather questions. We don't need to use the authentication scaffolding that we have because it's going to be uh anonymous uh voting. It's going to use the API here for grabbing questions and have a 60-second voting timer for each question. Um, using probably local session or IP rating, let's have each user only vote once per question. Uh, each user will be anonymous, so no authentication. And we should use Laravel reverb install with PHP artisan install broadcasting with Livewire. um Livewire uh uh on broadcast events. In order to be able to see everyone uh who is voting at once, we should use should broadcast now instead of defaulting to um the cued events. Um once 60 seconds has passed, let's it should automatically grab a new question and start a new round of voting that can vote on. Again, each person should only be able to vote once per question. I think that should be good. Um, neat part is if any of this fails, I have another uh I have one that I spun up last night uh that we can put uh that we can put on Laravel Cloud. And I mostly want to put on Laravel Cloud because I think it it's a cool little application. I love the always having a fail safe. I do the same also. Hi Francisco. What's up Francisco? How are you? How are you? Happy Wednesday now that I finally know what day it is. Um yeah, one of my hot takes specifically about um it's not really a hot take. One of the things I I think is uh I think more people should build their own starter kits because I think the more you have opinions on um like let's say how you like to even if you use a Laravel starter kit but you like to have uh good default starting options within there of like hey this is how I like my dashboard laid out and this or this is how I you know these are the three packages I almost always install. uh you should like create your own either like package or starter kit for that because I think AI does better when it knows. So my starter kit for example is like if I was to pull this open it's it's so uh like I already have you know like agents and cloudmd but like most of it's like based around you're using flux everything you build needs tests for it it's using livewire for single file components um and it's it's it's so strict that it it almost can't fail because there's only one way to do things. No, I think that's a good idea. And then it's like it obviously would save you time, not just like you manually doing it yourself, but like say if you're having to go back and forth with like AI agents to change certain things every time to like change the dashboard and stuff, then if you have the starter kit, you're already starting from there from that point. So then it's saving you prompts or whatever. Yep. Yep. And the neat part I think with within this a AI agentic world as well is um because AI does a great job of comparing something. Let's say um let's say for my particular starter kit. Uh I like that the Laravel like maybe there's a new package or a new feature of Laravel starter kits that are coming out. I know there's a fun couple of fun ones that were announced at Larcon EU that are probably going to be coming out in the next couple of weeks. um like it's easy to then point my starter kit which is you know it's it's a very minimal starter kit compared to Larvo back and say hey let's actually add this as an option um and it knows knows how to do that so you can kind of like pick your own flavors of a flavor starter kit I guess in a lot of ways now making me think of like going to McDonald's or something and you have the soda fountain with all the you soda and stuff like when you go to Sonic and you add flavors to your sodas and stuff. It's like that but for starter kits. Yeah. I'm curious, everyone in the chat, do you have that? Uh I know that there's they're not actually it's not like they're in every place in the States at least, but the the ones where you have the big touchscreen Coke machine. Does everyone in the chat know what I'm talking about or like do you not have those in your freestyle? It's like Coca-Cola freestyle. Yeah. Yeah. I I love that because there's so many things that they're ne no no restaurant's ever going to have the things that I like because it's like specific. Like for example, I really like Coke Zero or Diet Coke pineapple. Oh, now I want to try that. It is available in most of those freestyle machines, but like you're never going to get that at a just like a McDonald's or whatever. I bet you could get at Sonic though, cuz Sonic you can add the different flavors. Your drink. At least my current does not have pineapple though. But yes. Oh man, that's wild. I bet Utah would because you have all the dirty soda places in Utah. Oh yeah, they had like pineapple at all of them. Boomer detected. Wait, Coca-Cola freestyle or? Yeah, I'm I'm curious. What did Josh say? What did I say? I'm going to assume you're talking about Josh and not me, but it could be me, Um, no. It could be how I'm building applic. I'm just watching it. Yeah, but using AI feels like non boomer, but I don't know. Could be wrong. That could just be me wanting to seem hip. Yep. I'm curious in the in the chat. Um, how many people have opened up um opened up their code editor and written more than let's say more than 50 lines of code in the last month? Like I guess like I'm curious of how many people are what what's what's your thing? So like for for me for example, I still use and like this is actually I I probably just because I want to not be focused too much about this application and talk to the chat a little bit. I still I would mo the the thing that I do in my editor or in my terminal is I usually install my own applications like compose like PHP artisan uh install broadcasting like I would probably run that myself. Um any kind of like I would open my code editor for anything like if I'm changing any kind of config is usually when I'm open my code editor. Wait your code editor open the whole time? I don't. No, usually. Usually I open it to make a change. Then I close it. I keep mine open the whole time. I don't think I've written 50 lines of code by hand fully myself with no AI or anything in the last month. But I like So I'm still one of those people when even when I'm like vibe coding, I don't just let AI do whatever. Like I have to approve everything. Yeah. And then I'll I'm very particular of how I want it to write things, which I should probably write skills for that instead of me having to handhold it as much as I do because I think um when Jess Archer who works at Larbell was on during the one-year cloud anniversary stream, I think like she was saying um I don't know if she has skills or how, but she didn't really use AI a lot, but then lately AI was able to produce code that was like the quality of how she would want it written herself. Um, and I don't know if she's using skills and stuff to do that, but I should probably utilize that. But I don't I like really handhold AI. Like I don't let it just go crazy cuz I'm still nervous about that. I still like don't like how it does some stuff, but also I do a lot of frontend stuff and AI still has a a ways to go on the front end. Like I feel like backend stuff it can one shot. Yep. Yep. I feel like especially if you are working off of like what you do a lot or you used to do more of Leah, but like if you're working off like a Figma file, u I think there's still ways of doing it. I'm curious to I've played a little around a little bit with Tailwind's new UI.sh stuff that they've kind of been experimenting with, which kind of has more agentic experience with working with AI. And uh Steve um can't think of his last name. Steve from Tailwind uh uh had a whole video. I think it's like an hour long video of how to design with Claude, which was really good. Um, yeah, I think one of the things that I personally like and one of the reasons I advocate for people to find their own flavor of how they like to build within AI is once I started to really lean into um, and shout out to Nuno Nuno Maduro for kind of like I so I I never I don't I think I have only written by hand um probably like five or six tests in my life but because of AI I have written hundreds of thousands of tests and so it's one of those things where I think with specifically for my flavor of like what I like to use within livewire I have PHP stand to do static analysis I have uh I have pest to do any kind of testing and then I have recctor Laravel recctor to be able to kind of format things and you can kind of see here like we have like these use strict types. So, it knows automatically um that all of these testing pages should be strictly typed. Um and AI does better when it has constraints. And so you can see here, uh it ran it was like, hey, we're all done. But then it ran PHP stat and it was like actually we're not done. U and so I I like that this probably wouldn't have caused and I kind of like you may maybe less than you Leah but like I I so I don't open up my code editor but I I try to read through every single thing that it's doing because I not so much of like trying to babysit it of uh is it going to work because I think is it going to work is what's the end result but I like to have my own appeal appeal for like what it looks like in terms of like a DX. So like if this did a user question model or something like that, I'd be like, "No, let's just make this a question instead." Like why why are we doing that? So I think there's there's so many things that you can have more opinions on now with AI um that you couldn't before. Yeah. No, I agree. And it's like cuz almost always it feels like it can create something that works. So, it's more getting in the mind of thinking like, is this clean for me? It's like, is this clean? Like, is this the best implementation? Yeah. You're giving me something that works, but is this the implementation that I want that won't have issues that is like more reusable down the line? And Zayn did say, Zayn said, "I can't afford coding agents, so I usually write more than 50 lines per day." Yeah, I am. I am excited. I don't I don't know when this is going to happen, but I think the more uh I think like we're going to slowly start seeing more and more like either local models that are still just as good that you can run without having incredible hardware or even free models. One of the things that I I think is a awesome and maybe like you've tried it out Zay is there's open code um which they have their own free models um it's not going to be clawed or anything like that but like if I was to go into like their free current free models um are uh Mimo Miniax and Neotron and uh they have the there's still limits on course you can't just use them for thousands and hundreds of of tokens But, um, it's a great option. Uh, and you don't even have I I don't believe you even have to create an account to use the the free models as well. So, that might be something just just to give it a try to if you if you aren't already. Also going to call out. Um, one want to answer real quick cuz Najiba asked, I really enjoy these sessions. When do you usually go live? They're not um like a like for this one, it's not like a recurring one. Um, I usually stream once to twice a week. So, this week is this one. Next week, I'll be doing a stream next Wednesday. So, exactly a week from today at Let me check the time before I say it. A second. I'm going to um while this is still going, I'm going to actually open up and start putting this on to Laravel Cloud. So, one of the things I like to do if I'm building out something to like test um test a new uh we'll call this wired um a voting app for the stream. Uh, one of the things I like to do when um building out an application, especially if I'm like using this as a way to either test something out or to try something new or just like a little demo application, I like to do that like first initial prompt. Um, and then I like to uh get this um like put it hosted on Laravel Cloud as quickly as possible because then it's so much easier to fix things if you have a working version on Laravel Cloud first, like on on your hosting platform first. I think Laravel Cloud makes it incredibly easy to do that. Um, so we'll say we'll say stream And the streams next week, I have one a week from today. So, next Wednesday that will also be a vibe coding stream. I'll actually be showing how to vive code for non-developers. Um, and that is an hour later than we started today. So, at 11:00 a.m. Mountain time, 1:00 p.m. Eastern time next Wednesday. And then I'll be doing cloud office hours with Devon at um 11 a.m. ET or 9:00 am next Friday. But those will also be shared on our social media as well. And sorry about that. Okay, keep going, No, all good. Um, I know that I'm going to need a database. So, in this case, I'm going to use um I'll probably use MySQL uh for this. And I know I'm going to need a websocket instance. Um, I think that should be it. I'm going to create a new one. I'm going to bump this up just because I don't know how many people are are are watching and so just so we don't get uh 765 and all so might as well be safe. Yeah. Uh I will try to message you to remind you to bump it down after. Thank you. I always I always forget that for demos and then all a sudden I'm paying a lot of money for something that's not being used right now. hi Mark. Josh, is your birthday this weekend? It is my birthday this weekend. It is Saturday is my birthday. Happy early birthday, Jo. Uh, Mark asked, "Is Josh excited for his birthday this weekend? I I am excited. Um, I don't think I'm doing Well, my my wife is is planning on It's not like I big birthday. I'm only I'm going to be like I don't know how old I'm going to be with I'm going to be 32. So, uh it's not like a it's not like a a big landmark birthday. Uh but I uh my wife is planning a we're going to do like a there's like this place near us that has like extreme slides, like an indoor slide playground, but like it's for adults. So, I think that's where we're going. Um, could you hide my screen real quick? I have Flux UI stuff that I need to drop into my You're heading sweet. Thank you. Yeah, we have some happy birthday Joshes in chat. thank you everyone. I appreciate that. And then Mark said, "I'm gonna be 30 exactly one week after Laron us." I turned 29 at Laracanu. and then Syro had said to Zane, "You could try Google Anti-gravity. Their free tier is pretty generous, which I know they do have a free." Oh, that's awesome. Okay, I'm good to share my screen again. Bring it back. Yeah, the one thing that I like to use in my starter kit, this is just personal preferences. I use bun. And the cool thing is uh Laravel cloud makes it so I can run bun on my uh production environment. I did not realize that. I guess I've never used bun. That's really cool. Um we should be able to deploy. Let's see. Let's see what this looks like locally. Um I should be done. Yeah, there we go. Sweet. Um, so I'm going to run I'm just going to actually tell it in my composer rundev. Let's also add the reverb command and let's see what it looks like because usually I am not so like this I would not call this particularly vibe coding because vibe coding would be like let's spin it up and then we're just done for the day. We're not even going to look at it and just figure. So like my particular flavor of how I like to work with AI is like okay now let's do the actual tweaking of making this work properly. But first I'm going to deploy it. Um see how that works for that's my thing. I don't think I've ever vibe coded. I'll call something vibe coding and it's just like me using AI because I can't just like have it give me something and me not want to change things. Exactly. Exactly. Let's see. There we go. Nan. Perfect. Uh, would you rather? So, this is what I'll I'll just take a screenshot of this and we'll say this is not right. time remaining and limiting question. We'll see if like maybe it's because reverb isn't going. We'll see. because this is our local one right now, Yep. looks like something's broken. Yeah. So, this is the this is the local instance. Um, and I think the goal is like Okay. Hey, we we'll have we'll have uh I think there's a couple fun things that we'll do is we need the would you rather question. Who's light mode versus dark mode in the chat. I I'm a funny one um where all my like my terminal, my editor um are all dark mode, but when it comes to websites, I prefer light mode. And you said it doesn't even have to be the yellow light mode, right? You you would like even the bright ones. I like Yeah, I like even the bright ones. So like like I know GitHub has a dark mode, right? GitHub does dark mode. I I don't I don't even know. Uh I I think I use like my X's light mode. Yes, I just I just prefer light mode. I know. Sorry. Sorry everyone for the the flashbang. I said I'm the same as Josh. I'm with Bruno. I'm dark mode. I was telling um because I remember Josh talking about this when we had Joe Dixon on for the cloud anniversary stream and they were both light mode. I'm dark mode to the point where I even had my Kindle Paper White in dark mode and I was reading like at like 4 in the morning I was reading it on dark mode and eventually I had to switch it to yellow mode. But I can't do pure white. It like burns my retinas. I get I like the yellowish light mode and I I think I prefer that for my Kindle now because of my my eyes, but in general I like dark mode better. And then Najib said, "My editor is dark and my browser light mode," which sounds like Josh. Yep. My browser light mode. I But my phone is dark mode surprisingly. So like everything on my phone is dark mode. Yeah. I'm I'm just I'm not I can't uh can't be bothered to be put into one hole, I guess. Yeah, Bruno, it's interesting though because um I think it was like scientifically proven that light mode's supposed to be better for stigmatisms, but I have a stigmatisms in both eyes and dark mode is better for me on some things. Like I'll get headaches from light mode, but like I said, it's like the super bright light mode. I can do the yellow bright mode. So, don't know. All right, let's see. I'm curious of like I'm guessing that either we're not loading up the question properly because we're not getting any browser error. So, uh, yeah, it looks like this is also this would be a good time to be say like make sure we use the Laravel best practices skill which so is the one we mentioned a little bit earlier. It's brand new released today. I'm really excited to use it. It's just a great time for it to launch because we could use it right now like you are. you're like, "Hey, this it'll fix in one fix in one." Yeah. And so this is when uh I already kind of have this this one going, so I'm going to clear that. But I want um I probably am going to just say um in the top right I would like and I might even do this on a like the full page to be a like there to be a badge that shows the number of people active on the site. We can probably use session or IP tracking whatever we are using to ensure uh oh there we go. Whatever did it fix it fix started to fix it. Oh. Um, okay. So, yeah, the the weird part about the API is, um, look, it successfully loaded that Laravel best practice skill and it just fixed everything for me. Uh, I was testing this API specifically last night and and the interesting part about the API is it just returns the question with the answers all in one string. So, we have to parse it. I think it didn't test that out. Um, yeah, it's like now let me test out the parsing. Yeah, there we go. Uh, so it could be like that. I asked it to best practices. I also told it to um create an artisan command to test the API um as well which uh kind of like neat little tidbit that I have learned in like the last couple of months is um tests work great for agents but it it's not like you do you don't get negative points if you have a thousand artisan commands. agents do a really good job at creating their own PHP artisan commands that they can use. So like let's say you want to test how I get a would you rather question from an API. Um yes that's a good place to use a test but then also like let's say something changes in your like in your UI code that it's not perfect for that kind of unit test anymore. An artisan command is great because then it it should know how to call that as well. Um, so this is kind of like a good good uh fallback for it. We've used those a good amount and when we were doing the marketing sites too like I think we definitely had artist and commands um for the Laravel rap project and I know we did when we were working on like the community and blog site as well. All right, looks like it started fixing that up. I'm curious. Hi Florian, you are late. You should have had your your bot remind you when we when we started stream. No, you're good. Thank you for showing up. Paste this in here to kind of test uh local time. We'll say option A. Looking good. Did it make the badge? Oh, wait. You weren't able to add that annotation, right? Because it updated it. Yeah, but I did not I did not uh add the annotation yet. Okay. So, we have um let's see. Uh looks like the timer seems to be synced. It's not perfect when I open up a new tab or new browser instance. Also, when I uh vote on one browser, I do not see that reflected. I don't know if we're actually using PHP artisan reverb start. Let's see. No. So, we are already used. It is already It is already being used. It's probably being probably do have it spun up here. Yeah, there we go. Said, "Dude is making a quiz app in 30 minutes. We are in an AI world." Uh, I do not see that reflected um even after refreshing. So, I don't know if that vote is being persisted. So, let's get functionality working correctly and then I'm going to tweak the UI because there's there's some things I want to I want to tweak about that specifically like I like refresh and the time didn't go. I'm curious if there's another question that pops up after this time remaining. So the goal is once we get this live, people in the chat can then answer these would you rathers and we can see who would rather what the majority vote is. Okay. So did do a new question that stops the timer. Um perfect. So, at the end of 60 seconds, we did get a new question, but the timer kind of just stopped at 59 seconds after the question was reset. selecting an answer did update the timer, but it did not continue. Yeah. Counting down afterwards. Florian Josh did deploy it to cloud. I think you just went through the UI though, right? I just went through the UI. So we do Laravel Cloud does have a CLI. I am just used to spinning it up with the with the UI. So uh you can have your agent uh deployed. It looks like we have a fail. Well, fail. Let's see here. Um yeah, on flooring boring I say that if I haven't used the CLI yet. I did a live stream with Joe Tannon Bombal on the cloud CLI what two weeks ago I think which let me share that link. I definitely want to play around with the CLI though because it looks really cool and I like that it um if you already have the the GitHub the GH CLI installed then if you use the cloud CLI and you don't have your project pushed up to GitHub yet, it will prompt you to deploy that um or create a repository for it on GitHub just from the cloud CLI which is really really cool. Yeah. Yeah. So in production we do have a Laravel echo fail which I don't know if we so that that might be the reason why it's not working properly um in local as I see fail roll up fail to import from Larval Echo. That's what it said, right? Yeah. Which is interesting. So, I'm imagining this is like one of those instances where I I like to dive into the code. I know like a true caveman. Um but in App.js. Um yeah, we're not So, we have Echo. We're testing it locally. Florian, he says searching for the cloud URL now. No, it's not. It's it's it's me. It is not cloud for sure. Um, we're testing it locally right now. The neat part is I already built this last night, so at the very least it looks a lot better and we can spin that up on Laravel Cloud, too, if we're if we're running short on time. Um, is this still working? Watch Claude just crash on me. That's that would be the that would be the the desktop version was down earlier today. I did see that. Okay, this is doing something now. Okay, let's go. Fingers crossed. I got fingers and toes crossed. I'll cross I'll cross my dog's paws for you, too. Oh, there was a question. I might have also just deployed this at the wrong time when like we were still installing I could have been when we had already imported it but we didn't run uh bun install for all those Because if I go see get Yeah, we have package.json and bunlock. Oh, and they haven't been committed. Yeah. Okay, that could be it. I'm just gonna whip this. Whip it. Whip it. Does anyone have any fun uh aliases that they use? So, I I took this from Taylor Hotwell. Uh it's a whip command and it adds everything and makes a commit message and then whip. Funny enough, I know a lot of people have like PA for PHP artisan. I literally type out PHP artisan every single time I do it. I think PA is what Joe has. Joe T. He has some get alias or some alias for PHP artisan. Yeah, I I just I don't know. I've just never used it. And so I I think I I had it at one point. I think I had PA or even just a or something like that for PHP artisan. And I just I just would type I would just type it out the full thing every single time. Mark has a good one. He said nah, which is get reset hard. And he said he got it from Caleb. Caleb Porzio. And then art is PHP artisan. Wait, someone said PHP artisan's a Mark said art is PHP artist. See, art art is going I could I could see that. I just I feel like I'm used to it so much at this point like running PHP artisan. I know that's a lot of letters to type, but I'm used to it, too. oh no, I've used 90% of my session limit. There we go. Someone had asked, you kind of answered this, but someone had asked earlier. I was trying to find the question in chat, but now I can't. Someone had asked about the starter kits. Oh, there it is. About the starter kits. Do you guys know when um they're going when they're going to be available with the teams features? So excited. which Josh uh said should be in a couple weeks. So they are coming soon. The which are the starter kits that were announced at Laracon EU and then when Inertia um has its stable release, the starter kits will be updated with Inertia V3 in them. So we're getting somewhere. We uh we have the timer and votes in sync across tabs, but it's not unique for the vote. I can vote in two tabs, which should not be the case. Uh one user said that twice before and it just ignored it. Yeah. Like, oh, it's like, oh, you didn't really mean that, right? One user should only be able to vote on their device once per Okay, let's see if So that's looking looking pretty good. So this is when I would start to once functionality gets into place. This is when I…

Transcript truncated. Watch the full video for the complete content.