Why Resend for Vibe-Coded Apps
Most email services (SendGrid, Mailgun, SES) were built for DevOps teams. Resend was built for developers who want to ship fast. The API is one function call. Templates are React components. And the free tier gives you 3,000 emails/month — more than enough to validate a product.
For vibe coders, the key advantage is that AI coding agents already understand React. That means your agent can design, build, and iterate on email templates using the same patterns it uses for your UI. No new syntax. No XML templating language. Just JSX.
3,000
Free emails/month
1
API call to send
React
Native templates
The Core Setup (2 Minutes)
Every Resend integration follows three steps: install the SDK, set your API key, and callresend.emails.send(). That's the entire integration.
Install
npm install resend
app/api/send-email/route.ts
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST(req: Request) {
const { to, name } = await req.json();
const { data, error } = await resend.emails.send({
from: 'Your App <[email protected]>',
to,
subject: 'Welcome to the club',
html: `<h1>Hey ${name}!</h1><p>You're in. Here's what to do next...</p>`,
});
if (error) return Response.json({ error }, { status: 400 });
return Response.json({ id: data?.id });
}💡 Domain Setup
Resend lets you send from [email protected] for testing. For production, add your domain in the Resend dashboard and set up the DNS records (SPF, DKIM, DMARC). Takes 5 minutes and dramatically improves deliverability.
React Email Templates (The Superpower)
This is where Resend shines for vibe coders. Instead of wrestling with HTML email quirks (inline styles, table layouts, Outlook compatibility), you write React components using the react.email library. Your AI coding agent can build these natively.
emails/welcome.tsx
import { Html, Head, Body, Container, Section,
Text, Button, Heading, Hr } from '@react-email/components';
interface WelcomeEmailProps {
name: string;
loginUrl: string;
}
export default function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ background: '#f9fafb', fontFamily: 'sans-serif' }}>
<Container style={{ maxWidth: 520, margin: '0 auto', padding: 32 }}>
<Heading style={{ fontSize: 24 }}>Welcome, {name} 🎉</Heading>
<Text>Your account is ready. Here's what to do next:</Text>
<Section>
<Text>1. Complete your profile</Text>
<Text>2. Connect your first integration</Text>
<Text>3. Invite your team</Text>
</Section>
<Hr />
<Button
href={loginUrl}
style={{
background: '#0284c7', color: '#fff',
padding: '12px 24px', borderRadius: 8
}}
>
Open Your Dashboard →
</Button>
</Container>
</Body>
</Html>
);
}Then send it by passing the component directly:
import WelcomeEmail from '@/emails/welcome';
await resend.emails.send({
from: 'Your App <[email protected]>',
to: user.email,
subject: 'Welcome to Your App!',
react: WelcomeEmail({ name: user.name, loginUrl: dashboardUrl }),
});Agent Prompts: Copy-Paste These
The fastest way to add email functionality is to give your AI coding agent a specific, detailed prompt. Here are battle-tested prompts for the most common transactional email patterns:
01 Welcome Email + Onboarding Sequence
02 Magic Link Authentication
03 Payment Receipt
04 Weekly Digest / Report Email
05 Real-Time Alert Notification
Creative Use Cases That Delight Users
Transactional emails don't have to be boring. Here are patterns that turn a utility email into a moment users actually look forward to:
🏆 Milestone Celebrations
Send a congratulatory email when users hit milestones — 100th task completed, first month anniversary, usage streak. Include a shareable achievement image they can post to social media (generated with react.email + a dynamic OG image).
📊 AI-Generated Insights
Use your AI backend to generate a personalized insight from the user's data, then email it weekly. "Your top-performing content this week was about X — here's why it worked and 3 angles to explore next." Feels like having a personal analyst.
🔔 Smart Inactivity Nudges
Instead of a generic "we miss you" email, reference what the user was last working on: "You left a draft report on SaaS trends — want to finish it? Here's a one-click link to pick up where you left off." Context makes re-engagement feel helpful, not spammy.
🤝 Social Proof Triggers
"Someone on your team just completed their first project using your shared workspace." Activity notifications from teammates drive product adoption within organizations and give users a reason to log back in.
📦 Automated Deliverables
If your app generates reports, PDFs, or exports — email them automatically when ready. Attach the file directly using Resend's attachment support. Users get value in their inbox without needing to check the dashboard.
⚡ Usage-Based Upgrade Prompts
When a user approaches their free tier limit, send an email showing exactly what they've accomplished ("You've analyzed 47 trends this month — just 3 away from your limit") with a clear upgrade path. Data-driven upsells convert dramatically better than generic ones.
Production Checklist
Before you go live, run through this list:
- ☐DNS records configured — SPF, DKIM, and DMARC set up for your sending domain
- ☐API key in environment variables — never hardcode, use .env.local for dev and your hosting provider's secrets for production
- ☐Error handling — catch Resend errors and log them; don't let a failed email crash a user flow
- ☐Unsubscribe links — legally required in many jurisdictions; add a one-click unsubscribe to every marketing-adjacent email
- ☐Preview and test — use
npx react-email devto preview templates locally before sending - ☐Rate limiting — Resend's free tier is 3K/month; add guards so a bug doesn't burn your quota in minutes
🎯 Vibe Coder Tip
Start with one email — the welcome email. Get it looking great using react.email's local preview (npx react-email dev), wire it up to your signup flow, and ship it. You can add receipts, alerts, and digests later. One polished email beats five half-finished ones.