FREE: Aider & NextJS Text-To-Application AI Agent!🤖👨‍💻 GitHub Copilot Alternative (Google Gemini)

What's going on everybody Josh pook here and in today's video we are going to be taking a look at AER Ai and AI pair programming in your terminal with AI on the rise with Claud Sonet 3.5 all the other AI language models coding is getting a lot easier with AI so in today's video we're going to look at how to install AER and how to do some basic coding with AER nextjs Gemini whatever model you want as well as getting it

Live deploying it Etc so let's dive right into [Music] it all right guys so you know there's different tools um and we're going to be covering more of these on in future videos so if you're new to the channel make sure to smash that subscribe button smash the like button um to stay tuned for that we upload videos every single day on AI automation business growth Etc Marketing sales so let's go to AER do chat this is the docs right here

And links for this will be in the description so what first things first is we need to install AER so all right so to get started we're just going to follow this get started guide right here so we can just go ahead and run the PIP install so it's going to be pip installator Das chat we're going to run this okay going to start collecting AER chat installing AER chat and once this is done we're going to want to select what

Llm we're using so while this is installing um you can use any llm like if you go here we can see connecting llms it can connect to pretty much any llm such as open AI anthropic Gemini Gro Azure uh coher uh coh here um deep seek o llama open AI compatible apis open router other llms um we're going to be using Gemini in today's video and if you're haven't used Gemini before the reason I'm using it is because they have a

Model called Gemini 1.5 Flash and you know they have other models too right the good thing about 1.5 flash is there's a free of charge plan which is really really cool um been using it uh for a bit uh lately and it's pretty pretty uh good to be honest all right so you can sign up through uh Google Gemini um pricing here the for ai. google. DAV I'll leave a link in the description below if you want to use this but

You can use whatever um llm you desire also too uh I'll leave a link to the AER GitHub as well but once you decide whatever llm you're going to be using you actually just run this uh right here either export and then your Gemini key or if if you're on Mac and Linux or set X Gemini key for Windows so all right so I just ran that command and so that basically means my Gemini uh API key is set so now

What we're going to do is we are going to all right so now we're going to set up a new nextjs app so me just go MPX create next application at latest I don't know why the terminal is kind of glitching like this but anyways yeah you can so this is the command obviously for nextjs what is your project name we'll just call this you you this all right so installing that once we're done that we're going to CD into the

Into the direct where we can actually start using AER to create our our app all right so we cded into our app here and now we are going to run AER so I'm going to do AER dasm model and then I'm using Gemini uh 1.5 flash latest all right but you can use whatever model you like and switch it if needed all right so we can just go yes all all right when you use AER and it asks you these questions

It's all it's going to have a y here by default sometimes it does this you can if you want to say no you put it to n yes is y all right so now we are running AER in our VSS terminal code or vs terminal and um you can use forel or or question for help or run a or AER dhel to see uh the CMD line args okay and I'm just going to paste these instruction right here into uh AER

Basically just saying create a simple userfriendly to-do list application using nextjs the app should allow users to edit uh add delete and Mark task as complete it should have a clean and responsive design with basic functionality that uh impress beginners features add tasks edit edit task uh delete task mark task as complete pass filtering responsive design and then the text we're using is uh nextjs react uh State Management use State use effect react hooks styling CSS modules or styled components and

Backend nonone use local state for Simplicity we're just doing this um just for the case of this video but you could do anything you can connect this with a database you could do a lot of stuff obviously right so let's run this okay so this is AER going to work here okay so it's giv us a bunch of code up here so page so here's a simple to-do list application using nextjs Pages uh so it's using pages and then index.js import

Use State use effect for react all this text set tasks all right here's the code and then Styles Global CSS right here explanation so Pages uh SL index.js so State Management pass an array to store the to-do list items new title uh description filter use effects hooks loads task from local storage when comp uh component mounts save task to local storage whenever the task array changes function add task toggle complete edit task delete task filter task jsx renders the to-do list

With input Fields task list filter buttons and buttons for editing deleting task Styles uh SL Global CSS provides basic styling for this Duo List application including layouts in input Fields task list items and filter buttons to run this application make sure you have node.js installed uh NP and mpm installed create a new yeah so we did this so anyways basically saying allow creation of new file Pages index we're just going to say yes so it's going to create this itself within

Um our repositories here once we allow that as you can see we got pages right here uh where is it um okay oh pages right here okay so it's using that method all right and then style CSS okay and committed okay now let's go ahead and test this out all right we're doing npm run build now and just a side note it okay so just a side note um yeah it basically didn't know I was using the newer version of no

Uh nextjs basically where it installs it within the app uh for pages instead of the page um Direct so I just deleted that and put it in page. TSX um you're importing a component so okay let's just see here we're getting an getting an error so all I'm going to do is see just copy this and go back to my AER here past this in let's just see what we get um add no no okay so let's see what we get

Message indicates that you're using a use State and use effect and in a server component which is not allowed these hooks are designed for client components to fix say you will need to Mark okay uh by adding the Ed client okay that makes sense so okay so it built correctly this time now let's just do npm runev and there we have it on our Local Host Port 30 let's go ahead and check this out and see how it looks out of

Box right there still could be some issues maybe we'll have to deal with all right so as you can see it's very very basic um too list all active completed all list test all right so a few things to note um you may encounter some issues if you are basically uh I would specify to AER or whatever model you're using um that what like if because for nextjs if you're using like nextjs 13 or 12 it's going to be a lot

Different um so depending on how you're doing things right so if we go to here you can see all I really had to do was just um get it to move since I didn't specify that initially I just had to get the pages instead of having the page directory um next uh nextjs uh 13 um and onward you know does it through the app directory so just because I set it up that way added that to the page. TSX and same

Thing for layout instead ofor app. TSX we got that so I just imported the uh Global CSS here and you can see this is our to-do list as of now all right we still could continue on editing this you know styling it all that good stuff but you know it isn't too bad let's go ahead and say uh call this task like go to the gym and we have our description here do it at 6 pm. there we can add task

And boom there we have go to the gym do it at 6 p.m. let's go um let's do hang out with girl friend there we go boom boom uh [Music] food boom and then let's go ahead and say okay we ate so boom it gets marked off um did we hang out with our girlfriend uh sure and you can change this now I would typically you know I if I was really building this out I wouldn't have this I would use

An actual like um uh you know different style to edit it and whatnot but we're not going to build this out too much um yeah but we can see active completed all so we have the filtering there and yeah we have a bit of styling with red and green buttons nothing too crazy but we could continue on improving on this and iterating this and this literally took about 5 to 10 minutes just to create and this is awesome this is quite

Cool now that we can do these sort of things with um you know really not too much uh effort right all we do is a simp a few simple prompts and this is just a start I just wanted to give you guys kind of like a brief intro if you're not if you're not familiar with AER if you're familiar with it then you know this is just showing you some additional stuff hopefully you got some value out of this um in

Future videos I will be showing you more in-depth apps building with tools like AER uh there's other tools as well uh utilizing these different tools utilizing different models I'm actually building a few projects right now on my own and so just as I'm learning new things and seeing how uh we can leverage these models whether they're um you know open-source models uh like you know quen different models like that or um some of the non-op source models like uh Claude Sonet

3.5 is in pretty insane for codes so only downside obviously is it's uh you know can can be quite uh expensive you know if you're using it heavily right and uh it can those bills can rank rack up pretty quickly so other than that guys hope you got some value from this video like I said if you're new to this channel we upload videos every single day on AI uh AI automations development marketing business growth Etc so you're new to the

Channel make sure to smash that subscribe button smash the like button let me know what your thoughts are in the comments down below all links mentioned in this video will be in the description down below and then also too guys if you're new here check out our stride community it's a free group of entrepreneurs uh AI enthusiasts like-minded individuals like yourself and we can all network with each other uh and you can network with myself it's a free Facebook group and

Discord Channel we have about 750 800 members in both those combined so check that out in the description down below stric community.com it's 100% free other than that guys if you haven't already checked out my book client acquisition code this is a book to show you how to get clients for your business business get leads get a calendar packed full of clients leveraging Ai and the most advanced marketing tactics in the world so um yeah if you run a business and

You do stuff like you need to do stuff like paid ads outbound prospecting Etc uh it has The Cutting Edge tactics in that book put my blood s tears and my heart and soul into it so go get a copy down below client acquisition code.com 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