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

Issue	Cause	Solution
No Supercomplete suggestions	Extension disabled	Click status bar widget, enable autocomplete
Cascade not editing files	In Chat mode	Switch to Write mode in Cascade panel
Slow Cascade response	Large workspace	Add .codeiumignore for build artifacts
@ mention not working	File not indexed	Wait for indexing to complete (status bar)

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.