Integraties

E-mail versturen vanuit Windsurf

Windsurf begrijpt de volledige codebase en schrijft WeSender-integraties contextueel.

Coding-agent TypeScript

Vereisten

  • Windsurf IDE geinstalleerd (windsurf.ai)
  • WeSender-account met geverifieerd domein en API-sleutel
  • Een bestaand project dat je wilt uitbreiden met e-maillogica

Stap 1: Installeer Windsurf en open je project

Download Windsurf via windsurf.ai en installeer de IDE. Open je bestaande project via File > Open Folder. Windsurf indexeert de hele codebase zodat Cascade (de ingebouwde AI) context heeft over je projectstructuur, bestaande functies en naamgevingsconventies.

Stap 2: Stel de omgevingsvariabele in

Voeg WESENDER_API_KEY toe aan je .env.local. Als je project al een .env-bestand heeft, zet de sleutel daar. Windsurf leest de projectstructuur maar laat secrets nooit uitlekken naar de Cascade-context.

Stap 3: Vraag Cascade om de integratie te schrijven

Open de Cascade-sidebar (Ctrl+L of Cmd+L) en typ: Voeg een e-mailfunctie toe die WeSender gebruikt. Kijk naar de bestaande functiestructuur in dit project en schrijf de WeSender-integratie op dezelfde manier. Gebruik process.env.WESENDER_API_KEY en de @wesender/node SDK. Cascade analyseert je codebase, volgt de bestaande conventies en schrijft de code consistent met je project.

Stap 4: Cascade schrijft en past meerdere bestanden aan

Cascade kan in een stap meerdere bestanden aanpassen: de e-mailfunctie, een test, de types en eventuele index-bestanden. Bekijk de diff in de Windsurf-editor en keur de wijzigingen goed of stuur Cascade bij via de chat.

Stap 5: Test via de ingebouwde terminal

Open de terminal in Windsurf (Ctrl+backtick) en run: npm test. Als tests slagen, commit je de wijzigingen vanuit de geintegreerde Git-interface. Als er fouten zijn, geef ze terug aan Cascade: los de testfout op de regel X op.

Volledig voorbeeld

Hier is de volledige implementatie in src/services/email.service.ts:

import { Wesender } from "@wesender/node"

export class EmailService {
  private readonly client: Wesender

  constructor() {
    this.client = new Wesender(process.env.WESENDER_API_KEY!)
  }

  async sendWelcome(to: string, naam: string): Promise<string> {
    const result = await this.client.emails.send({
      from:    "noreply@jouwdomein.nl",
      to,
      subject: `Welkom bij onze app, ${naam}!`,
      html:    `<p>Hoi ${naam}, je account is aangemaakt.</p>`,
    })
    return result.id
  }

  async sendPasswordReset(to: string, resetUrl: string): Promise<string> {
    const result = await this.client.emails.send({
      from:    "noreply@jouwdomein.nl",
      to,
      subject: "Wachtwoord opnieuw instellen",
      html:    `<p><a href="${resetUrl}">Stel je wachtwoord opnieuw in</a></p>`,
    })
    return result.id
  }
}

Veelgestelde vragen

Cascade schrijft code die niet aansluit bij mijn project. Hoe verbeter ik dat?

Windsurf indexeert de codebase, maar geef ook expliciete context mee: kijk naar de class EmailService in src/services/ en schrijf de WeSender-integratie op dezelfde manier. Hoe specifieker je prompt, hoe consistenter de uitvoer.

Kan Cascade ook de WeSender MCP-server gebruiken?

Windsurf ondersteunt MCP-servers. Open Settings > Cascade > MCP en voeg de WeSender MCP-server toe. Cascade kan dan live e-mails sturen en domeinen opvragen terwijl je werkt.

Windsurf heeft mijn .env-bestand gelezen en de sleutel zichtbaar gemaakt.

Windsurf stuurt .env-inhoud niet naar de Cascade-servers. Als je twijfelt, zet de sleutel in .env.local en voeg .env.local toe aan .gitignore. Windsurf respecteert .gitignore bij het indexeren.

Volgende stappen