LongCut logo

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...

Loading video analysis...