Integraties

E-mail versturen vanuit CopilotKit

Geef de copilot in je React-app een e-mailactie — de sleutel blijft op de server, de actie in je component.

AI-assistent TypeScript Webhooks

Vereisten

  • WeSender-account met geverifieerd domein en API-sleutel
  • WESENDER_API_KEY alleen op de server, nooit in de browser
  • Een React-app met CopilotKit opgezet
  • npm install @wesender/node

Stap 1: Maak een server-route voor e-mail

Houd je WeSender API-sleutel op de server. Maak een serverroute die de browser aanroept, nooit WeSender rechtstreeks vanuit de client.

import { Wesender } from "@wesender/node"

const emailClient = new Wesender(process.env.WESENDER_API_KEY!)

export async function POST(req: Request) {
  const { to, subject, html } = await req.json()
  const result = await emailClient.emails.send({
    from: "app@jouwdomein.nl",
    to,
    subject,
    html,
  })
  return Response.json({ id: result.id })
}

Stap 2: Definieer de copilot-actie

Voeg useCopilotAction toe in een component binnen de CopilotKit-provider. De handler roept je eigen serverroute aan, zodat de API-sleutel nooit de browser bereikt.

import { useCopilotAction } from "@copilotkit/react-core"

useCopilotAction({
  name: "send_email",
  description: "Verstuur een transactionele e-mail via WeSender",
  parameters: [
    { name: "to",      type: "string" },
    { name: "subject", type: "string" },
    { name: "html",    type: "string" },
  ],
  handler: async ({ to, subject, html }) => {
    const res  = await fetch("/api/send-email", {
      method:  "POST",
      headers: { "Content-Type": "application/json" },
      body:    JSON.stringify({ to, subject, html }),
    })
    const data = await res.json()
    return "E-mail verstuurd, id: " + data.id
  },
})

Stap 3: Voeg de CopilotKit UI toe aan je app

Omsluit je app met een CopilotKitProvider en voeg een CopilotSidebar of CopilotPopup toe zodat gebruikers de copilot kunnen aanspreken.

import { CopilotKit } from "@copilotkit/react-core"
import { CopilotSidebar } from "@copilotkit/react-ui"
import "@copilotkit/react-ui/styles.css"

export default function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <CopilotSidebar>
        {/* je app */}
      </CopilotSidebar>
    </CopilotKit>
  )
}

Volledig voorbeeld

Hier is de volledige implementatie in app/api/send-email/route.ts:

import { Wesender } from "@wesender/node"

const emailClient = new Wesender(process.env.WESENDER_API_KEY!)

export async function POST(req: Request) {
  const { to, subject, html } = await req.json()
  const result = await emailClient.emails.send({
    from: "app@jouwdomein.nl",
    to,
    subject,
    html,
  })
  return Response.json({ id: result.id })
}

// Gebruik in je component (binnen CopilotKitProvider):
//
// import { useCopilotAction } from "@copilotkit/react-core"
//
// useCopilotAction({
//   name: "send_email",
//   description: "Verstuur een transactionele e-mail via WeSender",
//   parameters: [
//     { name: "to",      type: "string" },
//     { name: "subject", type: "string" },
//     { name: "html",    type: "string" },
//   ],
//   handler: async ({ to, subject, html }) => {
//     const res  = await fetch("/api/send-email", {
//       method: "POST", headers: { "Content-Type": "application/json" },
//       body: JSON.stringify({ to, subject, html }),
//     })
//     return "E-mail verstuurd, id: " + (await res.json()).id
//   },
// })

Bezorgstatussen via webhooks

CopilotKit kan bezorg-, bounce- en klachtsignalen ontvangen via webhooks. Configureer een webhook-endpoint in je CopilotKit-workflow dat POST-verzoeken van Wesender accepteert. Zie Webhooks instellen voor de volledige configuratiestappen en het payload-formaat.

Veelgestelde vragen

Mag mijn API-sleutel in de browser staan?

Nee. Houd de WeSender API-sleutel altijd op de server en laat de browser je eigen serverroute aanroepen. Zo is de sleutel nooit zichtbaar in je frontend-code of de browser-devtools.

Kan de gebruiker de mail eerst bekijken?

Ja. Toon een concept in de copilot met een bevestigingsinteractie en verstuur pas na goedkeuring. CopilotKit ondersteunt dit standaard voor onomkeerbare acties.

Werkt dit met elke React-app?

Ja, zolang je een CopilotKitProvider rond je app hebt en de actie wordt gedefinieerd in een component die daarbinnen valt.

Volgende stappen