Mastering Cascade

You: How do I add authentication?
AI: Here's some code... [paste yourself]

You: Add authentication to this app

Cascade:
├── Reads current project structure
├── Identifies existing patterns
├── Plans implementation approach
├── Creates necessary files
├── Updates configurations
├── Tests the changes
└── Reports what was done

Cmd/Ctrl+Shift+P → "Cascade: Open Chat"

You: What framework does this project use?

Cascade: Based on my analysis:
- Framework: Next.js 14 (App Router)
- Evidence: next.config.js, app/ directory structure
- Version: 14.1.0 (from package.json)
- Router: App Router (app/ instead of pages/)

You: Explain how authentication works in this project

Cascade: Authentication is implemented using NextAuth.js:

1. **Configuration** (auth.config.ts):
   - Google OAuth provider
   - Credentials provider with email/password
   - JWT session strategy

2. **Session Management** (middleware.ts):
   - Protects routes under /dashboard
   - Redirects unauthenticated users

3. **Components**:
   - LoginForm uses signIn()
   - SignOutButton uses signOut()
   - Auth context provides user state

4. **Database**:
   - User model in Prisma schema
   - Sessions stored in PostgreSQL

"Add a favorites feature"
"Create a ProductCard component"
"Fix the bug in checkout"
"Refactor the user service"

You: Create a new API endpoint for user settings with full CRUD

Cascade: I'll create the user settings feature:

Creating files:
├── app/api/settings/route.ts (GET, POST)
├── app/api/settings/[key]/route.ts (PUT, DELETE)
├── lib/services/settings.service.ts
├── lib/validations/settings.ts
└── types/settings.ts

[Cascade creates all files with proper implementations]

Done! Created 5 files with:
- GET /api/settings - List all settings
- POST /api/settings - Create setting
- PUT /api/settings/[key] - Update setting
- DELETE /api/settings/[key] - Delete setting
- Service layer with business logic
- Zod validation schemas
- TypeScript types

┌─────────────────────────────────────────────────────────┐
│ Cascade wants to make changes:                          │
├─────────────────────────────────────────────────────────┤
│                                                         │
│ Modified: src/lib/auth.ts                              │
│           [View Diff] [Accept] [Reject]                │
│                                                         │
│ Created:  src/components/AuthProvider.tsx              │
│           [View] [Accept] [Reject]                     │
│                                                         │
│         [Accept All] [Reject All]                      │
└─────────────────────────────────────────────────────────┘

You: Install and configure Tailwind CSS

Cascade: I'll set up Tailwind:

Running: npm install -D tailwindcss postcss autoprefixer
✓ Packages installed

Running: npx tailwindcss init -p
✓ Config files created

Updating tailwind.config.js...
✓ Content paths configured

Updating globals.css...
✓ Tailwind directives added

Tailwind CSS is ready to use!

You: @terminal Show me the current git status

Cascade: Running: git status

On branch main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
  modified:   src/components/Header.tsx
  modified:   src/lib/utils.ts

Untracked files:
  src/components/NewFeature.tsx

You: Looking at @src/lib/auth.ts and @src/middleware.ts,
how can I add role-based access control?

You: Explain this function (ignore .env files)

{
  "cascade.exclude": [
    ".env",
    "secrets/**",
    "*.pem"
  ]
}

You: Create a basic table component

Cascade: [Creates basic table]

You: Add sorting functionality

Cascade: [Adds column sorting]

You: Make it support pagination

Cascade: [Adds pagination]

You: Add search/filter capability

Cascade: [Adds search filtering]

You: I need to add real-time features. What approach would you recommend?

Cascade: Based on your current stack (Next.js + PostgreSQL), here are options:

**Option 1: Server-Sent Events (SSE)**
- Pros: Simple, works with current setup
- Cons: One-way, connection limits
- Best for: Notifications, live updates

**Option 2: WebSockets (Socket.io)**
- Pros: Bidirectional, widely supported
- Cons: Needs separate server
- Best for: Chat, collaboration

**Option 3: Supabase Realtime**
- Pros: Built on your database, minimal code
- Cons: Adds dependency
- Best for: Database-driven updates

For your e-commerce app with live inventory, I'd suggest SSE for stock updates.

Want me to implement Option 1?

You: I'm getting this error when submitting the form:
TypeError: Cannot read properties of undefined (reading 'email')

Cascade: Let me investigate...

[Reads relevant files]

Found the issue in /app/checkout/page.tsx:

The problem is on line 45:
```typescript
const email = session.user.email  // session might be null

const session = await getServerSession(authOptions)
const email = session?.user?.email ?? ''

### Code Review

## Best Practices

### Clear Requests

### Scope Control

### Context Hints

### Verification Requests

## Cascade Capabilities

### What Cascade Does Well

- Multi-file code generation
- Contextual understanding
- Pattern replication
- Debugging with context
- Architecture planning
- Command execution

### Current Limitations

- Very large file changes (break into parts)
- Real-time data (knowledge cutoff)
- Binary file manipulation
- External API calls (no live requests)

## Managing Credits

### Free Tier Usage

Monitor your usage:

Tips for efficient usage:
- Combine related requests
- Be specific to avoid back-and-forth
- Use write mode for batched changes

### Credit Conservation

## Summary

- **Open Cascade**: `Cmd/Ctrl+L`
- **Three modes**: Chat, Write, Terminal
- **Context-aware**: Understands your whole project
- **Agentic**: Plans and executes multi-step tasks
- **Review changes**: Accept, reject, or modify
- **Be specific**: Clear requests get better results

## Next Steps

Now that you understand Cascade, let's explore Flows—Windsurf's automation system for repetitive coding tasks.