TL;DR Why be a 10x engineer when you can be a 100x engineer? Codeium Windsurf, like browser-based LLMs for code generation, is a productivity multiplier. However, to maximize its benefits, you need to learn which features to use and avoid rushing.
Welcome to the second part of our series on Codeium Windsurf. If you haven’t yet, check out Part 1 to get detailed insights into what Windsurf is and the features it brings to your coding environment. In this section, we’ll explore how you can leverage Codeium Windsurf’s features to accelerate your coding projects using real code examples.
Cascade For New Applications
Most developers have incorporated model prompting as part of their code generation toolbelt. It could be generating a complex regex pattern or something as mundane as an enum class.
There is a learning curve to create the necessary context for a relevant response to complex prompts. Most of my code generative prompts have been limited to the scope of a method or sometimes a class. I haven’t asked for a detailed code response with a scope larger than a class.
Now, I’m starting a brand-new application with the mindset of exploring the boundaries of what prompts can achieve. I feel like a kid in a candy store being asked, “What would you like?” My response? “Let’s start by asking for everything!”
My Simple App
I started with Codeium Windsurf’s “Getting Started” personal website option with Cascade because it would generate the first prompt to get going. I thought this would be a good way to see what it would include in the initial prompt.
I didn’t modify the provided prompt for the sake of the experiment, but I probably could have provided a little information on who I am.
Warning: The following prompts are way too ambiguous if being used for a complex and mature application.
To avoid cluttering this post with numerous screenshots, I’ll simply share the prompts I used to build out the website’s functionality. Again, my prompts are intentionally vague to test the boundaries of what context I include in the prompts versus what context the existing code provides. This approach aligns with the whole point of integrating a RAG tool into my development process: spending just enough time to craft a prompt so that the tool can work its magic.
I will include some screenshots of response fragments that really assist the developer. My prompts will be displayed as below:
Will you create a section for my dogs?
I was surprised! Cascade offered suggestions of what can be added to the page to make it more detailed and well-rounded.
Will you create this application as a react application?
Cascade verified I already had the React environment set up and it offered to get npm dependencies.
Another productivity multiplier surprise here is knowing all the steps that are needed to get the application technology changed and in a state to run. Huge accelerator boost! Nice!
Will you add a section where I can add my technical blog posts that can be filtered by keywords?
Similar to the initial prompt, this was another instance where I was curious to see how much functionality would be inferred without providing detailed instructions on the page’s appearance and behavior. Cascade again provided a nice summary of what was added. However, when I ran the application…
Oops! We’ve encountered our first issue! Should I take the easy route and ask Cascade to fix a dependency error? Absolutely! Let’s embrace the 100x approach and try it out.
receiving this error: ERROR in ./src/pages/BlogPost.tsx 11:0-73 Module not found: Error: Can't resolve 'react-syntax-highlighter/dist/esm/styles/prism' in 'c:\workspace\rag\windsurf\CascadeProjects\personal-website\src\pages'
It turned out to be a markdown dependency issue that Cascade was able to resolve after a couple of tries.
With the application now running again, the only thing missing was a menu item, which I had expected to be included. When I requested it in my next prompt, Cascade kindly added it. Additionally, Cascade generated the first blog post based on the exact tech stack it was using.
Now, for our final feature for this example.
Will you add basic username and password authentication of username 'john' and password 'password' so that I can access a protected menu option "Settings" if I authenticate?
With a successful solution to that last prompt, the React application I ended up with would have taken me 100 times longer to build if I had coded it by hand.
After just a few prompts, here it is!
While it isn’t ready to be an enterprise-level app, it gets me extremely close to having a personal website in a really short amount of time. This success keeps my excitement up about what Cascade can do.
I was impressed with the ease of creating a React application and using prompts to add additional pages and features. There were several issues along the way with what was generated that I didn’t include, but I prompted Cascade to fix all the errors, and it did so – usually on the first try. This experience makes me even more excited to push the boundaries of what Cascade can do!
An App With Logic
My second experimental application is a Sudoku game built with Flutter. I want to try out another language that offers more project configuration. I also want to build an application that requires logic to be separated from the presentation, while still keeping what I’m calling my UI-centric prompting in the Cascade panel. By UI-centric prompting, I mean the prompt directs a UI change, which may also require significant updates in other application layers to support that change.
This time I was a little more specific in my initial prompt, but obviously not detailed enough to allow for a lot of assumptions. Cascade shouldn’t know me by now, but it did pick my favorite color for the main theme! ♥️
As a Flutter developer, I want to create a sudoku game that is adaptive to work on phones and in a web application. The game view should have a header section, a game board section, and a bottom section that contains the numbers. The numbers should be on two rows with 1 through 5 on the top row and 6 through 9 on the second row.
To avoid making this too lengthy and to keep it focused, I’ll skip the specific prompts I used for this example and just summarize the experience.
I already had a lot of React infrastructure set up on my computer before starting the first example, so all I needed to do was install the npm dependencies. However, for this Flutter project, I didn’t have much set up initially. Once Cascade identified the tech stack it would be using, it ran some command prompts to check if the environment was properly configured to develop and run the stack. This is a great time saver when working with a new framework or language, as it shows exactly what needs to be installed and configured. Cascade even offered to help install Flutter to get everything set up.
In this example, I focused on more application logic and wanted to test the prompt boundaries of application and project structure without being overly specific in my requirements. Cascade did a great job of organizing the application into packages and classes.
However, the SudokuBoard class started to show some code smells due to a lack of separation in board state management. I prompted for the board state to be preserved across application lifecycles, and it kept that functionality in the SudokuBoard class. To assist in developer review, Cascade provided helpful comments at the class, method, and line levels, only adding line-level comments when something complex was happening.
Project Structure:
Surprise Finding
After Cascade applied a solution after one of my prompts, it offered some feature suggestions:
- Add a game completion check and celebration dialog
- Implement a timer to track solving time
- Add a hint system
- Create a scoring mechanism
- Add undo/redo functionality
- Implement a settings page for customization
This example far surpassed the 100x goal. In just about three hours of prompting, including some prompt and code reverts (more on that in the final thoughts), I had a very robust Sudoku game ready for end-users on a variety of devices. Assumptions are generally risky, but they worked out well in this case.
For example, I didn’t have to specify that each difficulty level button should be a different color, with more severe colors for higher difficulty levels—Cascade handled that nicely. These may not be the final colors, but they quickly highlight important details.
To be clear, I did not manually edit a single line of code.
Current product:
Prompts In-Code
So far, we’ve seen Cascade being used in the conversation-style format with Codeium Windsurf. This format is what we’re most familiar with across model interfaces like ChatGPT. However, Codeium has integrated several other features into an IDE, opening up additional possibilities for code generation assistance.
In Part 1, we covered features like Supercomplete, Autocomplete, and Command that also provide 100x potential. These features work in the code while you’re writing the code, giving you more focused and tactical suggestions. Here is how I used them in the projects I shared with you above.
Autocomplete
When writing code to add a new HeaderWidget to the Sudoku application, Autocomplete assisted in adding relevant code suggestions with each step. I began by naming the class HeaderWidget and Autocomplete immediately started offering suggestions.
The screenshot below shows the result of accepting several suggestions, with the gray text indicating the next generated code suggestion. Autocomplete used the class name as the context to help predict a relevant code suggestion.
Creating a new method starting with a comment provided more explicit context for the full method along with the surrounding code.
Autocomplete with a comment hint:
Supercomplete
Supercomplete uses a different context than Autocomplete to suggest changes based on developer intent and to relate different pieces of code based on that intent. For example, Supercomplete predicted I wanted to rename “chatMessage” to “chatMessageViewModel”, so it suggested renaming the other occurrences of “chatMessage” after I changed the name of the method parameter.
Again, the gray code is the suggested change.
Supercomplete was a little flaky for me. Autocomplete and Supercomplete are supposed to work in harmony, but sometimes they get confused about what to suggest. The screenshot below is another try at getting Supercomplete to predict my intent. The example here looks like it and Autocomplete are suggesting half of two different code solutions.
Thoughts
Likes
I’m impressed with where code generation RAG tools stand today and excited about where they are heading. There are many tool options out there now, and ones with new ideas will continue to be released. So far, Codeium’s Windsurf stands out as my top choice, but I’m eager to explore other options and see how they compare.
I do appreciate still having the developer-in-the-middle for reviewing and deciding whether or not to accept the suggested changes. I found Autocomplete and Cascade to be my most used features, but I would like to explore Command more.
I mentioned this in my code example, but I want to highlight it again. Cascade’s awareness of what features a developer may want to add next, combined with its strong bidirectional dialogue in the conversational flow, is worth emphasizing.
Suggestions of features:
If you have a model preference with the proper Windsurf license, you have that configuration option.
Dislikes
Supercomplete isn’t there yet for me, but I would imagine predicting developer intent is a challenging task. Having Supercomplete and Autocomplete interjects at the same point may make it difficult to have them work in harmony.
Another consideration is ensuring the feature you want is supported by your IDE and license version. For instance, Cascade—a standout feature—requires Codeium Windsurf and isn’t available in all setups. There may also be other limitations or conditions tied to specific features, so it’s worth taking the time to review compatibility before diving in.
Finally, credits are a part of the licensing model for certain features, which adds a layer of complexity I’d rather not think about while developing. While Codeium Windsurf makes it easy to check your credit balance within the interface, having to manage credits can sometimes feel like a distraction from the development process.
Needs Tooling
As with any software development, tooling is important to keep code healthy. As with other generative processes, things can go well for a while until they start to go south very quickly. Go too far south, and it may be easier to start over than to try to course correct!
To help prevent unrecoverable events, automatic code commits after each accepted prompt-generated change are needed. There are a few benefits to this. The main one is that it makes it easier to revert to a specific time in the conversation. The importance increases as the application matures. An overly general prompt may cause other UI features to change because the model thought it would be nice even if you don’t like them.
As with any development process, automated security scans are needed to prevent vulnerabilities from being released. Even though the features offer diffs of the changes, every line or dependency may not be properly reviewed by a developer. Tooling increases in importance as more and more code is generated in such a short time.
Enterprise Options
Even though your code is indexed and the embeddings are only stored locally, code fragments do get sent to the hosted model as part of the prompt context. Codeium provides options if any code sent to the model is a deal breaker. Codeium offers segmented model hosting as well as self-hosting options.
Final
As I mentioned, this tool is a step in the direction of automated code generation. I envision future RAG agents being capable of ingesting user stories to understand requirements and another agent processing a testing language like Gherkin to determine what behaviors to test for code verification.
Creating effective prompts is a skill that requires refinement. Crafting prompts for Chat and Cascade differs from browser-based models, as you don’t need to include the specific code context in the prompt.
In the end, did I feel like a 100x Engineer with Codeium Windsurf? There were times in the process when I did feel I was getting close to that. I was on a roll with the Sudoku app and generated a lot of features in a few hours. I fell short when I was trying to go too fast. I didn’t take the time to properly review the suggested changes by Cascade. The old cliché still stands… “slow down to speed up.”
