In this lecture, we're going to do our first project with windsurf and get a bit of orientation to
understand how windsurf works and where to find things.
Now, first of all, if you find that the interface of windsurf looks very similar to the one of cursor,
you are absolutely right.
They both use VSCode as a base.
So many things are very, very similar.
Now the main thing that you will notice that is a bit different is this right hand side you're going
to notice here Cascade.
This is the AI component in windsurf and can be enabled or disabled.
Now obviously you probably want to have it enabled all the time because the reason why you're using
windsurf is to take advantage of the AI functionality.
Now why windsurf decided to add an additional name and actually give a name Cascade to this thing is
beyond my understanding.
But anyway, this is the main idea.
This is where we can provide our prompts and this is where we can start doing things.
So just a bit of orientation.
I'm going to say here that the left hand side is very similar to what we have in Visual Studio Code,
where we have in cursor, so no big changes there.
So everything that is a bit different is here on the right hand side.
So this is exactly where we're going to look.
Now first of all what I want you to notice.
And I'm going to make it just a bit bigger because I think windsurf made things just a bit too condensed
here.
So it's very easy to miss stuff.
First of all I want to point out this write mode.
So write is essentially the mode that we want to use all the time.
And the other mode is the chat mode, which is just the chat doesn't actually make changes.
So let's put this to work and see a simple example to understand better how things are working.
You have two options here.
You can go ahead and click here open folder.
And somewhere in your system you can create a new empty folder and get into that and start a new project.
So that's one option.
You can also let Cascade do its own thing and it will suggest a specific folder.
So I'm gonna just ask it to build a very simple game.
can also find this prompt as a resource to this lecture.
But before we get started, one important thing I see here again Cascade Base.
So what is this?
This is the model that's going to be used.
So if you click on this you're going to see here a list of models using Cascade Base is free as you
can see.
But honestly for software development this is a horrible model.
So I tried it a few times and every time it did really weird things, so I really wouldn't recommend
it.
And right here on the list you're going to find other models that are interesting, and you also see
exactly how many credits this is going to use.
So currently GPT four one from OpenAI is a relatively cheap model and still a very good one.
If you want to see more models instead of recommended, you can go here by provider and you can see
multiple models.
So in this case I'm just going to go with Gemini 2.5 Pro.
I had very good experience with this model so far, and this is what I've also been using in cursor.
So I think it's going to be a fair comparison.
So I'm going to ask you to build this project.
And the way this works is very, very similar.
We're going to have here some panels.
So we're going to see here you have the primary sidebar which you can enable and disable.
Now currently we don't have any files it's going to use here a specific directory.
So we just went a bit away.
So this is where our project is going to be stored.
And currently we are getting a few errors here.
So it seems that it's trying to figure out its way trying to understand exactly what's going on.
So because we haven't provided an empty directory, it's already a bit lost.
So theoretically it should have been able to create this directory and start putting stuff in there.
But probably this directory doesn't even exist.
So this is where it's actually asking us to go and check inside this directory to see if this has been
created.
So I would say this is less than ideal for a start.
But let's be nice.
Let's take a look inside there and see if there's anything that has been created.
I'm just going to go ahead and help the model out.
I'm going to say this directory space shooter three.js does not exist inside Cascade Project as like
why don't you just create it.
So now it's going to provide us the command that we want to run in order to actually create this particular
directory.
So let's just give it a bit of time to go over this.
And now we're going to see here on the left hand side we have the files.
So currently there's no folder that has been opened.
So this is a bit annoying.
It's like a bit of the disadvantage of not starting everything in an empty folder.
It's not able to do this properly.
But for this initial experiment I think this is just enough.
So finally the application has been built and we are being asked here to, yes, start a server.
So I think that's a good idea.
Yes.
We want to see the application.
Now this is the weird thing that has happened quite a few times.
So even though I have a Node.js system, even though I've asked it to use a Node.js library.
It has still not figured out that we actually don't want to build a Python project, and it still decided,
okay, I'm going to start here Python.
So Python is another programming language, and this is not necessarily what I wanted to see, as it's
going to struggle a bit to figure out that this port is not available.
If you don't have Python installed locally, that's going to be even more tricky.
But I do have the impression that Python is the thing, that it is defaulting, or it's trying to to
use it much more often.
So let's see if it still manages to start this.
Now, it's fair to say that I haven't been very specific in my initial instructions, so it's all my
fault that it's going a bit haywire and it's having issues starting this, but I'm already noticing
like a small difference compared to cursor.
So cursor was just a bit smarter to understood, a bit better what I want and what's available locally.
And I feel that windsurf is currently struggling here.
So it's telling us hey, try NP surf.
Yeah that's a good idea.
So that would be something that's coming from NodeJS.
We're going to stop the Python server and we're going to start the surf command which is based on NodeJS.
And we can go ahead and open the preview.
Don't run away from me.
Is this going to be inside the browser itself?
I don't think this is really functional.
I'm going to open it in an external browser as well.
Yeah.
So currently this is this is really not doing anything.
Yeah.
This is at least using pretty much the same model providing the exact same instruction.
The initial difference with windsurf.
So I'm just going to give it another try with just a better prompt to see if it works better.
So I said, this game doesn't do anything.
Build the whole game.
I'm just going to give it another chance so that we can actually get something working.
I'm going to skip ahead to take a look at the final result to see if it is any better.
Let's go ahead and refresh here.
It's actually a different address altogether.
That's an important aspect that we need to take into account.
Now we can move around.
There's no enemies coming at us and it cannot shoot any projectiles.
So it has really started slow trying to implement just the basics, which is okay, but I would think
for this simple game thing it could have done just a bit more.
Anyway, this is probably the main difference, but in a nutshell, this is how I can get started with
windsurf.
Fortunately for this example, just a bit of a difficult start I would say.