Mastering Windsurf AI: Top 3 Tips for Better Development & Learning

[@A_Me_Amy]

The fact that like even if you don't know what you're doing you can start and dive into a bunch of stuff and then just try something and then start asking questions and try to modify it and learn why it didn't work but the point really is like you got to make sure that you're asking questions and your your adding to your knowledge base over time.😊

[@marioeduardo]

I really liked the strategy of persisting the game plan! Thank you for the tip!

[@jankoWTF]

Glad it was helpful!

[@jamesallison9725]

great video it totally agrees with my experience with Windsurf and writing SwiftUI code. You are hitting all the points that my experience has shown so this is great guidance for anyone at any coding level

[@jankoWTF]

Great to hear that and thanks for sharing 🙂 I feel like we can all help each other out by sharing knowledge and it's awesome to hear that you agree/made similar experiences

[@jayhu6075]

What a great process plan for starting with AI development. Many thanks.

[@jankoWTF]

Many thanks back to you 🙂 glad I can help a bit and that you liked the content 🙂✌️

[@attfin2008]

so helpful. thank you.

[@jankoWTF]

Glad it was helpful to you 🙂

[@andyajha-c4b]

Giving it MVP concepts also helps a lot. Also keep on chat mode until you agree with changes. This can save a lot of time for developers that can code. Do not let the AI do what it wants, guide and control every step, and it's quite good. You do need to be a full stack developer to get anything complex from it. Jobs safe for now, phew. Lol

[@jankoWTF]

I agree 100 % with your point of "YOU the dev need to be the one calling the shots and closely guiding the AI". I'd just relax/nuance the aspect of "you need to be a full stack dev" a bit: ideally you are a developer that has programmed both backend and frontend cide to some extend - but you don't NEED to be a "complete/true full stack dev" (if this perfectly balanced dev persona even truly exists at all 😉). The message I wanna send here: you NEED to at least be willing to build on top of your existing dev game - no matter your skill/scope level - or be willing to basically learn about each line of code the AI writes for you in case you are just starting out.

[@andyajha-c4b]

@jankoWTF 100% agree. Learning is a never-ending process, regardless of skill set and commercial experience. I'm constantly having to learn. I think windsurf has a place for people with any skill level, like an in-house teacher you can learn from. My 10 year old built an AI to do app with it for his homework, and he learned a heap in the process. It's really amazing.

[@jamesallison9725]

One more thing to share, use a git repo and update after each new acceptable step. If you follow the advice in this vid you will have a lot less need to dig into a backup but it is good insurance.

[@jankoWTF]

Yes, very good point. I was thinking about synthesizing my observations, learnings and thoughs on how to best combine "non-git-based iteration" with leveraging the versioning functionality offered in the "agentic frames" (= Cascade in Windsurf and Composer + Agents in Cursor) with good ol' git-based versioning. I think aider.chat/ is doing it in the most raw form possible (or at least used to): every LLM code change results in a git commit. IMO, that's a bit too fine granular, but there's definitely a sweet spot 👉 would be awesome if you could share your observations/assessment on where to draw the line! 🙂

[@EndoTheDev]

du bist cool! mach weiter so. 🔥 ich suchte das video zum dritten mal. just to sponge everything in. 🙌

[@jankoWTF]

Moin - und danke für die netten Worte 🙂 Much appreciated 🫶

[@good-dev-student]

Really cool you are good guy 🎉❤ thank you so much

[@jankoWTF]

Thanks a lot for the kind words 🙂🫶🏻

[@A_Me_Amy]

I would say Ghost tiny steps by tiny steps every step of the way make sure that you're not moving too many steps at a time Like don't even implement full features but think about whatever feature you want to implement whatever tiny step feature do you want to implement and think about what it requires to be able to implement that and then take that tinier step so instead of a baby step go to like a snail like crawl think about each and every detail of it because if you even go one step and when you're working with AI it can screw up the entire thing which is like a good thing forget you know and make sure your versioning and stuff but not versioning but literally like reiterating over and over but keeping every change. That's my advice from my experimentation.

[@ichbleibefreiFlorianFreiheit]

Great video thanks 🙏

[@jankoWTF]

Glad you enjoyed it

[@DIY4Profit]

Thanks! I would really love to see a video where you can create front end with AI coder and then connect it to authentication and database like a real saas

[@jankoWTF]

Thanks 🙂 So your main point is how to take a "frontend only" that might have been generated by, say Bolt, V0, Replit Agent or something similar and then go and "fix" backend infra that the tools might have missed? Or are you rather referring to creating a full stack app through/with Cursor, Windsurf, IDX or similar "true IDEs"? I'm actually planning on creating a little "idea backlog app" with stackoverflow-like upvote/downvote features to co-create video ideas together with my viewers/the community. Maybe we can make this a win/win: I try and showcase something along the lines what you're imagining and it's for this particular idea backlog app that will help others in expressing similar ideas in the future 🙂

[@lowkeylyesmith]

Hm, ich bin immer in der Entscheidungsphase welche IDE ich jetzt nehmen soll - Cursor oder Windwurf. Im Moment nutze ich beide und als drittes noch VScode. Langsam wird es aber ein bisschen umständlich ständig zwischen den Dingern zu wechseln ;-)

[@jankoWTF]

I feel you - mir geht's genauso 😉 meld mich später nochmal mit ein paar mehr Details dazu

[@lowkeylyesmith]

@@jankoWTF Also ich hab mich jetzt endlich entschieden. Es wird Cursor, für den Moment, mit dem ich weiter arbeiten werde. Erstens gibt es, soweit ich das jetzt sehen kann, mehr Modelle zur Auswahl. Zweitens wurde der Preis ja von Windsurf erhöht soweit ich weiß. Drittens hab ich ja noch Claude/ChatGPT/Gemini/Perplexitiy und DeepSeeker die ich quälen kann wenn ich mal wieder unfähig bin und ned weiter weiß.

[@chicco_stat]

Nice! Thank you. Any thoughts about making these recommendations part of a context for the agent? Along the lines of .cursorrules files for Cursor? How would this work for Windsurf?

[@jankoWTF]

Thanks 🙂 Not having proper settings like `Cursor Settings` with their rules section and/or `.cursorrules` files is one of the crucial features that's still missing for me in Windsurf. I guess as long as that feature set isn't there yet, we're basically stuck to creating such files and telling the LLM to explicitly use it via `@` referencing. I thought about testing, if I can combine this technique with also having markdown files with "prompt templates" in which I would reference the desired markdown files containing rules

[@jankoWTF]

Took Perplexity on a spin for exploring a bit and expressing my thoughts based on a FastAPI use case. Convo: www.perplexity.ai/search/the-cursor-ide-has-cursor-sett-sgUBAVHwT6GJRq0X7a.mdg Final gist: Mitigating the Absence of Custom Rules in Windsurf IDE: A FastAPI Developer's Guide As developers familiar with both Cursor and Windsurf IDEs, we've come to appreciate the power of custom rules in guiding AI-assisted coding. While Cursor offers the ability to define .cursorrules files, Windsurf currently lacks this feature. However, this doesn't mean Windsurf users can't achieve similar results. This article explores strategies to mimic custom rules functionality in Windsurf, using a FastAPI project as our example. The Challenge: No Built-in Rules in Windsurf Windsurf, despite its powerful AI capabilities, doesn't provide a direct way to set custom rules or instructions for the AI to follow. This can lead to inconsistencies in code generation and make it challenging to maintain project-specific standards. The Solution: Strategic Use of Context and Prompts By leveraging Windsurf's context awareness and natural language understanding, we can create a system that closely mimics custom rules. Here's how: 1. Create a Rules Document Start by creating a fastapi_rules.md file in your project root: text # FastAPI Project Rules ## Code Style - Use snake_case for function and variable names - Use PascalCase for class names - Maximum line length: 88 characters - Use type hints for all function parameters and return values ## API Design - Use plural nouns for resource endpoints (e.g., /users, /items) - Version all API endpoints (e.g., /api/v1/users) - Use HTTP methods appropriately (GET for retrieval, POST for creation, etc.) ## Documentation - Include docstrings for all functions and classes - Use FastAPI's built-in documentation features (description, response_model, etc.) ## Dependency Injection - Use FastAPI's Depends for all database and external service dependencies ## Data Validation - Use Pydantic models for request and response data validation ## Error Handling - Use custom exception handlers for consistent error responses - Return appropriate HTTP status codes ## Testing - Write unit tests for all API endpoints - Use pytest for testing framework ## Project Structure - Organize code into modules: routes, models, services, dependencies - Keep main.py clean and use it primarily for app initialization and configuration 2. Develop Prompt Templates Create a fastapi_prompt_templates.md file with reusable prompts: text # FastAPI Prompt Templates ## Template 1: Generate an Endpoint Generate a FastAPI endpoint with the following details: - HTTP method: [METHOD] - Endpoint path: [PATH] - Pydantic model: [INPUT_MODEL] - Response model: [OUTPUT_MODEL] - Database interaction: [DB_FUNCTION] - Description: [ENDPOINT_DESCRIPTION] Ensure adherence to our project rules, particularly: - Use of snake_case for function names - Proper type hinting - Comprehensive docstring - Appropriate use of FastAPI's Depends for database interactions ## Template 2: Refactor Existing Code Refactor the following code to adhere to our project rules: [PASTE_CODE_HERE] Focus on: - Consistent naming conventions (snake_case for functions, PascalCase for classes) - Adding or improving type hints - Implementing proper dependency injection - Using Pydantic models for data validation - Improving error handling ## Template 3: Document an Endpoint Create a comprehensive docstring for the following endpoint: [PASTE_ENDPOINT_CODE_HERE] Include: - A brief description of the endpoint's purpose - Parameters explanation - Return value description - Any potential errors or exceptions - An example usage 3. Leveraging Context and Prompts in Windsurf To use these documents effectively: Prime the Context: Open both fastapi_rules.md and fastapi_prompt_templates.md at the start of your coding session. Use Template-Based Prompts: When interacting with Windsurf, reference the templates and rules. For example: text Refer to Template 1 in fastapi_prompt_templates.md. Generate a FastAPI endpoint with the following details: - HTTP method: POST - Endpoint path: /api/v1/users - Pydantic model: UserCreate - Response model: UserResponse - Database interaction: Use `get_db_session` - Description: Create a new user in the system Please implement this endpoint following our project rules in fastapi_rules.md. Iterative Feedback: If Windsurf's output doesn't fully adhere to the rules, provide feedback: text The generated code doesn't fully adhere to our project rules. Please adjust: 1. Use snake_case for the function name as specified in our code style rules 2. Include a more comprehensive docstring as per our documentation rules 3. Implement error handling using custom exception handlers as outlined in our error handling rules Regular Rule Review: Periodically review and update your rules and templates: text Please review fastapi_rules.md and fastapi_prompt_templates.md. Suggest any improvements or additions based on current FastAPI best practices and our project's evolving needs. Conclusion While Windsurf doesn't offer built-in custom rules like Cursor, this strategic use of markdown documents and prompt templates can effectively guide the AI to consistently follow project-specific standards. By integrating these practices into your workflow, you can maintain code quality and consistency in your FastAPI projects, leveraging Windsurf's powerful AI capabilities while mitigating the absence of explicit rule-setting features. This approach not only helps in maintaining coding standards but also serves as living documentation for your project, ensuring that all team members are aligned on best practices and conventions. HTH 🙂✌️

[@chicco_stat]

@@jankoWTF I've played around a bit with that and while it works, it does so inconsistently. It's still a bit hacky, it'd be great to see it as a feature in the future!

[@jankoWTF]

Yes, definitely - IMO it's the biggest thing that's missing, followed by being able to systematically reference docs like with @docs in Cursor and/or being able to do a web search to nudge the LLM to the most recent developer docs

[@jankoWTF]

However, regarding consistency I also felt like Cursor only follows the rules in about 70-80% of occasions.

[@shay5338]

I don't know but I am getting a resource exhausted error just after one or two prompts in a new chat, and it is relitively slow now to

[@jankoWTF]

Yes, it's a problem that all users seem to be facing for the last ~7 days. Seems that Codeium/Windsurf is hitting their API limits with Anthropic and/or that Anthropic itself is struggling to keep up with the demand. The peak times seem to be 3:00 to 9:00 am Pacific Time 👉 if you're able to avoid those, you might be able to get longer Convis running without interruptions. But it is super annoying and "drove me back" to Cursor temporarily yesterday 😉

[@shay5338]

@@jankoWTF yess, like as of right now it is working like fast but the issue is that it is not fixing the error in my application even when i provide it exact error and solutions for it, it doesn't seem like it is very intelligent as it was a few days ago

[@jankoWTF]

What Windsurf is also lacking compared to e.g. Cursor is the ability to link docs and to do web search. The LLM not finding the right approach/solution sometimes simply comes down to the fact that it's operating on "outdated data" in the sense that a certain package/framework has progressed but the LLM doesn't know about it yet 👉 in cursor I usualy hit `@web` or `@docs` and instruct the model to make sure to use the latest developer docs. Another good general strategy usually is: divide and conquer 👉 split the thing you're trying to accomplish up into smaller, well-defined/contained parts and try to tackle each one in a separate convo with the LLM HTH 🙂✌️

[@svenandreas5947]

lol, must be very cold there

[@jankoWTF]

Well, it's Germany after all 😉

[@alehmus7435]

My problem with AI editor is i i dont knlw how to ask AI to make me nice desing or UI in game. And I dont know how to customize.

[@jankoWTF]

There are also great tools out there that help with designing. I might do a video on them in the coming weeks. E.g. v0.dev/ is able to take screenshots of a UI you like and then tries to reproduce it

[@jankoWTF]

Windsurf also got a similar update recently: kzbin.info/www/bejne/fWPFg4yYjJ6Jj80si=TpVNIndQJF-xMzp0

[@alehmus7435]

Bolt is better bcs is more fast+smart and you have preview. I mean you can preview your website before download the project also.

[@jankoWTF]

For me Bolt and Windsurf/Cursor/etc. are in two different categories: Bolt is awesome to get a very quick prototype that you then would take to Windsurf & friends to improve. However, the immediate preview is something I also came to love in Bolt and miss in Vs studio forks like W8ndsurf and Cursor. But I'm sure that there's a way to get the same basic functionality somehow with a combination of running a live preview server with some Viscose extension. It's on my list of Rabbit Holes to check out sometime 😉

[@alehmus7435]

I like only Bolt and WindSurf. Cursor looks shit the desing is terrible. Also i want to ask do you know how i can ask to make me better desing UI on website? Also to to improve Quality? I ask him, but he generates me shit code..

[@jankoWTF]

Let me come back to your question on the design aspect. Not a designer myself, but I can try and do some digging for you 👉 ping me Wednesday next week in case I didn't get back to you by then, a'ight?

[@alehmus7435]

@jankoWTF no problem but you can make video if you want. Bcs i can forgot tooo

[@A_Me_Amy]

I want to see a new IDE made from the ground up with an a particular AI model in mind maybe even with no API access but it the AI model is just included in the IDE and that would mean they would have to be smaller models but could you imagine like a small model or group of models that were trained on individual tasks within an IDE where it's far better because of that division of labor. Like an agentic sort of based IDE that's not related to VS code where the AI can actually track syntax errors and then you could have another one to autocompletion... And I'm talking like really small models You could probably get away with really small models like I think people are underestimating or overestimating the difference of a 1 billion or 3 billion parameter model versus a 300 or 500 or a trillion parameter model I think people are really underestimating the value of these smaller AI models You don't need to own the desert and you don't need to own the diamond fields in order to have effective AI You don't need to be you know among the top 1% of income earners to make valuable and really good AI

[@rickhoro]

Good video, but please stop calling humans carbon meat bags. It's actually quite offensive.