Cline + VS Code Changed How I Code Forever

Key Takeaways

client autonomous coding agent right in your ID capable of creating editing files executing commands using the browser and move with your permission every step of the way and it is a vs code Visual Studio code extension you can just create a full-fledged app just with one command client is automatically creating files and editing it right from a vs code editor you can also use it for free using ol models and create application super fast using Gro and I'm going to teach you how you can do this that's exactly what we're going to see today let's get [Music] started client is a vs code extension so you need to download this Visual Studio code then go to the extensions tab then type client there you can install it it's previously called clo Dev and you can see the number of downloads so once after you download you will have icon like this clicking on that then you can add your models by going to settings first we're going to try with anthropic Cloe so choose that API provider and add your API key here after that choose the model which you want to use now I'm going to give a task I'm ticking on auto approve which means it can read files edit files execute safe commands and use the browser to test the application so I'm going to say create a tuto list app with HTML CSS and JavaScript to keep this simple now it's taking the request and creating the required file that is the to-do list app then creating the CSS file with all the CSS commands now it's creating me the Javascript file with the JavaScript commands and the super cool thing about this is that you know how much you spent for each request now this is another Advanced feature it's opening my web app double checking if it's working or not you can also see the console logs based on what it's so it's verifying if the task is completed or not so now we are in a state P where we just give a prompt and this can automatically create any application we want and can publish it automatically that is really exciting future now let's test this app I'm going to open the file which it created that is HTML the index file so here is the tuto list app I'm going to add a new task integrate pris a with llama index so I can see the item here now if I want to modify this let's say I want to make it more modern and fix all these issues I can request that here I can see the pros is still going on because it saw the page and it want to make some modification and it's making those changes and also it's planning the list of steps to do so now it's step two of two after viewing the page I'm going to say make the too list app more modern now it's making those necessary changes in the CSS HTML you can see the modification happening line by line and here is the updated to list app with all these categories and and that is super cool next I'm going to show you how you can use olama with 54 model to use with client so download olama from ama.com next ol 54 and it's downloaded now 54 is one of the top model from Microsoft so we are going to use that next coming back to settings there in the API provider you can choose ol there I'm choosing 54 latest and then clicking done now there are few more features such as at then you can point it to a folder or a problem or paste a URL for now I'm going to point it to index.html and going to say add a navigation at the top with home and contact now it's using that as the context and making those necessary changes for some advanced task you might need some Advanced model such as CLA 3.5 Sonet now I can see these ol models sometime struggle to implement those changes so keep that in mind next we are going to see how we can integrate Gro so same like before go to the settings there in the API provider open AI compatible click on that then provide this grock endpoint then grock API key in that way you can create your application super fast I'm using llama 3.1 8B instant but you can also try other models you can see other grock models in the gro documentation as you can see here so after choosing this you can click done even this is a simple model so I'll ask it to create application create a to-do list application using HTML CSS and JavaScript in one file and clicking enter so I'm asking it to create it from scratch I can see it's going step by step and when it's generating it's super fast and it is completed let's try it out and here is the to-do application integrate llama index adding task integrate Lang chain adding task and I can see it's working as a functionality let me try adding modern look to that page now it's making those necessary changes and this automatically open the browser for me and here's the application but I don't see much changes that could be because of the model which we are using which is 8 billion parameter model so overall this process could be a bit more smoother but when you use Advanced models such as clo or open AI CH jpt 40 this seems much more smoother so I would recommend if you're planning to use CLA on it or open a models then this is much more smooth process using ol Lama and other small models it's hard to work with these do let me know in the comments below what you think about this considering you already like creating application just from one prompt I've also created another video which is lovable it's another application using that you can create a full application using just a prompt and I'll put the link in here and I highly recommend for you to watch and I will see you there