Windsurf

Name: Stack0
Author: Stack0

Use Windsurf's agentic AI (Cascade) to build applications with Stack0 integration.

🌊 Cascade Mode

Windsurf's Cascade can autonomously browse documentation, create files, and implement features. Point it to Stack0's llms.txt for best results.

Setup for Windsurf

Add Stack0 context to your project for Windsurf to reference:

.windsurf/context.md

# Create a project context file for Windsurf
 
# .windsurf/context.md
 
## Stack0 Integration
 
This project uses Stack0 (stack0.dev) for:
- Transactional emails
- File storage (CDN)
- Image processing
- Screenshots
 
### Documentation
Full API docs: https://stack0.dev/llms.txt
 
### SDK Setup
```typescript
import { Stack0 } from '@stack0/sdk'
 
const stack0 = new Stack0({
  apiKey: process.env.STACK0_API_KEY!
})
```
 
### Common Operations
 
**Send Email:**
```typescript
await stack0.mail.send({
  from: 'noreply@myapp.com',
  to: recipientEmail,
  subject: 'Subject',
  html: '<p>Content</p>',
})
```
 
**Upload File:**
```typescript
const { uploadUrl, cdnUrl } = await stack0.cdn.getUploadUrl({
  filename: 'file.png',
  mimeType: 'image/png',
})
await fetch(uploadUrl, { method: 'PUT', body: fileBuffer })
```
 
**Take Screenshot:**
```typescript
const result = await stack0.screenshots.capture({
  url: 'https://example.com',
  format: 'png',
})
```

Cascade Prompts

Use these prompts with Windsurf's Cascade for autonomous implementation:

🚀 Complete Feature Implementation

Implement a complete contact form feature for this Next.js app.

Requirements:
1. Create a contact form component with validation
2. Create an API route to handle submissions
3. Use Stack0 SDK to send emails (see .windsurf/context.md)
4. Add success/error handling
5. Style with Tailwind CSS

The Stack0 SDK is already installed. Use STACK0_API_KEY from environment.

Please implement all necessary files and test the integration.

📁 File Upload System

Build a file upload system for this app.

Requirements:
1. Drag-and-drop upload component
2. API route for getting presigned URLs
3. Direct upload to Stack0 CDN
4. Progress indicator
5. Display uploaded files with CDN URLs

Refer to Stack0 docs in .windsurf/context.md for CDN API usage.

Implement the complete feature with all necessary files.

🔄 Multi-file Implementation

I need to add email notifications throughout my app.

Locations that need emails:
1. User signup → Welcome email
2. Password reset → Reset link email
3. Order placed → Confirmation email
4. Contact form → Notification to team

Use Stack0 SDK (docs in .windsurf/context.md).
Create reusable email utility functions.
Update each relevant file to send the appropriate email.

Flow-Based Prompts

Windsurf Flows let you chain multiple steps. Here's an example flow:

Example Flow

# Windsurf Flow: Add Email Feature
 
## Step 1: Setup
- Install @stack0/sdk if not present
- Create lib/stack0.ts with client initialization
- Add STACK0_API_KEY to .env.example
 
## Step 2: Create API Route
- Create app/api/email/route.ts
- Implement POST handler using Stack0 mail.send
- Add input validation
- Handle errors appropriately
 
## Step 3: Create UI Component
- Create components/email-form.tsx
- Form fields: to, subject, message
- Loading and success states
- Call the API route on submit
 
## Step 4: Test
- Verify the form renders correctly
- Test API route with sample data
- Confirm emails are sent via Stack0

Tips for Windsurf + Stack0

📄

Add Context Files

Create .windsurf/context.md with Stack0 docs for better AI understanding.

🔗

Link to llms.txt

Tell Cascade to read https://stack0.dev/llms.txt for complete API reference.

🎯

Be Specific

Cascade works best with clear, detailed requirements for each feature.

🔄

Use Flows

Break complex features into multi-step flows for reliable implementation.

Example: Cascade Implementing Email

Here's what Cascade generates when properly configured:

lib/stack0.ts

// lib/stack0.ts - Generated by Cascade
import { Stack0 } from '@stack0/sdk'
 
if (!process.env.STACK0_API_KEY) {
  throw new Error('STACK0_API_KEY is not set')
}
 
export const stack0 = new Stack0({
  apiKey: process.env.STACK0_API_KEY,
})
 
// Email sending utility
export async function sendEmail({
  to,
  subject,
  html,
  from = 'noreply@myapp.com',
}: {
  to: string
  subject: string
  html: string
  from?: string
}) {
  return stack0.mail.send({
    from,
    to,
    subject,
    html,
  })
}
 
// File upload utility
export async function getUploadUrl(file: {
  name: string
  type: string
  size: number
}) {
  return stack0.cdn.getUploadUrl({
    filename: file.name,
    mimeType: file.type,
    size: file.size,
  })
}

Related Resources

Windsurf ↗llms.txt Cursor Guide