Anthropic Claude Code with Sonnet 3.7 in 15 Minutes

--- type: transcript date: 2025-02-25 youtube_id: dRaHQRxJAEs --- # Transcript: Anthropic Claude Code with Sonnet 3.7 in 15 Minutes anthropic just put out Cloud Sonet as well as Cloud code in this video I wanted to go and show you what cloud code looks like right now at time of recording CLA code is in a limited research preview and what it allows you to do is as they describe in it enables developers to delegate substantial engineering tasks to CLA directly from their terminal first up to get started it is super straightforward just make sure that you do have adequate Hardware you do have a recent version of nodejs installed all that you have to do is you can run through the installation steps authenticate your account with the anthropic API and one thing to note is you will have to have some credits on your anthropic account for all of this to work when you do go through the authentication steps you will go through the ooth flow and be directed directly into the CLA interface I wouldn't be surprised if there is or is shortly going to be a way on how you can implement this with gcp as well as AWS as well which this model is also hosted on the other thing to know which I think a lot of people will probably ask about is how much will this cost I'm starting this with a balance of $322 we'll see how far this gets us first up what I'm going to do is I'm going to open up a terminal I am going to be using this within cursor because I do want to demonstrate how you could leverage this within an AI IDE like cursor if you're interested the first thing that I'm going to do is I'm just going to create a new nextjs project I'm going to create it within this Sonet 3.5 folder I'm going to go ahead and select all of the settings for the project and then once that's all installed I'm going to open it up I'm just going to go ahead and Bund Dev and start our development server now that we have that running I'm just going to open up a new terminal and I'm going to make this a little bit bigger here once you have it all installed what you'll be able to do is you can go ahead and just run the command cloud and then within here you'll see Cloud code May read files in this folder reading untrusted files may lead to Cloud code to behave in unexpected ways with your permission Cloud code May execute files in this folder executing untrusted code is unsafe tips for getting started you can run a knit that's going to create a cloud. MD file and that's going to be instructions that you can feed into Cloud that's going to be something that looks to be similar to cursor rules if you are familiar with that which are essentially additional customizable instructions that you can have but in this case I'm just going to leave it blank now you can also set up the terminal setup command for terminal integration you can ask Claude questions about your codebase and then you can ask Claude to implement changes for your code base what I'm going to do is say I want to create a landing page for my brand developers digest I want it to look professional as well as have a dark theme with blue and purple linear gradient accents now we see that it is cooking and what it's doing if I just expand the terminal a little bit here we can see that it's going through and it's reading a number of the different file path here so here we see it went into the page. TSX it went into the global. CSS it went into the Tailwind config and now I'll update these files to create your landing page for developers digest with a dark theme and a blue Purple Gradient with accents first let's update the global. CSS to add your dark theme and gradient colors here we see that it's going in and it's adding in some colors for us now I have the prompt where it's asking me to accept these edits and I can also say yes don't ask again in this session continuing on we see that it made some updates to the layout. TSX and that it's also even creating a l so while it is moseying let's just take a look at our API credits let's go and refresh this and I started with $322 and I'm down to $38 here is our website so we have this purple and dark theme it is a very presentable website so it probably arguably looks like it was created or generated with AI there are some subtle things that are a bit off like developers digest up here if I go and look at the mobile view for instance we can see that it looks pretty good for a first pass with not much Direction it did what I think is a pretty good job now that we have this even though I have our development server open here the interesting thing with the application is it can also run your development server I'll go and stop my server and what I'm going to say here is yes and don't ask to run npm commands in this directory again I'm going to allow it to run that for us now we see that it's puttering and it's taking a couple seconds here one thing that I do want to to mention is the cost so this model this 3.7 Sonet model is the same cost as Sonet 3.5 now one thing to know with this is if I head on over to artificial analysis and I look at the prices at time of recording this is the second most expensive model that is out there that is second to1 right now that's just something to be mindful of is even though the results are very good is you are definitely going to be paying a premium price for that but if you are looking for the frontier model for coding this is definitely going to be right now all right we see it spun up the development server and then it gave us a brief of effectively all the different changes that it has the organized sections we have the header we have the footer so on and so forth now let's try something a little bit more interesting now just for demonstration sake so I'm going to say I want to create a page with a number of classic arcade games let's create the overall theme of each game to match the branding of the overall site let's create Pac-Man Frogger as well as pipe tram if you haven't played pipe tram before it is a really great game from 1991 this is one of the first computer games that I played now while it's working through what we can do is we can go and look within some of the edits that we have here now we see it created this games directory and we have this Pac-Man cover image which doesn't actually exist but we also have this logo that it created where it created the developers digest text and if we take a look within games we can see some of the different pages that it started to make here if I take a look at pipe train we we have a good 263 lines of code within here within Pac-Man we have a page for Pac-Man within here and then finally we have a page for Frogger as well it is going to be interesting to see how well this works if at all while it's continuing to work through this let's just take a look at the console here we're down to $225 we've used about a dollar for our application so far now if I go over to the games tab we see that we have these three different pages and we also have game controls it even added this section without asking we have the arrow keys and then we also have these game tips here if I go and click Pacman for instance I see what looks to be like a pretty respectable little area for the game here let's just go and start the game now I see that the game didn't quite start but in terms of just the components themselves and these little svgs it is a pretty decent layout I have to say we also have the score here we have the ability to click full screen now mind you these don't quite work now if you look here this actually has been running for quite some time this has been running for about 6 minutes by the looks of it now it looks like it's created the arcade section for the games developers digest here's what we built a main landing page a games Hub showcasing three classic arcade games individual games for Pac-Man Frogger as well as pipe drain that this maintains the consistency of The Branding the games are representative with placeholder visuals and scripts that could be replaced with the actual game implementations now let's implement the games in full and I'll let this run for a little while and then we'll Circle back here all right so now after running about for another 5 minutes or so we see you've successfully implemented three fully functional arcade games for developers digest each with their own unique gameplay and designed to match the Dark theme with the blue Purple Gradient accents first up is Pac-Man a classic maze navigation game features power pellets as well as complete score track tracking level progression and multiple lives and then we also have pipe dream now let's take a look at each of these games here so we have packman we have Frogger and then we have pipe train I do see some errors here I see that there's a hydration error and then there's also a error with setting the text content if I just take a look at this there are some errors on each of these pages but if I just take a quick look at these these look like they're going in the right direction while these don't quite work yet with just three rounds of using this Cloud code terminal interface I got pretty far I was able to create this landing page I was able to create these three different game pages that also have these game stats as well as how to play it has the starting portion on where you can actually Implement and put in the game and then finally it actually has some decent canvases for what each of the games look like here we have the canvas for Pac-Man this is a canvas for Frogger and if I go over to pipe dream we have the starting implementation for pipe dream we even have the different pipe types here just to give you an idea in terms of how much this cost we're down to a121 basically $2 is what it cost us to generate what we have so far what I'm going to do now is I'm going to go and I'm going to Pivot over to cursor you will be able to access this within chat composer and also use it with the new agent that they have as well what I'm going to do with in here is I'm going to restart each of the pages and grab the errors that we had for each page here for theack man page we we have this event listener error I'm going to paste that in here Frogger we had this series of errors and then finally for pip tram we have these series of errors I'm going to send this in and let this agent determine the next step if you haven't used the cursor agent before it's very similar to this CLA code terminal agent except it is directly built into the IDE here arguably it does a lot of these similar things such as searching the different files trying to determine the next steps as well as also editing and implementing and creating new files similar to what we just saw within Cloud code there but how it looks with en cursor it is a really nice ux personally and this could just be a personal taste thing but I personally do like this composer view I do like the visibility of all of this here when using the cloud code terminal tool it does work really well it's pretty hands off doesn't quite give the same polish feel as composer where I can see all of the different pieces where it's going through Page by Page and it's updating the different pieces here here we see that it grabed the code base it created these different scripts for all of the different games and now if I look through what is in here within Pacman it created what looks to be all of the different code just for Pac-Man itself this is almost 600 lines of code here this is all that was generated for pipe dream if I go down here that's almost a thousand lines of code and then finally for Frogger if I go down here that is almost 800 lines of cod I just want you to keep that in mind for the first $2 that I spent that was effectively thousands of lines of complicated code that Claude generated for us for $2 now that I have a handful of more errors what I can do here is I can just go and grab some more context and specify all of the different errors that we have within here it's definitely struggling a little bit with our task but mind you we did throw a lot at it it doesn't seem like any of the games are quite working yet the one big difference with cursor is going to be the billing instead of being directly build with the API from anthropic arguably you are going to be able to get quite a bit further with cursor it is $20 a month for the subscription but depending on the usage if you really try and push your limits with cursor you probably are going to be better off than trying to use the claw API directly now let's just try it with some simple examples create a stunning SAS landing page here here we see generating all of the code for us one of the things that I noticed here is even with a simple instruction like create a stunning SAS landing page it did generate a good chunk of code for us here and based from the games that we asked it to generate it generated thousands of lines of code with just those simple instructions that's just something to be mindful of especially if you're using the API now let's take a look at our sasfy landing page here transform your business with our sass we have these nice colors here we even have this pricing page we even have these photos which is an interesting touch cuz that is something that llms used to break when you'd put in an image it would show a dead path but it is using images from unsplash that is interesting to have those within the generation and then we have a really nice footer as well but overall in terms of the UI this is something that definitely stands out it does look quite good just for very simple instructions now let's try another generation let's send in generate me a perfect clone of Minecraft with extremely good detail here we see we have this Minecraft clone we have a ton of different styling that it's generating we have the body we have the Crosshair we have inventory we see that it is going to be leveraging some CDN here it's going to be using 3js by the looks of it as well as setting up some of the logic within here we have the initialization function and a bunch of other assets here we even have texture that is loading from GitHub we see it's generating the height and the blocks and it's just continuing to go through here it doesn't seem like it will hesitate to really just go for it and try and generate whatever you're trying to do here we have 450 lines of code and again it did generate reasonably quick for one of these larger language models here we go loading Minecraft clone and let's take a look drum roll all right look at this wow this is amazing there are some textures it needs to fill in but other than than that we basically have a starting point to Minecraft with just one prompt the last thing that I want to point you towards is even if you don't want to pay for the API or you don't want to pay for cursor right now you will be able to access Sonet 3.7 within the cloud. web app and the really great thing with this is you can now access your GitHub repositories directly within the cloud interface as soon as you authenticate with GitHub you'll be able to see your different projects here and what's great with this is you can select the different pieces of context that you want to put within the web app it will even show you the capacity that you have left for the context window but otherwise that's pretty much it for this video I wanted to show you what Claude code looked like as well as Sonet and just point you in a few different directions on how you can leverage this new Sonet 3.7 model let me know your thoughts what are you going to be building with this how do you find it in terms of other models that you've been using do you think it's worth the cost I'm curious to hear your thoughts about the models but otherwise if you found this video useful please like comment share and subscribe otherwise until the next one