Step-by-Step Guide:Windsurf Editor - AgenticAI IDE by Codeium for Coding

Windsurf Editor by Codeium is a Cursor challenger and it looks pretty good. It's an Agentic AI Code editor. Check out this step-by-step guide to build an application in Windsurf in simple steps.

I have been a fan of Cursor to date for all my coding tasks. I have tried Bolt.new as well but somehow my experience hasn’t been great. Many people have built some fantastic use cases with Bolt.new, you can check that out on YouTube.

Today, I want to mention this wonderful tool, Windsurf Editor, which Codeium recently launched. Codeium as a product is pretty famous in the dev space for auto-suggestion on code completion. Windsurf Editor is another killer product by them. The claim to be :

The first agentic IDE, and then some. The Windsurf Editor is where the work of developers and AI truly flow together, allowing for a coding experience that feels like literal magic.

My first impression of Windsurf Editor is "Wow". I really liked the tool. It has its own agent as well and a good code editor. It has a similar composer-like feature called Cascade.

Built to keep you in flow state

Flows = Agents + Copilots

The Windsurf Editor is powered by an AI that can both collaborate with you like a Copilot and tackle complex tasks independently like an Agent. The AI is completely in sync with you, every step of the way.

This is what they say when compared to Composer in Cursor

Cascade is better than Composer when working on existing codebases Cascade is better than Composer at context retrieval to groundwork Cascade is faster than Composer.

Our hypothesis is that Composer doesn’t yet have the depth of knowledge understanding, the full gamut of tools, or super fine grained human trajectories, which likely restricts its usefulness to zero-to-one applications.

Idea: Let’s build a small Sticker generation app with Windsurf Editor

Step 1: Write your Idea

Write your idea in a document, and give it all the necessary instructions. Whatever is required, the API document or the API token. In this case, we will be using Replicate to build the application, so I'll be copying and pasting all the Replicate library documents for reference.

I have created a file called IDEA.md and pasted the below instructions.

# Product Name: ImageGen

I want to build an Skicker Generator app, where I can give a prompt and the app will generate a sticker image.
I want to give the prompt in the left side and the generated image in the right side.
I should be able to download the generated image.
The application should be responsive.
The application should be fast.
The application should be easy to use.
Make the UI beautiful and intuitive.
Build it with Replicate

Guidelines:
1. Create a .env file and add your Replicate API token.
2. Create a FastAPI server.

# Tech Stack
+ Python
+ FastAPI
+ Replicate
+ HTML CSS JS

# Replicate API

Client Library: pip install replicate

REPLICATE_API_TOKEN= " YOUR_API_KEY"

## Import and Setup Client

Link: https://replicate.com/fofr/sticker-maker 

import replicate

Output Template:

output = replicate.run(
    "fofr/sticker-maker:4acb778eb059772225ec213948f0660867b2e03f277448f18cf1800b96a65a1a",
    input={
        "steps": 17,
        "width": 1152,
        "height": 1152,
        "prompt": "a cute cat",
        "output_format": "webp",
        "output_quality": 100,
        "negative_prompt": "",
        "number_of_images": 1
    }
)
print(output)

Output JSON:
{
  "type": "array",
  "items": {
    "type": "string",
    "format": "uri"
  },
  "title": "Output"
}

Below is how the replicate instance will look like for the model. It will have all the Python or Node.js or other API details. Just copy the instructions on this page in the Idea.md document.

Replicate URL : https://replicate.com/fofr/sticker-maker

Step 2: Go to the Cascade section and ask it to create an app based on the instruction

Instruction: Build an app based on @idea.md

Step 3: Run the command and check how your app is getting built.

It has it’s own AI Agent that acts like a product manager, that first understands the requirements before building the application.

• First, it analyses your idea.

• Gives the steps it will follow

• Then, it creates a requirements.txt file.

• Next, it creates a main.py file.

• After that, it creates index.html, a CSS file, and a JavaScript file.

• It also creates a .env file and a README.md file, which includes a complete instruction on how the application works.

Step 4: Run your application in the terminal

Once your application is ready, this is how your file structure would like like

Cascade will give you the option to run the code in the terminal, but I prefer to run the code on my own. I will share the reason for it later in the blog.

python main.py

Once you run your main.py file, it will open a uvicorn server from where you'll be able to run your application. Your application will start on localhost:8000

Go to the url : http://localhost:8000/static/index.html

Step 5: Enter the prompt and check the image.

My Feedback:

The application as you build might give a few errors, but it’s pretty much there and in a couple of prompts you can see the app.

Positives

• Fast and Accurate File Rendering with Full Contextual Awareness

  • Renders file structures quickly and efficiently.

  • High-quality rendering combined with impressive speed.

• Product Management-like Functionality

  • Acts like a product manager by generating a Product Requirement Document (PRD) before executing tasks in a Readme.md file.

  • Details what's going to be built, including feature sets, before starting development.

  • It feels like you are collaborating with an assistant.

• Simple and Intuitive UI

  • Clean and clutter-free interface.

  • Simpler and more user-friendly compared to Cursor.

• Revert to Old State Feature

  • Provides the ability to revert to a previous state, particularly useful when code works initially but fails after additional prompts.

  • This feature exists but is not intuitive to locate or use effectively.

Feedback for Improvement

1. Intuitiveness of Revert Feature

   • While reverting is possible, it isn't clear or easy to find.

   • Suggest enhancing the UI to make this feature more evident and user-friendly.

2. Limited Model Availability

   • Currently offers only three models: GPT-4o, Cloud 3.5 Sonnet, and Cascade Base.

   • Expanding model options could improve versatility.

3. Missing Features Compared to Cursor

   • Document Attachment: Cursor allows API documents to be added as references.

   • URL-based Referencing: Cursor enables users to input URLs for API documentation, keeping it accessible for reuse.

   • Image Upload: Lacks image upload functionality in the Cascade Tab.

4. Integrated Terminal Limitations

   • Terminal executes commands but doesn't display ongoing activity like logs or outputs for running applications.

   • Developers need better visibility into the commands' execution status and results.

5. Feature Suggestions

   • Add functionality to attach and reference external documents.

   • Improve terminal output visibility for real-time debugging and application tracking.

   • Enhance Cascade Tab features by enabling image uploads and expanding its utility.

Overall, I am quite satisfied with this product and would recommend anyone trying to use it. I am confident that it’s gonna improve itself further. Looking forward to getting a full-fledged Product Manager + AI Coding assistant.

Website: Windsurf

Funding: Raised around $215 Million USD till date

---

We have a new update from Codeium Windsurf Editor - Wave2
Check out the latest updates here:

---

If you want to learn more about Cursor, read my previous blog

Cursor IDE : Reduce your development time by upto 50% and Ship Faster

---