How We Built an AI Social Post Generator That Converts Webpages into Viral Content

In the crowded landscape of digital marketing tools, we noticed a gap: while there were plenty of scheduling tools and analytics platforms, nothing elegantly solved the problem of transforming existing content into engaging social media posts. This is the story of how we built an AI-powered solution that not only fills this gap but does so with production-grade reliability, security, and performance.

The Business Case: Why Build This?

Our research revealed a common pain point among content creators and marketers: they produce excellent long-form content but struggle to repurpose it effectively for social media. The manual process of extracting key points, adapting tone for different platforms, and creating engaging hooks is time-consuming and often gets deprioritized.

Architecture Overview

We designed the system with scalability, security, and maintainability in mind. Here's the high-level flow:

┌──────────────────┐     ┌──────────────────┐     ┌──────────────────┐
│   User Input     │────▶│  URL Validation  │────▶│   Rate Limit     │
│                  │     │    & Safety      │     │     Check        │
└──────────────────┘     └──────────────────┘     └──────────────────┘
                                                            │
                                                            ▼
┌──────────────────┐     ┌──────────────────┐     ┌──────────────────┐
│   Cache Check    │◀────│    Firecrawl     │◀────│   Safe? Yes      │
│                  │     │    Scraping      │     │                  │
└──────────────────┘     └──────────────────┘     └──────────────────┘
         │                        │
         ▼                        ▼
┌──────────────────┐     ┌──────────────────┐     ┌──────────────────┐
│  Return Cached   │     │  Pre-Moderation  │────▶│  Blocked? No     │
│                  │     │  Content Check   │     │                  │
└──────────────────┘     └──────────────────┘     └──────────────────┘
                                  │                         │
                                  ▼                         ▼
                         ┌──────────────────┐     ┌──────────────────┐
                         │     OpenAI       │────▶│ Post-Moderation  │
                         │   Generation     │     │  Output Check    │
                         └──────────────────┘     └──────────────────┘
                                  │                         │
                                  ▼                         ▼
                         ┌──────────────────┐     ┌──────────────────┐
                         │   Email Gate     │────▶│ Store & Return   │
                         │  Lead Capture    │     │                  │
                         └──────────────────┘     └──────────────────┘

Technology Stack

Database Architecture with Supabase

For our production database, we paired Supabase with Prisma ORM - creating a powerful combination of managed PostgreSQL infrastructure and type-safe database access.

-- Core tables for AI Social Post Generator
model GeneratedPost {
  id            String   @id @default(cuid())
  url           String
  urlHash       String   @index
  email         String?

  -- Scraped content storage
  scrapedTitle  String?
  scrapedText   String   @db.Text
  scrapedMeta   Json?

  -- Generated posts for each platform
  linkedinPost  String   @db.Text
  twitterPost   String   @db.Text
  facebookPost  String   @db.Text
  instagramPost String   @db.Text

  -- Performance & caching
  aiModel       String
  processingMs  Int
  cached        Boolean  @default(false)

  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
}

Setting Up Supabase

Type-Safe Database Access with Prisma

While Supabase provides the infrastructure, Prisma serves as our ORM layer, offering type-safe database queries, automated migrations, and an intuitive data modeling experience that integrates seamlessly with TypeScript.

// Type-safe database queries
import { prisma } from '@/lib/prisma';

// Create a new post with full type safety
const newPost = await prisma.generatedPost.create({
  data: {
    url,
    urlHash,
    linkedinPost, // TypeScript knows the types!
    twitterPost,
    facebookPost,
    instagramPost,
    scrapedMeta: { // JSON field
      author, imageUrl
    }
  }
});

// Query with relations and filtering
const recentPosts = await prisma.generatedPost.findMany({
  where: { email: { not: null } },
  orderBy: { createdAt: 'desc' },
  take: 10
});

Prisma + Supabase Setup

Rate Limiting with Upstash Redis

To protect our AI resources and ensure fair usage, we implemented a sophisticated rate limiting system using Upstash Redis - a serverless Redis service designed for modern edge applications.

// Tiered rate limiting with Upstash
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL,
  token: process.env.UPSTASH_REDIS_REST_TOKEN
});

// Anonymous users: 5 req/hour, 10 req/day
const anonLimiter = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(5, '1 h'),
  analytics: true
});

// Verified users: 20 req/hour, 50 req/day
const verifiedLimiter = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(20, '1 h'),
  analytics: true
});

Rate Limiting Flow

Email Delivery with Resend

For reliable email delivery, we integrated Resend - a modern email API built for developers. It powers our lead capture emails and result delivery with exceptional reliability.

// Email delivery for generated posts
import {Resend} from 'resend';
import {SocialPostEmail} from '@/emails/templates';

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

// Send beautifully formatted results
await resend.emails.send({
  to: userEmail,
  from: 'Digital Applied <noreply@updates.digitalapplied.com>',
  subject: 'Your AI-Generated Social Posts 🚀',
  react: <SocialPostEmail posts={generatedPosts} url={originalUrl} />
});

Email Templates

Beautiful Email Templates with React Email

To create stunning, responsive email templates that match our brand, we used React Email - a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.

import {
  Body, Container, Head, Html, Preview,
  Section, Text, Button, Img
} from '@react-email/components';

export function SocialPostEmail({ posts }) {
  return (
    <Html>
      <Head />
      <Preview>Your AI-generated social posts are ready!</Preview>
      <Body style={{ backgroundColor: '#f6f9fc' }}>
        <Container>
          <Section>
            <Img src="logo.png" width="120" />
            <Text>🎉 Your social posts are ready!</Text>
            {/* Platform-specific posts */}
            <Button href="https://digitalapplied.com">
              View All Posts
            </Button>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

Email Development Workflow

Intelligent Web Scraping with Firecrawl

For reliable content extraction from modern JavaScript-heavy websites, we integrated Firecrawl - an AI-powered web scraping API that handles dynamic content, bypasses anti-scraping measures, and delivers clean, structured data.

// Intelligent content extraction
import FirecrawlApp from '@firecrawl/firecrawl-js';

const firecrawl = new FirecrawlApp({
  apiKey: process.env.FIRECRAWL_API_KEY
});

// Scrape with smart options
const scraped = await firecrawl.scrapeUrl(url, {
  formats: ['markdown', 'html'],
  waitFor: 2000, // Wait for JS
  includeTags: ['article', 'main', 'p'],
  excludeTags: ['nav', 'footer']
});

// Process and clean content
const content = cleanContent(scraped.markdown);
const metadata = scraped.metadata;

Content Processing Pipeline

Starting Smart: The MVP Approach

Instead of diving straight into complex AI integrations, we built an MVP with simulated AI responses. This allowed us to:

• Validate the user experience and interface
• Test the email gate conversion rate
• Gather feedback without incurring API costs
• Perfect the visual mockup components

This approach proved invaluable. We discovered that users cared more about the visual preview than we anticipated, leading us to invest heavily in platform-accurate mockup components.

Production Implementation: 10 Critical Phases

Transforming the MVP into a production-ready system required careful planning and execution across 10 phases:

URL Validation with Google Safe Browsing

Security is paramount when accepting user-submitted URLs. We implemented multi-layer validation including Google Safe Browsing API to protect against malicious content, phishing sites, and other security threats.

// Complete URL validation pipeline
export async function validateURL(url: string): Promise<ValidationResult> {
  // 1. Basic format validation
  if (!/^https?:\/\//.test(url)) {
    return { isValid: false, reason: 'Invalid URL format' };
  }

  // 2. Blocked keywords check
  const blockedKeywords = ['malware', 'phishing', 'virus'];
  if (blockedKeywords.some(k => url.includes(k))) {
    return { isValid: false, reason: 'Blocked content' };
  }

  // 3. Google Safe Browsing check
  const threat = await checkGoogleSafeBrowsing(url);
  if (threat) {
    return { isValid: false, reason: `Threat detected: ${threat}` };
  }

  return { isValid: true, normalizedUrl: url };
}

Validation Flow Diagram

Security, Rate Limiting & Abuse Prevention

Building a public-facing AI tool requires robust security measures to prevent abuse and protect resources:

{
  "error": "Rate limit exceeded",
  "remaining": 0,
  "reset": "2025-06-08T15:30:00.000Z",
  "upgrade": "Verify your email for higher limits"
}

Dual-Layer Content Moderation: A Production Necessity

When building AI-powered tools that process user-submitted content, implementing comprehensive content moderation is not optional—it's essential for security, compliance, and quality.

Implementation Example

// Pre-moderation implementation in web-scraper.ts
async function moderateScrapedContent(
  content: ScrapedContent
): Promise<ModerationResult> {
  // Combine text for efficient checking
  const textToCheck = [
    content.title,
    content.description,
    content.content.substring(0, 1000)
  ].filter(Boolean).join('\\n\\n');

  const moderation = await openai.moderations.create({
    model: 'omni-moderation-latest',
    input: textToCheck
  });

  if (moderation.results[0].flagged) {
    // Check severity and handle appropriately
    return handleFlaggedContent(moderation);
  }

  return { safe: true };
}

Cost-Benefit Analysis

AI Integration & Cost Optimization

Choosing the right AI model and optimizing costs was crucial for sustainability:

// Platform-optimized generation with OpenAI
const systemPrompt = `
You are an expert social media strategist. Generate posts that:
- Match each platform's unique style and audience
- Use appropriate length (Twitter: 280 chars, LinkedIn: 1300)
- Include relevant emojis and hashtags
- Create engaging hooks that drive interaction
`;

const response = await openai.chat.completions.create({
  model: 'gpt-4.1-mini',
  messages: [
    { role: 'system', content: systemPrompt },
    { role: 'user', content: `Content: ${scrapedContent}` }
  ],
  temperature: 0.7, // Balanced creativity
  response_format: { type: 'json_object' }
});

Prompt Engineering for Quality

Lessons Learned & Future Enhancements

Performance & Results

Real-World Impact

Since launching the AI Social Post Generator, we've seen remarkable results that validate our approach:

Conclusion

Building the AI Social Post Generator taught us valuable lessons about balancing innovation with practicality. By starting with an MVP, focusing on security from day one, and optimizing for both user experience and cost efficiency, we created a tool that not only serves our users but also generates qualified leads for our agency.

Production Deployment with Vercel

Deploying our AI Social Post Generator to production requires careful configuration of environment variables and services. Here's how we set up our Vercel deployment for optimal performance and security.

# Core Services
DATABASE_URL="postgresql://...supabase.com:5432/postgres"
DIRECT_URL="postgresql://...supabase.com:5432/postgres"

# AI & Web Scraping
OPENAI_API_KEY="sk-proj-..."
FIRECRAWL_API_KEY="fc-..."

# Rate Limiting
UPSTASH_REDIS_REST_URL="https://...upstash.io"
UPSTASH_REDIS_REST_TOKEN="AX..."

# Email Service
RESEND_API_KEY="re_..."

# Security
GOOGLE_SAFE_BROWSING_API_KEY="AIza..."

# Feature Flags
ENABLE_AI_GENERATION="true"
NODE_ENV="production"

Deployment Process