I MASTERED 6 Months of Claude Code in JUST 20 Mins
By corbin
Summary
Topics Covered
- AI Code Generation: You Don't Need to Code Anymore
- Leverage AI for Rapid Application Development with VS Code
- AI-Powered Plan Mode for Complex Software Development
- Debugging with AI: Turn Errors into Actionable Insights
- Build a Full Application in Under 20 Minutes with AI
Full Transcript
Quot is an extremely powerful AI model.
In today's video, I'm going to show you how you can leverage a high reasoning model like Obus 4.5 to build out a real application. By the end of this video,
application. By the end of this video, you are not only going to learn how to start leveraging these AI models to create real code, but you are going to learn something fundamentally groundbreaking, which is you genuinely don't need to know how to code anymore
to code real software when using these models because it's gotten to the point that they're that good. Does that sound good? Let's jump in. Welcome back,
good? Let's jump in. Welcome back,
y'all. Today's video is sponsored by Anthropic Obis 4.5. Y'all, if you know, you know. This thing is killer.
you know. This thing is killer.
Therefore, I discussed with the team and I think the best way for me to show you how to leverage this model is we're going to use cloud code. I'm going to show you how to integrate it into a integrated development environment like VS Code. Don't worry if I'm speaking
VS Code. Don't worry if I'm speaking crazy to you. This is extremely simple process. And then we are going to create
process. And then we are going to create a real application together. I'm going
to show you a real software's journey when it comes to building out the architecture, the plan associated, and then the end execution point. There's
going to be an application where you'll provide a YouTube link. The YouTube link will then be reflected in the application, eg the thumbnail for the video, the title of the video, the duration of the video, and then finally,
the end value point that we'll provide the consumer will be the ability to take that underlying title and provide five variations based off a specialized prompt we create with Opus. Let's do it.
So, first things first, I'm going to leave these cloud code docs in the description down below. These are
extremely helpful. Nice little tip for y'all. If you want to understand the
y'all. If you want to understand the docs more or maybe learn at a chatbased level, simply hit copy page here, come over to your Claude chatbot, and then just paste it here and then say like,
"How do I do this? How do I do that?"
Quite literally paste. And what you'll notice is that we have an amazing UI that shows you the page. This is going to give context to Claude here to help you out in the direction of this tutorial. But first things first, we
tutorial. But first things first, we need to get in an environment where we can actually build this. Think of it like how do you play Minecraft? You got
to install Minecraft. So scrolling down here, we need to do a couple things. So
first thing you need to do is simply install VS Code. Once you have VS Code installed, you're going to open up and see a window like this. Step number one, you see this button that says open? Hit
open. And then it's going to prompt you to either choose a folder or create a new folder. Create a new folder. Once
new folder. Create a new folder. Once
you create your new folder, you can call it like YT app. Call it whatever you want. This is going to be where we do
want. This is going to be where we do all of our work in. Think of it like starting a new project and hit open. We
are in YT app. I like the name. But now
we need Cloud Code. So to do that, we're going to go to our extensions here.
Click this. You are then going to type Cloud Code. Obvious, right? You will
Cloud Code. Obvious, right? You will
notice there is a ton, but we need to choose from Anthropic because they have the best integration. So click this and simply hit install. As you see right above me, trust publisher and install.
Once it is installed, you'll notice it's prompted here. come up here to the
prompted here. come up here to the little claude icon. Click it. We have a couple different options here. Now, for
me personally, I have a Claude AI subscription, which is nice. So, I'm
going to go ahead and use this method.
It's going to bring you to this absolutely beautiful page. I love the art. Simply hit authorize, y'all. And
art. Simply hit authorize, y'all. And
thank you, Anthropic. We are going to build something great. Once you do that, you come back here and you will notice we have our Claude code chat. We have
our nice little clawed squid. I love the squid. And we can begin. First things
squid. And we can begin. First things
first, anytime you want to start a chat, come here to the top right and hit the claude icon and we have clawed code here. So, if you made it up to this
here. So, if you made it up to this point, we have set up everything we need to do to start coding with AI. This is
where the fun begins because now it's like, you know, we purchased a Ferrari on the lot and now we're like, you know what, I want to actually drive the Ferrari. So, let's drive the Ferrari
Ferrari. So, let's drive the Ferrari here. And we got to create our first
here. And we got to create our first base layer. When I say base layer,
base layer. When I say base layer, essentially a thing in software development we call a tech stack, the actual application. If you don't know
actual application. If you don't know what I mean by that, think about like Chrome or Safari. That's an application.
That's code. So, a really very popular one that a lot of developers like to use is TypeScript. And before I put in this
is TypeScript. And before I put in this prompt, let's actually switch this from ask for edits to edit automatically cuz essentially we're just creating the architecture first. So, here is our
architecture first. So, here is our first prompt. Create a TypeScript app
first prompt. Create a TypeScript app and have it be a simple landing page with an input link for a YouTube video.
We don't need to get technical right now. Right now, we need an actual
now. Right now, we need an actual machine to play around with a actual landing page. So, first step here is
landing page. So, first step here is we're going to get a really nice to-do list from cloud. Thank you. And the
second step here is going to be rendering this page. If you're new to coding, I suggest you just let AI take the wheel. So, we say yes for this. And
the wheel. So, we say yes for this. And
if you want to skip these little prompts here, we can always do yes and don't ask again. But as you'll see here, we're
again. But as you'll see here, we're getting a nice little to-do list of first off initializing the project for the TypeScript app, creating an HTML landing page of YouTube input, creating TypeScript file for handling video input, adding CSS styling for the
landing page. When creating
landing page. When creating applications, if you're new, I want you to think of it very simply. So, there's
a thing called a front end and there's a thing called a backend. The front end is what you're watching this on right now.
Whether this is on X or on YouTube, you are watching this on a nice little thing called UI, user interface. When you
click that like button right now, you're interacting with the front end. But when
you click that like button, what happens is the back end hears that and the back end's like, whoa, there there's a there's a like on the video. And that is how it communicates. So, we got the front end and the back end. So, we're
going to go ahead and let this initiate.
When you get prompted like this, just say yes and don't ask again. We want to give the AI the full wheel here. People
use different app text stacks depending on the specific use case. What I
encourage you to do if you're brand new is leverage the text stack of TypeScript. It works in the front end
TypeScript. It works in the front end and the back end. Other text stacks include things like using Python in the back end, but usually that is for more machine learning oriented types of workflow. What you need to understand
workflow. What you need to understand fundamentally is that these AI models, no matter the application you're trying to build with it, you can vibe with it, it can build it. And these things are extremely impressive. So right now it
extremely impressive. So right now it finished the first task. What you'll
notice is that and how you'll know it finished the first task is that it's not chatting anymore and it gives us what to do actually next. So in order to see this rendered you'll notice that it says
build the type script. So we're going to do that. I'm going to come here to the
do that. I'm going to come here to the top right. I'm going to click this. This
top right. I'm going to click this. This
is going to create our build. I know it looks I know terminal can be scary.
Don't worry. This is very simple.
There's a couple ways you can approach this. You can be extremely viby and say
this. You can be extremely viby and say build it for me or you can simply just grab the command here and put it in. So
I do npm run build. Hit enter. What I
want you to understand fundamentally is look at this terminal. It says YT app.
Do you remember where YT app was? Yes,
that was our application up here or just a simple folder on your computer. When I
do npm run build, all that's happening is that it's taking the code like the code static. It exists but it's building
code static. It exists but it's building it. So we can see it visually. Now if
it. So we can see it visually. Now if
you don't want to use terminal, you can also simply ask the cloud agent to do it. In local development, in order to
it. In local development, in order to see a website on our computer, we call it localhost 3000. This is a port, but you don't have to make it confusing.
Essentially, this allows it so that we can see this code on a web browser link that is only accessible by you, which is nice. And we're able to see this once
nice. And we're able to see this once it's deployed in a development server.
We can go ahead and check it out. So,
I'm going to hit command and click this link. And boom. If I go up here, you'll
link. And boom. If I go up here, you'll notice in the top left local host 3000.
That's pretty cool, right? You literally
just did two prompts or actually just one prompt and we were able to get a live rendering of what this looks like.
It doesn't just stop there, though. So,
next we're going to build out a little bit more functionality here. But one
thing I'm noticing is that it does keep prompting me and asking me, do I want to do XYZ? Like, should I do this command
do XYZ? Like, should I do this command yes or always allow? In order to fix this, if you want this to just go like take the wheel, go down to settings, hit settings, come over here, hit Claude,
and then scroll down. You're going to say allow dangerously skip permissions.
Hit allow. It sounds scary, I know, but if you really want to push this AI model to the limits, I suggest you turn that on. Now, that done, we're going to look
on. Now, that done, we're going to look at another really cool feature here, which is going to be our ability to do plan mode. This is I love this. This is
plan mode. This is I love this. This is
especially important if you are new to coding or you're about to do a really big next step. So, our current application allows us to put in a video link, but it's not connected to YouTube API. It's like how is it going to get
API. It's like how is it going to get the data? Like, it doesn't know how to
the data? Like, it doesn't know how to do that. And in addition to that, we
do that. And in addition to that, we need the extra logic of being able to actually analyze the YouTube video title and then get variations. This sounds
confusing, but watch me prompt it. So,
we're going to do this prompt. Let's
make a plan. I want to be able to provide a YouTube link as we saw for a landing page. You use YouTube API to get
landing page. You use YouTube API to get relevant metadata like the thumbnail, image, duration, and the title of the video. I want to have the Cloud AI give
video. I want to have the Cloud AI give me five different variations of this YouTube title and reflect in the website page. One thing you need to understand
page. One thing you need to understand about software is that you might be asking yourself, Corbin, what the heck is an API? I want you to think of an API like our ability to grab data from anywhere. So for example, another
anywhere. So for example, another example of API would be Instagram has an API or meta API where your ability to grab metadata on the Instagram post for the title. Corbin, what is metadata? The
the title. Corbin, what is metadata? The
YouTube title, the duration of the video. API is going to be your key to
video. API is going to be your key to access data and spread across different ecosystems when building out softwares.
I love API. What's a great example? This
cloud API. This allows us to integrate an AI model into a software and provide AI model outputs using their API endpoint. API is important. Learn more
endpoint. API is important. Learn more
about API. API allows us to access data from anywhere. I love the data. Okay,
from anywhere. I love the data. Okay,
we're going to hit enter here.
Genuinely, Opus 4.5 is killing the game.
It seems like Enthropic has really narrowed down on coding models and the ability to write actual good code. So,
when planning with Opus here, it just knows what to do. This is really next level stuff, y'all. It wasn't always like this. And I would say within the
like this. And I would say within the last two to three months, the leap that the tech has gotten to is tremendously higher than it used to be. So, I will say this, if you ever coded with AI in
the past and you had issues, it's changed tremendously. And you're
changed tremendously. And you're watching this 6 months to a year from now, oh, you're just having fun cuz these models are even better. So, during
plan mode, what's nice is look at all this. Look how amazing this is. This
this. Look how amazing this is. This
gives me the ability to really read and take actionable steps working with the model. So, which YouTube API should we
model. So, which YouTube API should we fetch the video metadata with? YouTube
data API v3. Let's just do Google's official one. How should we integrate
official one. How should we integrate cloud AI to generate five title variations? What you'll notice is that
variations? What you'll notice is that it gives different options, but Opus 4.5's reasoning is so high level that it'll be able to be like this is the right one. So, usually you want to go
right one. So, usually you want to go recommended if you don't necessarily know what these other mean. If you don't necessarily know what these other ones mean, cloud API, duh. Of course, you want to use cloud API here. Where should
the title, variations, metadata be displayed below the video player makes sense? Or you can push back side by side
sense? Or you can push back side by side with the video replace input section or even other. So you want to give your own
even other. So you want to give your own input. So maybe these options aren't
input. So maybe these options aren't relevant to what you were envisioning in your brain. But for me, all these seem
your brain. But for me, all these seem solid. Submit answer. So two things are
solid. Submit answer. So two things are going to happen here. First thing we're going to do is we're going to set up a ENV. Now don't make this confusing. An
ENV. Now don't make this confusing. An
EMV is what we call an environment. Uh,
not the environment like you're going on a nice walk. An environment where you can store highrisk variables. Corbin,
what's an example of a high-risisk variable? This sounds scary. These API
variable? This sounds scary. These API
keys, right? So, the Claude AI API key we're going to create here. That's high
risk. You can share it with developers that you know or maybe on your team, but you don't share this with anyone. You
don't you're not going to put a tweet out and be like, "Yo, this is my Claude API key." Don't do this. If you do, DM
API key." Don't do this. If you do, DM me. No, I'm joking. But these are high
me. No, I'm joking. But these are high risk. So we put these kind of variables
risk. So we put these kind of variables in a thing called an env. And we
reference them in the code this way.
You'll see what I'm talking about pretty soon here. It simply is just another
soon here. It simply is just another file here. So when a plan is ready, you
file here. So when a plan is ready, you can go ahead and review it. So I'm going to scroll up here, see all the relevant files that we created, and then it will essentially ask me, do we accept this plan? Yes. And auto accept. Let's do it.
plan? Yes. And auto accept. Let's do it.
What you'll notice is, look at this, y'all. This is all just prompts, y'all.
y'all. This is all just prompts, y'all.
I haven't touched a single file yet. And
you're about to see a real application be made. And look at this.
be made. And look at this.
Like it just goes down the list. I like
the list. Let's let it work here and build it out. In the meantime, while it's building it out, we are going to create our keys. So, the first key we're going to need to create in order for the AI model to access this API is going to
be the anthropic key. So, I'm going to go to anthropic here and hit create key.
Simply choose your workspace. You can
name your key. So, I'm going to say my YT app here and then hit add. It will
create this key. This is high-risk.
Don't share it. Have it ready, though.
Next, we're going to need the YouTube API key. In order to access that, we
API key. In order to access that, we need to make a GCP account or just Google Cloud, right? Come over here to API and services. Go to credentials and we're going to say create credential.
We're then going to say API key. This
will then show you your API key. So make
sure to copy it. We're going to rename this to YouTube right here. And then we can go down to restrict key. We're going
to select APIs here. And all we need to care about is going to be the YouTube API, which actually isn't showing up. So
let's enable it and make sure it is there. So we're going to enable API and
there. So we're going to enable API and services. What we want to do here is hit
services. What we want to do here is hit enable API and services. Again, we're
going to go to YouTube. YouTube. We're
going to go to YouTube data API v3. Why
is it v3, Corbin? Because it's better than v2 enable. Once it is enabled, you're going to come back to credentials here. You're going to go to your API
here. You're going to go to your API key, and then you are simply going to hit restrict key, select APIs, YouTube, and there we go. Select it. Okay, save.
Nice. Cloud is still working, but we have the relevant variables that we need. So, the next thing we're going to
need. So, the next thing we're going to do here is we're going to say new file.
Actually, it's already been created for us. I love it. ENV. Click this. And look
us. I love it. ENV. Click this. And look
at Claude. Just an absolute beast.
Claude said, "Time for you to put them in." I'm like, "All right, I got you. I
in." I'm like, "All right, I got you. I
got my keys. I got my keys." So, you're going to put our a YouTube API key here.
We're going to put our cloud API key here. Don't make it difficult, y'all.
here. Don't make it difficult, y'all.
Simply delete this part. Paste your key.
Delete this part. Paste your key. And
the keys we just got. Now, if this EMV file wasn't created, and you don't see this right now, right click, new file, env. It's that simple. And then hit
env. It's that simple. And then hit enter. And then on top of that, if
enter. And then on top of that, if you're like Corbin, I created the ENV file. What do I call the variables? So
file. What do I call the variables? So
one just talk to the AI model claude here it'll help you but two these are pretty solid variable names although to be honest with you we might need to rename these and add vite in the beginning or vit as the French will say
and v is the compiler and builder for this yes here and keep proceeding regardless add your keys here so once it finishes it's going to show you how to run the application and second it'll show you that we need to add the env key
like we did earlier I'm going to add a clarifying question though real quick and obviously you can ask clarifying questions as you build your application but I'm going to say added the API keys.
Do we need to add the vit at the beginning of the EMV variables? Let's
see what it says here. The best part about coding in this context is that not only is this a 24/7 teacher, but you learn as you go. So, it looks like it's not required. So, that's good. We're
not required. So, that's good. We're
going to go ahead and rebuild our application here and then we're going to try it out. So, it went ahead and tested for me. And this is really cool. What
for me. And this is really cool. What
the AI model can do within cloud code here is the ability to run terminal commands to test and verify endpoints are working and everything is connected.
So, I'm going to try this. I may need to restart the server, but supposedly it could be good to go. So, coming back over here, I'm going to refresh this page. And the page is refreshed. What I
page. And the page is refreshed. What I
suggest you to do in Chrome is hit inspect. Simply come up here to the top
inspect. Simply come up here to the top right, hit console. This is going to give you a little bit more context of what's incurring here. As we see there's already an issue here. So, what I would like to do and when using AI models to code is when I see something like this,
I'll simply copy it. I come over here and be like, I see something red. It's
an error. What do I do? And what is great is that these models are so smart and intuitive that it'll be able to understand what is incurring. So it
looks like it fixed it. It looks like it's rebuilding the front end here. And
it looks like we are going to try another YouTube link. So if we come back over here, we can reload the page.
YouTube API ready. Give us a nice little console log here. We're go ahead and take one of my videos, an amazing video, and I'm going to paste it here. And I'm
going to hit load video. Let's see what happens here. Oh, okay. This is how the
happens here. Oh, okay. This is how the next I like it. I really like it. Um, a
couple things and things like this just impress me is the ability for it to make really good UI, but also like do things that you weren't expecting. I wasn't
expecting for it to really load in the video and actually be able to play the video. That's cool. But also notice like
video. That's cool. But also notice like it provided the metadata here. We do
have a little bit of an error here. So,
we'll figure that out right now. But so
far, I'm loving this. I love how it shows the nice little thumbnail as well.
So, what I'll do is what you'll notice is that okay, so the YouTube API worked nice, but we're not getting the AI generated title variations. So, what
I'll do is like if you don't know what's happening, simply copy like all the logs here and then simply paste them here and then be like, I don't see any title variations
question mark. As you get better with
question mark. As you get better with coding, you'll be able to narrow down and speak in more developer jargon. But
for now, that's what's really cool about Claude is that you can just simply say what you don't see. So, I'm going say yes here and let it just check it out.
And you'll see that it ran into an error when accessing the claw AI and it's going to fix it for us. It's going to understand how to effectively do the correct type of payload to receive the title variations. One thing in life is
title variations. One thing in life is that the more you do, the more you learn. And in the beginning of using
learn. And in the beginning of using this, we're going to say yes, build the back end. I love the back end. Beginning
back end. I love the back end. Beginning
of this is going to be a little bit like uh Corbin, I have no clue what the heck that chat's saying. But don't worry, over time slowly, you're going to understand more and more what a payload is, what the code is, why are we running
a separate command for front end, why are we running a separate man command for backend, it all becomes connected over time. So, we're going to try again.
over time. So, we're going to try again.
I have a YouTube link load video. So,
let me show you another tip when debugging. You'll notice that I don't
debugging. You'll notice that I don't see the titles. So, what I can do is I can screenshot this. What's cool about Claude Code here is that we can actually upload screenshots as well. You hit this little plus button or you can simply
drag it in like this. I love it. I still
don't see the title variations. Can you
add logs? These are the console logs that you saw in the browser and a loading state for when the titles are being processed. You know, like when you
being processed. You know, like when you use a software or an app and it's like that little loading thing. I want to see that. So, here we go. A lot of times
that. So, here we go. A lot of times when coding with AI, it's not that it can't do it, it's that it doesn't have enough information. So, console logs and
enough information. So, console logs and loggers in your back end are going to be your best friend. This is going to give the YouTube, sorry, the Claude AI the ability to really fundamentally understand what the error is and fix it.
What's really cool here is now we're going to get a console log of when this API request is given to Claude. So, here
we go. It has successfully rebuilt the application. It will also give me
application. It will also give me directions of how to actually do what I just told you when it comes to the console tab, which is cool. I'll come
back over here. I'm going to reload the page. I'm going to put in the link and
page. I'm going to put in the link and I'm going to hit load video. And this is important because what you'll notice is that no title variations called API may have failed. It's giving me an
have failed. It's giving me an indication. And then what you'll notice
indication. And then what you'll notice is that it gives all this information here. You don't need to know what's
here. You don't need to know what's occurring here. All you need to do is
occurring here. All you need to do is simply copy all of this. And then some of you'all might be like, Corbin, what's this 404? It says fave icon. If you
this 404? It says fave icon. If you
don't know what a fave icon is, look at your browser right now. You see that little box like the YouTube box like that says like the YouTube logo in the tab? That's a fave icon. So I know it's
tab? That's a fave icon. So I know it's not that. You can still copy that if you
not that. You can still copy that if you don't know it's that. So you can copy that if you want to. Copy console logs.
Paste them here. Enter. And what you're seeing right here is the workflow, the backtoback as a true vibe coder. So, I'm
gonna say yes to this. And what you'll notice is that with these clear console logs, it's able to identify the issues clearly. And there's my issue. My credit
clearly. And there's my issue. My credit
balance is too low. So, I need to add credits to my billing. And I've gone ahead and added credits. But I want you to understand, I'm showing you this workflow. So, if you run into errors
workflow. So, if you run into errors that aren't associated with billing, you know how to solve them, which is fundamentally a very important skill in app development, especially with these new AI models. Also, what's really cool is that it gave me a direct link to
solve it. I love it. I'm just going to
solve it. I love it. I'm just going to confirm that I added the credits so it knows we're on the same page here. And
then we are going to try out again. So,
come back here. We'll go ahead and put in our YouTube link again. Below video.
And here we go. So, I want you to notice two things. First thing is that the logs
two things. First thing is that the logs look like they worked. And coming down here, we have all of our AI generated title variations based off why AI software is the next app store. From app
store to AI store. Okay, I like it. The
AI revolution. Building tomorrow's
digital economy. It's digital. the
coming of the AI gold rush. AI apps, AI vibes. I love it. Now, if you want to
vibes. I love it. Now, if you want to start a new chat, all you need to do is simply come up here to the cloud icon, click cloud, and get going. Now, one
thing I want you to understand is look at the application I just built, and that was all done in a single chat, and I think in under 20 minutes. That's
fast. That's extremely fast. And if you genuinely had no clue how to code, you could build the same exact thing. What I
encourage you to do is step by step do exactly what I just did right there. And
that's going to unlock in your brain like wait a second this is different because it is. So that just about does today's video. Make sure you leave a
today's video. Make sure you leave a like. It is completely free. And as you
like. It is completely free. And as you already know these style of videos, I'll see you in the next. Did Corbin just quite literally show me one of the most powerful models on the market called Opus 4.5 and show me how to build an entire application in under 20 minutes
type of video. I like it.
I really like
Loading video analysis...