The Complete Production SOP: How to Deploy and Run Resend Transactional Email Delivery with React Components in Autonomous AI Agents

---
name: "resend-react-email-transactional"
description: "Send beautiful transactional emails authored as React components using the Resend API."
metadata:
  author: "Resend"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "send email with resend"
  - "render react email template"
  - "verify domain resend"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import * as React from 'react';
import { Html, Head, Body, Container, Text, Heading, Button } from '@react-email/components';

interface WelcomeEmailProps {
  name: string;
  loginUrl: string;
}

export const WelcomeEmail: React.FC<WelcomeEmailProps> = ({ name, loginUrl }) => (
  <Html lang="en">
    <Head />
    <Body style={{ backgroundColor: '#f6f9fc', fontFamily: 'sans-serif', margin: 0, padding: '20px' }}>
      <Container style={{ backgroundColor: '#ffffff', borderRadius: '8px', padding: '40px', maxWidth: '600px' }}>
        <Heading style={{ color: '#333333', fontSize: '24px' }}>Welcome, {name}!</Heading>
        <Text style={{ color: '#555555', fontSize: '16px', lineHeight: '24px' }}>
          Thanks for signing up. Click the button below to get started with your new account.
        </Text>
        <Button href={loginUrl} style={{ backgroundColor: '#000000', color: '#ffffff', padding: '12px 24px', borderRadius: '4px', textDecoration: 'none' }}>
          Access Dashboard
        </Button>
      </Container>
    </Body>
  </Html>
);

import { Resend } from 'resend';
import { WelcomeEmail } from '../emails/WelcomeEmail';

const apiKey = process.env.RESEND_API_KEY;
if (!apiKey) {
  throw new Error('CRITICAL: RESEND_API_KEY environment variable is not defined.');
}

export const resend = new Resend(apiKey);

export async function sendWelcomeNotification(recipientEmail: string, recipientName: string) {
  const { data, error } = await resend.emails.send({
    from: 'Acme Onboarding <[email protected]>',
    to: [recipientEmail],
    subject: `Welcome to Acme, ${recipientName}`,
    react: WelcomeEmail({ name: recipientName, loginUrl: 'https://app.yourdomain.com/login' }),
  });

  if (error) {
    throw new Error(`Resend email delivery failed: ${error.name} - ${error.message}`);
  }

  return { messageId: data?.id };
}

import { describe, it, expect, vi } from 'vitest';
import { sendWelcomeNotification, resend } from '../emailService';

vi.mock('resend', () => {
  return {
    Resend: vi.fn().mockImplementation(() => ({
      emails: {
        send: vi.fn().mockResolvedValue({ data: { id: 'msg_test_123' }, error: null })
      }
    }))
  };
});

describe('sendWelcomeNotification', () => {
  it('should deliver email and return the generated message ID', async () => {
    const response = await sendWelcomeNotification('[email protected]', 'Alex');
    expect(response.messageId).toBe('msg_test_123');
  });
});