AIDER.AI & Install & Build your first App in MINUTES!

would you like to automate or script your AI pair programming in this video we're going to look at Ada we're going to install it and test out a couple of use cases I'm happy Dave let's get into it now you can access Ada through GitHub on ad- a/a and if we scroll down we'll find the getting started where we'll work through this to install the software a little bit further down you've got the documentation which will take you over to a page like this where we can look through some additional examples now I've just opened up a terminal I'm running python 3.12.5 we're just going to click on the install for a chat and let's paste it in and see what happens from here we'll do a new terminal and we'll just type in Ada help and you'll be able to find all the command line arguments that you can use here I like to just copy those straight into chat jpt and ask it questions but it's all available here now the next step in the red mey is change to directory so what we'll do is we'll make a directory and go there it's also talking about using the anthropic key or the open AI API key now I have both of those out spotted so I'm not sure which one it's going to run and then we've got Ada so what we'll do is we'll go down to a terminal we'll make a test directory and we'll CD into test and then we'll just type in Ada and see what happens so it's firstly asking us to create a repo we'll say yes and from there it's telling us which model it's going to use so it's got Claude 3.5 Sonet 2024 1022 now when Ada starts you're straight into a terminal with chat capability already enabled so you can just start writing a prompt so we'll start off with a simple prompt make a HTML page in Twin CSS We'll add three Fields we'll go with name description and URL We'll add a little bit more cord plus two text areas and I'm just going to press yes and see what happens it'll start writing some code for us we got Tailwind CSS what I'm hoping to do is have three fields on the left and two text areas on the right and I'd like to create a template engine where the fields on the left are merged with the template to create an output so here we've got some information come up it would like to create a page let's do that we'll say yes and it's also got open index HTML let's see what happens if we try to open it so it's generated a new page we've got it looks like Tailwind to me we got name description and URL and we've got this template and where the output would be right here so let's say we wanted hello name this is how I would think it should work and then we can say the description is and we could put something like description and lastly we need the URL so we'll say URL and we'll put in the URL and what I'm hoping will happen is that this information will get copied down here but these values will be altered with whatever's going on here so if you look at the terminal you can see a couple of extras so we got a commit message and it looks like it's using semantic labeling so it's got a feat for feature and it said create a HTML page with HTML CSS what I think we should do is just go down to this terminal and we'll do a g status and there's nothing going on in there we'll do a git log and there it is we've got this feature HTML page with Twi CS so if we go back we could undo it but what I'd like to do now is extend it with JavaScript capability now what I think we should do now is go over to vs code and let's have a look at the code in the terminal and so we've got all this HTML there's the Tailwind CS looks all pretty simple so let's add a new prompt so I've pre-written a prompt and it says can you enhance the page with JavaScript we're basically going to watch the field names on the left and the template and we're going to use interpolation and I've said can you use square brackets we'll spell that correctly and we'll take a copy of that and if we head over to the terminal we should be able to just paste it in and see what happens now hopefully as it goes through we're also going to see some JavaScript changes either in the HTML file or as a new page so it's finished with instructions if we come back over and we look at the HTML page we now have a whole lot of JavaScript down the bottom let's also read this a little bit further if you type in template area that's the sort of information you can then fill in the fields and this is how it should interpolate and lastly it should be able to open it and we also have the commit message going on here as well I'm just going to press yes and we'll let that run and while that's happening we'll bring up a web page so we got the little HTML page up let's put in Dave and let's just see what happens if we start typing name and this last one should change it does it changes to this we'll say we'll put in a description and we'll say url url like that and for the description we'll paste this in for the URL we'll paste this in and we basically built a prompt templating engine in about two prompts well to recap we've installed Ada we've got it working and we've created a little HTML page and added some JavaScript and it's taken only a few minutes to finish this off I'm happy Dave in the next video I'm going to take this process a little bit further I'll see you soon