Build Web Apps in Minutes with Sonnet 3.7 Thinking and CodeLLM

--- type: transcript date: 2025-03-03 youtube_id: ub64XPFQyRw --- # Transcript: Build Web Apps in Minutes with Sonnet 3.7 Thinking and CodeLLM look at that in just a couple prompts we have our car we're able to drive it with our keyboard here so I can go and drive around all right so just last week anthropic put out Claud 3.7 Sonet in this video I wanted to demonstrate building out a simple web app with code llm if you're not familiar with code llm it's similar to an AI IDE like wind surf or cursor and the great thing with code llm is it has very generous rate limits and you can access clae 3.7 as well as Cloud 3.7 thinking to give you a quick overview you do have the chat interface here where you'll be able to access all of the state-of-the-art coding models from o03 mini to Sonet 3.7 or if you still prefer Sonet 3.5 that is within here as well and for the agent specifically you'll be able to access 3.7 3.7 thinking as well as Sonet 3.5 and Haku 3.5 what I'm going to do within here is I'm just going to start with a simple nextjs project and once I have that I'm just going to demonstrate how the agent works and once we have it working and show you some basic examples I'm going to dive in and really see what this model can do first up I'm just going to say I want to change out the text on the homepage to only read developers digest the first thing that I want to demonstrate within here is when I send in a query like this the cool thing with this agent is it will analyze its intent and it will go and it will Traverse through the repository and find the different pieces that I'm looking for here we see it analyzed the root of the directory we see that it went within the app and the page. TSX and it's going to replace the text you can also see the diff and the number of lines that it changed within the edit here but remove 94 lines as well as put two new lines here and there's our first change that's just to give you an idea on what the agent does is just with natural language it has the ability to Traverse your codebase and make updates to your codebase with natural language now I'm going to go ahead and just start our development server here and once that started I'll go ahead and look at our page here and now we have our basic change here now that we have that I want to demonstrate some more features of the agent itself as well as try and start to push the limits of the model I'm going to say I want to create a game in 3js on a new page and let's call the new page AI arcade let's maybe make it a game with a car and make it a really engaging scene I also want to add in a navigation component where I can link out to that new page within this next qu what I want to demonstrate is what you'll see the agent do is it will create directories for us it will create new files for us and it can also even edit existing files like you just saw here we saw it created the directory for AI arcade as well as our components folder the first thing that it generated was our navigation. TSX we have the home as well as AI arcade link within that and now we see that it's going into the layout to update and put in that new navig ation component here we see it updated the title as well and now we imported the navigation within the layout we also have that navigation from there what it's going to do is it's going to generate that page for us within AI arcade and this is going to be where it gets a little bit more involved because 3js if you're not familiar it's a 3D library and what people use it for are things like games or animations within web apps it's a very powerful Library you can do quite a bit with it here if we take a look at what it generated for us we have almost 200 lines of code I'll go ahead and I'll accept this now if I go over to AI arcade here is our racing game use the orbit controls to look around and I can move I can zoom in it's pretty neat it's a pretty basic World by the looks of it and it doesn't look like I have the controls quite yet the other thing to not with code llm is you can go within any file you can select the piece of code that you like to edit and if I go and I select command I on Mac you can select the model that you want to have make the edit what I'm going to say here is I'm going to say I want to be able to move the car I want to be able to use the keys w s and D to be able to drive the car around that scene that we have and then as soon as we have that back we now have the div here we have the ref we have the car position then we also have the keys to set the state of where our car is I'm going to go ahead accept and save this out look at that in just a couple prompts we have our car we're able to drive it with our keyboard here so I can go and drive around the fact that it is flying and the wheels are on its side that's a feature this is not a bug that is pretty amazing to think that in 2025 in just a couple prompts with natural language we're able to create what are these new little fun games of whatever we imagine on the fly now I'm going to say within the AI arcade page I want to add in some tall buildings as well as some simulated cars that are driving around and I also o want to add in Collision detection as well the agent went in and made some changes we have an addition of 263 lines of code and we also removed 20 lines of code now if I go and look at the page for our game we're up to about 440 lines of code and if I go and I accept those changes and I go back to our application we have some tall buildings and we have some cars driving around and now if I go and try and crash into the building we see we also have that Collision detection obviously this game still has a ways to go but pretty amazing for just a few prompts to start I didn't touch a piece of code to generate any of this if I were to generate this without an llm this honestly probably would have taken me days now mind you I'm not as familiar with 3js I don't usually use this library but just to be able to do this with natural language to have the AI agentic coding capability that will go through within my project be able to Traverse and edit all of the different files that it needs in addition to also having a very capable llm like Sonet 3.7 those two paired together I think that this is just going to enable a ton of different people to build out really cool applications that we probably wouldn't have seen if it wasn't for all of these tools that's a quick example of a game but let's go back to the homepage now I'm going to say let's go over to our homepage and also update our navigation and I want to call this AI arcade I want to have a number of different tiles throughout indicate the different games that we have and let's come up with a fun game for the game that we just created with the cars I also want the overall theme of the homepage to be Neo brutalist let's have some good colors and overall some fun animations and things on Hover that make it engage it so I'll go ahead and send this through now the one thing that I do want to note is even just a few weeks ago when I demoed code llm on my channel this did not have the gentic cap ability at that time and since then they've added this feature this is a very impressive first implementation of the AI agent it's able to successfully Traverse my codebase make relevant edits overall with the agenta capability paired with a very powerful model like Sonet 3.7 you're able to create some very impressive applications with just natural language here is the homepage that it created for us so on Hover we have these nice little effects we have neon drift City we have pixel Puzzler we have code racer and we have battles and here we go this is our featured game right now that we just created if I click play now here we go we have neon drift City obviously there's not much to it quite yet if I go over to the navigation we can see we also have these nice hover effects and I go back to home we have the starting point for some new games otherwise that's pretty much it for this video I encourage you to check out code llm it is 10 bucks a month it's cheaper than both CS as well as wind surf there are also very generous rate limits to be able to access these state-of-the-art models I'd encourage you try it out build out whatever you have in mind this could be a website it could maybe even potentially be a SAS otherwise let me know in the comments below what you have built or are building with Claude 3.7 Sonet I would be interested to hear that's pretty much it for this video if you found this video useful please comment share and subscribe otherwise until the next one