Windsurf vs Cursor: Time to Switch?

Hello, I'm Mike. Coming up, could it be time to put Cursor in the bin and switch to Windsurf? Even though I have a paid annual subscription that doesn't expire until later this year.

Also I'll ask the question can I vibe code with AI completely for free using open source software and Gemini 2. 5 Pro. But first, let's take a look at Claude as their API got a massive update this week, allowing you to get up to date information in model responses with the new web search tool.

So let's give it a go and see how well it works. Now you'll see this glowing tool icon here. I can click it and not only can I add custom tools, but I can also add web searches.

why is this good? It means if you're building with a Claude API from anthropic, you can add web search to anything you're making. So let's see how easy it is to add web search okay, restrictions.

We're going to go for none. But if you want to restrict it to certain domains or block certain domains, you can do that. You can also limit the number of times the tool is called.

I'm just going to leave this off for now. And if you want, if you're doing a local app, you can localize results to San Francisco, your city, your state, your country, your time zone. Really cool stuff.

I'll just add the tool unrestricted. Okay. With that done, you'll see a tool has been added.

Now that's all good. We're using the latest Claude 3. 7 Sonnet model and we won't put in a system prompt.

We'll simply add a user instruction. And for this I'll say tell me everything you can about the OpenAI acquisition of Windsurf this week. Okay.

It says I will search for information about OpenAI acquisition of windsurf and immediately based on results. It is giving me some information. Look at this.

It's pulled in all the results there. It's actually showing you what it's pulled in lots of new sources. And it does say that OpenAI has agreed to buy Windsurf, which is an AI assisted coding tool formerly known as coding for $3 billion.

Now, I love the fact that in the response, it's given potential implications such as OpenAI keeping an eye on what type of tools developers are using, and also that the discord server is already filled with concerned users, that an increase in prices and tiers is coming, or it'll only be available to ChatGPT subscribers, which is valid. I love the fact here that it actually cites the source that it's pulled that information from. And if I wanted to embed this into an app, I can click Get Code and it's going to give me all the code in Python or any other language I'm using to not only call Claude 3.

7, but also use that prompt and use the web search tool, which you'll see highlighted just down here. Next up, if you haven't seen my video from earlier in the week comparing free and open source AI coding tools, you should really check it out. Although I got a lot of comments saying that's all very well, but you're going to end up with a huge bill if you put Anthropic or OpenAI's API key in and keep calling for long code bases.

But it got me to thinking Void was a clear, free and open source AI coding tool winner from that video earlier in the week. Can I use it to code completely for free? and the answer is probably yes.

Now, in my other video, I gave an in-depth look using Claude 3. 7 Sonnet. But if I go into the settings and look at the models available, you'll see the Gemini 2.

5 Pro preview is available. The Google IO edition. Now this is said to be better at code, have better video understanding, have better function calling.

So I thought it's free as well. Why don't I try and use it in Void. And then I've got a completely free AI coding solution.

To get this to work, I'll need to go to Google AI studio, grab an API key. Scroll down until I find Gemini. Paste it in here and then you'll see up here.

All of these models are available, including that very latest release that came out this week. Now I can get rid of void settings, and I can switch my model over to the very latest Gemini 2. 5 Pro Preview 05-06.

And now let's try coding completely for free. Make The Matrix style falling rain that opens up in a web browser. okay.

You can see it's springing into action here. It's already inspected the folder. It's creating files and writing files for me and making them over here.

Okay, that was quick. It seems to be here. Here is the code.

I'm going to reveal it in the finder here. Double click and boom. Yep, that's a tick Gemini 2.

5 Pro. The latest model can make really good looking Matrix rain. Make a new web page with bouncing colorful letters that get more bounce the over time.

Okie dokie. Here we go. It's generating a new file standby.

And we'll have that bouncing letter web page. Okay. And sadly, here it is.

Overwriting the original index. Not creating me a new page, but let's give it a go. So with those changes accepted let's reveal it in the finder again double click.

And not too sure about this one Gemini 2. 5 Pro, Make a fractal animation inside a web page that gets more and more complex over time. And again, it's zooming along at a rate of knots, creating that fractal animation that evolves and becomes more intricate over time.

Yeah. Okay. Iterations one two.

This is interesting. Not quite the fractal I was hoping for. Looking more like a growing tree on the screen.

But still well done. Google. The best thing you did so far is the Matrix rain.

In the interest of fairness, I'm just going to put the same prompt in again. And you'll notice I've selected Claude 3. 7 Sonnet latest.

Let's see how Claude does with this complex or potentially complex task. Let's take to accept everything will reveal this in the finder. Double click and boom!

Wow. Well, yeah, I got to say that this definitely looks more complex and more interesting from Claude 3. 7 Sonnet as opposed to Google Gemini.

But remember, it's all about how you prompt things. The better the prompt, the better the result you'll get from your AI coding tool. So yes, definitely you can code for free using the free and open source Void Editor and Gemini 2.

5 Pro. Take a look at this. This is going even more complex, And remember, if you're looking for something that works reliably all the time, you might want to look into a paid option.

Windsurf. Take my money. Yes.

I'm running low on credits, but I want to upgrade. And I think that this price is an absolute steal. It's actually a lower cost to use certain models, such as GPT 4.

1, which is on promo at just a quarter of a credit right now. get an interactive web browser right inside your coding tool, where you can point and click at things that you want to change, and then update your prompt. It's also, in my opinion, much easier to set up MCP servers you can actually configure over here.

And they've got a plugin store which loads up right over here. And I can install a bunch of stuff. I think git is a good idea.

Oh, and nice to have when you pay. Yes, the ability to customize your app icons. Now I like the new Windsurf logo personally, but if you want you can always switch back.

You can also have all these other options as well. So the choice really is yours. But let's not waste any more time.

I'm going to switch over to GPT 4. 1 as it's on promo right now and start vibe coding an app. now the chat GPT 4o image generator is available on the API.

It's huge, and I want to create a quick SaaS and see if I can launch it, so you can try it by the end of this video. Make a simple single page website called Pimp My Thumb. It should be simple.

And give one box that allows the user to enter a YouTube URL. They click a button and it generates a better version of that thumbnail. Don't make the backend or add any functions yet, just the landing page.

There we go. My prompt is there. Now I also want to work on the color scheme.

And I got to say that Adobe have a really cool color scheme designer here. Now I can use this wheel to make my own color. I can change the color.

How many if I want to dial in how my website should look. But I'm actually going to go through and explore here until I find something I quite like. and as I'm going through.

This one definitely stands out to me. So I like this color scheme. All I need to do is copy the XML over here.

make it dark mode and use this color scheme. And then I'll paste in that XML. So now we've got a full prompt.

Let's hit enter and let GPT 4. 1 go to work for me here okay. Immediately it says I'm going ahead I'm making this.

Okay. And it's finished. And what I really like about this is you can open the preview right here inside windsurf.

This is definitely different to cursor where I'd have to open a new browser. And this is awesome. It's using my color scheme.

Generate thumbnail paste a YouTube URL. Very very simple stuff. Down here in my preview you'll see send elements and send console errors.

So if I had an error in my creation it would flag it up and I can send it back to the chat to get it fixed. But also I can send an element so I can now select anything that's being created on my new design, like for instance, the generate thumbnail button. And I can reference it exactly down here in the chat.

This is fantastic. Add the magical sparkles emoji to this button. Okay, look at that.

Looks good. Let's send it Okay, it's editing the index in real time. It said it's going to add those sparkles Now we'll click refresh.

Boom. We've got magical sparkles next to generate thumbnail. That's how easy it is to make updates inside windsurf.

So let's continue with the project. Earlier this week, I was playing with Amazon Lambda to create a YouTube thumbnail editor. Essentially, this is something that runs on Amazon's infrastructure to do all of the GPT 4o image API calling and image generation and storage of it in something like Amazon S3.

So I don't have to put heavy weight on the website I'm designing. I can hand it all off to this function. If you're interested in seeing how I build the function, let me know in the comments down below and maybe I'll do a video about that in the future.

So essentially all I need to do is hand off a video ID and a prompt like this one here to my little function I built on Amazon’s server. And it will go ahead and do all the heavy lifting for me. When a URL is entered and generate thumbnail is clicked, I would like you to hand off to an Amazon Lambda function.

I'm not sure exactly how to give you the information you need, so let me know what you need to make this work. And here's the prompt you'll need to send there. Hit enter and let it go to work.

Now we don't need to know everything about anything, so I don't know how to call a Lambda endpoint, but Cascade is going to do it for me. Okay. After reading that, that seems to make sense.

Here are the Amazon Lambda URLs. Please make a smooth generating animation that fills up a percentage bar in a really cool way until the thumbnail is generated. Okay.

And straight away it's created. Python. An environment file and lots of JavaScript for me.

So I can accept this stuff and have it generate what I need. Now it's going ahead and setting up all of my Python requirements here. And now we can open it in an external browser.

That's really easy. Here it is. And here's my channel with a thumbnail that I'd quite like to change.

So let's copy the link. Paste in to Pimp My Thumb and generate the thumbnail. And look at that.

How beautiful is this? Generating the thumbnail right now in front of my very eyes. Let's wait for it to complete.

And what do you know? It's generated a pimped up thumbnail, which I can even download. Nice.

Instead of download thumbnail button, I'd like before and after buttons, the after button should be highlighted. And then if someone clicks before they'll see the thumbnail before the new generation. Okay, that's a pretty easy UI update.

Let's accept it. Okay, not too bad. There.

I am looking a little bit crazy, but if we click before we can see. I started like this. And I ended up like this.

A little bit of a fatter face, but, we’ll forgive that. That's pretty interesting, right? There you go.

I have pimped my thumbnail. Now I'm going to use this fantastic Windsurf feature. Send elements, and again we can click around here.

Maybe we can select both the buttons. Make sure the before and after buttons are outside the dashed box that contains the thumbnail. Also, add a button below the thumbnail to say share to remove watermark.

This will create a share link for X and also a link to pimpmy thumb. com. Okay.

For our final test, let's try this one here. Copy the link. Paste it into.

Pimp My Thumb. Generate the thumbnail. The suspense is killing me.

And look at this pimped thumbnail. Before and after. Before.

After. Not too bad. Let's try sharing to remove the watermark.

Now, if we hit that URL. Look at this. We can now see pimp my thumb.

Check out the enhanced before, after, and the opportunity to create your own. It's really rather good. All right.

I'd like to set you loose on this. Please don't burn through all my OpenAI API credits. I might leave it open for the weekend or so and take it offline if the server melts.

So, how to deploy? Well, first let's get a domain name. How about pimpmythumb.

com? Perfect. Let's buy it.

So let's start a new chat with Cascade. And how easy is it to deploy? Well, there is this deploy icon again.

Another bonus over here so you can deploy your apps straight inside. Windsurf. While retaining control, which is nice.

Deploy your website. This is beta. Let's try it.

Deploy my application and let's see what happens. It's creating. Gitignore it's creating a configuration file for the web host.

Now, this all looks really good and really straightforward for someone who's beginning with deployments. But as I want to retain a little bit of extra control, I'm going to cancel this process. Put it in a Docker container and send it to my web host.

Dockerize this app. Okay. You see, over here is created Docker compose and a Docker file as well.

And a docker ignore for me. I already created a Gitignore. Which means all my sensitive files don't get uploaded.

Create a new repository for this and upload to my GitHub. And hopefully now windsurf should use the MCP tool. So now first of all it's checking all the different files, analyzing what's available.

Okay. So it's going to head analyze all the files. And now it's getting GitHub information here.

It's creating a repository for me. This is all happening on automation. And I can already see here that it's created my own repository.

Okay? The website is live. Let's check it out.

And we're going to hit pimpmythumb. com. Yes.

It works. Fantastic. Let's try this on the web and find.

I really don't like that thumbnail, actually. So let's try and improve it by pasting the URL. Generate thumbnail.

And there we go. Let's try. It's kind of skewed with the images a little bit.

There. That's before. This is after.

Before or after. Not too bad. I can share it to remove the watermark.

It takes me to X. This is a brilliant pre-populated post along with a link to the sharing page. This works, so go ahead and try it yourself.

PimpMyThumb. com. Use it, break it.

Tell me what's wrong with it. Just don't burn all my open eye credits. Please, leave it open for at least this weekend.

Maybe longer if it proves to be a hit. I really hope you've enjoyed all the tools and fancy AI coding things I've had to show you in this video. As you probably guessed by right now, I really enjoy doing this every week.

I hope you enjoy watching it. Thank you so much for watching! A like and a sub would also be appreciated.

And YouTube is showing a video on your screen right now. You should watch next. Thanks.