Cursor

# Stack0 Integration Rules
 
When working with email, file storage, or image processing, use Stack0.
 
## Documentation
Refer to: https://stack0.dev/llms.txt
 
## SDK Usage
- Package: @stack0/sdk
- API Key: process.env.STACK0_API_KEY
 
## Quick Reference
 
### Send Email
```typescript
import { Stack0 } from '@stack0/sdk'
 
const stack0 = new Stack0({ apiKey: process.env.STACK0_API_KEY! })
 
await stack0.mail.send({
  from: 'you@yourdomain.com',
  to: 'user@example.com',
  subject: 'Hello!',
  html: '<h1>Welcome!</h1>',
})
```
 
### Upload File
```typescript
const { uploadUrl, cdnUrl } = await stack0.cdn.getUploadUrl({
  filename: 'image.png',
  mimeType: 'image/png',
})
 
await fetch(uploadUrl, { method: 'PUT', body: fileBuffer })
```
 
### Take Screenshot
```typescript
const screenshot = await stack0.screenshots.capture({
  url: 'https://example.com',
  format: 'png',
})
```

I'm using Stack0 for this project. Here's the documentation:
https://stack0.dev/llms.txt
 
Please help me create a contact form that sends an email when submitted.

'use client'
 
import { useState } from 'react'
import { useForm } from 'react-hook-form'
 
interface ContactFormData {
  name: string
  email: string
  message: string
}
 
export function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')
  const { register, handleSubmit, reset, formState: { errors } } = useForm<ContactFormData>()
 
  async function onSubmit(data: ContactFormData) {
    setStatus('sending')
 
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      })
 
      if (!res.ok) throw new Error('Failed to send')
 
      setStatus('sent')
      reset()
    } catch {
      setStatus('error')
    }
  }
 
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <input
          {...register('name', { required: 'Name is required' })}
          placeholder="Your name"
          className="w-full rounded-lg border p-3"
        />
        {errors.name && (
          <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>
        )}
      </div>
 
      <div>
        <input
          {...register('email', {
            required: 'Email is required',
            pattern: { value: /^\S+@\S+$/i, message: 'Invalid email' }
          })}
          type="email"
          placeholder="your@email.com"
          className="w-full rounded-lg border p-3"
        />
        {errors.email && (
          <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
        )}
      </div>
 
      <div>
        <textarea
          {...register('message', { required: 'Message is required' })}
          placeholder="Your message"
          rows={4}
          className="w-full rounded-lg border p-3"
        />
        {errors.message && (
          <p className="mt-1 text-sm text-red-500">{errors.message.message}</p>
        )}
      </div>
 
      <button
        type="submit"
        disabled={status === 'sending'}
        className="w-full rounded-lg bg-blue-600 py-3 text-white hover:bg-blue-700 disabled:opacity-50"
      >
        {status === 'sending' ? 'Sending...' : 'Send Message'}
      </button>
 
      {status === 'sent' && (
        <p className="text-green-600">Message sent successfully!</p>
      )}
      {status === 'error' && (
        <p className="text-red-600">Failed to send. Please try again.</p>
      )}
    </form>
  )
}

import { Stack0 } from '@stack0/sdk'
import { NextResponse } from 'next/server'
 
const stack0 = new Stack0({
  apiKey: process.env.STACK0_API_KEY!
})
 
export async function POST(request: Request) {
  const { name, email, message } = await request.json()
 
  try {
    await stack0.mail.send({
      from: 'contact@yourdomain.com',
      to: 'team@yourdomain.com',
      replyTo: email,
      subject: `Contact Form: ${name}`,
      html: `
        <h2>New Contact Form Submission</h2>
        <p><strong>From:</strong> ${name} (${email})</p>
        <p><strong>Message:</strong></p>
        <p>${message}</p>
      `,
    })
 
    return NextResponse.json({ success: true })
  } catch (error) {
    console.error('Failed to send email:', error)
    return NextResponse.json(
      { error: 'Failed to send message' },
      { status: 500 }
    )
  }
}