Skip to main content Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/Aradotso/marketing-skills --skill marketing-pipeline-automationLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Métiers associés SOC
Basé sur la classification professionnelle SOC
name marketing-pipeline-automation description Automated AI content pipeline from research to video generation using Claude, OpenAI, and Remotion triggers ["how do I automate content creation with AI","help me set up the marketing pipeline project","generate video content from text automatically","crawl news and create content with Claude","automate research to video workflow","build AI content generation pipeline","create automated marketing content system","set up remotion video rendering for content"]
Marketing Pipeline Automation Skill
Skill by ara.so — Marketing Skills collection.
This skill enables AI coding agents to help developers use the Ultimate AI Content Pipeline - an automated system that takes a keyword and produces complete content pieces including research, written articles, and rendered videos. The pipeline integrates Claude 3, OpenAI, web scraping, and Remotion for video generation.
What This Project Does
The Marketing Pipeline automates the entire content creation workflow:
Auto-Research : Crawls recent news from TechCrunch, a16z, Twitter/X, LinkedIn (last 24h)AI Content Generation : Creates articles in multiple formats (toplist, POV, case study, how-to) using Claude/OpenAIMulti-language : Generates content in English and Vietnamese simultaneouslyVideo Rendering : Automatically creates infographics and short videos using RemotionPlatform Optimization : Exports videos for Reels, TikTok, Shorts
Installation
Prerequisites
clone
cd
Environment Configuration Create a .env.local file in the project root:
OPENAI_API_KEY=
ANTHROPIC_API_KEY=
RAPIDAPI_KEY=
DATABASE_URL=
REMOTION_LICENSE_KEY=
NEXT_PUBLIC_APP_URL=http://localhost:3000
Development Server
Core Architecture
Project Structure marketing-pineline-share/
├── app/ # Next.js app directory
├── components/ # React components
├── lib/ # Core utilities
│ ├── ai/ # AI integrations
│ ├── scraper/ # Web scraping modules
│ └── video/ # Remotion video generation
├── remotion/ # Video templates
└── public/ # Static assets
Key Components and Usage
1. Content Research Module
import { fetchNewsFromSources } from '@/lib/scraper/news-crawler' ;
interface NewsSource {
name : string ;
url : string ;
selector : string ;
}
async function gatherResearch (keyword : string const sources : NewsSource [] = [
{ name : 'TechCrunch' , url : 'https://techcrunch.com' , selector : '.post-block' },
{ name : 'a16z' , url : 'https://a16z.com/posts' , selector : '.article' }
];
const results = await fetchNewsFromSources (keyword, sources, {
timeRange : '24h' ,
maxResults : 20
});
return results;
}
const research = await gatherResearch ('AI automation' );
console .log (research.articles );
2. AI Content Generation
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 : 'expert' | 'friendly' | 'humorous' ;
researchData : any [];
}
async function generateContentWithClaude (request : ContentRequest const prompt = buildPrompt (request);
const message = await anthropic.messages .create ({
model : 'claude-3-5-sonnet-20241022' ,
max_tokens : 4096 ,
messages : [{
role : 'user' ,
content : prompt
}]
});
return message.content [0 ].text ;
}
async function generateContentWithOpenAI (request : ContentRequest const prompt = buildPrompt (request);
const completion = await openai.chat .completions .create ({
model : 'gpt-4-turbo-preview' ,
messages : [
{ role : 'system' , content : 'You are an expert content creator.' },
{ role : 'user' , content : prompt }
],
max_tokens : 4096
});
return completion.choices [0 ].message .content ;
}
function buildPrompt (request : ContentRequest string {
const { keyword, format, language, tone, researchData } = request;
return `
Create a ${format} article about "${keyword} " in ${language} .
Tone: ${tone}
Based on this research data: ${JSON .stringify(researchData)}
Requirements:
- Include data-backed insights
- Use recent statistics (last 24h)
- Format for ${language === 'vi' ? 'Vietnamese' : 'English' } audience
- Optimize for SEO
` ;
}
3. Video Generation with Remotion
import { bundle } from '@remotion/bundler' ;
import { renderMedia, selectComposition } from '@remotion/renderer' ;
import path from 'path' ;
interface VideoConfig {
title : string ;
content : string [];
style : 'infographic' | 'text-animation' | 'slideshow' ;
platform : 'reels' | 'tiktok' | 'shorts' ;
}
async function renderContentVideo (config : VideoConfig const { title, content, style, platform } = config;
const dimensions = {
reels : { width : 1080 , height : 1920 },
tiktok : { width : 1080 , height : 1920 },
shorts : { width : 1080 , height : 1920 }
};
const { width, height } = dimensions[platform];
const bundleLocation = await bundle ({
entryPoint : path.join (process.cwd (), 'remotion/index.ts' ),
webpackOverride : (config ) => config,
});
const composition = await selectComposition ({
serveUrl : bundleLocation,
id : style,
inputProps : {
title,
content,
width,
height
}
});
const outputPath = path.join (process.cwd (), 'public/videos' , `${Date .now()} .mp4` );
await renderMedia ({
composition,
serveUrl : bundleLocation,
codec : 'h264' ,
outputLocation : outputPath,
inputProps : {
title,
content
}
});
return outputPath;
}
4. Remotion Video Template
import { AbsoluteFill , useCurrentFrame, useVideoConfig, interpolate } from 'remotion' ;
interface InfographicProps {
title : string ;
content : string [];
}
export const Infographic : React .FC <InfographicProps > = ({ title, content } ) => {
const frame = useCurrentFrame ();
const { fps, durationInFrames } = useVideoConfig ();
const titleOpacity = interpolate (
frame,
[0 , 30 ],
[0 , 1 ],
{ extrapolateRight : 'clamp' }
);
const titleScale = interpolate (
frame,
[0 , 30 ],
[0.8 , 1 ],
{ extrapolateRight : 'clamp' }
);
return (
<AbsoluteFill style ={{ backgroundColor: '#1a1a1a ' }}>
<div style ={{
display: 'flex ',
flexDirection: 'column ',
justifyContent: 'center ',
alignItems: 'center ',
padding: '40px ',
height: '100 %'
}}>
<h1 style ={{
color: 'white ',
fontSize: '72px ',
fontWeight: 'bold ',
textAlign: 'center ',
opacity: titleOpacity ,
transform: `scale (${titleScale })`
}}>
{title}
</h1 >
<div style ={{ marginTop: '60px ' }}>
{content.map((item, index) => {
const itemFrame = 40 + (index * 20);
const itemOpacity = interpolate(
frame,
[itemFrame, itemFrame + 15],
[0, 1],
{ extrapolateRight: 'clamp' }
);
return (
<p key ={index} style ={{
color: '#ffffff ',
fontSize: '36px ',
marginBottom: '30px ',
opacity: itemOpacity
}}>
{item}
</p >
);
})}
</div >
</div >
</AbsoluteFill >
5. Complete Pipeline Example
import { NextRequest , NextResponse } from 'next/server' ;
import { gatherResearch } from '@/lib/scraper/news-crawler' ;
import { generateContentWithClaude } from '@/lib/ai/content-generator' ;
import { renderContentVideo } from '@/lib/video/render-video' ;
export async function POST (request : NextRequest try {
const { keyword, format, language, platform } = await request.json ();
console .log ('🔍 Gathering research...' );
const research = await gatherResearch (keyword);
console .log ('✍️ Generating content...' );
const content = await generateContentWithClaude ({
keyword,
format,
language,
tone : 'expert' ,
researchData : research.articles
});
const contentLines = content.split ('\n' ).filter (line =>trim ());
console .log ('🎬 Rendering video...' );
const videoPath = await renderContentVideo ({
title : keyword,
content : contentLines.slice (0 , 5 ),
style : 'infographic' ,
platform
});
return NextResponse .json ({
success : true ,
data : {
content,
videoUrl : videoPath.replace (process.cwd () + '/public' , '' )
}
});
} catch (error) {
console .error ('Pipeline error:' , error);
return NextResponse .json (
{ success : false , error : error.message },
{ status : 500 }
);
}
}
6. Frontend Component
'use client' ;
import { useState } from 'react' ;
export function ContentPipeline (const [keyword, setKeyword] = useState ('' );
const [loading, setLoading] = useState (false );
const [result, setResult] = useState<any >(null );
const handleGenerate = async (setLoading (true );
try {
const response = await fetch ('/api/generate-content' , {
method : 'POST' ,
headers : { 'Content-Type' : 'application/json' },
body : JSON .stringify ({
keyword,
format : 'toplist' ,
language : 'vi' ,
platform : 'reels'
})
});
const data = await response.json ();
setResult (data);
} catch (error) {
console .error ('Error:' , error);
} finally {
setLoading (false );
}
};
return (
<div className ="max-w-4xl mx-auto p-6" >
<h1 className ="text-3xl font-bold mb-6" > AI Content Pipeline</h1 >
<div className ="space-y-4" >
<input
type ="text"
value ={keyword}
onChange ={(e) => setKeyword(e.target.value)}
placeholder="Enter keyword (e.g., 'AI automation')"
className="w-full px-4 py-2 border rounded"
/>
<button
onClick ={handleGenerate}
disabled ={loading || !keyword }
className ="px-6 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
>
{loading ? 'Generating...' : 'Generate Content'}
</button >
{result && (
<div className ="mt-6 space-y-4" >
<div className ="p-4 bg-gray-50 rounded" >
<h3 className ="font-bold mb-2" > Generated Content:</h3 >
<p className ="whitespace-pre-wrap" > {result.data.content}</
Configuration Options
AI Model Selection
export const AI_CONFIG = {
primaryModel : 'claude' ,
models : {
claude : {
model : 'claude-3-5-sonnet-20241022' ,
maxTokens : 4096
},
openai : {
model : 'gpt-4-turbo-preview' ,
maxTokens : 4096
}
}
};
Scraper Configuration
export const SCRAPER_CONFIG = {
sources : [
{ name : 'TechCrunch' , url : 'https://techcrunch.com' , enabled : true },
{ name : 'a16z' , url : 'https://a16z.com/posts' , enabled : true },
{ name : 'Twitter' , url : 'https://twitter.com' , enabled : false }
],
timeRange : '24h' ,
maxArticles : 20 ,
timeout : 30000
};
Video Configuration
export const VIDEO_CONFIG = {
defaultStyle : 'infographic' ,
fps : 30 ,
platforms : {
reels : { width : 1080 , height : 1920 , duration : 30 },
tiktok : { width : 1080 , height : 1920 , duration : 60 },
shorts : { width : 1080 , height : 1920 , duration : 60 }
}
};
Common Patterns
Batch Content Generation async function generateBatchContent (keywords : string []const results = await Promise .all (
keywords.map (async (keyword) => {
const research = await gatherResearch (keyword);
const content = await generateContentWithClaude ({
keyword,
format : 'toplist' ,
language : 'vi' ,
tone : 'expert' ,
researchData : research.articles
});
return { keyword, content };
})
);
return results;
}
Multi-language Generation async function generateMultiLanguage (keyword : string const research = await gatherResearch (keyword);
const [english, vietnamese] = await Promise .all ([
generateContentWithClaude ({
keyword,
format : 'toplist' ,
language : 'en' ,
tone : 'expert' ,
researchData : research.articles
}),
generateContentWithClaude ({
keyword,
format : 'toplist' ,
language : 'vi' ,
tone : 'expert' ,
researchData : research.articles
})
]);
return { english, vietnamese };
}
Troubleshooting
API Rate Limits
class RateLimiter {
private queue : Promise <any > = Promise .resolve ();
async throttle<T>(fn : () => Promise <T>, delay : number = 1000 ): Promise <T> {
this .queue = this .queue .then (() =>
new Promise (resolve =>setTimeout (resolve, delay))
);
await this .queue ;
return fn ();
}
}
const limiter = new RateLimiter ();
const content = await limiter.throttle (() =>
generateContentWithClaude (request)
);
Video Rendering Memory Issues
NODE_OPTIONS="--max-old-space-size=4096" npm run dev
Scraper Blocked
const USER_AGENTS = [
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' ,
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36'
];
function getRandomUserAgent (return USER_AGENTS [Math .floor (Math .random () * USER_AGENTS .length )];
}
Environment Variables Not Loading
if (!process.env .OPENAI_API_KEY ) {
throw new Error ('OPENAI_API_KEY not found in environment variables' );
}
CLI Commands
npm run dev
npm run build
npm run start
npm run remotion
npm run render
npm run test
npm run lint
p
</div >
<div >
<h3 className ="font-bold mb-2" >
</h3 >
<video src ={result.data.videoUrl} controls className ="w-full" />
</div >
</div >
</div >
</div >
