Skip to content

Latest commit

 

History

History
154 lines (111 loc) · 9.58 KB

summary.en.md

File metadata and controls

154 lines (111 loc) · 9.58 KB

Windsurf Tutorial for Beginners (AI Code Editor)

Disclaimer: This is a personal summary and interpretation based on a YouTube video. It is not official material and not endorsed by the original creator. All rights remain with the respective creators.

This document summarizes the key takeaways from the video. I highly recommend watching the full video for visual context and coding demonstrations.

Before You Get Started

  • I summarize key points to help you learn and review quickly.
  • Simply click on Ask AI links to dive into any topic you want.

AI-Powered buttons

Teach Me: 5 Years Old | Beginner | Intermediate | Advanced | (reset auto redirect)

Learn Differently: Analogy | Storytelling | Cheatsheet | Mindmap | Flashcards | Practical Projects | Code Examples | Common Mistakes

Check Understanding: Generate Quiz | Interview Me | Refactor Challenge | Assessment Rubric | Next Steps

What is Windsurf?

Windsurf is a VS Code fork with a built-in AI agent called Cascade. It launched at the end of 2024 and has quickly become one of the strongest AI code editors available. It can read your whole project, run terminal commands, install dependencies, edit multiple files, and even start dev servers – all autonomously.

Ask AI: What is Windsurf AI code editor

Pricing & Plans

  • Free tier exists but is very limited – you can chat and generate code, but Cascade cannot apply changes to files.
  • Pro plan ($10/month) is what most people need.
  • Pro Ultimate is higher tier (Tim uses this because he uses it daily).
  • At the time of the video, this is cheaper than Cursor’s $20/month plan.

Worth the paid tier if you actually want the AI to write and apply code for you.

Ask AI: Windsurf pricing and plans

First-Time Setup

  • Windsurf is a VS Code fork → on first launch it offers to import all your existing VS Code settings, theme, and extensions.
  • Open a folder (don’t just open random files) so the AI has full project context.

Always work inside a proper project folder.

Ask AI: Windsurf setup and importing VS Code settings

Cascade – The Main AI Panel

Cascade is the sidebar agent (similar to Copilot but much more powerful).
Two modes:

  • Write mode → AI can create/edit files and run commands (paid only).
  • Chat mode → AI only talks or generates code snippets, never touches files.

Use Write mode for real work, Chat mode when you’re just asking questions.

Ask AI: Windsurf Cascade Write vs Chat mode

Plan Before You Prompt

Spend a couple of minutes planning what you actually want to build. Sketch UI, decide tech stack, etc.
Without a clear goal the AI will go off on wild tangents.

Good planning = 10× better results.

Ask AI: How to plan projects for AI coding tools

Example: Building a React Trivia Game with One Prompt

Tim’s prompt:
“Make a React application for a fun trivia game and save the scores in some kind of file.”

Cascade:

  • Runs create-vite@latest (asks permission first)
  • Installs dependencies via npm
  • Creates all files (App.jsx, CSS, etc.)
  • Starts the dev server
  • Shows a full diff of changes like a GitHub PR

You review diffs → Accept All or reject individual files.

This is the killer feature – full project generation from one prompt.

Ask AI: Building full apps with Windsurf Cascade

Important: Changes Are Applied Immediately

Unlike some editors, Cascade writes changes into the files as it works – even before you click “Accept All”.
If you close the panel without rejecting, the code stays.
To undo → Reject All Changes.

Always check the running app while Cascade is editing – you’ll see changes live.

Ask AI: How Cascade applies changes in Windsurf

Terminal Integration

Cascade can run any terminal command it thinks is needed and asks for permission.
All commands run in a terminal tab named “Cascade” at the bottom.

Super useful for npm install, starting servers, git commands, etc.

Ask AI: Windsurf terminal command execution

Context Handling

  • Automatically scans your project when needed.
  • You can @mention files/folders.
  • Highlight code → Ctrl/Cmd + L to attach selection as context.
  • Works extremely well even in larger projects without manual @ mentions most of the time.

Ask AI: Adding context in Windsurf Cascade

Inline Editing (Ctrl/Cmd + I)

Highlight code → Ctrl/Cmd + I → write a quick instruction → instant diff.
Perfect for small refactors, renaming, bug fixes.

Ask AI: Windsurf inline editing with Ctrl I

The “Continue” Command

Just type “continue” in Write mode and Cascade will guess the logical next step and keep building.
Extremely powerful when adding features incrementally.

Ask AI: Windsurf continue command

Tips for Best Results

  1. Explicitly tell it which files to edit (@file) to avoid unwanted changes.
  2. The longer the conversation chain and the more code you write yourself, the better it performs.
  3. Always read the diffs – treat AI code like any other contributor’s code.
  4. Use clear file/directory names and good variable names – helps the AI track context.
  5. If an edit is too big, ask it to break it into smaller steps.

About the summarizer

I'm Ali Sol, a Backend Developer. Learn more: