WEBVTT 00:01.960 --> 00:07.120 In this lecture, we're going to do our first project with windsurf and get a bit of orientation to 00:07.120 --> 00:10.520 understand how windsurf works and where to find things. 00:10.840 --> 00:15.960 Now, first of all, if you find that the interface of windsurf looks very similar to the one of cursor, 00:16.240 --> 00:17.560 you are absolutely right. 00:17.800 --> 00:20.440 They both use VSCode as a base. 00:20.440 --> 00:23.080 So many things are very, very similar. 00:23.800 --> 00:28.880 Now the main thing that you will notice that is a bit different is this right hand side you're going 00:28.920 --> 00:31.000 to notice here Cascade. 00:31.520 --> 00:36.720 This is the AI component in windsurf and can be enabled or disabled. 00:36.920 --> 00:40.760 Now obviously you probably want to have it enabled all the time because the reason why you're using 00:40.760 --> 00:44.320 windsurf is to take advantage of the AI functionality. 00:44.360 --> 00:51.280 Now why windsurf decided to add an additional name and actually give a name Cascade to this thing is 00:51.480 --> 00:52.600 beyond my understanding. 00:52.600 --> 00:54.520 But anyway, this is the main idea. 00:54.520 --> 00:59.000 This is where we can provide our prompts and this is where we can start doing things. 00:59.080 --> 01:00.760 So just a bit of orientation. 01:01.080 --> 01:07.020 I'm going to say here that the left hand side is very similar to what we have in Visual Studio Code, 01:07.020 --> 01:09.740 where we have in cursor, so no big changes there. 01:09.740 --> 01:13.060 So everything that is a bit different is here on the right hand side. 01:13.060 --> 01:14.700 So this is exactly where we're going to look. 01:15.340 --> 01:17.260 Now first of all what I want you to notice. 01:17.540 --> 01:23.100 And I'm going to make it just a bit bigger because I think windsurf made things just a bit too condensed 01:23.100 --> 01:23.420 here. 01:23.420 --> 01:25.540 So it's very easy to miss stuff. 01:26.180 --> 01:29.220 First of all I want to point out this write mode. 01:29.220 --> 01:34.020 So write is essentially the mode that we want to use all the time. 01:34.020 --> 01:39.300 And the other mode is the chat mode, which is just the chat doesn't actually make changes. 01:39.900 --> 01:44.380 So let's put this to work and see a simple example to understand better how things are working. 01:44.900 --> 01:46.300 You have two options here. 01:46.300 --> 01:48.860 You can go ahead and click here open folder. 01:49.220 --> 01:54.380 And somewhere in your system you can create a new empty folder and get into that and start a new project. 01:54.380 --> 01:55.780 So that's one option. 01:55.780 --> 02:01.820 You can also let Cascade do its own thing and it will suggest a specific folder. 02:01.820 --> 02:05.260 So I'm gonna just ask it to build a very simple game. 02:05.490 --> 02:07.970 can also find this prompt as a resource to this lecture. 02:08.250 --> 02:13.210 But before we get started, one important thing I see here again Cascade Base. 02:13.210 --> 02:14.090 So what is this? 02:14.090 --> 02:15.890 This is the model that's going to be used. 02:15.890 --> 02:22.490 So if you click on this you're going to see here a list of models using Cascade Base is free as you 02:22.490 --> 02:23.130 can see. 02:23.410 --> 02:27.170 But honestly for software development this is a horrible model. 02:27.170 --> 02:33.450 So I tried it a few times and every time it did really weird things, so I really wouldn't recommend 02:33.450 --> 02:33.690 it. 02:34.210 --> 02:39.610 And right here on the list you're going to find other models that are interesting, and you also see 02:39.610 --> 02:42.010 exactly how many credits this is going to use. 02:42.330 --> 02:48.570 So currently GPT four one from OpenAI is a relatively cheap model and still a very good one. 02:48.770 --> 02:54.330 If you want to see more models instead of recommended, you can go here by provider and you can see 02:54.370 --> 02:56.290 multiple models. 02:56.290 --> 02:59.850 So in this case I'm just going to go with Gemini 2.5 Pro. 03:00.130 --> 03:04.810 I had very good experience with this model so far, and this is what I've also been using in cursor. 03:04.810 --> 03:07.170 So I think it's going to be a fair comparison. 03:08.070 --> 03:10.710 So I'm going to ask you to build this project. 03:11.430 --> 03:14.110 And the way this works is very, very similar. 03:14.270 --> 03:16.030 We're going to have here some panels. 03:16.030 --> 03:20.870 So we're going to see here you have the primary sidebar which you can enable and disable. 03:20.910 --> 03:27.350 Now currently we don't have any files it's going to use here a specific directory. 03:27.350 --> 03:29.630 So we just went a bit away. 03:29.630 --> 03:32.390 So this is where our project is going to be stored. 03:32.870 --> 03:35.310 And currently we are getting a few errors here. 03:35.310 --> 03:39.470 So it seems that it's trying to figure out its way trying to understand exactly what's going on. 03:39.910 --> 03:44.710 So because we haven't provided an empty directory, it's already a bit lost. 03:44.710 --> 03:51.070 So theoretically it should have been able to create this directory and start putting stuff in there. 03:51.470 --> 03:53.790 But probably this directory doesn't even exist. 03:54.470 --> 04:01.070 So this is where it's actually asking us to go and check inside this directory to see if this has been 04:01.070 --> 04:01.590 created. 04:01.590 --> 04:05.190 So I would say this is less than ideal for a start. 04:05.190 --> 04:06.710 But let's be nice. 04:06.710 --> 04:10.370 Let's take a look inside there and see if there's anything that has been created. 04:11.370 --> 04:13.090 I'm just going to go ahead and help the model out. 04:13.090 --> 04:20.890 I'm going to say this directory space shooter three.js does not exist inside Cascade Project as like 04:20.890 --> 04:22.330 why don't you just create it. 04:22.570 --> 04:28.690 So now it's going to provide us the command that we want to run in order to actually create this particular 04:28.690 --> 04:29.570 directory. 04:30.050 --> 04:32.930 So let's just give it a bit of time to go over this. 04:32.930 --> 04:37.210 And now we're going to see here on the left hand side we have the files. 04:37.730 --> 04:39.770 So currently there's no folder that has been opened. 04:39.770 --> 04:41.290 So this is a bit annoying. 04:41.330 --> 04:45.450 It's like a bit of the disadvantage of not starting everything in an empty folder. 04:45.810 --> 04:47.690 It's not able to do this properly. 04:47.690 --> 04:51.170 But for this initial experiment I think this is just enough. 04:51.650 --> 04:58.330 So finally the application has been built and we are being asked here to, yes, start a server. 04:58.370 --> 04:59.530 So I think that's a good idea. 05:00.490 --> 05:00.690 Yes. 05:00.690 --> 05:01.890 We want to see the application. 05:02.770 --> 05:05.890 Now this is the weird thing that has happened quite a few times. 05:05.890 --> 05:14.630 So even though I have a Node.js system, even though I've asked it to use a Node.js library. 05:15.190 --> 05:22.510 It has still not figured out that we actually don't want to build a Python project, and it still decided, 05:22.510 --> 05:24.830 okay, I'm going to start here Python. 05:25.350 --> 05:31.390 So Python is another programming language, and this is not necessarily what I wanted to see, as it's 05:31.390 --> 05:36.870 going to struggle a bit to figure out that this port is not available. 05:37.590 --> 05:41.350 If you don't have Python installed locally, that's going to be even more tricky. 05:41.350 --> 05:48.190 But I do have the impression that Python is the thing, that it is defaulting, or it's trying to to 05:48.230 --> 05:49.630 use it much more often. 05:50.350 --> 05:53.390 So let's see if it still manages to start this. 05:54.030 --> 06:00.390 Now, it's fair to say that I haven't been very specific in my initial instructions, so it's all my 06:00.390 --> 06:07.350 fault that it's going a bit haywire and it's having issues starting this, but I'm already noticing 06:07.390 --> 06:10.470 like a small difference compared to cursor. 06:10.470 --> 06:16.380 So cursor was just a bit smarter to understood, a bit better what I want and what's available locally. 06:16.860 --> 06:21.300 And I feel that windsurf is currently struggling here. 06:21.300 --> 06:24.700 So it's telling us hey, try NP surf. 06:24.740 --> 06:26.460 Yeah that's a good idea. 06:27.100 --> 06:30.740 So that would be something that's coming from NodeJS. 06:31.860 --> 06:39.780 We're going to stop the Python server and we're going to start the surf command which is based on NodeJS. 06:41.380 --> 06:44.100 And we can go ahead and open the preview. 06:44.300 --> 06:45.420 Don't run away from me. 06:46.740 --> 06:48.940 Is this going to be inside the browser itself? 06:49.940 --> 06:51.300 I don't think this is really functional. 06:51.340 --> 06:53.540 I'm going to open it in an external browser as well. 06:54.740 --> 06:54.940 Yeah. 06:54.940 --> 06:58.220 So currently this is this is really not doing anything. 06:58.980 --> 06:59.540 Yeah. 06:59.580 --> 07:06.300 This is at least using pretty much the same model providing the exact same instruction. 07:06.300 --> 07:09.220 The initial difference with windsurf. 07:09.900 --> 07:16.920 So I'm just going to give it another try with just a better prompt to see if it works better. 07:17.720 --> 07:19.400 So I said, this game doesn't do anything. 07:19.400 --> 07:20.440 Build the whole game. 07:20.960 --> 07:27.000 I'm just going to give it another chance so that we can actually get something working. 07:27.560 --> 07:31.240 I'm going to skip ahead to take a look at the final result to see if it is any better. 07:32.320 --> 07:34.160 Let's go ahead and refresh here. 07:35.760 --> 07:38.520 It's actually a different address altogether. 07:39.960 --> 07:43.040 That's an important aspect that we need to take into account. 07:44.640 --> 07:45.960 Now we can move around. 07:47.120 --> 07:53.000 There's no enemies coming at us and it cannot shoot any projectiles. 07:53.000 --> 07:59.120 So it has really started slow trying to implement just the basics, which is okay, but I would think 07:59.120 --> 08:04.000 for this simple game thing it could have done just a bit more. 08:04.560 --> 08:11.800 Anyway, this is probably the main difference, but in a nutshell, this is how I can get started with 08:11.800 --> 08:12.520 windsurf. 08:13.200 --> 08:17.160 Fortunately for this example, just a bit of a difficult start I would say.