og-gen

A powerful CLI tool to generate beautiful Open Graph (OG) images for social media sharing. Create professional, eye-catching social share images with customizable layouts, color schemes, and optional AI-generated backgrounds.

Features

• 5 Layout Templates - Minimal, Bold, Card, Split, and Overlay designs
• 10 Color Schemes - Light, Dark, Purple, Green, Navy, Pink, Cyber, Warm, Mint, Midnight
• 6 Design Presets - Professional, Creative, Tech, Dark Mode, Corporate, Friendly
• AI Backgrounds - Generate unique backgrounds using OpenAI or Google Gemini
• Logo Overlay - Add your brand logo with flexible positioning
• Custom Colors - Full control over background, text, and accent colors
• Multiple Dimensions - Standard OG (1200x630), Square, Twitter Card, or custom sizes
• Interactive Mode - Guided wizard for easy image creation

Installation

npm install -g og-gen

Requirements: Node.js 18 or higher

Quick Start

Interactive Mode (Recommended)

Simply run og-gen without arguments to enter the interactive wizard:

og-gen generate

The wizard will guide you through:

1. Enter your title and description
2. Choose a layout style
3. Select a color scheme
4. Pick image dimensions
5. Optionally enable AI background generation

Command Line Mode

Generate an image directly with flags:

og-gen generate "My Blog Post Title" --description "A great article about web development" --skip-prompts

Usage Examples

Basic Usage

# Interactive mode
og-gen generate

# Quick generation with title
og-gen generate "Hello World" --skip-prompts

# With description
og-gen generate "My Article" --description "Learn about Node.js" --skip-prompts

Layouts

# Bold layout - large typography, high contrast
og-gen generate "Big Announcement" --layout bold --skip-prompts

# Card layout - floating card with shadow
og-gen generate "New Feature" --layout card --skip-prompts

# Split layout - text and visual side by side
og-gen generate "Product Launch" --layout split --skip-prompts

# Overlay layout - full background with text bar
og-gen generate "Photo Story" --layout overlay --skip-prompts

Color Schemes

# Dark theme
og-gen generate "Night Mode" --color-scheme dark --skip-prompts

# Cyber/tech theme
og-gen generate "Tech News" --color-scheme cyber --skip-prompts

# Warm and friendly
og-gen generate "Welcome Post" --color-scheme warm --skip-prompts

Design Presets

Presets combine a layout and color scheme for quick styling:

# Professional - clean minimal look
og-gen generate "Company Update" --preset professional --skip-prompts

# Creative - bold and eye-catching
og-gen generate "New Art" --preset creative --skip-prompts

# Tech - modern cyber aesthetic
og-gen generate "Dev Blog" --preset tech --skip-prompts

Custom Colors

og-gen generate "Branded Post" \
  --bg-color "#1a1a2e" \
  --text-color "#ffffff" \
  --accent-color "#e94560" \
  --skip-prompts

Custom Dimensions

# Square for Instagram
og-gen generate "Square Post" --width 1200 --height 1200 --skip-prompts

# Twitter card
og-gen generate "Tweet This" --width 1200 --height 600 --skip-prompts

# Custom size
og-gen generate "Custom" --width 800 --height 400 --skip-prompts

Logo Overlay

# Add logo to bottom-right (default)
og-gen generate "Brand Post" --logo ./logo.png --skip-prompts

# Logo in top-left corner
og-gen generate "Brand Post" --logo ./logo.png --logo-position top-left --skip-prompts

AI-Generated Backgrounds

Use OpenAI or Google Gemini to generate unique backgrounds:

# Using OpenAI (recommended)
export OPENAI_API_KEY="your-api-key"
og-gen generate "Tech Article" \
  --use-ai \
  --ai-provider openai \
  --ai-prompt "futuristic technology background with blue neon lights" \
  --skip-prompts

# Using Google Gemini
export GOOGLE_API_KEY="your-api-key"
og-gen generate "Tech Article" \
  --use-ai \
  --ai-provider gemini \
  --ai-prompt "abstract ocean waves" \
  --skip-prompts

# Background-only layout (no text)
og-gen generate "BG" --use-ai --ai-prompt "mountain landscape" --layout background --skip-prompts

CLI Reference

USAGE
  $ og-gen generate [TITLE] [FLAGS]

ARGUMENTS
  TITLE  Title for the OG image (3-60 characters)

FLAGS
  -a, --ai-prompt=<value>      AI image generation prompt for background
  --ai-provider=<option>       AI provider to use [options: openai, gemini]
  -c, --color-scheme=<option>  Color scheme preset
                               [options: light, dark, purple, green, navy, pink, cyber, warm, mint, midnight]
  -d, --description=<value>    Description text for the image (max 160 chars)
  -i, --interactive            Force interactive mode
  -l, --layout=<option>        Layout template [default: minimal]
                               [options: minimal, bold, card, split, overlay, background]
  -n, --count=<value>          Number of images to generate (1-4) [default: 1]
  -o, --output=<value>         Output directory [default: ./og-images]
  -p, --preset=<option>        Design preset
                               [options: professional, creative, tech, dark-mode, corporate, friendly]
  --accent-color=<value>       Accent color in hex format (e.g., #3b82f6)
  --bg-color=<value>           Background color in hex format (e.g., #ffffff)
  --delete-preset=<value>      Delete a saved preset by name
  --height=<value>             Image height in pixels [default: 630]
  --list-presets               List all saved presets
  --load-preset=<value>        Load a saved preset by name
  --logo=<value>               Path to logo image (PNG, JPEG, WebP, SVG)
  --logo-position=<option>     Logo position [default: bottom-right]
                               [options: top-left, top-right, bottom-left, bottom-right, center]
  --save-preset=<value>        Save current settings as a preset with given name
  --skip-prompts               Skip confirmation prompts (non-interactive mode)
  --text-color=<value>         Text color in hex format (e.g., #1f2937)
  --use-ai                     Use AI-generated background (requires API key)
  --width=<value>              Image width in pixels [default: 1200]

Saved Presets

Save your favorite configurations as presets for quick reuse:

# Save a preset
og-gen generate "My Post" --layout bold --color-scheme cyber --save-preset my-style --skip-prompts

# List saved presets
og-gen generate --list-presets

# Load and use a preset
og-gen generate "New Post" --load-preset my-style --skip-prompts

# Delete a preset
og-gen generate --delete-preset my-style

In interactive mode, you'll be prompted to load saved presets at the start and optionally save your settings as a new preset after configuring.

Multiple Image Generation

Generate multiple images at once (useful for creating variations with AI backgrounds):

# Generate 3 images
og-gen generate "My Title" --use-ai --ai-prompt "abstract gradient" -n 3 --skip-prompts

# In interactive mode, you'll be asked how many images to generate
og-gen generate

Layouts

| Layout | Description | |--------|-------------| | minimal | Clean centered text, perfect for simple announcements | | bold | Large typography with accent bar, high visual impact | | card | Floating card overlay with shadow effect | | split | 50/50 text and visual split with separator | | overlay | Full-bleed background with gradient text bar | | background | Background only - no text (great for AI-generated images) |

Color Schemes

| Scheme | Description | |--------|-------------| | light | Clean white background with dark text | | dark | Dark background with light text | | purple | Purple to indigo gradient feel | | green | Professional green tones | | navy | Navy blue with gold accent | | pink | Bold pink and magenta tones | | cyber | Modern tech-inspired colors | | warm | Warm cream with orange accents | | mint | Fresh mint and teal colors | | midnight | High contrast black with purple |

Design Presets

| Preset | Layout | Color Scheme | Best For | |--------|--------|--------------|----------| | professional | minimal | light | Business content | | creative | bold | purple | Marketing, announcements | | tech | overlay | cyber | Developer content | | dark-mode | card | dark | Modern, sleek look | | corporate | split | navy | Enterprise content | | friendly | card | warm | Community, personal |

AI Background Setup

og-gen supports two AI providers for generating unique backgrounds:

OpenAI (Recommended)

Uses GPT Image 1 for high-quality image generation:

1. Go to OpenAI Platform
2. Create an API key
3. Set the environment variable:

export OPENAI_API_KEY="your-api-key-here"

Google Gemini

Uses Gemini 2.0 Flash for image generation:

1. Go to Google AI Studio
2. Create an API key
3. Set the environment variable:

export GOOGLE_API_KEY="your-api-key-here"

Provider Selection

• Both keys set: Interactive mode prompts you to choose; CLI defaults to OpenAI
• Use --ai-provider: Explicitly select openai or gemini in CLI mode
• Single key: Automatically uses the available provider

Fallback Behavior

When AI generation fails, the tool automatically falls back to gradient backgrounds based on prompt keywords. The output summary will indicate:

• Success: 🤖 AI Background: Generated with OpenAI or Generated with Gemini
• Fallback: ⚠️ AI Background: Used gradient fallback with the reason

Output

Generated images are saved to the ./og-images directory by default (configurable with --output).

Filenames follow the pattern: og-{sanitized-title}-{timestamp}.png

Example: og-my-blog-post-20240115T143022.png

Programmatic Usage

While og-gen is primarily a CLI tool, you can also use it programmatically:

import { generateOGImage } from 'og-gen';

const result = await generateOGImage({
  title: 'My Image',
  description: 'A description',
  width: 1200,
  height: 630,
  layout: 'minimal',
  colorScheme: 'dark'
}, './output/my-image.png');

console.log(`Generated: ${result.path} (${result.size} bytes)`);

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Author

Wynter Jones