Windsurf Hello World

Windsurf Hello World

Overview

First hands-on experience with Windsurf's three AI modalities: Cascade (agentic chat), Supercomplete (inline completions), and Command (inline editing). This skill walks through real interactions, not placeholder code.

Prerequisites

• Completed windsurf-install-auth setup
• Windsurf open with a project folder

Instructions

Step 1: Experience Supercomplete (Tab Completions)

Open any code file and start typing. Supercomplete predicts your intent based on recent edits, cursor movement, and surrounding context.

// Type this in a new file: hello.ts
// After typing "function greet", Supercomplete suggests the rest

function greet(name: string): string {
  // Just type "return" and press Tab -- Supercomplete fills the template literal
  return `Hello, ${name}! Welcome to Windsurf.`;
}

// Start typing "const users" -- Supercomplete predicts array based on greet() context
const users = ["Alice", "Bob", "Charlie"];
users.forEach(user => console.log(greet(user)));

Key Supercomplete behaviors:

• Press Tab to accept a suggestion
• Press Esc to dismiss
• Suggestions appear as gray ghost text
• Tracks your edit history (last 30-90 seconds) for intent prediction

Step 2: Use Cascade Write Mode (Cmd/Ctrl+L)

Open Cascade panel and try Write mode -- Cascade modifies your codebase directly.

Prompt to try:
"Create a REST API endpoint in src/api.ts using Express that serves
the greet function. Include error handling for missing name parameter."

Cascade will:

1. Create src/api.ts with Express setup
2. Import the greet function
3. Add error handling
4. Show diffs for your review

Review and accept/reject each file change before Cascade proceeds.

Step 3: Use Cascade Chat Mode

Switch to Chat mode (toggle in Cascade panel) for questions that don't need file edits:

Prompt: "Explain the difference between Write and Chat mode in Cascade"

Expected response: Write mode can create/modify files and run terminal commands.
Chat mode answers questions without touching your codebase.

Step 4: Try Inline Command (Cmd/Ctrl+I)

Highlight a block of code in the editor and press Cmd/Ctrl+I to invoke Command mode:

Select the greet function, then type:
"Add JSDoc documentation and input validation"

Cascade edits the selected code inline, showing a diff you can accept or reject.

Step 5: Use @ Context Mentions

In Cascade chat, use @ to inject specific context:

@src/api.ts -- reference a specific file
@src/       -- reference an entire directory
@web        -- search the web for current info

Example prompt with context:

"@src/api.ts Add rate limiting middleware to all endpoints"

Output

• Working Supercomplete experience with Tab completions
• Cascade Write mode: file creation and modification
• Cascade Chat mode: codebase questions without edits
• Inline Command mode: targeted code editing
• @ context mentions for precise AI context

Error Handling

Examples

Terminal Command Mode

Press Cmd/Ctrl+I in the terminal, then type:
"Find all TypeScript files that import express"

Windsurf generates: find src -name "*.ts" -exec grep -l "express" {} \;

Preview Your App

Ask Cascade: "Preview the API server in the browser"
Windsurf opens an in-IDE preview tab with your running app.
Click elements in the preview to send them back to Cascade for edits.

Resources

• Windsurf Getting Started
• Cascade Overview
• Autocomplete Tips

Next Steps

Proceed to windsurf-local-dev-loop for development workflow setup.