Use when setting up an email inbox for an AI agent (Moltbot, Clawdbot, or similar) - configuring inbound email, webhooks, tunneling for local development, and implementing security measures to prevent prompt injection attacks.
中文简介正在准备中。当前显示原文说明。
Use when receiving emails with Resend - setting up inbound domains, processing email.received webhooks, retrieving email content/attachments, or forwarding received emails.
中文简介正在准备中。当前显示原文说明。
查看安装方法安装前可以查看交给 AI 代理的指令内容。
Resend processes incoming emails for your domain and sends webhook events to your endpoint. Webhooks contain metadata only - you must call separate APIs to retrieve email body and attachments.
.resend.app domain or add MX record for custom domainemail.received eventUse your auto-generated address: <anything>@<your-id>.resend.app
No DNS configuration needed. Find your address in Dashboard → Emails → Receiving → "Receiving address".
Add MX record to receive at <anything>@yourdomain.com.
| Setting | Value |
|---|---|
| Type | MX |
| Host | Your domain or subdomain |
| Value | Provided in Resend dashboard |
| Priority | 10 (lowest number wins a conflict, but typically only multiples of 10 are used) |
Critical: Your MX record must have the lowest priority value, or emails won't route to Resend.
If you already have MX records (e.g., Google Workspace, Microsoft 365):
| Approach | Result |
|---|---|
| Use subdomain (recommended) | support.acme.com → Resend, acme.com → existing provider |
| Use root domain | All email routes to Resend (breaks existing email) |
# Example: receive at support.acme.com without affecting acme.com
support.acme.com. MX 10 <resend-mx-value>
If you set up Resend to receive email on a root domain, all traffic will be routed to Resend, not to any other mailbox. It's crucial, then, to use a subdomain with inbound emails.
email.receivedDashboard → Webhooks → Add Webhook → Select email.received
For local development, use tunneling (ngrok, VS Code Port Forwarding):
ngrok http 3000
# Use https://abc123.ngrok.io/api/webhook as endpoint
Important: Payload contains metadata only, not email body or attachment content.
{
"type": "email.received",
"created_at": "2024-02-22T23:41:12.126Z",
"data": {
"email_id": "a1b2c3d4-...",
"from": "sender@example.com",
"to": ["support@acme.com"],
"cc": [],
"bcc": [],
"subject": "Question about my order",
"attachments": [
{
"id": "att_abc123",
"filename": "receipt.pdf",
"content_type": "application/pdf"
}
]
}
}
Always verify signatures to prevent spoofed events:
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST(req: Request) {
const payload = await req.text();
const event = resend.webhooks.verify({
payload,
headers: {
'svix-id': req.headers.get('svix-id'),
'svix-timestamp': req.headers.get('svix-timestamp'),
'svix-signature': req.headers.get('svix-signature'),
},
secret: process.env.RESEND_WEBHOOK_SECRET,
});
if (event.type === 'email.received') {
// Process the email
}
return new Response('OK', { status: 200 });
}
Webhooks exclude email body and headers. Call the Receiving API to get them:
if (event.type === 'email.received') {
const { data: email } = await resend.emails.receiving.get(
event.data.email_id
);
console.log(email.html); // HTML body
console.log(email.text); // Plain text body
console.log(email.headers); // Email headers
}
Why this design? Serverless environments have request body size limits. Separating content retrieval supports large emails and attachments.
const { data: attachments } = await resend.emails.receiving.attachments.list({
emailId: event.data.email_id,
});
for (const attachment of attachments) {
console.log(attachment.filename);
console.log(attachment.download_url); // Valid for 1 hour
console.log(attachment.expires_at);
}
const response = await fetch(attachment.download_url);
const buffer = await response.arrayBuffer();
// Save to storage, process, etc.
await saveToStorage(attachment.filename, buffer);
Important: download_url expires after 1 hour. Call the API again for a fresh URL if needed.
Complete workflow to receive and forward an email with attachments:
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST(req: Request) {
const payload = await req.text();
const event = resend.webhooks.verify({ /* ... */ });
if (event.type === 'email.received') {
// 1. Get email content
const { data: email } = await resend.emails.receiving.get(
event.data.email_id
);
// 2. Get attachments (if any)
const { data: attachmentList } = await resend.emails.receiving.attachments.list({
emailId: event.data.email_id,
});
// 3. Download and encode attachments
const attachments = await Promise.all(
attachmentList.map(async (att) => {
const res = await fetch(att.download_url);
const buffer = Buffer.from(await res.arrayBuffer());
return {
filename: att.filename,
content: buffer.toString('base64'),
};
})
);
// 4. Forward the email
await resend.emails.send({
from: 'Support System <system@acme.com>',
to: ['team@acme.com'],
subject: `Fwd: ${email.subject}`,
html: email.html,
text: email.text,
attachments,
});
}
return new Response('OK', { status: 200 });
}
All emails to your domain arrive at the same webhook. Route based on the to field:
if (event.type === 'email.received') {
const recipient = event.data.to[0];
if (recipient.includes('support@')) {
await handleSupportEmail(event.data);
} else if (recipient.includes('billing@')) {
await handleBillingEmail(event.data);
} else {
await handleUnknownEmail(event.data);
}
}
| Mistake | Fix |
|---|---|
| Expecting body in webhook payload | Webhook has metadata only - call resend.emails.receiving.get() for body |
| MX record not lowest priority | Ensure Resend's MX has lowest number (highest priority) |
| Adding MX to root domain with existing email | Use subdomain to avoid breaking existing email service |
| Using expired download_url | URLs expire after 1 hour - call attachments API again for fresh URL |
| Not verifying webhook signatures | Always verify - attackers can send fake events |
| Forgetting to return 200 OK | Resend retries on non-200 responses |
Resend stores received emails even if:
View all received emails in Dashboard → Emails → Receiving tab.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Use when setting up an email inbox for an AI agent (Moltbot, Clawdbot, or similar) - configuring inbound email, webhooks, tunneling for local development, and implementing security measures to prevent prompt injection attacks.
中文简介正在准备中。当前显示原文说明。
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
中文简介正在准备中。当前显示原文说明。
Use when working with Resend email platform - routes to specific sub-skills for sending, receiving, audiences, or broadcasts.
中文简介正在准备中。当前显示原文说明。
Use when sending transactional emails (welcome messages, order confirmations, password resets, receipts), notifications, or bulk emails via Resend API.
中文简介正在准备中。当前显示原文说明。
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
中文简介正在准备中。当前显示原文说明。
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
中文简介正在准备中。当前显示原文说明。