The Complete Production SOP: How to Deploy and Run Satori Dynamic OpenGraph Image Engine in Autonomous AI Agents

---
name: "open-graph-image-satori-generator"
description: "Render dynamic social share and OpenGraph preview images from HTML and CSS."
metadata:
  author: "Vercel"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "generate opengraph images with satori"
  - "render jsx to png"
  - "create dynamic twitter cards nextjs"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Satori Dynamic OpenGraph Image Engine
Enforce strict Flexbox layout (display: 'flex'), manual font buffer loading, and @resvg/resvg-js rasterization.

import satori from 'satori';
import { Resvg } from '@resvg/resvg-js';
import fs from 'node:fs/promises';
import path from 'node:path';

export async function generateOgImage(title: string): Promise<Buffer> {
  const fontData = await fs.readFile(path.join(process.cwd(), 'public/fonts/Inter-Bold.ttf'));

  const svg = await satori(
    <div
      style={{
        height: '100%',
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'center',
        backgroundColor: '#0f172a',
        padding: '60px',
      }}
    >
      <div style={{ color: '#38bdf8', fontSize: 32, marginBottom: 16 }}>askills.dev</div>
      <div style={{ color: '#f8fafc', fontSize: 64, fontWeight: 700, lineHeight: 1.1 }}>{title}</div>
    </div>,
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: 'Inter',
          data: fontData,
          weight: 700,
          style: 'normal',
        },
      ],
    }
  );

  const resvg = new Resvg(svg, { fitTo: { mode: 'width', value: 1200 } });
  return resvg.render().asPng();
}