@theagentverse/email-agent-cli

A Next.js CLI tool that scaffolds a complete email sending system with React components and API routes using Resend. Handles transactional emails, notifications, and user communications with a pre-built UI and secure server-side API.

Installation

No installation required! Use npx to run directly:

npx @theagentverse/email-agent-cli init

Quick Start

Step 1: Run the CLI in your Next.js project

cd your-nextjs-project
npx @theagentverse/email-agent-cli init

This will scaffold three files:

• component/EmailAgent.tsx - Email form component
• app/api/email-agent/route.ts - API route handler
• app/types/type.ts - TypeScript types

Step 2: Install Resend

npm install resend

Step 3: Add your API key

Create or update .env.local:

RESEND_API_KEY=re_your_api_key_here

Get your API key from resend.com

Step 4: Use the component

import { EmailAgent } from '@/component/EmailAgent';

export default function ContactPage() {
  return (
    <div>
      <h1>Contact Us</h1>
      <EmailAgent />
    </div>
  );
}

Features

• 🚀 One-command setup - Scaffold complete email system in seconds
• 📧 Pre-built UI - Beautiful, responsive email form component
• 🔐 Secure by default - API key stays server-side only
• ✅ Form validation - Built-in field validation and error handling
• 🎨 Customizable - Easily modify styles and behavior
• ⚡ TypeScript - Full type safety out of the box
• 🔄 Real-time feedback - Loading states and status messages
• 📱 Mobile responsive - Works perfectly on all devices
• ✉️ Customizable sender - Users can change the "from" email address

What Gets Created

1. EmailAgent Component

A client-side React component with:

• Email form (from, to, subject, message fields)
• Default "from" address: [email protected] (customizable by users)
• Loading states and error handling
• Inline styled UI components with proper contrast

2. API Route

Server-side API route at /api/email-agent that:

• Reads RESEND_API_KEY from environment variables
• Accepts custom "from" address from the form
• Sends emails via Resend API
• Returns success/error responses

3. Type Definitions

TypeScript types for form data and component props.

Environment Variables

| Variable | Required | Description | |----------|----------|-------------| | NEXT_PUBLIC_RESEND_KEY | Yes | Your Resend API key |

Customization

Change the default sender email

Edit component/EmailAgent.tsx and modify the initial state:

const [formData, setFormData] = useState<EmailFormData>({
  from: '[email protected]', // Change default here
  to: '',
  subject: '',
  message: '',
});

Customize the form styles

Edit component/EmailAgent.tsx and modify the styles object at the bottom of the file.

API Reference

EmailAgent Component

import { EmailAgent } from '@/component/EmailAgent';

<EmailAgent />

No props required - the component is self-contained and reads the API key from environment variables via the API route.

API Endpoint

POST /api/email-agent

Request body:

{
  "from": "[email protected]",
  "to": "[email protected]",
  "subject": "Email subject",
  "html": "Email body content"
}

Response:

{
  "success": true,
  "id": "email_id_from_resend"
}

Requirements

• Next.js 13+ (App Router)
• React 18+
• Node.js 16+

Development

Local Testing with npm link

If you're developing the CLI tool itself:

1. Clone and build the package:

git clone <your-repo>
cd email-agent-cli
npm install
npm link

2. In a test Next.js project:

cd ../test-project
npm link @theagentverse/email-agent-cli
email-agent-cli init

3. Unlink when done:

npm unlink @theagentverse/email-agent-cli

Troubleshooting

"Missing Resend API key" error

Make sure you've added RESEND_API_KEY to your .env.local file and restarted your dev server.

Import errors

Ensure you're using Next.js 13+ with App Router. The paths use the @/ alias which requires:

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Module not found

After running the CLI, make sure to restart your Next.js dev server to pick up the new files.

Form text not visible

The component includes proper text color styling (color: '#000') to ensure visibility on both light and dark backgrounds.

Examples

Basic usage

import { EmailAgent } from '@/component/EmailAgent';

export default function Page() {
  return <EmailAgent />;
}

With custom wrapper

import { EmailAgent } from '@/component/EmailAgent';

export default function ContactPage() {
  return (
    <div className="container mx-auto py-12">
      <h1 className="text-3xl font-bold mb-8">Contact Us</h1>
      <div className="max-w-2xl">
        <EmailAgent />
      </div>
    </div>
  );
}

License

MIT

Links

• npm Package
• Resend Documentation
• GitHub Repository

Support

For issues and questions:

• Open an issue on GitHub
• Email: [email protected]

Made with ❤️ by The Agent Verse