Build ANYTHING With CLINE + Claude Sonnet 3.7 (HERE'S HOW)

Content

00:00:01 -> 00:00:17 : so this video where we're going to be talking about Klein how to use it why I use it more than cursor and even a very very special never seen before guide on iteration prompting let's get straight
00:00:15 -> 00:00:28 : into it so first of all Klein what is Klein well they actually have a website now klein. bop finally it's been long enough and apparently they're being used by all of these I don't I don't know if
00:00:26 -> 00:00:39 : this is true I know I I I do have some information that Cisco users uh co-pilot on GitHub for example I don't think something like Cisco would be able to use client I highly doubt that Cisco is
00:00:37 -> 00:00:52 : actually using Klein but you know there it is so what is Klein Klein is a autonomous agent okay and it's apparently not just autonomous agent but it is just an autonomous agent it's more
00:00:50 -> 00:01:04 : than a code generator it's your partner in streamlining your development workflow this is all it's an autonomous coding agent that can take natural language like prompting or
00:01:01 -> 00:01:18 : instructions and turn it into fully fledged applications so the first part of this is why CLE now Klein for me does the best job out of all of the competitors so we're talking cursor
00:01:16 -> 00:01:31 : replit although I haven't used replit that much to be honest with you um you know claw desktop know what any of these uh wind surf any of these applications it does
00:01:28 -> 00:01:44 : the best job of creating [Music] production ready apps okay so applications that you can actually Post online now for me although cursor has
00:01:42 -> 00:01:55 : proven pretty good in the past it just needs a little bit too much guidance I need to keep telling it what to do it doesn't it doesn't have this autonomous nature to it as much as something like
00:01:53 -> 00:02:04 : client wind surf I never really got into wind surf people talk a lot about wind surf I'm sure it's good I just don't really use it the other two here I wouldn't really recommend using to be
00:02:03 -> 00:02:17 : honest with you although replay like I said I haven't used that much so for me it's all about production ready applications so basically what that means is you take a prompt right so
00:02:14 -> 00:02:31 : natural language words on a page and you turn that into something that you can actually launch on a website or yeah launch on a website basically right so for me as Klein has been the best at
00:02:30 -> 00:02:43 : this okay you don't need to guide it as much you don't need to say okay now you've done that do this or whatever it might be instead you just leave it on what I
00:02:40 -> 00:02:55 : like to call YOLO mode and just let it create it's also called Vibe coding right so we'll talk a little bit about Vibe coding chaos coding etc etc right and what that looks like but effectively
00:02:54 -> 00:03:06 : that that is kind of what I'm talking about in this video I'm talking about Vibe coding something so Cent is extremely easy to set up okay so let's
00:03:05 -> 00:03:19 : just quickly go through the setup process so I'll just go on Visual Studio code right and then we'll just go new window here and then all you need to do is click on extensions type in Klein
00:03:17 -> 00:03:30 : right and you can also use R Kleine by the way a lot of people like R Kleine I personally use Klein I haven't actually tested out R rine which is kind of crazy I might actually just installed it to be
00:03:28 -> 00:03:41 : honest with you because I do want to I do want to test it at some point um so we have you can either use client or R cine they they look pretty much exactly the same as you can see they're
00:03:38 -> 00:03:52 : literally exactly the same um and then once you've got Klein or R cleine depending on which one you want to use you want to click on the second button here now I'm going to talk a little bit
00:03:48 -> 00:04:07 : about um API limiting right so API limits this is a I always get comments about API limits on my videos okay if if you are getting limited right by the anthropic API you
00:04:04 -> 00:04:22 : need to use something called open router open router should allow you to use as many and you can actually see Jesus it's the biggest tool by far um on open rout so open rer if you just go you go up
00:04:20 -> 00:04:34 : here you type in claw anthropic whatever 3.7 right this is self moderated I don't I don't actually know what that means so we'll just type in CLA again we'll just go for the normal one um um and then you
00:04:31 -> 00:04:52 : can get an API key here right so API create API key you know top up Etc and then instead of using anthropics system you can just go here go to open AI or sorry um where is
00:04:48 -> 00:05:06 : it open router right and put your API key here this should stop you from getting rate limited right we personally here at um you know craft agent and also Harbor SEO and everything we have insane
00:05:04 -> 00:05:17 : rate limits so we do not have to do this okay by the way if you want to work with us um there'll be a link in the description to work with us uh we we do SEO we do backlinks etc etc um so yeah
00:05:15 -> 00:05:31 : I'm going to use anthropic here and I'm going to use anthropic on both plan and act mode what you could do if you wanted on plan mode is you could enable extended thinking right or we could put
00:05:29 -> 00:05:51 : the thinking model which I believe I just have anyway um and what that means in plan mode we can say please plan from A to Z the entire project so that the next part of the process will know
00:05:47 -> 00:06:08 : everything this includes any SQL um navigation or anything else that is required to understand from the beginning what you will need to
00:06:03 -> 00:06:24 : do until the very until the very end of the project okay so we'll press done here that should then be saved right this is now set up to use I'm on plan mode okay so let's talk a little bit
00:06:20 -> 00:06:39 : about plan and act right so we've set it up now we've got it ready to go the really nice thing about client is the plan mode okay I cannot tell you enough how much I enjoy using plan mode so one
00:06:37 -> 00:06:54 : thing we can actually do right is if I wanted to for example edit a GitHub project okay you can do that with this project okay uh with this system so I'll just go for my shopy automation it
00:06:51 -> 00:07:06 : doesn't really matter what we edit here but let's say that I wanted to edit my Shopify automation system right so we go to terminal new terminal and we'll do get clone and paste this and then write
00:07:03 -> 00:07:18 : like I don't know um line project right so that'll clone that and then we do file open folder we look for client project which is
00:07:19 -> 00:07:40 : uh uh where is it it's in incom maybe oh I'm in desktop aren't I so we'll go file open folder we'll get to desktop and then we'll look for clein okay so we found clein project
00:07:37 -> 00:07:51 : right let's select this okay so this is my project right but let's pretend I don't know anything about coding I don't know what any of this means right so now we can go here
00:07:48 -> 00:08:05 : we can press act and we can say please read my project and understand it in full right and then press enter so this is really really cool because you can very EAS easily and quickly edit a uh
00:08:02 -> 00:08:16 : project right so an already existing project so let's just we we'll let this run for a little bit so it's just examining various files various folders good perfect and then eventually you'll
00:08:13 -> 00:08:25 : get to the point where it understands the project and we can then make changes to the project right so we'll just let this finish okay so you can see here product
00:08:23 -> 00:08:34 : manager with claw 3.7 and shop for integration project analysis I've analyzed your project files and can provide a comprehensive of the system architecture key components and
00:08:32 -> 00:08:46 : functionality this is a well structured flask correct application that integrates claw 3.7 for AI powered product tagging and Shopify for e-commerce integration with multistore
00:08:42 -> 00:09:01 : support correct okay perfect so now what we could do if we wanted right is we could say okay so I want want you to add you know I I want you to make the
00:08:58 -> 00:09:12 : project look nicer as right now it's just a base application right so let me just show you I'll just let it plan and I'll say new terminal and I'll say uh pip inst and I could even ask client how
00:09:11 -> 00:09:24 : to do this but I'm just going to do it because I know how to do it so pip install dasr requirements. text right this is how you run all flask applications I could ask client how to
00:09:20 -> 00:09:34 : do this but yeah and then we'll do python app.py again I could have just asked client how to do this but and it would have told me as well right so this is
00:09:33 -> 00:09:44 : what it looks like in the moment so let's say I want it to look nicer cuz right now it just looks absolutely trash right so we'll just let this uh plan a little bit it's just planning blah blah
00:09:41 -> 00:09:55 : blah make some changes okay good right very very nice this is what I love about plan mode right it's basically unlimited you can get it to the point where it completely understands the project and
00:09:52 -> 00:10:05 : then you can press act now I also right while this is doing this I'm going to talk about something else I also recommend doing this when you start a new project as well
00:10:03 -> 00:10:16 : right so just while that's running let's talk a little bit about starting a new project and how I personally like to do it right so if I'm doing something like a nextjs project which let's be honest
00:10:15 -> 00:10:34 : most people will be doing some kind of either nextjs project react project maybe python uh Slash um flask potentially um or you might be doing something
00:10:30 -> 00:10:43 : like uh PHP HTML JavaScript uh CSS right that that's also a possibility generally speaking i' would say most people are going to be doing next CH projects right just
00:10:42 -> 00:10:55 : because that's the way the internet is these days I'm not saying that's good or bad or whatever I'm just saying most people will probably be doing next J projects so what I personally like to do
00:10:52 -> 00:11:13 : which is not always the thing that people do obviously is I the steps I like to do is create the project first then allow client to read the project then plan the
00:11:09 -> 00:11:25 : project then act uh switch to act mode and let it run now just before we continue There is something that I forgot to mention on the setup right it's this part here the
00:11:23 -> 00:11:36 : auto approve I really really recommend Auto approve it's great you can literally leave it go to sleep come back the next day and it will actually have completed everything for you so I like
00:11:34 -> 00:11:47 : to put everything on and I like to put Max requests on 100 you might want to do more than 100 it's totally up to you but yeah just um this is a very very important part of this process right so
00:11:45 -> 00:11:57 : just be aware of that um I definitely recommend using uh Auto approve because it it just makes your life a hell of a lot easier so let's say that we were doing a
00:11:55 -> 00:12:08 : new project instead so we'll click on client here and also another thing we do need to talk about is iteration prompting which I mentioned at the beginning of this video
00:12:06 -> 00:12:26 : so we'll just put iteration prompting right here what is it iteration prompting how do I use it to make my kind of my my project right so iteration prompting is start with a basic prompt
00:12:22 -> 00:12:40 : edit the prompt based on output and then finally have a final on shot prompt right so this is iteration prompting you start with a basic prompt that you've just generated
00:12:38 -> 00:12:51 : yourselves just from your own knowledge right every time you see a mistake on the generation you then edit or add to the prompt based on the output right so one
00:12:49 -> 00:13:05 : thing that often happens with these projects is um this is just an example right I made this website using uh Klein um one thing that often happens is it's not mobile friendly I'm sure this one is
00:13:02 -> 00:13:17 : mobile friendly but often times it can scroll or it's not mobile friendly or another example is a lot of things 404 right so if things are 404ing that's obviously less than ideal so here we go
00:13:14 -> 00:13:29 : there's a 404 exactly right so what I then added to this prompt is through iteration prompting is make sure not to for for anything and make sure to make everything mobile friendly okay so
00:13:28 -> 00:13:41 : that's kind of what I mean mean by iteration prompting okay and then you finally you have a prompt that is capable of creating as many of these websites as
00:13:38 -> 00:13:52 : you want right because it's just going to get everything right the first time because you have iterated and improved on the prompt so much that you've now got something that works first time okay
00:13:51 -> 00:14:03 : okay so what does one of these prompts actually look like let's just go to dox on new here and we'll go to um probably my service based website prompt because it's actually a very very simple prompt
00:14:01 -> 00:14:20 : right let's just go through this prompt and I'll if I just go to file hang on let me just go back let me find the original one so service PR yeah okay so this is what I mean by
00:14:18 -> 00:14:40 : iteration prompting this is the original prompt that I used right you can see it's um three of three and it's slightly shorter than this one for example okay okay so I'm struggling to find the
00:14:37 -> 00:14:51 : actual original file for this but this was not as complicated as it was as it is now okay it was much less complicated when I first started so for example what kept happening I'll give you another
00:14:49 -> 00:15:04 : example of iteration prompting right what kept happening was on some of these Pages what it would do is it would just have two blocks and then the footer right or three including the the header
00:15:00 -> 00:15:15 : right so header let's say hero image I don't know um this would be like three icons I don't know what you would call that um so we just call it div and then footer right and what I was seeing was
00:15:14 -> 00:15:26 : this wasn't ranking as well on Google because this isn't enough information so what I added was for Service Plus location Pages try your best to create a modular you can use SVG icons to make
00:15:24 -> 00:15:37 : this work set up with at least five to seven different vertical unique blocks that add to the overall value of the page this is important because there are these are Pages we are truly trying to
00:15:35 -> 00:15:48 : rank and if they don't have enough good unique information on them they won't rank ensure they are as varied as possible by using templates right so this is what I mean by iteration
00:15:46 -> 00:16:01 : prompting this is a fundamental skill that you'll have to learn in order to make this work okay it's so important I can't understate it now another thing that I really like to do on clients
00:15:58 -> 00:16:14 : specifically is this here right so what I love to do I absolutely love kle for this I think kle is the best at doing this is number one use the images an intelligent way to build a
00:16:11 -> 00:16:27 : modern website with good coloring schemes and fonts and other elements which I will leave up to your discretion to plan and then Implement a good intelligent color and font and feel to
00:16:24 -> 00:16:35 : it right this part of the prompt right and people say I don't know how to prompt because I don't write properly I'll tell you right now ai doesn't care if you use correct grammar okay just get
00:16:34 -> 00:16:48 : out of your heads right now it it really doesn't matter um what this does is it allows Klein to plan and then Implement its own color scheme right so instead of saying use
00:16:46 -> 00:17:01 : this use that use this blah blah blah blah blah which takes ages by the way instead I'm just leaving it up to CLI okay so like I said before I like to create the project so you're inside a
00:16:59 -> 00:17:13 : new nextjs project it's inside this directory CD inside the directory also I'm on windows so don't use at at because it doesn't work I want to create a new nextjs project statically
00:17:11 -> 00:17:24 : generated you're already inside a nextjs project and what I like to do as well is I like to add images to the project before even starting right so if I just go new window here uh I just need to
00:17:22 -> 00:17:34 : look for some kind of Rolls-Royce or New York Plumbing or whatever if I go on public right and then um images what I actually like to do at the very beginning of a project like this is I
00:17:32 -> 00:17:50 : like to add uh images to the images folder okay and I like to call those images by their name right so the AI will then know what these images
00:17:47 -> 00:18:01 : are and just to show you what this looks like after you've done it you can see that what actually happens is it uses the images in a very very intelligent way that normally you
00:18:00 -> 00:18:10 : would have to plan this you'd have to have a figma you'd have to do this you'd have to do that you'd have to do the other and instead what this does is it creates one of these websites very
00:18:08 -> 00:18:22 : quickly very easily it can be a service based website it can be um it can be basically anything right it can be a Blog it could be anything so this is the really really powerful thing about
00:18:19 -> 00:18:33 : client is that it's it has this intelligence level and it's really really good to use with uh CLA 3.7 Summit right so you're inside and ref fresh nextjs project and there are
00:18:30 -> 00:18:42 : already images inside public images it is a service based website for a company that offers these Services right so these are the services um the website could should be
00:18:40 -> 00:18:54 : in languages right so if you noticed before that one had Spanish and English this one uh the one I made for my old boss which I'll just show you guys uh which is also ranking on Google by the
00:18:51 -> 00:19:07 : way um has English and also Italian because obviously they're in Italy and if I just show you you can see a lot of these pages are indexed already which is great still could be more but you
00:19:04 -> 00:19:17 : know it's very very easy to make one of these websites right using this methodology so the website should be in languages and the website should be properly split
00:19:15 -> 00:19:31 : with h language tags before the main slug of the URL for example example.com example example again client is extraordinarily good at following these kind of instructions I don't tell it how
00:19:28 -> 00:19:41 : to do this it just knows how to do this right use the images an intelligent way we already talked about this part of the prompt use surface service information to understand specifics of the business
00:19:39 -> 00:19:53 : for languages ensure to implement the SEO and keywords etc for both languages and not just one of the languages also URL slugs should be translated this again is iterative or uh iteration
00:19:51 -> 00:20:07 : prompting because originally what it was doing was it it was adding um if I go here yeah so you can see it's actually this was before I iterated it
00:20:04 -> 00:20:22 : seems because it says sles slout right which is wrong uh and what I did afterwards if I go on Rolls-Royce rent it which was very well iterated upon uh you'll see that says compani
00:20:19 -> 00:20:33 : right which is birthday in Italian so this that that that's the difference this has been iterated on okay and it's you can see that instead of saying birthdays it now says compani right
00:20:31 -> 00:20:44 : because that's a part of the iteration uh part of the iteration step by step the idea is to generate all possible Pages combining both Services wood locations to create location based SEO
00:20:42 -> 00:20:54 : Services uh we already talked about this here ensure the pages are split by service so no two service landing page should look the same even if the Service Plus location page do look the same make
00:20:52 -> 00:21:04 : sure the colors are contrasting and not white on white or black on black at any point this had to be added because it kept doing White on white or black on black the content of those pages should
00:21:02 -> 00:21:13 : be landing pages for the service itself creat from a template that you have to that you have built using the images and the other information you know or can interpret from what you've been given
00:21:11 -> 00:21:25 : have a good-look contact page with contact details on it ensure to create a phenomenal modern homepage for the website using images and information about services to make a modular mobile
00:21:22 -> 00:21:35 : friendly homepage right and then the rest of it is just services and then there's this little bit at the bottom this is like my iterative prompting but
00:21:32 -> 00:21:47 : over kind of six months almost so these are all the things that I've noticed the uh Clin or whatever get wrong frequently and I do use a specific nextjs version so I install the nextjs version first
00:21:45 -> 00:21:58 : and then I use that nextjs version and make sure the client knows that I'm using that nextjs version so let's just quickly jump back uh and see what happened here you can see it did exactly
00:21:56 -> 00:22:09 : what I asked it to do right I didn't do anything um I didn't tell it to do anything I literally just said make it look nicer you can see it's done exactly that it does look nicer it's no longer
00:22:06 -> 00:22:20 : just a base project right and then in terms of the new project right all you have to do is let's just go new window this is the final part of the video guys that I'll just very quickly show you so
00:22:19 -> 00:22:33 : we'll go new terminal here and I'll just go to chat GPT and I'll say make me a new uh nextjs project and then I need to give it the specific nextjs version that I
00:22:31 -> 00:22:51 : like to use this will give me a terminal umand mate so then we copy this right and then we paste bang uh probably already have
00:22:50 -> 00:23:01 : something called my next app to be honest with you oh I don't so then we go we'll scroll up here let's just change this by the way you can do five make a copy you'll find this
00:23:00 -> 00:23:19 : prompt in the description of this video but file make a copy if you want to change it so we'll just change this to what is it my next app so my next app and then we go to
00:23:16 -> 00:23:31 : cleine we say plan and we paste it like that we allow it to do all of the planning all of the process actually let's just cancel that first we need to open the folder the reason for that is
00:23:29 -> 00:23:44 : because that puts you inside the correct directory so should be here there it is yes trust these authors now we go to cine and we paste this we press enter right so now it'll plan the entire
00:23:42 -> 00:23:58 : project and then we literally do exactly the same we just press act and then it will create the entire project for us this is a basic guide to using clein this is how I use Klein I like to plan I
00:23:54 -> 00:24:09 : like to act I find Klein by far the best of these uh code generation tools I find it better than cursor I find it better than basically everyone right I it's by far
00:24:07 -> 00:24:20 : the best in my opinion I'll leave the video there guys thank you so much for watching as you can see it's done a really really nice um plan here you can see it's still planning so it has the
00:24:18 -> 00:24:29 : Italian the homepage the service Pages main region individual cities Service Plus location Tailwind all of that good stuff this is exactly what I wanted I'll leave the video there guys thank you so
00:24:27 -> 00:24:39 : much for watching if you're watching all the way to the end of this video you are an absolute effing Legend and I will see you very very soon with some more content peace out