Email Expert | Bootspring Docs

The Email Expert agent specializes in email integration, transactional emails, email templates, and email service providers for applications.

Expertise Areas#

Resend Integration - Modern email API setup
React Email Templates - Component-based email design
Email Service Layer - Centralized email management
Magic Link Authentication - Passwordless email login
Email Queues - Background job processing
Email Preferences - User subscription management
Deliverability - Best practices for inbox placement

Usage Examples#

Resend Setup#

Use the email-expert agent to set up Resend for transactional emails in a Next.js application.

Response includes:

SDK configuration
Send function implementation
Error handling
Domain setup guidance

React Email Templates#

Use the email-expert agent to create a welcome email template using React Email.

Response includes:

Component structure
Styling approach
Dynamic content
Preview setup

Magic Link Auth#

Use the email-expert agent to implement passwordless authentication with magic links.

Response includes:

Token generation
Email sending
Verification endpoint
Security considerations

Best Practices Applied#

1. Email Design#

Responsive templates
Consistent branding
Clear CTAs
Fallback styling

2. Deliverability#

Domain verification
SPF/DKIM/DMARC
List hygiene
Engagement tracking

3. User Experience#

Clear unsubscribe
Preference management
Confirmation emails
Transactional clarity

4. Operations#

Queue processing
Retry logic
Error tracking
Analytics

Common Patterns#

Resend Setup#

// lib/email.ts
import { Resend } from 'resend';

export const resend = new Resend(process.env.RESEND_API_KEY);

export async function sendEmail({
  to,
  subject,
  html,
}: {
  to: string;
  subject: string;
  html: string;
}) {
  const { data, error } = await resend.emails.send({
    from: 'Your App <noreply@yourapp.com>',
    to,
    subject,
    html,
  });

  if (error) {
    console.error('Email error:', error);
    throw error;
  }

  return data;
}

React Email Template#

// emails/welcome.tsx
import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Text,
} from '@react-email/components';

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

export function WelcomeEmail({ name, actionUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to Our App</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>Welcome, {name}!</Heading>
          <Text style={text}>
            Thanks for signing up. We're excited to have you on board.
          </Text>
          <Button style={button} href={actionUrl}>
            Get Started
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

const main = {
  backgroundColor: '#f6f9fc',
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
};

const container = {
  backgroundColor: '#ffffff',
  margin: '0 auto',
  padding: '40px 20px',
  maxWidth: '560px',
};

Email Service Layer#

// lib/email-service.ts
import { resend } from './email';
import { render } from '@react-email/render';
import { WelcomeEmail } from '@/emails/welcome';
import { PasswordResetEmail } from '@/emails/password-reset';

export const emailService = {
  async sendWelcome(to: string, name: string) {
    const html = await render(
      WelcomeEmail({
        name,
        actionUrl: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard`,
      })
    );

    return resend.emails.send({
      from: 'Your App <welcome@yourapp.com>',
      to,
      subject: 'Welcome to Our App!',
      html,
    });
  },

  async sendPasswordReset(to: string, resetUrl: string) {
    const html = await render(PasswordResetEmail({ resetUrl }));

    return resend.emails.send({
      from: 'Your App <security@yourapp.com>',
      to,
      subject: 'Reset Your Password',
      html,
    });
  },
};

Magic Link Implementation#

// lib/auth/magic-link.ts
import { emailService } from '@/lib/email-service';
import { prisma } from '@/lib/db';
import { randomBytes } from 'crypto';

export async function sendMagicLink(email: string) {
  const token = randomBytes(32).toString('hex');
  const expires = new Date(Date.now() + 15 * 60 * 1000); // 15 minutes

  await prisma.verificationToken.create({
    data: { identifier: email, token, expires },
  });

  const magicLink = `${process.env.NEXT_PUBLIC_APP_URL}/auth/verify?token=${token}`;
  await emailService.sendMagicLink(email, magicLink);
}

export async function verifyMagicLink(token: string) {
  const verificationToken = await prisma.verificationToken.findUnique({
    where: { token },
  });

  if (!verificationToken || verificationToken.expires < new Date()) {
    throw new Error('Invalid or expired token');
  }

  await prisma.verificationToken.delete({ where: { token } });
  return verificationToken.identifier;
}

Sample Prompts#

Task	Prompt
Setup	"Set up Resend for transactional email sending"
Templates	"Create a password reset email template with React Email"
Magic link	"Implement passwordless authentication with magic links"
Preferences	"Add email preference management for users"
Queue	"Set up background email processing with Inngest"

Configuration#

// bootspring.config.js
module.exports = {
  agents: {
    customInstructions: {
      'email-expert': `
        - Use Resend for email delivery
        - Create templates with React Email
        - Implement proper error handling
        - Add unsubscribe functionality
        - Track email analytics
      `,
    },
  },
  email: {
    provider: 'resend',
    domain: 'yourapp.com',
  },
};

Auth Expert - Authentication flows
Backend Expert - API integration
Marketing Expert - Email campaigns