Windsurf: The First Agentic Code Editor - New Cursor Competitor?

--- type: transcript date: 2024-11-17 youtube_id: tBN-u4WgyVw --- # Transcript: Windsurf: The First Agentic Code Editor - New Cursor Competitor? you're not going to believe it we got another code editor another one this time from codium build as the first agentic IDE the wind surf editor is the name of it free for two weeks where you can try this out you'll be able to get access to Claude 3.5 Sonic to be able to try all the cool agentic features out now I'm just going to quickly look at the post and the landing page here that I'll show you what it looks like we'll try and see how it actually works what makes the wind surf editor the first AI agentic it e and then some flows are the way that humans are meant to work with AI flows equals agents plus co-pilot the wind surf editor is powered by an AI that can both collaborate with you like a co-pilot and Tackle complex task independently like an agent and the AI is completely in sync with you every step of the way here we have a nice little diagram of what a flow is you have your agent your co-pilot and then in terms of the flow I think what they're trying to illustrate here is it's it's really like a human in the loop type of interaction you'll be able to put in your query and it will come back it will say here's your plan you have the option to accept it or reject it and then depending on what you do it will send it back and forth and you go back and forth just like that flows allow the dev niai to operate on the same state at all times creating a mindmeld experience Beyond just an assistant learn more about AI flows now the other thing within this is the idea of Cascades Cascade combines a deep codebase understanding a breadth of advanced tools and real-time awareness of your actions into powerful seamless and collaborative flow it is the most powerful way to code with AI full contextual awareness allows you to run Cascade on production code bases and still get relevant suggestions this is something that a lot of coding tools out there do really well on that 0o to one where you can build out a really quick application but as soon as it starts to get complicated it can struggle a little bit just targeting that I think it's a really good area like we want tools that can work well on existing code bases not just these cool little sample apps demo apps that are out there Cascade tools Encompass command suggestions and execution as well as issue detection and debugging in this example they say run the project and it analyzed the project and it essentially gave you the steps to walk through it that's pretty neat because it looks like it will be able to look at your file tree look at the files determine which files that you're going to need which files to actually start your program they mention you can also pick up where you left off with automatic reasoning of your explicit actions Cascade can pick up your work where you left off you also have multi-file editing like we have within something like cursor composer and then Cascade lets you build and refine complex code bases with ease then there's a handful of other features inline commands code lges super complete all of the AI settings in one Place command in the terminal highlighted code actions mentions in Cascade a lot of similar features to cursor and other idees that perform a similar task but definitely some new features as well like that AG gentic flows you can get win Surf Pro for 2 weeks when you download so full feature Cascade premium large models unlimited access to Super complete and fast autocomplete once you downloaded it this is what it's going to look like just like vs code it's going to be familiar you'll be able to access your extensions and all your familiar key bindings and all of that now in terms of this panel here so you can open and close it with command L on Mac or with this little button here at the top and then there's two different views within here you have your right with Cascade View and then you have this chat view with Cascade they say kick off a new project or make changes across your entire code base and then there's also the chat panel where you can ask questions or request suggestions for your code base or coding in general in terms of the model you have access to GPD 40 3.5 Sonet as well as Cascade base which is presumably one of their internal models now you can access at command similar to something like you would in cursor if you want to select particular files directories or coding context you can do that from there what I'm going to do here is I'm just going to start a new nextjs project I'm just going to say bun create next app we'll create it locally we'll accept everything now that we have the project initialized let's just start out with a a sort of simple idea I'm just going to say I want a very simple but beautiful portfolio page with a YouTube GitHub as well as blog link let's set this up to handle markdown blog posts and have a folder with three example posts we'll send that in and in this case I'm going to be using Cloud 3 .5 Sonet here it says I'll help you create a modern minimalist portfolio page with Social Links Etc first let me check what files we currently have in our workspace but analyze that it was able to determine okay this is a nextjs project with typescript Tailwind Etc and then there we go it's Off to the Races from there create first post coding Journey text tag here within our content folder we have our markdown files and then here we have the suggested terminal command I can just go and accept that and it will actually run this there we have our standard output we have some errors and then it recognizes that there are some errors and we can go and accept it if we want or reject it all right so it added those packages and now let's update the Tailwind configuration to include typography the other thing with this you can see all the modifications here as well anything that's untracked as well for versioning so you can help discern a little bit more than just from this panel to see what it's actually touching here we'll just install the react icons now let's create a blog page so you can click open diff here we see the post. TS within the lib file and then here we have our page itself the blog with the dynamic ID of whatever that page is quite a bit there you can accept them one by one you also have the ability where you can navigate between the different files or you can navigate between different changes it does look pretty flexible by the looks of it and you can also accept everything all accept it all and let's just go ahead and run let's open up our terminal let's Bund Dev and then if we were to open this up this video is brought to you by scrimba the Innovative coding platform that brings Interactive Learning To Life dive into a variety of courses from AI engineering to front end python UI design and much more scrim is gamechanging feature is their unique scrim screencast format which lets you pause the lesson anytime and start directly editing the teachers code their curriculum is built in collaboration with industry leaders including Milla mdn hugging face and align chain and includes building application with L mistal models and guides you on deploying projects to platforms like cloudflare while AI tools can assist with coding a solid grasp of the fundamentals is essential for achieving real experience scrimba offers something for everyone from complete beginners to Advanced developers and about 80% of scribus content is completely free sign up for a free account today using my link below and enjoy an extra 20% discount on their Pro plans when you're ready to upgrade I'm sure you'll love it here we go I didn't ask it for something too too challenging right but let's see if it actually works so read my blog all right here are our blog posts and we see the favorite Tex do coding Journey as well as welcome to my blog these are all within the markdown files just like that and if I click within here there we go that's pretty amazing with just really one prompt and a little bit of human in the loop or flows working through those questions we have a full stack nextjs site doesn't look great but again this is one prompt right so let's just work on this a little bit there's some obvious things let's add a nav and a footer we'll submit that it's going to create the [Music] one now the other thing with this is you don't see it all streaming out but that isn't really an issue that doesn't really bother me at all it's doing everything in quick succession right I don't think we necessarily always need to see everything streaming out though we have our nav we have our footer and it is nice we can just click through like this we have our layout update as well we're updating those components into the layout they're here globally the nav and footer and just to look at the nav for a second it does have the correct links as well it has the proper context and all of that and so it says now let's update the page component to remove the Redundant main wrapper since it's now within the layout you can see the files that need review just like that and the other thing to note with this is you don't need to click yes to preview the changes like you do within something like cursor they just apply by themselves so here we see the working copy of what we just asked for and if we go back here we can go to the homepage and we can access the blog and it's all just working right this is pretty great like the big thing with this like it's similar to bolt. new right but this is locally right you have complete control it's a proprietary product there is going to be a fee for it to be able to access the models and all of that right off the bat you can see how quickly you can potentially build with something like this now it says you can customize the site further update your name we can add in the URLs and we can add in the YouTube URLs and the GitHub URLs so let's just say add in developers Digest we'll just say for the name add developers digest and also for the homepage let's give it a unique animation and a linear gradient of black and purple we'll submit that and again these aren't really complicated things that I'm asking more questions on how it will perform navigating the directory creating new components editing files and all of that in a moment I'll ask it to do something a little bit more complicated as well it made some changes it edited the nav the footer it edited the global CSS and the page. TSX let's just go and look at this we have developers digest and now we have this nice little animation here again it's a pretty simple page let's say on the homepage give me a sidebar with the latest blog post and for the blog post page let's add a Mech mechanism to tag them with particular topics this one's a little bit more involved right the sidebar not too bad but in terms of the mechanism to tag them for particular topics I'm going to be interested to see how it decides to do this it's going to add the sidebar with the latest blog post to the homepage and implement the tagging system for the blog post it says first let's update the blog post markdown files to include tags so now if we look within the blog post right at the top here we see these tags so introduction as well as personal I like that approach in terms of setting up the tags now if I look at the posts themselves we have lib post and in terms of How It's setting up that post we see now that it's going to access the tag which is an array of strings so then here it's creating a sidebar of the latest post here it's going to iterate through that and then it's going to edit the page of where it's going to put the sidebar and then it's making the edits of where to to put the sidebar it's creating the tag filter as well then it also created a tag filter and then it's going back to the page to add that tag filter this is really pretty amazing now if we go back to this here we go so here are our latest post we have these tags if I view them I have all of the tags here I have this mechanism where the tags are working like this is really impressive like the big difference here is if I was using another tool like cursor is I would be using the at command for all sorts of stuff because I find especially in something like nextjs where it can be a relatively complicated file structure if you don't specify like where you want things or what files to reference sometimes it will just create new files and not really know or sort of groc that understanding fully of the context and you sort of have to piece together those pieces but this flows thing like riding on this Winder thing it's pretty nice right let's take it a little bit stuff further let's try and make it a bit harder I'm going to say now I want a chat cheep style chatbot page now our site has our title all right let's see if it can do something with an AI model chat messages it made a chat messages component here within this this is going to be how it has the user or the system message depending by the looks of it made a component for the chat input the typing indicator it even made a component for now let's add typ typing animations to our global. CSS there are some really nice things here so you can see what it's doing in terms of insertions deletions I really like that sort of git feel where you can see what is it adding what is it removing just being able to see that at a glance is actually quite nice all right now if we go back we have our home we have our blog now if we go to chat we have this chat box here we have a simulated response from the API we have those nice little icons there and that's pretty impressive right it really wouldn't be that far off just to set up a simple back end like you could do that in 10 lines of code to stream back a response with something like Lang chain the versel AI SDK even the open AI SDK to set up a simple chat bot so this really gives you a sense on what you can do this is great like I definitely going to be using this a bit more uh I'll potentially try and showcase some other things that I find over the coming weeks but I just wanted to do a bit of a review on this new wind surf tool kudos to the team at code him