marketing-pipeline-share-ai-content-automation

name	marketing-pipeline-share-ai-content-automation
description	Automated content creation pipeline with AI research, scriptwriting, multi-format output, and video generation using Claude/OpenAI and Remotion
triggers	["automate content creation with AI research and video generation","set up marketing pipeline with automatic article writing","generate social media content from trending topics automatically","build AI content automation with Claude and OpenAI","create automated video content from text using Remotion","implement content research and generation pipeline","automate multi-language content creation workflow","set up end-to-end marketing content automation"]

Marketing Pipeline Share - AI Content Automation

Skill by ara.so — Marketing Skills collection.

This project is an all-in-one AI-powered content automation pipeline that researches trending topics, generates multi-format articles in multiple languages, and automatically creates video content. It integrates Claude 3, OpenAI, web scraping for real-time research, and Remotion for video rendering.

What It Does

The Marketing Pipeline Share automates the entire content creation workflow:

1. Auto-Research: Crawls recent articles from TechCrunch, a16z, Twitter/X, LinkedIn (last 24h)
2. AI Content Generation: Creates articles in multiple formats (Top List, POV, Case Study, How-to) using Claude/OpenAI
3. Multi-language Output: Generates content in both English and Vietnamese with customizable tone
4. Video Generation: Automatically renders videos and infographics from written content using Remotion
5. Platform Optimization: Exports content optimized for Reels, TikTok, Shorts

Installation

# Clone the repository
git clone https://github.com/pennydinh/marketing-pineline-share.git
cd marketing-pineline-share

# Install dependencies
npm install
# or
yarn install

# Set up environment variables
cp .env.example .env

Configuration

Create a .env file in the root directory with the following variables:

# AI Services
OPENAI_API_KEY=your_openai_key_here
ANTHROPIC_API_KEY=your_claude_key_here

# Web Scraping (RapidAPI)
RAPIDAPI_KEY=your_rapidapi_key_here

# Database (if using)
DATABASE_URL=your_database_connection_string

# Next.js
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Remotion (Video Rendering)
REMOTION_AWS_ACCESS_KEY_ID=your_aws_access_key
REMOTION_AWS_SECRET_ACCESS_KEY=your_aws_secret_key

Project Structure

marketing-pineline-share/
├── src/
│   ├── app/              # Next.js app directory
│   ├── components/       # React components
│   ├── services/         # Core services
│   │   ├── research/     # Web scraping & research
│   │   ├── ai/          # AI content generation
│   │   └── video/       # Video rendering
│   ├── lib/             # Utilities and helpers
│   └── types/           # TypeScript type definitions
├── remotion/            # Remotion video templates
└── public/              # Static assets

Key API Services

1. Research Service

The research service crawls and analyzes recent content from multiple sources.

// src/services/research/scraper.ts
import axios from 'axios';

interface ResearchResult {
  title: string;
  url: string;
  summary: string;
  publishedAt: Date;
  source: string;
}

export async function researchTopic(
  keyword: string,
  sources: string[] = ['techcrunch', 'a16z', 'twitter']
): Promise<ResearchResult[]> {
  const results: ResearchResult[] = [];
  
  for (const source of sources) {
    try {
      const data = await scrapeSource(source, keyword);
      results.push(...data);
    } catch (error) {
      console.error(`Failed to scrape ${source}:`, error);
    }
  }
  
  return results.filter(
    (r) => new Date(r.) >  (.() -  *  *  * )
  );
}

  (): <[]> {
   response =  axios.(
    ,
    {
      : { : keyword, :  },
      : {
        : process..!,
        : ,
      },
    }
  );
  
   response...( ({
    : item.,
    : item.,
    : item. || item.?.(, ),
    :  (item.),
    : source,
  }));
}

2. AI Content Generation

Generate articles using Claude or OpenAI based on research data.

// src/services/ai/content-generator.ts
import Anthropic from '@anthropic-ai/sdk';
import OpenAI from 'openai';

const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

interface ContentRequest {
  keyword: string;
  format: 'toplist' | 'pov' | 'case-study' | 'how-to';
  language: 'en' | 'vi';
  tone: 'professional' | 'friendly' | 'humorous';
  researchData: any[];
}

export async function generateContent(
  request: ContentRequest,
  provider: 'claude' | 'openai' = 'claude'
): Promise<string> {
  const prompt = (request);
  
   (provider === ) {
     message =  anthropic..({
      : ,
      : ,
      : [{
        : ,
        : prompt,
      }],
    });
    
     message.[]. ===  
      ? message.[]. 
      : ;
  }  {
     completion =  openai...({
      : ,
      : [{
        : ,
        : prompt,
      }],
      : ,
    });
    
     completion.[]?.?. || ;
  }
}

 ():  {
   formatInstructions = {
    : ,
    : ,
    : ,
    : ,
  };
  
   toneInstructions = {
    : ,
    : ,
    : ,
  };
  
   ;
}

3. Multi-Language Content Generation

Generate content in both English and Vietnamese simultaneously.

// src/services/ai/multi-lang-generator.ts
import { generateContent, ContentRequest } from './content-generator';

interface MultiLangContent {
  en: string;
  vi: string;
  metadata: {
    keyword: string;
    format: string;
    generatedAt: Date;
  };
}

export async function generateMultiLanguageContent(
  request: Omit<ContentRequest, 'language'>
): Promise<MultiLangContent> {
  const [enContent, viContent] = await Promise.all([
    generateContent({ ...request, language: 'en' }),
    generateContent({ ...request, language: 'vi' }),
  ]);
  
  return {
    en: enContent,
    vi: viContent,
    metadata: {
      keyword: request.keyword,
      format: request.format,
      generatedAt: new Date(),
    },
  };
}

4. Video Generation with Remotion

Render videos from generated content using Remotion.

// src/services/video/renderer.ts
import { bundle } from '@remotion/bundler';
import { renderMedia, selectComposition } from '@remotion/renderer';
import path from 'path';

interface VideoConfig {
  content: string;
  format: 'reels' | 'tiktok' | 'shorts';
  aspectRatio: '9:16' | '16:9' | '1:1';
}

export async function renderContentVideo(
  config: VideoConfig,
  outputPath: string
): Promise<string> {
  const compositionId = getCompositionId(config.format);
  const bundleLocation = await bundle(
    path.join(process.cwd(), 'remotion/index.ts')
  );
  
  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: compositionId,
    inputProps: {
      content: config.content,
      aspectRatio: config.,
    },
  });
  
   ({
    composition,
    : bundleLocation,
    : ,
    : outputPath,
    : {
      : config.,
      : config.,
    },
  });
  
   outputPath;
}

 ():  {
   compositionMap = {
    : ,
    : ,
    : ,
  };
   compositionMap[format] || ;
}

5. Remotion Video Template

// remotion/compositions/Reels.tsx
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion';
import React from 'react';

interface ReelsProps {
  content: string;
  aspectRatio: '9:16' | '16:9' | '1:1';
}

export const InstagramReels: React.FC<ReelsProps> = ({ content, aspectRatio }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  
  const opacity = Math.min(1, frame / (fps / 2));
  const sections = content.split('\n\n').filter(Boolean);
  const currentSection = Math.floor(frame / (fps * 3)) % sections.length;
  
  return (
    <AbsoluteFill
      style={{
        backgroundColor: '#000',
         '',
         '',
         ,
      }}
    >
      
        {sections[currentSection]}
      
    
  );
};

Complete Content Pipeline Workflow

// src/services/pipeline/content-pipeline.ts
import { researchTopic } from '../research/scraper';
import { generateMultiLanguageContent } from '../ai/multi-lang-generator';
import { renderContentVideo } from '../video/renderer';

interface PipelineConfig {
  keyword: string;
  format: 'toplist' | 'pov' | 'case-study' | 'how-to';
  tone: 'professional' | 'friendly' | 'humorous';
  generateVideo: boolean;
  videoFormat?: 'reels' | 'tiktok' | 'shorts';
}

export async function runContentPipeline(config: PipelineConfig) {
  console.log(`Starting content pipeline for: ${config.keyword}`);
  
  // Step 1: Research
  console.log('Step 1: Researching topic...');
  const researchData = await researchTopic(config.keyword);
  console.log();
  
  
  .();
   content =  ({
    : config.,
    : config.,
    : config.,
    researchData,
  });
  
  
   :  |  = ;
   (config. && config.) {
    .();
    videoPath =  (
      {
        : content.,
        : config.,
        : ,
      },
      
    );
    .();
  }
  
   {
    content,
    videoPath,
    : researchData.,
    :  (),
  };
}

API Routes (Next.js)

// src/app/api/generate/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { runContentPipeline } from '@/services/pipeline/content-pipeline';

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    
    const result = await runContentPipeline({
      keyword: body.keyword,
      format: body.format || 'toplist',
      tone: body.tone || 'professional',
      generateVideo: body.generateVideo || false,
      videoFormat: body.videoFormat || 'reels',
    });
    
    return NextResponse.json({
      success: true,
      data: result,
    });
  } catch (error) {
    console.error('Pipeline error:', error);
    return NextResponse.json(
      { : , : error. },
      { :  }
    );
  }
}

Frontend Component Example

// src/components/ContentGenerator.tsx
'use client';

import { useState } from 'react';

export default function ContentGenerator() {
  const [keyword, setKeyword] = useState('');
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<any>(null);
  
  async function handleGenerate() {
    setLoading(true);
    try {
      const response = await fetch('/api/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          keyword,
          format: 'toplist',
          tone: 'professional',
          generateVideo: true,
          videoFormat: 'reels',
        }),
      });
      
      const data = await response.json();
      setResult(data.);
    }  (error) {
      .(, error);
    }  {
      ();
    }
  }
  
   (
    
  );
}

Common Patterns

Batch Content Generation

// Generate multiple articles at once
async function batchGenerate(keywords: string[]) {
  const results = await Promise.all(
    keywords.map((keyword) =>
      runContentPipeline({
        keyword,
        format: 'toplist',
        tone: 'professional',
        generateVideo: false,
      })
    )
  );
  
  return results;
}

Content Scheduling

// Schedule content generation for later
import { scheduleJob } from 'node-schedule';

scheduleJob('0 9 * * *', async () => {
  // Run daily at 9 AM
  const trendingTopics = await getTrendingTopics();
  await batchGenerate(trendingTopics);
});

Custom Video Templates

// remotion/compositions/CustomTemplate.tsx
export const CustomTemplate: React.FC<{ title: string; points: string[] }> = ({
  title,
  points,
}) => {
  const frame = useCurrentFrame();
  
  return (
    <AbsoluteFill style={{ backgroundColor: '#1a1a1a' }}>
      <div style={{ padding: 60 }}>
        <h1 style={{ fontSize: 72, color: '#fff', marginBottom: 40 }}>
          {title}
        </h1>
        {points.map((point, i) => (
          <div
            key={i}
            style={{
              fontSize: 36,
              color: '#fff',
              opacity: frame > (i + 1) * 30 ? 1 : 0,
              marginBottom: 20,
            }}
          >
            {i + 1}. {point}
          </div>
        ))}
      </>
    
  );
};

Troubleshooting

API Rate Limits

// Implement rate limiting and retry logic
import pRetry from 'p-retry';

async function generateWithRetry(request: ContentRequest) {
  return pRetry(
    () => generateContent(request),
    {
      retries: 3,
      onFailedAttempt: (error) => {
        console.log(
          `Attempt ${error.attemptNumber} failed. Retrying...`
        );
      },
    }
  );
}

Memory Issues with Video Rendering

// Reduce memory usage by processing videos sequentially
async function renderVideosSequentially(configs: VideoConfig[]) {
  const results = [];
  for (const config of configs) {
    const result = await renderContentVideo(
      config,
      `output/video-${Date.now()}.mp4`
    );
    results.push(result);
    // Allow garbage collection between renders
    await new Promise((resolve) => setTimeout(resolve, 1000));
  }
  return results;
}

Research Data Quality

// Filter and validate research results
function validateResearchData(results: ResearchResult[]): ResearchResult[] {
  return results.filter((r) => {
    const hasValidContent = r.summary && r.summary.length > 50;
    const isRecent = new Date(r.publishedAt) > new Date(Date.now() - 48 * 60 * 60 * 1000);
    const hasValidUrl = r.url && r.url.startsWith('http');
    
    return hasValidContent && isRecent && hasValidUrl;
  });
}

Development Commands

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run type checking
npm run type-check

# Render a single video composition
npm run remotion render

This skill enables AI coding agents to effectively utilize the Marketing Pipeline Share project for automated content creation, from research through video generation, with full TypeScript integration and Next.js deployment.