Exploring Windsurf Editor: Features, Modes, and Next.js Integration

In this article, we dive into Windsurf Editor after installing and exploring Cursor AI in the previous piece. Following similar steps, we’ll create a simple Next.js application, examine Windsurf’s AI-powered suggestions, and share insights from the experience.

Initial Impressions

From the start, you can select your preferred theme. If you choose the same theme as in Cursor AI, you’ll notice little to no difference, aside from minor variations in a few components.

Let’s build a Next.js application based on the following requirements:

1. Home Page:

   • Sticky header: Logo on the left, search input in the center, login icon on the right.

2. Hero Banner:

   • A carousel with three images.

3. Hero Products:

   • Below the hero banner, display four products in a row with:

     • Image

     • Name (clickable, linking to a details page)

     • Rating (1 to 5 stars)

     • Description (truncated to 100 characters, followed by ‘...’)

4. Footer:

   • Logo on the left, ‘Copyright’ text in the center, and links for ‘About Us,’ LinkedIn, and Twitter.

AI Assistance Modes in Windsurf

Windsurf offers two modes for interacting with its AI assistant:

• Write Mode: Enables real-time collaboration with the AI assistant, allowing you to review and approve suggested changes as they are made.

• Chat Mode: Provides step-by-step suggestions, giving you the flexibility to incorporate changes into the codebase at your discretion.

Write Mode

This feature allows Windsurf IDE to execute terminal commands directly within the communication screen.

For instance, the AI assistant shows output and suggests terminal command options within the same window.

This is practical, as it consolidates the process of coding and command execution in one place—a feature I found particularly useful.

Chat Mode

Switching to Chat Mode, I asked the AI assistant to:

1. Generate an icon with four overlapping triangles and save it to /public/icons/icon.svg.

2. Rename all references to /logo.png with the appropriate link.

Chat Mode closely resembles standard AI assistant interactions. While it’s helpful, I encountered some difficulty in creating new files during this process.

Unlike Cursor AI, Windsurf offers options to Copy/Insert or Preview/Apply suggestions but lacks the ability to ask follow-up questions directly about the suggestions.

Along with applying the changes you can see what is removed/added in your code editor.

Bug Fixing

Windsurf is effective at resolving errors and providing fixes. However, one limitation is the inability to quickly reference code from the error log—you must copy and paste the log into the AI chat to request clarification.

Despite this, the suggestions for resolving errors were accurate and helpful.

Conclusion

After spending about 30 minutes installing Windsurf Editor, familiarizing myself with the UI, and creating a Next.js site, I was able to replicate the site-building process I performed with Cursor AI IDE.

Windsurf is an impressive AI-powered IDE. Its functionality feels similar to Cursor IDE, but its Write Mode stands out for making significant changes more consistently than Cursor’s Composer mode, which requires separate terminal executions.

Features I’d like to see:

• The ability to ask questions directly about AI suggestions.

• The ability to reference log messages within the AI chat.

On the other hand, I didn’t miss inline mode suggestions here—a feature I rarely used in Cursor.

Given that Windsurf has a robust free version and slightly more affordable first-tier pricing than Cursor IDE, it’s a compelling option to explore, especially for smaller or medium-sized projects.

I look forward to testing Windsurf on more complex projects with larger codebases to identify more distinguishing factors.