ai-og-image

Generate Open Graph images using AI. Pass a title, get a beautiful 1200x630 OG image.

Quick Start

npx ai-og-image "My Blog Post Title"

That's it. Zero install, one command, done.

How It Works

1. You provide a title (and optionally a description, style, brand color)
2. If you have an ANTHROPIC_API_KEY, Claude generates a custom HTML/CSS design
3. If not, it uses built-in style templates (still looks great)
4. Puppeteer renders the HTML to a high-res PNG

Install

npm install -g ai-og-image

Or just use npx without installing.

Usage

# Simple - just a title
ai-og-image "Getting Started with TypeScript"

# With description
ai-og-image --title "My Post" --description "A deep dive into modern web dev"

# Pick a style
ai-og-image "My Post" --style dark

# Custom brand color
ai-og-image "My Post" --brand-color "#FF6B00"

# Custom output path and size
ai-og-image "My Post" --output hero.png --size 1200x630

# Skip AI, use built-in templates only
ai-og-image "My Post" --no-ai

Styles

• gradient (default) - Rich gradient background, white text, modern
• minimal - White background, dark text, subtle accent border
• bold - Solid color background, large impactful text
• dark - Dark background with subtle gradients, techy feel

Batch Mode

Generate OG images for your entire site at once.

# From a sitemap
ai-og-image --from sitemap.xml --output-dir ./og-images

# From a JSON file
ai-og-image --from pages.json --style minimal

Your pages.json should look like:

[
  { "title": "Home", "description": "Welcome to my site" },
  { "title": "About", "description": "Learn more about us" }
]

Programmatic API

import { generateHtml, renderHtmlToPng } from 'ai-og-image';

const html = await generateHtml({
  title: 'My Post',
  description: 'A great post',
  style: 'gradient',
  brandColor: '#FF6B00',
});

await renderHtmlToPng(html, 'og.png', 1200, 630);

Environment Variables

• ANTHROPIC_API_KEY - Enables AI-powered design generation. Without it, the tool uses built-in templates that still look good.

License

MIT