Vibe Coding Complete Tutorial and Tips - Cursor / Windsurf

Video ID: v7UcVPO4y3c

YouTube URL: https://www.youtube.com/watch?v=v7UcVPO4y3c

Added At: 13-06-25 21:16:13

Processed: No

Sentiment: Positive

Categories: Education, Tech

Tags: programming, tutorial, code editor, javascript, python, wind surf, klein, replet

Summary

• Vibe coding is a way to write and execute code without leaving your browser. • WindSurf, Klein, and Replet are tools for vibe coding. • The most popular coding language is JavaScript, but Python is also an option. • Create a detailed plan before starting to vibe code.

Transcript

Here's everything you need to know about
vibe coding. All right, first which tool
are you going to use? There are a few
different variations of what you can do
here. First, I use Windsurf and Cursor.
Most of all, I'm usually using Windsurf
as of late. Windsurf is a code editor.
It is also a fork of VS Code, the most
popular coding editor on the planet. So,
if you're already using VS Code, this is
a natural extension of what you're
already doing. Now, another option is to
use an extension in VS Code itself. So
if you don't want a new IDE completely,
you just want to continue using VS Code,
you can use something called Klein. I've
heard really good things about it. I've
tested it a little bit, but not
extensively. Another option is to use
Replet. Replet is a completely online
code editor. The cool thing about Replet
is you can also deploy your apps really
easily since everything is in the cloud
anyways. Now, last and probably the
easiest way to just get started is to
use the canvas feature in your favorite
hosted AI. So here's Claude. You can
just type anything you want. So here's
an example. Write 3JS code for the
coolest spinning 3D shape you can make.
Now once you're done, you can open it up
in the canvas and you can run it right
from your browser. So here's just an
example of something that I coded up
over about 20 minutes. Now there are
limitations with this. You can really
only run HTML and JavaScript, but since
JavaScript is the most popular coding
language on the planet, you can actually
accomplish quite a bit running it
directly in the browser. And not only
that, Chat GPT has a canvas feature and
Google just released their own canvas
feature. So more and more you're able to
write and execute code without ever
leaving your browser. But for more
complex projects, I'm still going to one
of these other tools that I mentioned.
Also, those other tools are agents. When
you type in a prompt into Claude or
Chatyppt or Google for it to write code
and then execute that code, it's not
actually going to be iterating on the
code. It's just not as agentic as a
windsurf or a cursor is. And speaking of
windsurf, thank you to Windsurf for
sponsoring this video. I also just
happened to love using Windsurf.
Windsurf is fantastic. I use it for vibe
coding all the time. You can easily
switch between chat, write, and legacy
modes. They have a bunch of different
model options. So cloud 3.7 thinking,
cloud 3.7, cloud 3.5 open AI models, and
so you can use the right model for the
right task. They also just released a
ton of new functionality around tab
completion such as tab to jump, tab to
import and the tab functionality. Tab
completion has context of not only your
codebase, not only what's in your
terminal, but what you're writing in
Cascade as well. They also just released
browser preview functionality, which is
really nice. Automatically, Cascade will
offer a browser window so you can look
at the project that you're building as
you're building it and you can give it
specific feedback by clicking on areas
that you say this is not right or this
is right but I want to add this other
feature. Plus, you can paste in URLs to
library documentation, API
documentation, anything you need to just
give it that extra knowledge of how to
write code in the way you want it to.
So, thank you to Windsurf for sponsoring
this video. Go to wind.surf/matthew
surf/matthew Berman. Download Windsurf
right now and get started vibe coding or
traditional programming right away. All
right, so next you've decided to vibe
code. Which coding language do you
actually choose? And not only the coding
language, but which code stack? Because
there are going to be multiple parts of
your project. There's the front end and
the back end, for example. And so, how
do you actually choose which coding
language, especially if you don't have
any experience with any of them? Well,
I'll tell you. There's one simple rule.
You want to choose the most popular
coding language because that means
there's a lot more code examples for AI
to have been trained on, which means
it's probably a lot more experience and
can write better code. The most popular
coding language in the world is
JavaScript. So, if you're vibe coding
and you want to write it in JavaScript,
that's a great option. Another option
and really the de facto coding language
of artificial intelligence is Python.
And I really like Python. And so the
code stack that I usually go for is
Python for the back end and HTML and
JavaScript for the front end. But you
don't have to use Python for the back
end. You can use JavaScript for also the
back end using something like NodeJS.
But the point is choose something that's
popular. And I found this really cool
graphic called GitHut 2.0. And it
basically shows you what all the most
popular coding languages are. So you can
see right here, Python, Java, Grow,
JavaScript, C++, TypeScript, and so on.
and I'll drop this link in the
description below. All right, so you've
chosen the tool you're going to be
using. Let's say Windsurf. You chose
your code stack. You're going to be
using Python for the back end,
JavaScript and HTML for the front end.
Now what? Now you want to come up with a
plan. You really want to spend a lot of
time on this step. You want a detailed,
thorough plan that you can pass to AI so
it knows exactly what you want to build.
You want to try to think about all of
the edge cases and write it down so that
the app behaves exactly how you expect
it to. But you don't need to write all
of this yourself. You can use AI to help
you. Now, for this, I'm usually going to
Grock for help. And so, here's an
example. Write a detailed plan spec for
a SAS app I want to build where I can
drop links to articles, YouTube videos,
research papers. Then, it uses AI to
summarize each of them and can use
relevant search to help me search
through all of the stored articles. And
then I'll finally add, ask me questions
to help fill out any gaps in what this
app should be. So Gro can actually help
you figure out all of the different
features and functionality that you want
to add in here. And you don't need to
just take the first thing that it says.
You can work back and forth with it
until you come up with a really nice
plan. So here you can see a bunch of
questions that it asks me and we can
answer them to the best of our ability.
Obviously, some of them are going to be
a little bit more technical, and if you
don't have that technical ability,
again, just work with Grock and have it
explain to you what each of the concepts
mean. Then, at the very end, I'm going
to say, write this in the format of a
PRD, which is a product requirements
document, and we're going to use MD
markdown file format. And so, here we
go. And so, once it writes it all, we're
going to copy it and put it directly in
the directory that we're building our
project in. And we're going to store it
for later. and I'm going to explain how
to use it later. And then finally, I'm
going to ask it to come up with a
step-by-step to-do list to build this
out in MD format once again because MD
just works really well with artificial
intelligence. All right, so we can see
here our checklist, our to-do list of
setting up step by step what we need to
get this app running. Now, it has ETAs
on it, which obviously we don't need. So
again, just work with Grock, tell it
what you need and get to a place where
you have your overall plan and then your
to-do list. Now, I can't stress enough
how important it is to spend time and
invest time at this stage. You really
want to think through every possible
feature you might want, every edge case,
every permutation that you can possibly
think of. This is really what
traditional coding is all about. Those
edge cases, those details are where
you're going to have problems in the
future. If you don't think of them now,
they will come up in the future. And
making changes in the future is always
going to be more difficult than thinking
about it and implementing it right from
the get- go. Now, the good thing about
having the plan, the good thing about
having the to-do list is you can always
have AI go back and reference it so that
it stays on track more effectively. And
as you're vibe coding, as you're
progressing in your project, you can
always go back and update your plan. If
you realize you don't need a feature or
you realize you want to add a different
feature or you want something to behave
differently, go back, make the changes
in the document, make the changes in the
plan. All right. Next, let's talk about
version control. This is the thing that
is going to save you a lot of headache
and your sanity in the future. Now, if
you're not familiar with coding at all,
version control is exactly what it
sounds like. It allows you to
essentially save your code at different
points as you're building. Now, why is
that important? It's not just important
for vibe coding. It is crucial,
absolutely critical for any coding,
traditional coding, vibe coding,
whatever it is. You need a way to store
your code and to save it at certain
points in its life. That's because if
anything goes wrong, you can always roll
back. You can find a previous point at
which you know the code worked how you
expected and just revert the code back
to that point and start again. This is
especially important for vibe coding
because AI does tend to sometimes make
huge changes across your codebase and
just completely break the code. And so
if that happens, rather than going into
these really long loops of no, fix it,
and no, that didn't work, fix it again,
try something new, fix it again, you
simply throw out the recent changes and
start from your most recent stable code.
So if you've never coded in your life,
then you may or may not have heard of
something called git, git. That is the
default version control software that
essentially everybody uses. It allows
you to save your code at different
points and do a lot of other really cool
things. And it's also really valuable
for when your codebase becomes really
large and you want to work on different
features or different pieces of
functionality at the same time and then
put it all together at the end. But Git
can also be pretty complicated. The good
thing is you can actually have your AI
coding assistant or your agent help you
write the git code. So you don't
necessarily need to fully understand
what it's doing. And I know a lot of you
programmers out there are probably
cringing at that statement. And let me
actually just pause for a second. It is
really good to learn all these
traditional coding techniques. But if
you don't want to, you don't have to. If
you're just trying to build a game for
yourself and you're not going to put it
out and let the world see it, it's okay.
Just do your best. Get something up and
running and have fun. I would recommend
to just learn the basic terminology of
git like commit, revert, logs, stuff
like that. But after that, you really
don't need to know the more complex
stuff. And so the first thing you want
to do before coding anything is get git
installed. And I have an existing
project that I was just playing around
with quickly. I didn't install git. Let
me show you how to do it. And it really
should just be as easy as telling your
AI agent to do it. So I'm simply going
to say install git. And it does say
right here, git is typically
pre-installed on Mac OS, but let me
check if it's installed. So, it's really
just going to handle everything for you.
Git is the command. Git- version just
makes sure that it's installed properly.
So, it says it's already installed.
Then, I just say add git to this
project. So, it's running the command
git init, which is initialize, and it is
creating the git ignore file, which
means the files you don't want to
include in the git. Spinning up a new
branch. Again, you'll learn all of this
lingo as you go. And if you have any
questions, just simply ask your AI, and
it's already making its initial commit.
So, that's your first save point. And
that's it. It's as simple as just
talking to your AI and getting it to do
it for you. Now, if you're using Git,
everything is going to be stored on your
computer, your local machine. But you
really want more secure code storage
than that. And so, I use GitHub. That
just means taking your Git, taking your
code, and pushing it to the cloud, and
you're storing it there. It's kind of
like Google Docs for code and it's free.
Sign up for GitHub and you can ask AI to
help you set it up. All right, so next
let me talk about rules. Most of these
Vibe coding tools, Cursor, Windsurf,
client, they support something called
rules. Rules allow you to have your AI
coding agent write code in the way that
you want following the structure that
you want and following the workflow that
you want. It's kind of like writing a
system prompt for your LLM. It's
something that's going to be included in
every single prompt that goes off to AI.
So, it really is like a system prompt.
Now, depending on which tool you're
using, your rules are going to show up
in different places. Let me show you
Windinsurf. So, down here in the bottom
right, you're going to look for this
Windsurf settings. You're going to click
it, and right here it says memories and
rules. You click manage. Also, this is
where memories can be found. So, with
Cascade at least, as it's developing a
project, it's going to be storing
memories about your project. And if you
find that the memory is not right, you
could just delete it and start over.
Down at the bottom here, you're going to
see userdefined rules. You have global
rules and workspace rules. Now, global
rules means rules that apply to every
project. And workspace rules are rules
that only apply to a specific project.
So, let me show you some of my global
rules. So, of course, it's in a markdown
file. It's very simple to edit. It's all
natural language. So, here's the first
one. After making changes, always make
sure to start up a new server so I can
test it. What I found is it would make
changes and then I would have to
manually either kill the existing server
and spin up a new one or just spin up
the new one. And so I wanted it to just
do it for me every single time. So
anytime it makes a change, it spins up a
new server for me and pops open the
window on my behalf. Another problem
that I ran into is I would tell it to
make an update and rather than looking
for existing code to evolve or iterate
on, it would just write completely new
code to satisfy my request. And so I
always wanted to first look at the
existing code and see if you can change
that before writing new code. And I ran
into this issue a lot. And so I really
put a few of these rules together to
make sure that it looked and it tried to
use existing patterns before inventing
new ones. So do not drastically change
the patterns before trying to iterate on
existing patterns. I also have things
like always prefer simple solutions.
Avoid duplication of code. Obviously it
should do this by default, but I found
putting more emphasis on it through
rules just makes it write better code.
Here is a really important one for me.
write code that takes into account the
different environments, dev, test, and
prod. And so, just a very quick rundown
of what it means, but of course, if you
want to go into more detail, ask Rock,
ask Claude, they'll explain it. The dev
environment means the environment that
you're coding in. So, when you open up
local host and you see your code
running, that's your dev environment.
Your test environment is the environment
that your tests use. And we haven't
covered tests yet. I'll get to that in a
few moments. And then your prod or
production environment is what you're
going to be deploying and the world is
going to see. And so you treat all three
of these separately. And again, if
you're not familiar with coding, it
might not make sense why you would need
these three environments, but I
encourage you to get an understanding of
it. Ask AI to explain what instances you
might need different environments for.
Then I have some rules that I put in
place after vibe coding a lot and just
noticing the tendencies of specifically
Claude 3.7 thinking where it would do
things and I was like, "Nah, I don't
like how you're doing that. Make sure I
don't do that in the future." And I
would notice it, write it down as a rule
and then it wouldn't do it again. So
here's one. Avoid writing scripts in
files if possible, especially if the
script is likely only to be run once.
So, if I needed something changed and
the AI wrote a script for it, it would
write it to a file and the file would be
there permanently and I would just find
all of these scripts that I never used
more than once. So, I didn't want it to
do that. Just run the script yourself in
console or delete the file after you're
done with it. Now, here's a really
important one. You want to keep your
files really short. Now, I said two to
300 lines of code. You could even do 100
lines of code. It just keeps the code
more modular. It also allows AI to write
and iterate on the code more quickly.
Now, some of you in my last Vibe coding
tutorial video asked for this file, so
I'm going to put it in a gist and drop
it down below in the description. So,
these are all workflow rules. These are
all general rules that I always want my
AI coding assistant to follow. But,
there are some rules and best practices
that are specific to a coding language.
And let me show you where to find those.
I found this awesome repository on
GitHub and it's called awesome cursor
rules. It applies to not just cursor but
also windsurf and they're just markdown
files that are specific to coding
languages and really just lay out best
practices dependent on your environment
or your coding language. So if you
scroll down a little bit here are
front-end frameworks and libraries. So
let's say you decide to use React which
is a JavaScript front-end library. Click
into it and here are a bunch of rules
for it to follow. So these are just best
practices specific to a coding language.
If we go back, we can find backend and
full stack. So here's Python with fast
API. Bunch of great rules. Use
functional components. Use declarative
route definitions. If you've never coded
before, you might not know what any of
this means, but you can use it. These
are pre-reviewed, and if they're
included in these awesome cursor rules,
they're generally pretty good. All
right, so now let's talk about the
overall workflow of Vibe Coding. So
remember, the first thing you're going
to do is save your project plan and your
to-do list. So I took the project plan
from Grock. I came over here and I'm
going to say create a file called prd.md
and put this in it. And I simply just
pasted it in. Now obviously you can do
this manually as well, but I'm taking
the vibe coding approach of really not
writing any code myself. And there it
is.
prd.md nice and formatted as well. So
now we have our project plan. The next
thing we're going to do is create the
to-do.md file. So back to grock, I'm
going to highlight all of this. I don't
need the post-launch stuff because
again, we're just vibe coding. So I'm
not thinking about getting user feedback
and all that stuff. And so I say now
create a to-do.md with this and pasted
it in. Hit enter and it's going to
create that file as well. And here it
is. Here's the to-do file. So, we can
accept the code. Now, we have our
project plan and our to-do list. Now,
the overall workflow that you're going
to be following is as follows. So,
you're going to have your AI assistant
read your project plan, read the to-do
list, and develop one thing at a time. I
can't stress that enough. One feature at
a time. Now, initially, when you're just
starting your project, it might have to
build out kind of the framework to do a
lot of this, and so it's going to be
more than one, but after that, when
you're adding things to it, one thing at
a time. Next, once you add a feature,
you're going to add tests. If you've
never coded before in your life, just
think of tests as separate code that
makes sure your actual code is working
as expected. Now, this is super
important to write tests along the way
and at every single step. Because once
you have code that works as you expect
it, you will make sure it works with
those tests. And in the future as you
make changes, if any of those tests
break, it tells you that the
functionality you had previously is no
longer working as expected. And at that
point, you can either change the test to
update based on the changed
functionality, or you go back and you
fix what may have been broken. Once your
new tests have been written, you're
going to run those tests. Those tests
literally test the code to make sure it
works the way you think it should work.
Once those new tests have run and
passed, then you're going to run your
entire test suite and make sure all of
your code works exactly as you expected
to. Now, if any of your tests fail, you
need to fix it. And there's really two
ways to think about fixing tests. One,
you fix the actual code and make sure
that eventually those tests pass. So,
something broke with your code, you fix
it, and then the test will eventually
pass. The other thing is if you updated
the functionality and the new
functionality make the test fail, but it
is how you want it to work, you need to
update the tests themselves. Both of
these things can be done by your AI
coding assistant. All right, so here's a
fun little simulation I was playing
around with yesterday. Let me show you
what writing test looks like. So I
simply say write test to make sure this
app works as expected. All right, so we
can see Windinsurf has written a bunch
of tests for us. If we look on our left
side over here in the tests, we can see
all the tests that have been written. So
all the tests are done. Let's run them.
Run the tests. So after all the tests
ran, we can see that there are 11 failed
tests. And since this is our first time
writing tests, you can say fix the test.
Once you get going, you may want to take
the extra step of saying explain why the
test failed and decide if you want to
fix the test or fix the actual code that
broke the test. But that's the general
flow. And then once you get all your
tests passing, you commit. And that's
the git command. So you just say commit
the code. And so it's going to go
through the entire process of finding
all the files that changed, committing
them, writing a commit message, and then
if you have GitHub, push it off to
GitHub. So let's go through the overall
flow one more time. Reference the plan,
check your to-do list, and build the
next feature. Then write tests for the
new feature. Then run the tests for that
feature. If everything passes, great.
Move on to the next step. If it doesn't
pass, fix the test. Then run the test
for the entire codebase. If all the
tests pass, great, move on to the next
step. If not, fix the test that failed.
Then save your code by committing it to
git. Then rinse and repeat. Do that over
and over again. That is the overall
flow. But sometimes your code gets to a
place that is just unfixable. AI
sometimes does this. It just wrecks your
code and there's not much you could do.
So what you're going to want to do is
roll back to a previous commit. And that
just means any of the new changes that
you just made will be wiped away. You
can store them if you want. It's called
stash, git stash. And you can use that
as well. And again, all of this stuff
you don't actually need to know the git
commands for. You just tell your AI to
do it. But otherwise, you say roll back
to the previous commit. And that'll get
rid of all of your recent code and go
back to the stable place that you know
worked. All right. Now, I want to tell
you just a few miscellaneous things
that'll just make your coding experience
better and also give you more options.
So, first I want to talk about chat
versus write mode. So, write means it
will write code and you could ask it not
to, but if you're in write mode, you
mostly want it to write code for you.
Now, if you switch over to chat mode,
that is just asking questions. That is
essentially the same thing as having a
direct chat with the large language
model except also you give it the
context of your codebase. You can also
select all the different models that you
want to use right here. Now, what I
found is that Claude is the best coder.
A lot of people are saying Cloud 3.5 is
still the best, but I really like Cloud
3.7 thinking. Now, one thing that I've
noticed lately is that AI is not really
able to code beautiful front ends. It
can code really basic stuff, and that's
great. But if you want something really
beautiful, the best way to do that is to
actually find a free template online. So
with all of the designs already built
for you and then just download that, put
it in your folder, tell AI about it and
say okay now I want to build this use
all the components that can be found in
this library. So simply search for free
Bootstrap themes or anything like that
and you can find this. So all of these
little components, the graph, the
charts, the fonts, everything is
predefined. You can buy it here. You can
find a lot of free ones as well. Another
tip is to give your agent specific parts
of the code that you want to update or
fix. Now, obviously, you need to have a
decent understanding of your codebase to
be able to do this, but you do that by
just typing at and you can add files,
directories, docs, context, and web
links. So, don't forget you can do that.
Now, I've seen a lot of people vibe
coding games, and they're mostly using
this library called 3.js. It's a 3D
JavaScript library. Most AI already
knows how to use it and it's kind of
having its moment right now. So, it's a
really cool library. Definitely check it
out. And to reference it, you can simply
do build me a game X and X's describe
the game using 3JS and it will use that
library. Now, let's talk about security
and maintainability.
I've seen a lot of people, traditional
programmers, speaking really negatively
about Vibe coders because they're saying
and probably valid, this code is not
going to be maintainable and the code is
really insecure. Meaning once you put it
up, you're going to get hacked. You're
going to have your password stolen.
You're going to be DDoSed because you
just don't know as somebody who may not
have ever coded in their life what some
of these best practices are. Now,
there's a few things to do here to help
yourself. one, definitely spend some
time learning what some of the best
practices are. But this is also a good
time to use rules. You add rules. Never
do this. Always do that. And these are
best practices. But how do you know what
these best practices are? Well, you can
ask AI to write it for you. But this
person, Jack Frics, also put together a
few really useful tips, and you can find
more online as well. So, for example,
rate limit all API endpoints. Use
rowlevel security always capture on all
authentication routes and signup pages
and so on and so there are a lot more
than just these few but you can discover
them you can search the web for them you
can ask perplexity you can ask claude
and just get a list of these best
practices and make sure you're using
them and then also add them as rules
let's talk about maintainability yes AI
code is not always pretty but just keep
in mind this is the worst it's ever
going to be it's only going to get
better And as you're building out a
codebase, if you're vibe coding it and
you really don't know how to code
yourself, it might end up being a pretty
brittle codebase. But you know what?
That's okay. That's part of the learning
process. And you can actually ask AI to
refactor your code. And refactor just
means make it more concise, make it more
modular. Don't use code duplication and
other best practices. And again, all of
these things add into the rules file
that you have. And you can also ask AI
to do a security audit for you. Simply
look at all my code and tell me where
I'm vulnerable from a security
perspective. Here are some other best
practices for security. So this is by
Ted Worble. Don't share a photo like the
one below. So anytime you have API keys,
these are the keys right here. Do not
share them publicly. I can't stress that
enough. These keys, even in an image,
can be taken and they will use your
credits on whatever API you're using.
You also never want to save your keys in
git. That's what the git ignore file is.
Now, if all of this sounds like
gibberish to you, don't worry. Just ask
AI to explain it to you. He also
recommends using npm run audit if you're
using a node app. He also recommends
don't roll your own authentication,
which is a great piece of advice for
almost everything. Don't roll your own
anything unless you really have to. And
roll your own means build your own. So
use something like Clerk. Set up IP plus
userbased rate limiting, DOS protection,
firewalls monitoring, and analytics. And
again, use AI to learn all of this. And
here's the thing about vibe coding. You
don't necessarily need to learn all of
it, but it's nice. I find all of this
stuff so interesting. I have loved to
code since I was a teenager. So
hopefully with vibe coding, you get
exposed to it and you learn to love it
as well. And always write test
automation for parts of your codebase
where the cost of failure is high like
payments, subscription management, usage
tracking, etc. So great tips by Ted.
Thank you. Now the last thing I want to
talk about is MCP servers. And if you're
not familiar with MCP, it is a way to
give your agents tools, additional
tools. And you can configure the MCP
server right here in Windsurf. You click
it and you can actually ask AI to help
you write this up. But you can have
really cool tools added to your AI
agent. And let me show you a couple cool
examples. So this is from Bilawal. This
is Unity MCP here. So it's a tool that
can essentially connect right into
Unity. Let's watch. So now it has direct
access to Unity and you're essentially
vibe coding into Unity. It's pretty
awesome. So you don't actually need to
know how to use Unity. And again, if you
really like Unity and you really like
creating these 3D models, then start to
learn it as your vibe coding. Here's
another one using the Firecrawl MCP
tool. Check this out. So, it's doing
deep research. Firecrawl deep research.
So, now all of a sudden, your AI agent
within Windsurf within cursor can go
out, use this firecrawl tool, and get a
bunch of information. So, there you go.
So, definitely experiment with MCP
tools. It's more of an advanced feature
once you get really familiar with vibe
coding, but I do recommend it. So,
that's it. Hopefully, you learned a lot
about vibe coding. I encourage you to do
some vibe coding if you're an
experienced programmer. It's just fun
and relaxing. If you're just learning,
it's a great way to get exposure to all
of this stuff and start your learning
journey. And if you enjoyed this video,
please consider giving a like and
subscribe. and I'll see you in the next