DEV Community

Allan Niñal
Allan Niñal

Posted on

Building a Free AI Email Response Generator: A Complete Guide

#ai #emailautomation #javascript #webdev

Transform your customer service with AI-powered email responses in seconds

Email Response Generator

🚀 Live Demo

Try it now: free-email-response-generator.dailyaicollection.net

What We Built

Ever spent hours crafting the perfect email response? This AI-powered tool generates professional email replies in seconds, perfect for:

  • 📧 Customer service teams
  • 💼 Virtual assistants
  • 🏢 Business professionals
  • 👥 Anyone who sends emails daily

🛠️ Tech Stack Overview

Core Technologies:

  • Frontend: Vanilla JavaScript + Tailwind CSS
  • AI APIs: OpenRouter & AIML API
  • Storage: Local browser storage (privacy-first)
  • PWA: Service Worker for offline support
  • Security: Content Security Policy (CSP)

🎯 Key Features

1. Multiple AI Providers

Users can choose between two powerful AI providers:

const providers = {
  openrouter: {
    name: 'OpenRouter',
    description: 'Multiple models, pay-as-you-go',
    endpoint: 'https://openrouter.ai/api/v1/chat/completions'
  },
  aimlapi: {
    name: 'AIML API',
    description: '200+ models, better pricing',
    endpoint: 'https://api.aimlapi.com/chat/completions'
  }
};
Enter fullscreen mode Exit fullscreen mode

2. Smart Response Types

Eight different response categories:

  • Standard Reply
  • Acknowledgment
  • Follow-up
  • Polite Decline
  • Information Request
  • Complaint Response
  • Thank You
  • Meeting/Schedule

3. Tone Customization

Seven professional tones:

  • Professional
  • Friendly & Warm
  • Formal
  • Casual
  • Apologetic
  • Assertive
  • Empathetic

🔄 User Workflow

💡 Core Implementation

API Integration

The heart of the app is the AI integration:

async function generateResponse() {
    const apiKey = localStorage.getItem(`${selectedProvider}_api_key`);
    const prompt = buildPrompt(emailInput, tone, responseType, context);

    try {
        const response = await fetch(getAPIEndpoint(), {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${apiKey}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                model: selectedModel,
                messages: [{ role: 'user', content: prompt }],
                temperature: 0.7,
                max_tokens: 1000
            })
        });

        const data = await response.json();
        displayResponse(data.choices[0].message.content);

    } catch (error) {
        handleError(error);
    }
}
Enter fullscreen mode Exit fullscreen mode

Smart Prompt Engineering

The magic happens in prompt construction:

function buildPrompt(email, tone, type, context) {
    const language = getCurrentLanguage();

    return `You are a professional email assistant. Generate a ${tone} ${type} response to this email in ${language}:

Original Email:
${email}

Additional Context: ${context || 'None'}

Requirements:
- Match the ${tone} tone exactly
- Keep it professional and appropriate
- Include proper email etiquette
- Make it contextually relevant
- Respond in ${language}`;
}
Enter fullscreen mode Exit fullscreen mode

🎨 UI/UX Design Principles

1. Progressive Web App (PWA) 

// Service Worker for offline support
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js')
        .then(registration => console.log('SW registered'))
        .catch(err => console.log('SW registration failed'));
}
Enter fullscreen mode Exit fullscreen mode

2. Dark Mode Support 

:root {
    --bg-primary: #ffffff;
    --text-primary: #111827;
}

.dark {
    --bg-primary: #1f2937;
    --text-primary: #f9fafb;
}
Enter fullscreen mode Exit fullscreen mode

3. Responsive Design

Mobile-first approach using Tailwind CSS:

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <!-- Responsive grid layout -->
</div>
Enter fullscreen mode Exit fullscreen mode

🔒 Privacy & Security Features

Content Security Policy

Strict CSP implementation for security:

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self';
    script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com;
    style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
    connect-src 'self' https://openrouter.ai https://api.aimlapi.com;
">
Enter fullscreen mode Exit fullscreen mode

Local Storage Only 

// Privacy-first: Everything stored locally
function saveApiKey() {
    const apiKey = document.getElementById('apiKey').value;
    localStorage.setItem(`${selectedProvider}_api_key`, apiKey);
    // Never sent to any server except AI APIs
}
Enter fullscreen mode Exit fullscreen mode

🌍 Internationalization

Multi-language Support 

const translations = {
    en: { 'generate-response': 'Generate Email Response' },
    es: { 'generate-response': 'Generar Respuesta de Email' },
    fr: { 'generate-response': 'Générer une Réponse Email' }
    // ... 11 languages total
};

function changeLanguage(lang) {
    currentLanguage = lang;
    updateUIText();
}
Enter fullscreen mode Exit fullscreen mode

📊 Performance Optimizations

1. Lazy Loading 

// Load Ko-fi widget only after DOM ready
document.addEventListener('DOMContentLoaded', function() {
    if (typeof kofiWidgetOverlay !== 'undefined') {
        kofiWidgetOverlay.draw('allanninal', {
            'type': 'floating-chat'
        });
    }
});
Enter fullscreen mode Exit fullscreen mode

2. Auto-save Drafts 

let autoSaveTimer = null;

function autoSaveDraft() {
    clearTimeout(autoSaveTimer);
    autoSaveTimer = setTimeout(() => {
        const draft = {
            email: emailInput.value,
            tone: toneSelect.value,
            type: responseType.value,
            timestamp: new Date().toISOString()
        };
        localStorage.setItem('email_draft', JSON.stringify(draft));
    }, 1000);
}
Enter fullscreen mode Exit fullscreen mode

🔧 Development Workflow

Key Development Features:

  • 🔄 Auto-deployment: GitHub Pages integration
  • 🛡️ Security Headers: CSP and security best practices
  • 📱 Mobile-First: Responsive design from the start
  • ♿ Accessibility: WCAG 2.1 AA compliance
  • 🎨 Dark Mode: System preference detection

🎯 Challenges & Solutions

Challenge 1: CSP Violations

Problem: Ko-fi widget blocked by Content Security Policy

Solution:

<!-- Added Ko-fi domains to CSP -->
style-src 'self' 'unsafe-inline' https://storage.ko-fi.com;
frame-src https://ko-fi.com;
Enter fullscreen mode Exit fullscreen mode

Challenge 2: API Key Security

Problem: Securely handle user API keys

Solution: Local storage only, never transmitted to our servers

// Keys stored locally, only sent to AI providers
const apiKey = localStorage.getItem(`${provider}_api_key`);
Enter fullscreen mode Exit fullscreen mode

Challenge 3: Cross-browser Compatibility

Problem: Different browsers, different behaviors

Solution: Progressive enhancement and feature detection

if ('serviceWorker' in navigator) {
    // PWA features
}
Enter fullscreen mode Exit fullscreen mode

📈 Results & Impact

Performance Metrics:

  • ⚡ Load Time: Under 2 seconds
  • 📱 Mobile Score: 95/100
  • ♿ Accessibility: AA compliant
  • 🔒 Security: A+ rating

User Benefits:

  • ⏱️ Time Saved: 5-10 minutes per email
  • 🎯 Consistency: Professional tone across all responses
  • 🌍 Multi-language: Support for 11 languages
  • 💰 Cost-effective: Pay only for AI usage

🚀 What's Next?

Planned Features:

  • 📝 Email Templates: Pre-built templates for common scenarios
  • 🤖 Batch Processing: Handle multiple emails at once
  • 📊 Analytics: Usage tracking and insights
  • 🔗 Email Client Integration: Browser extensions
  • 🎨 Custom Branding: White-label options

💡 Key Takeaways

  1. Privacy First: Local storage builds user trust
  2. Multiple Providers: Give users choice and redundancy
  3. Progressive Enhancement: Works on all devices
  4. User Experience: Simple, intuitive, fast
  5. Security: CSP and best practices from day one

🔗 Resources

👨‍💻 About the Author

Built with ❤️ by Allan Niñal as part of Daily AI Collection - discovering and building free AI tools for everyone.

Found this helpful? Consider supporting the project to keep it free for everyone!

Have questions or suggestions? Drop a comment below or reach out on social media!

Top comments (0)