NEW: Claude Dev Builds NextJS App!π€π¨βπ» Aider, Continue Dev & GitHub Copilot Open-Source Alternative
In this video
- 0:00Introduction: Cancel GitHub Copilot with Claude Dev
- 0:26Overview: What is Claude Dev?
- 1:00Features of Claude Dev: Claude 3.5 Integration
- 1:45Comparing Claude Dev to Continue Dev
- 2:50Installing Claude Dev: Step-by-Step Guide
- 4:00Setting Up API Keys for Claude Dev
- 5:00First Look: Building a Recipe Sharing App with Claude Dev
- 5:40Executing Commands in VS Code with Claude Dev
- 6:45Monitoring Tokens and API Costs in Claude Dev
- 7:30Creating Components and Pages Automatically
- 8:45Implementing Search Functionality and Adding Recipes
- 10:00Troubleshooting and Debugging with Claude Dev
- 10:45Final Thoughts: Efficiency of Claude Dev
- 11:50The Future of AI in Coding: Are Developers at Risk?
- 12:30Call to Action: Subscribe for Daily AI and Coding Content
- 13:05Join the Stride Community and Other Resources
Links from the video
Transcript
2,363 wordsWhat's going on everybody Josh pook here and in today's video we are going to be looking at how you can cancel GitHub co-pilot never use GitHub co-pilot again you can now use a tool called claw Dev and for those of you who have been following this channel for a while you've seen me do other tools like claw Dev that you'll see once we get into it but this is a really cool tool I'm really excited about we're going to show you
How to set it up and use it to build out applications with AI with claic 3 .5 and you can use it in vs code let's dive right into [Music] it all right guys so with Claude Sonet or with Claude Dev you basically have Claude Sonet 3.5 artifacts essentially in your vs codes not 100% where you can like preview the artifacts or whatever I guess you can do that with the um live server extension in PS code but so it's essentially
Kind of the same but um okay so this is Claud Dev um I really like it so far it's uh open source here as you can see the source code which I love and it's kind of like an alternative for those of you who've been on this channel for a while or seen some of my other videos you know I've covered tools like continue Dev and I really like continue Dev in fact I still have both of these tools installed and
I'm going to be te like I use continue Dev and I'm going to continue testing out clad Dev um but uh check out some of my other videos on continue Dev I definitely would recommend continue Dev as well so there's continue Dev I'll leave links to everything I talk about in the description down below and what I really like about claw Dev well one thing I really like about claw Dev I'll get into the other things in just a second but
Um it's it's specifically made around or for claw 3.5 Sonic and if you have been coding with AI for I don't know maybe at least a little bit of time you probably will know that as of now the best coder with for AI is claw 3.5 Sonet uh at least in my experience and pretty much that's the general um you know what people are saying is that CLA 3.5 Sonic is the best recoding I personally get the best results from it
Um there are other good models as well as other good open source models we've covered a lot of them but CL 3.5 Sonic is my go-to when it comes to like if I really need some high quality stuff so yeah anyways that's what is uh one thing that's really good about it now here's the claw DAV GitHub I'm going to leave a link to that as well as the VSS code extension uh link that's uh one reason I really like it
As well if you've Se Me Do videos on tools like AER or there's other tools there's Cloud engineer whatever the case may be um you know AER was is is in like the command line or The Terminal and what I really liked about continu Dev is that it's a vs code extension and the same thing is what I like about Claud Dev is that it's a vs code extension so autonomous software engineer right in your Ida IDE capable of creating file
Creating editing executing commands files and executing commands with your permission every step of the way so it can execute commands with your permission so it's similar to what like haer can do um so that's really really cool and um let's see if there's anything else uh inspective diffs of every CH change CLA makes right in the editor uh run CLI commands directly in chat so you never have to open Terminal yourself plus respond to interactive commands by sending a message presents
Permission buttons proove CLI commands before tool you uh use or sending information to API um Claud dev has access to the following capabilities execute commands list to list file files top level list files recursive view source code definitions top level read file right to file ask followup question and attempt completion so like I said I'll leave all the links in the description down below as well as this I would definitely read through some of this you can check out some of
The reviews here as well um and yeah so what I will um so yeah you can install it in two different ways um I'm going to be showing you the at least the yeah so you could just clone it um P the repo open the project in vs code and then run code Claud ddev and then install the necessary dependencies for the extension and web view gooey by using mpm run install colon all and then launch uh launch by pressing F5
To open VSS code window for new uh for the extension loaded we're just going to do it the good old fashioned way and we're just going to go here and click on install to install nvs code you could also just simply open up vs code which is right here and just go to extensions and then just search Claude Dev and boom right here Claud Dev you can easily just download it and install it okay also too this probably goes without saying
But you're going to want an anthropic uh console. anthropic do.com you're going to want an API key so you can go to that it Link in the description down below if you don't have one I believe they give about $5 in free credits I don't if that's a month or just start but whatever um and then you're just going to go to your API Keys get that API key and then when you go back to claw Dev right here you would
Just go over to settings and paste in your API key you can see here I did run one command which is basically asking it to build a recipe sharing application using nextjs and tailwind and visual studio code blah blah blah blah blah give it a little like maybe two paragraphs of a brief description what I really like about quad Dev opposed to continu Dev um for example is like I really like continued Dev don't get me wrong I it allows you
To connect with a lot more models but just a couple things key differences here one I like how this shows how many tokens is being used as well as the API cost I find that's really cool you can export as mark down API request complete you can see here so to accomplish so yeah I just asked it a prompt trying to make this simple application index.js so here it's basically just thinking and then says hey this is what we're going to
Do CL wants to execute this command I'm going to let it run command I could let it run command or reject command okay so now it's basically running npm uh npx create next app latest recipe finder typescript tail one es lint so pretty much doing all the commands for me so would you like to use Source directory um okay so I saying yes output so we should start to see probably in a couple seconds now we should start to see the
Uh nextjs at poppy late so here we see great we've successfully created a new nextjs project with K1 CSS now let's create the necessary components and Pages for our application thinking we need to create the following the homepage so p page. txx uh and then our recipes route with uh IDs of the recipes and then page. TXS so recipe detail page components headers search bar recipe card recipe G grid and then add recipe form boom so it's saying it wants to
Edit our main file sure let's go ahead and allow it so we can see that it's did that and now Claud wants to create a new file let's just keep allowing it approve approve approve approve approve I'm coding oh yes I'm a coder I'm so smart look at me write this code just joking um and now you can see it's making an API request we wrote all this code it took us so long to write it and we're done okay so
Great we've successfully created a basic structure for our recipe sharing application now let's implement the search functionality and the ability to add new uh recipes so to implement search functionality and add new recipes we need to create context to manage the global state of our recipes update recipe grid component to use context and implement the search functionality update search bar component to trigger the search update the add recipe form component to add new recipes to the context so cloud wants to
Create a new file approve it's creating a recipe content file and then create a new file for recipe finder sure just going to keep allowing it okay so you can see the price going up the cost going up uh Claude wants to edit this file sure sure sure okay okay so it said it's up up implemented the search functionality now the ability to add new receipts recipes let's go ahead and allow that and quite honestly I mean I probably didn't even
Have to make such a complex app it's not super complex but task completed okay so the recipe sharing application has been sucessfully built so Claude wants to execute this command to install and run sure let's go ahead perfect so I I the one thing I really like is that oh I hope you guys can't really see but it's basically a button that I move my hand right here it uh basically shows execute command and all that good stuff so that's what
One thing I really like about Claud Dev um that you it just does the executing of the command of the terminals like that's really cool it's not always 100% perfect but it's so far pretty good and let me just go okay so it's launching our development here let's go ahead and take a look okay so failed to compile so I'm just going to copy this and paste this into quad Dev okay so we got another eror right here so I'm just
Going to paste this into clad Dev okay here we have our recipe finder wow okay so it took maybe a couple of tries just a few troubleshooting and of course as you can see we didn't actually put any real images here but we have some dummy data creamy Italian pad dish spicy Indian curry um I would change this color attacks we got a little form here with the title description ingredients one per line instructions one per line image URL and add
Recipe I'm not going to go ahead and test every bit of functionality of this but as you can see it's pretty simple if I just wanted to test go ahead keep testing probably would encounter some issues and I can just simply copy and paste that over into Claud Dev and we would get our result right so all right guys so that's pretty cool um for all you software Engineers out there and what whatnot um yeah maybe should you be trembling I
Don't know Claud Dev isn't yet there to fully replace you we still need um devs obviously so just uh fully haven't reached AGI or ASI yet we still have a bit of time to continue on developing before AI can get into uh where it can reflect uh recursively self-improve in an infinite uh continuously accelerating Loop so we still have a bit of time before that as of now we can just let leverage AI to improve our coding and projects and whatnot
So other than that guys hope you got some value from this definitely check out claw Dev uh links for that will be in the description check out continue Dev um and yeah and um that's pretty much it guys so if you're new to the channel and you got some value here we upload videos every single day on AI automation business growth Marketing sales um you know CRM go high level optimization all the like so many different stuff you can see on
This channel we have this will be my 41st video on this channel and I'm just approaching 4,000 subscribers so um yeah it's been a journey it's been awesome you know I appreciate all the new subs and very excited to continue growing this Channel and just continue putting out more value for you guys more content I got some really really good stuff planned um so the more you know I love seeing the support and all the comments and this and that recommendations
It actually motivates me to continue doing this well I'm going to do it regardless but it motivates me to go even harder and provide more value for you guys so other than that guys thanks for all the new subscribers and people you know joining uh this grow you know growing Channel Growing community and uh yeah other than that guys uh stride Community our free community is down in the description below our free Facebook group free Discord Channel we have about 750
800 members in there right now you can network with myself as well as like other likeminded entrepreneurs AI enthusiasts coders developers whatever all down there also too guys check out my book client acquisition code in the link in the description down below other than that guys I will see you in tomorrow's video keep hustling keep grinding and of course guys accelerate your stride take care