I made
a really useful app that helps YouTubers respond to their comments
using the power of AI. I did it in three days
Now the app is called Comment Genie. You can sign up for beta testing
and it's free while it's in beta. So go ahead and click the link down below
to test it out. But how did I make the app? You're going to get the whole process
in this video and providing you can jam back and forth with an AI in English,
then you can develop apps right now. So let me show you that process. And first of all, I'm pulling out my smartphone
because I've got the ChatGPT app on here. Oh. Hey there. I'm building an app to help YouTubers
respond to their comments using AI. Will you listen to everything
I tell you from my mind about that app? Please? Absolutely. I'm all ears. so the app will have
a very simple Google login. And then when you get to the dashboard, you will essentially
have your ten most recent comments. Got it. Your app will have a straightforward
Google login on the dashboard. Users will see their ten most recent
comments, Just before I start building, could you give me
a little bit of encouragement? Maybe speak to me in a French accent,
a very strong French accent, using the English language
and inserting a few crazy sound effects just to get me up
and ready to build this app. Please. My friend, you are about to embark on a magnifique journey
with every line of code. You are constructing a bridge to a world
where YouTubers can relax and. Let your app do some magic. So allons-y
lets the code flow like a fine wine and create something truly marvelous. Voila! Okay. Brainstorming with AI. Using voice
mode is pretty cool to start with, but let me show you some more techniques
to get the best possible plan of action before you start coding
with the help of AI. So here I am in ChatGPT and I've got the transcript
of the conversation I just had here. The prompt I'm going to give
is summarize the app and give me a roadmap named file,
which essentially is a roadmap file in markdown to simply lay out
how I'm going to build the app. Okay.
This has given me a brilliant roadmap all in markdown,
which is great for copying. I'm going to copy that code
and start a brand new chat. And this is where it gets interesting,
because we switch from GPT 4o to the most advanced reasoning model from
OpenAI right now, which is o1-preview. So with the roadmap pasted in above
I've put three dashes to separate that and said please give me the ultimate tech
stack to help me build this app. I'll need to know what to use
front end back end database and break the process down
into simple step by step instructions, building one part of the app
at the time using best practices. This is important
because then I'll get a template that I can feed to my
AI tools to start making the app. Okay. As you can see here, it's giving me
a front end suggestion, backend database. All the tools I might need to get started. And a step by step development guide. Now that I've got a complete step by step guide to build this app,
I signed up for a tool called Replit. What Replit allows me to do is store
and edit my code in the cloud, so I can quickly test my app
and keep things nice and zippy and fast. Here you simply create a Repl, which essentially is like creating
a virtual computer to store your code. You can choose a template, or for me,
I chose the Blank Repl The next thing you'll want to do to get going with
the actual coding is download Cursor. It's an excellent app,
and I'm going to be using Cursor Composer to make my app and basically build it
autonomously using an AI agent. So download this for free. Now I can go ahead and connect this
with my coaster account by typing SSH and then clicking Launch Cursor. Now there is a tutorial on
exactly how to launch Replit and cursor, and I'll link it down below and also on the screen, so you can go
and check that out for yourself. It's a little bit
beyond the scope of this video, but once you've got it set up,
it will take you to your code that's sitting up in the cloud,
and you're ready to begin creating an app that lives in the cloud
for development purposes. And then can be pushed out and deployed so
that users can start accessing that app. Now, the first thing I've done is copied
my roadmap that ChatGPT o1 generated. Created a new file called roadmap.md. And pasted all of that information in so I can give Cursor
Composer the context of the app. I'm trying to build. Okay. The best news is this is all we need
to start developing the app. And if I hit command or control
I, I can load up Cursor Composer. And you'll notice, because I've got the file open, it's
referencing my roadmap, which is great. So I can do the first prompt. And I've found in my experience
it's better to prompt step by step rather than just simply say,
make an app for YouTubers to respond to their comments
using the YouTube API. Way too much information
and you won't get a very good design. So start by building step by step using
this roadmap or your own logical brain. So I know, for instance, the first thing
I need to do is build a login page. Okay, so I've said
build a login page for this app using a basic design and login
with Google button. The app is called Comment Genie. You get Cursor Composer to work
and it's going to go through. And it's going to start creating the pages
for your app right there in front of your eyes
and adding them to your code. You can see it's actually adding in all
of the code here and creating what I need. I just click Accept All
and then I can actually run this app Now, after three days of coding back
and forth with the composer, I found an absolutely awesome
high level developer. By the way, way more advanced for me. I basically have a front end, back
end, a database and everything I need to run this app. I've also got the setup instructions,
which again I asked the Composer to generate for me
in a simple fashion so I'd know the commands
to get the app started. So here
we simply open a new terminal window and run these commands
in different terminals. This is the back end. And then we click
plus to do another one for the front end. Paste those commands in and boom
we're up and running. You can see the back end is working. You can see the front end is working. And if I command click
this link, it'll take me straight there. Oh, and look at that. Okay, there's no formatting whatsoever. This looks absolutely rough as heck. But don't worry,
I'm going to show you another tool to introduce styling and awesome
responsive style web pages. But first let's let's just check it works. Okay. That's good.
I've got a log in with Google Prompt. When I click continue, I get logged in
and I can see that my dashboard, I can see everything's here. But it doesn't look great. Yeah,
it could do with a little bit of styling. And this is where my next tool comes
in called v0. Again, I'm going to link
all of these tools and techniques down below in the description. And if you're enjoying what you see
so far, do throw a like on this video so that more people will hopefully see it
and benefit from AI powered developments in coding,
and also subscribe to the channel because I'm always doing tutorials
like this one. Okay, v0 is brilliant
because it can help you ship ideas, products
and basically make them look beautiful. This is essentially your front end graphic designer I'd like a nice
looking dashboard for YouTube comments, all in their own charts,
and enter to that. And it's going to go ahead and create a
nice component that displays those cards. And look at this. It's
actually coding it right here for me. Pretty cool stuff.
That's not exactly what I had in mind. So I gave the AI more context
and this is what it came back with. This.
I'm really liking your YouTube comments. Use a great video.
Keep it up, I generated reply. This is kind of what I'm looking for,
so with the right prompting you can get exactly what you want. It's even giving me a regenerate button. So this is the bare bones
of what I'd like. I love the design.
I just want it in dark mode. So in order to get this into Cursor and
into my app, I just go to the code here. I copy everything from v0. Now, in order to get this beautiful design
in. I just said. Style my. And then at tag dashboard,
which is, of course, the file that I want to style correctly,
like this in dark mode. And then paste in the code from v0. okay. Cursor
Composer will know what to do with this. Hit enter
and it's going to go ahead and start generating a brilliant style
sheet for my app. Okay. And within moments it's created a beautiful looking style
sheet here for my app. And it's actually in real time
updating the code here and here to make it all
look absolutely beautiful. And when this process is finished,
I can go back to my app. And all it requires
is a refresh of the page And look at this. A beautiful dashboard has been created
even with generating AI replies showing and those replies and the whole dashboard
looks a whole lot better than it did before. This app is now fully working,
and it's ready to ship as an MVP. Now before I was ready to fully ship
this app, I also wanted to logo. And that's where Midjourney comes in. Now you can use any AI image generator,
but I particularly like Midjourney. And look at this. After a few prompts inside Midjourney,
I really didn't use much. I just said logo comment Genie. Also logo vector, comment Genie. And eventually it landed on this rather
brilliant design. I was really happy with this,
so I could actually go ahead and download the image here,
and then use it in my Comment Genie app. And then over here will refresh
the dashboard and look at that. There is my logo, nicely inserted
of course using Cursor Composer to get it in there. A nice looking log in with Google button
which will get us straight into the app. This is taking me just three days and a bunch of AI tools
that I'm going to link down below to show you how to do this,
but they're all absolutely invaluable. You can use Replit
to keep uploading your code in the cloud and testing it on your local machine
or on the internet. If you wish, you can use cursor with cursor Composer
as an invaluable work mate. Essentially,
you jam back and forth with the AI you simply go ahead and jam back
and forth with cursor. It does the heavy lifting with you
you've got v0. That can give you beautiful design ideas
for your app and make things look absolutely incredible. Midjourney help me generate an app logo in no time at all
that I could download and use instantly. And also a mysterious looking wizard
holding a magical bottle. Very nice. couple of extra tips to make
this coding experience optimal for you. I was using the YouTube data API a lot to do the calling of comments
and responding to comments in my app. You can actually copy
the URL of the documents to that API. And then go to Composer and type at docs,
and then you'll just click docs there, and you can add a new doc
and paste in that URL So Cursor is bang up to date
when developing your app. Now I can just say something
like build a function to reply using at YouTube Data API,
and then I can be more specific as I wish, but it'll always be up to date
with the very latest documentation. And that is a killer feature of Cursor. Another final thing that I did
to make life easy is I said to Cursor Composer at Codebase,
which means it will look at the whole of the code
that's been generated every single file. Make a nice, easy to understand, README.md file. A readme file is generally what developers
put in the root directory of their app, just to explain what it does,
what the features are, and also what technology it's using,
plus how to get it up and running. So this is a really helpful command just to create something
that helps me understand what I've made. And then for deployment
to actually make this app public so beta testers can sign up and use it,
which by the way, if you want to do that, link is down below. I just typed in codebase, make a docker compose yaml file and Dockerfiles to build this app easily. Now if you don't know what Docker
is, Docker is absolutely fantastic. It helps you to build apps
and make them portable so they can run on any machine. Either your local machine
or somewhere in the cloud. So you can actually host this app. Now I create a Linode to host the app. It's essentially a machine in the cloud
that hosts your website or your app. It's really easy to use and I've mentioned this in previous videos
because I love it. Link will be down
below in the description. If you want to try Linode
with a free $100 credit, by the way, so you can choose your OS distribution
Debian 11. I like to go for a select a region
so you can place it wherever you want in the world. And then I choose the basic plan,
which is just $5 a month to spin up a machine where I can essentially upload
this code and run it. Now, doing that is a little bit
beyond the scope of this video, but again, ask AI. It'll tell you exactly how to do it. Linode, otherwise known as Akamai. Absolutely brilliant for hosting websites
and apps that you create using the stack. I've shown you in this video. So once I had everything built. And it took me about three days
to brainstorm tearing my hair out. As I was trying to do
the Google login OAuth thing. That thing is complex,
but I got it sorted with the help of AI. I then log in to my Comment Genie app
and it generates AI replies. As you can see right here
to my latest videos that have comments on and I can simply check this
and see what I'd like to reply to. So what about this one? Love you!
That's a good one. Now I can either go with the suggested
reply or click regenerate. It's going to make me a new comment.
Oh love you too. Yeah, that'll do very nicely. I can click post reply
and my app instantly posts. This is all very good.
You launch the app, you're happy with it. But what about when you start
getting that feedback from beta testers, such as a big shout out to Michael Wagner,
who's been a really big supporter of the app And Michael says,
very impressive. I can already tell you that this is going
to be one of my favorite tools, and he's actually got back in touch
and said that it would be nice because he replied to a comment
in the regular YouTube interface, and it would be good
if Comment Genie would recognize that. I'd already replied, well, of course, using Cursor Composer,
I can tag my back end file here. I know that's called mai.py. Make it so that the API checks If a YouTube channel owner
has already replied to a comment before displaying it,
and because the composer will go through, look at that file, generate a new update to that file
to make sure that feature is included. It really is as easy as that
to act on feedback from your beta testers. If you're building and testing an app,
or if you've got something that's live and deployed,
you can update it just like this. And it does all the work for you
right here. This kind of stuff is super powerful. I'm not going to say it's easy, and it'll just take a few hours
to make a million or billion dollar app. It certainly won't.
It still requires human brain. Well, for now,
until the AI agents fully take over and we're already
seeing things like Devin. And there's also Replit agent that I did try out, by the way,
when building the app, it got quite far, but it fell over
completely at the OAuth area for Google. It just just wouldn't do it. So I had to work through step by step with Cursor Composer
and I found that to work for me. I hope you found the ideas
in this video helpful. I know it's been a rather technical one, this one,
but if it's helped you in any way, do let me know in the comments down below
and share your thoughts and feedback. Maybe if you think of a better way to build the app than what
I've demonstrated here, do let me know. Because I'm all ears and I'm actively making this app right
now, so I'd love to hear any way that I can optimize either
using AI, new prompting, or new ideas. And also sign up. There is a link down below
to go and test the app out for yourself. It is completely free
to try while it's in beta. Enjoy.