Vollständiges Transkript anzeigen (1.819 Wörter)
Everyone, quick video here on the next-dev-loop skill that we are getting here in the latest Next.js 16.3. So, basically, uh with this one, it's a skill, it describes to the AI coding agent how it should uh verify if it did something correctly. So, it gets access to the inner workings basically with the MCP, but also it has access to agent-browser. So, with this, it can control the browser. So, it can see the actual DOM, and the console, the the network, and the React tree. And it's able to do things like click uh in the in the browser and uh even in a canvas app, I had it move around in the canvas and panning, uh I believe even things like zooming. So, basically, interacting with your website or app to verify if it actually uh you know, maybe fixed the bug properly or implemented some feature. Now, it does require the agent-browser package. And then we can install the skill. So, let me actually show you a demo of this because it's pretty impressive. Uh actually, I just had a real-world uh scenario here. Um so, let me actually copy this. We can just add this as a skill. And you can pick your agents. I'm just going to pick the default ones here, press enter all the way through. Okay, so now I have this skill here. Right? So, basically, what does it tell the agent? So, after editing the app code, it needs to verify the Next.js uh runtime behavior. Use this skill to confirm a change actually works in a running app, not just that it compiles or type-checks. That's so very often it just runs a build to verify uh if it did it right, but of course, a build does not tell the full story. There may be a perfectly fine build, but in the browser, it still looks off, right? Maybe there's not enough contrast with someone's color or maybe there is a functional bug and there's no error being thrown, it just doesn't work the way it should. Right? So, now it's going to use agent-browser to actually control browser, take screenshots, and try to learn from that. So, just to show you a bug that I have currently, so I'm working on this app here, it has a pretty complex component here, a spreadsheet viewer and editor. Okay? So, part of this spreadsheet here is that there is a graph. So, this graph is just uh plotting the data that we have for revenue here, right? So, the blue line here, you can see, for uh note for uh December 2026, we have this uh data point at about $300,000. Okay? Okay, so that data point is in this sheet here, so there's tabs here, and that's this data point. Right? So, now the bug is that if I change this, the graph will not update. That's the bug. So, if I make this 915,000, um right? So, this data point is now way more, if I go back, you can see this data point didn't change. It's still the exact same $315,000 here in the graph. Pretty uh tricky bug for an AI coding agent to uh fix perhaps. So, I'm going to open up uh Codex here, I like using Codex, but uh sure works similarly with Claude Code. I'm going to say, when I change a number in the sheet, if I change a revenue number for one of the months, I don't see it reflected in the chart in the other sheet, the dashboard sheet, for example. Okay? So, just a quick description of the bug. Let's see what it's going to do now. All right, so actually here you can see it's reading the next-dev-loop skill. Currently, it's just checking out some of the files in the project here. So, it's not using agent-browser here right now. All right, so actually now you can see it's actually opening up a browser here. I'm not controlling this, it opened it up by itself. So, it wants to get a visual here on the app. Um so, if we take a look here, we can see something here, it's running some commands here with uh agent-browser. Let me actually move this on the side here. Okay, and actually now we can see that it is even interacting with it. So, it typed in B3 here in the cell. Um I did not type that. I'm not controlling anything here about the browser. It's just doing things. And now actually it just switched back to the initial sheet. And we can also see here on the right side that it's now that it viewed an image. So, basically what it does is it takes a screenshot and then it tries to learn from that. So, it just took a screenshot here, um that's what it sees. Now it's a bit tricky for the agent here, because well, it it takes an image of the entire app here, right? But inside the app, we have this image, right, or this graph. So, it sort of needs to interpret a visual inside the visual. So, now it says the failure was reproduced. So, basically, it was able to change something in the uh data point here. So, it trying to change this number. It confirmed that it did not change here in the graph. So, now it's trying to do something, it's trying to refresh, I guess. So, okay, so now it's actually tearing down one browser session and opening up another browser session here or uh or a window here. My guess is that it's going to try to implement a fix now. So, it just starts from a clean slate. Right? So, it's using that agent-browser uh package here. Okay, so we can see it's moving to the other sheet again, and it's trying to select the B2 uh cell. It's going down now to B3, and let's see if it changes that cell. Okay, so it goes back to um the graph here. And we can see here, viewed an image. It's basically just exploring a bit, I guess. Right? I'm not controlling anything here. I'm controlling my mouse here, but the window, the things happening inside the window here is all done by the AI coding agent. B2, 185,000. Maybe it's going to change that. Okay, so you can see now it's it's typing something here in the B2 cell is 185,000. That's what it originally was and my guess is that it's going to try to change that now. I'm only moving the mouse here, everything else here is done by the agent. And I wish I could zoom in a little bit but I can't. Uh but basically there's a cell here in the spreadsheet that is, well, being edited right now by the agent, and it's going to change the number. And we can see on the right side what it's doing, so we can see it's continuously uh viewing an image to see what it's doing. And now we can see it updated the number actually, so now it's actually 900,000, so way bigger. So, now the B2 cell has been updated and my guess is now it's going to go back to the graph to see if it's changed. And we can see it did not change. So, the cell that that data that the data point on that graph uh remains the same. So it's taking screenshots. So now it uh should be able to see that it did not change the graph. So basically reproducing the bug. All right, so it tears down the browser and tries again a few times and after a few times it says, I've reproduced the exact failure. So basically describing the bug that we have and now it should try to implement a fix. Okay, so then it's I guess it's describing a fix that it made, and now it says, I'm finishing the live edit and redraw verification now. So, we can see it's doing something here. It's again trying to select the cell B2, and it's trying to change the number there. It just changed it into 900,000. Okay, so now it's going to go back, and here we go. We now see that the data point that was changed reproduces a different graph here. So we can see that the the 900k data point now is way up here in the graph. This is actually correct. So, it says the chart redraw is confirmed visually. Okay, and it says something about a clean up issue. So, it says now, I'm I'm resetting the browser once more and recording the final chart from from a single clean uh number change audit. All right, so just opened up a new fresh window here. It's just going to do a final verification check. Okay, you can see also when it opens up a new uh browser window that the component takes a few seconds to load, so it also needs to know that um it should not take a screenshot immediately, right? So it already knows about that. All right, so I'm cutting the video here a few times, but basically it opens a new browser window and it plays around with it essentially and at some point it comes with a final answer, "verified live". So, let's actually try it out. I will load it myself. So, let's try it with a different data point. So, we have this one for the for the, so we have this one at the end, so it's about $300,000 here in the graph. If I now change that data point here in monthly sales, if I make this uh 915,000. I updated it here. Now, if I go back to the dashboard, I can see that the data point here is now much higher here on the graph. So, we were able to fix the bug. So, pretty impressive, I think this next-dev-loop. It needs to take an image of the entire app and then interpret the graphic within that image, and then also has to interact with the browser to uh basically test it, and it what has to update a cell here in a pretty complex component. Yeah, I think this can be a real improvement to your Next.js development setup. It does require the agent-browser package. That has been growing pretty fast as well. Really cool to see what the Next.js team has been cooking. So, I would say, try it out. And also, I'll have a new video soon in which we talk about the other skills that we now also have here in Next.js, 'cause there's a few other ones as well. For example, uh these two with cache components, okay? But that's for another video.
