FREE: ZED AI + Aider Beats Cursor Composer?🤖 Open-Source + Claude Sonnet 3.5 NextJS Setup

What's going on everybody Josh pook here and in today's video we're not going to be looking at cursor we're going to be looking at a free opsource alternative to cursor the AI IDE that is currently being hped up by Twitter by YouTube everyone is talking about it in AI coding space this coder tool though is called Z Ai and it is a blazing fast op Source editor we're going to be using it with AER to build a nextjs application without ado

Let's dive right into [Music] it all right guys so if you're not familiar with zai I've covered it before I've also covered cursor before and in both in many of those videos because I covered a few different ones um I've gotone some people on one side that say hey I love cursor it's better than zad and then I get some people that are like I love zad it's better than cursor I hate cursor it's clunky it's over we're hyped right so

There's two different sides I understand both sides for certain things um cuz I have experimented to be honest quite frankly a bit more with cursor but I want to give Zed more of a go so that's why I'm going to be doing um an AER uh install with it where for nextjs and setting up a basic app with it um but before I do uh dive into it I'm going to show you in this video One how to quickly how to

Install Zed I'm not going to go through every single nitty-gritty thing if you're on Mac or Linux it's a lot easier you literally just click download here and you should be good to go at the time of recording this video though or Windows it's a little bit trickier all right I covered that in my previous Zed video I'll leave a link for that in the description down below and I'll quickly go over how to do that in here but I know

That there's some people who already know about Zed already know about cursor and for those of you who kind of know about that um that's cool but there's also people in uh who are watching this that really don't know too much about either or so to start off before I get into actually going in and setting up the nextjs app and installing AER in Zed I'm going to quickly just do a brief overview and kind of the differences between Zed and

Cursor so there's going to be time stamps in this video if that if you can maybe check out some of this what I'm going to show you and if you know if you think you may have heard it all you may want to skip ahead a little bit but um I'm going to try to make it quick all right so Zai verse cursor all right some of this obviously just to be transparent was AI generated um but I'm going to give

My own personal points and preferences and experiences that I've had with these tools and you can let me know in the comments too if you've uh would agree because I know a lot of you are wondering which one should I use or um or maybe you're using one and you think maybe you should use other one I don't know so first off uh some core features so uh type Mo Zed so we have Zed on the left cursor on the right

So I'm just going to run through these real quick modular de uh development environment for Zed AI first code editor vs code fork for cursor speed very fast for Zed like blazing fast and cursor's Fast too but definitely not as fast as Zed Zed's very lightweight Zed Zed's very lightweight and then AI integration built-in AI features I guess cursor may have a little bit more of a deep integration and that's probably just because they kind of start out as an AI

App Zed just got the AI feature fairly recently but um it's it's really good uh it is missing a few different things like multifile editing where can actually um like create files and and like do it like kind of do like what Claude Dev uh does and I'll show you that in just a second that's why we're going to use AER with it because AER can do that and you'll see what I'm talking about in just a second regarding that next

User experience so minimalistic uh developing and then user experience with cursor is familiar uh for vs code users so it's like the exact same platform cap compatibility so with cursor like I said Mac and Linux is aable for download and then Windows you have to build it and I'll show you quickly how to do that in just a second and then cursors crossplatform so that's a plus if you're using Windows but even if you're using Windows I'm still going to show

You how you can do it with um with zed and then customization it's limited for Zed but you can still customize it it's just not as extensive as cursor CU you get more extensions since VSS code vs code has been around for a while um and then real time collaboration yes with both but Zed does have something really cool I'll I'll touch on that too too um with collaboration and having channels kind of like slack in a way with uh teams

And then pricing free um and then I subscription I don't I think this is actually wrong because yeah they don't have uh a subscription to my knowledge so it's actually just free um and then they also even give the um clad Sonet uh like kind of free credits if you sign up so I'll show you that in a second you're going to want to sign up so you can use the clads on at free credits and then cursor free which with

Limited ation and you can't use the um composer feature which is honestly the only reason I actually switched to useing cursor just for the compos feature just cuz I like it all right other than that before with the basic cursor AI features I didn't uh I wasn't using cursor and now you see everyone's like hyping up cursor and whatnot but so you're going to need to pay for the subscription 20 bucks if you really want to use cursor's uh features you

Could use the free one but at that point you could also just use VSS if you're just going to use a free cursor you may as well you could just use vs code with like something like continue Dev or um claw Dev and I'll do videos more videos like maybe with that and and showing you alternative to cursor even though I've already covered them uh before Simple and Clean interface with zed strong codebase context features with cursor rust base for efficiency

With Z Auto debug feature with cursor and then still in development it is fairly newer with zed and then fewer features compared to establish idus with zed that is some somewhat true um and then higher pricing for premium features and then this is cons by the way yeah and then basic get support so yeah that's pretty much it I'm just going to quickly cover some of the key differences so Z is based from scratch in Rust while cursor is his vs

Code Fork Z is faster and more lightweight cursor has deep uh deeper AI integration and that's pretty much it guys so yeah I just wanted to kind of give a brief overview of of some of the differences and now we're going to dive into um actually setting this up in Zed and using it with AER to set up an xjs app okay so if you skip through to this Tim stamp and now we're going to get into this so without Ado

Let's go ahead and set up zed so if you're on Mac or Linux simply download Zed if you're on Windows you're going to have to clone The Zed repository then you're going to have to install the dependency so rust uh install rust and then run these commands then you're going to have to install Visual Studio code right here window SDK archive and then and you don't have to do the backend dependencies and then you're just going to want to CD into

Your Zed directory and build from Source by using cargo run-- relase that's too fast for you check out my other video I literally show you exactly how to do that but I don't want to make this video too too long so check out that other video I literally show you how to do it once you do that it's going to compile Zed and you're going to have it open like this so let's go ahead and I'm just going to delete this

Test folder and we are going to get the the terminal open which is down here uh to get the terminal you just click in the bottom right right here and we are going to go to AER if you're not familiar with AER it is um a really good AI coder that works in the terminal so I'm going to paste in uh python DM pip install AER chat okay and it's going to start installing ater chat so as that's installing once it's

Done installing you're going to change directory into a git repo and to work with CLA Sonet um you're going to want to export your CLA Sonet API key and to work with open AI you're going to want to export your open AI Keys into an environment variable so if you're on Windows though um that this this uh command is actually different so if I go um make this for Windows and it depends because there are windows terminals where you can run

Um other commands so yeah you're going to want to or command prompt run this for po shell you could run this basically setting the environment variable of course you're going to want to replace your API key right here okay with whatever API key you're using whether it's open AI or GPT 40 and I'll leave the ader docs in the description as well so you can go ahead and um do that also too I'll mention with AER you are going to need

Uh git as well as Python and pip so not going to explain how to do that but check out their docks right here to make sure you have everything um up to date also too if you're installing it you're going to want to make sure you're running it in your terminal as administrator if you're running into any issues once you install that with that command you're going to want to run the command haer right here and we're just going to hit

Yes so get repository created sure okay now we are in haer so let's go ahead and say hey please create a nextjs app router app for me I want to create a landing page for my marketing business as you'll see right here we are using Claude 3.5 Sonet as the main model and weak model uh with Claude 3 high C you can change these I'm not going to go through and explain exactly how to do that right now check out their

Dogs you can use any model you want here we can go here we see that AER starts producing the code so it says hey I'll create a basic nextjs AB rer application for your marketing business landing page and then it's giving the steps necessary that it's going to go through creating the nextjs app structure setting up the main layout creating the homepage landing page and adding some basic styling you can see here it's starting with the app layout uh it's starting

With the page.js okay so here we go with the output I'm just going to quickly go over some of this so I actually had to resend this in a new terminal the other one actually kind of glitched out sometimes I get that with AER let me know if that's just me or whatever the case may be um but as you can see it's developed the plan we got a app layout. JS uh page.js okay so that's interesting page okay so page.js

So I should have specified I want typescript usually because I like typescript but whatever we'll do JS uh for this file. CSS components so we got a navigation component navigation module uh. CSS and here we can go here we go it says first create a new nextjs project using this right here okay so it is typescript um navigate to project directory right here Place contents Etc start the development server and then open your browser and now it's asking to create new

File we're going to click yes yes yes yes and yes and yes okay so it did create the new files here perfect so run shell commands go ahead and click yes so now it's actually going to run and create these for me okay so for me at least let me know if this is if you guys experiences this at all but with ader I sometimes get issues where it like kind of bugs out in the terminal like so I actually just

Manually ran this command here to uh get the nextjs app up and running um and yeah I've kind of for me personally I've just tended to find that when I'm using AER maybe that's just me let me know if you guys experienced anything like that um or not in the comments down below so now I'm just going to manually install uh nextjs we're going to use typescript es lint Tailwind oh I wish I would have done yes for the source directories

It's not a big deal though app router yes import Alias sure and then cool all right okay so now I'm just going to drag uh our components over actually no I can drag this whole folder over into our app directory and I can remove the layout page and CSS right here and we're going to add our own well these are the ones that AER generated for us boom okay so now we just have our um our next sa app right here

I'm going to delete this we got the app directory our components file um we got Global CSS right here and we got our layout. JS and page.js let's go ahead and run this all right so I changed directory into your market.com the folder and now I just did npm runev and we can see we can go ahead and check out our Local Host 3000 to see what this looks like out of box just from the exact code that AER generated us

Okay so here is the landing page it's it's actually not too bad I mean we have a basic component here we have um these okay so of course these Pages aren't working we could actually expand upon this I could say hey go ahead and create me so we have the homepage let's create the service page let's create the about page the contact page we have a basic headline basic um stuff right here you know nothing too crazy personally I'll let you

Guys know what I would do here I don't want to make this video too long if you want me to show you an in-depth video where I actually build out something more intricate let me know in the comments down below and I'll show you what I where I would go from here this should lay the foundation um for you to have something very very simple set up now what you could do is one with in um Zed's AI so we just

Used AER to kind of get everything set up get the files created now we could use zaii to be like we could go into the page for example and we could uh go over here and so we could insert context insert a file we could insert our page.js we could of course use uh Claud sonit 3.55 and I'm using the one from Zed right here uh and just so to know so that you can do that you click up here in

The top right and you want to make sure you're signed in so go create a free account at Zed so you can get access to their free CLA sonit 3.5 and I could say make this more modern modern have some cool styling with a with dark mode and I may want to add the global CSS as more uh context as well okay so I add have my prompt I have my two files here and I'm going to click control enter certainly

I'll update your code to make it more modern with dark mode styling here's the revised version so for our page.js this is what we're going to do we're going to copy this code right here and we're just going to paste it in here and then we're going to copy our uh styling right here and paste that into our Global CSS to save save those changes and okay so we do have dark Mode still I would definitely iterate and improve upon this

In terms of like The Styling like we would want the text to be written of course um so yeah and one thing I would do too is I covered a video on VZ if you're not familiar with v.d it's a very easy way to get beautiful looking front-end UI components using basically uh one of the top libraries which is Shad uh Shad CN so you could use Shad CN to get nice UI you could use v0 to get nice UI and

Uh and then like I said before you can edit either within the chat over here pull context uh from the different pages that AER creates all right so you could actually go within different files and then you could highlight something click on the uh the star AI icon right here and then add a prompt to change it so that's how you can use zi's editor once you maybe set up the framework or structure using something like ader that's how you can

Kind of use both these tools together ader is really powerful for multiple file editing creation running command line codes and all that good stuff that's a feature that cursor has and then Z native AI features such as the chat context as well as the uh AI over here is really good for just doing the uh co-pilot type stuff all right as well as autocompletion all that good stuff so that's what I would recommend if you're using zai just a few different

Points there and then like I said always be using zero VZ check out my other video I did on that a few days ago vzer if you want to learn how to use vzer you can also use Shad Cen coding for front end development is getting a lot easier for you know building out a nice UI and all that stuff with AI um I guess it's a little bit more tricky to you know build out the backend stuff do use stuff

Like a postr database or uh whatever type of database you know connect it all together whether you're using an omm or whatever the case might be like doing all that making your app fully functionable like a full scale uh full stack end to end app um that's I guess where you know you need a bit more expertise and you want me to cover more stuff about that and how to use AI tools such as cursor Z aai all that good stuff

Let me know in the comments Down Below guys if you want me to cover a specific tool or make a specific video let me know in the comments Down Below guys and let me know let's like have some a little bit of uh discussion in terms of what do you guys prefer do you prefer Z aai do you prefer cursor um what is the AI editor of your choice or do you still use vs code because at the end of the

Day you can use VSS code use tools like claw Dev uh you know Claude engineer or continue Dev you can also use those in Cur uh cursor too which kind of gives cursor um I mean even though it's kind of just a clone of vs code I kind of like how you can use those extensions over there too because I do like continue Dev I do like you know claw Dev claw Dev is really powerful so let me know do you

Like AER do you like uh Zed cursor you know there's a lot of hype behind cursor but I wanted to share this with you guys in case you don't know about Zed as well all right guys so other than that you're new to the channel you got some value here make sure to smash that like button smash that subscribe button if you want to uh show some support to the channel we're almost at 5K uh subscribers guys and you know road

To 10K hopefully we'll hit that very soon so I appreciate all the new Subs appreciate all the new support guys we upload videos every single day on AI automation AI coding business tutorials uh going to keep increasing the quality and try to keep improving and giving you guys as much value as possible so uh yeah 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