Hosted OG image API vs @vercel/og vs DIY Satori

Who this is for

Developers and product teams deciding how to generate Open Graph images for:

• Next.js apps already on Vercel
• Multi-framework stacks (Rails, Astro, WordPress, static sites)
• Agent / MCP workflows that should create social images from a URL

If you only need one static card, design it once and ship a PNG. If every route needs a branded preview, you need an og image generator API or an in-app renderer.

Comparison matrix: hosted API vs @vercel/og vs DIY Satori

Recommended OG size: 1200×630 is the size Vercel documents as the recommended OG image size (Vercel OG Image Generation).

When to pick hosted API, @vercel/og, or DIY

How Next.js ImageResponse and @vercel/og work

Official Next.js docs: import ImageResponse from next/og. It uses @vercel/og, Satori, and Resvg to turn JSX into PNG. Default size is 1200×630. Only flexbox and a CSS subset are supported; advanced layouts like display: grid will not work. Bundle size (JSX, CSS, fonts, images) must stay under 500KB. Font formats: ttf, otf, woff.

Sources: Next.js ImageResponse, Vercel OG Image Generation, Vercel OG image API.

import { ImageResponse } from 'next/og'
// App Router includes @vercel/og — no separate install required.

export async function GET() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 48,
          color: '#0f172a',
          background: '#fff7ed',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: 64,
        }}
      >
        Hello from ImageResponse
      </div>
    ),
    { width: 1200, height: 630 },
  )
}

Runtime note from Vercel: Pages Router + Node.js runtime does not support return new Response(…) with vercel/og; App Router and Edge combinations listed in their matrix are supported (Vercel OG docs).

How the OG Pilot OG image API works

1. Sign up and verify your domain (DNS TXT) — https://ogpilot.com/sign_up
2. Create an API key in Settings → API Keys
3. Sign a JWT locally (HS256) with claims like iss (domain), sub (API key prefix), template, title, …
4. POST https://ogpilot.com/api/v1/images with {"token":"<jwt>"} — response is a CDN image URL for og:image
5. Or use SDKs: og-pilot-js, og_pilot_ruby, og-pilot (Python), og-pilot-php

Source: https://ogpilot.com/docs

import { configure, createImage } from "og-pilot-js"

configure((config) => {
  config.apiKey = process.env.OG_PILOT_API_KEY
  config.domain = process.env.OG_PILOT_DOMAIN
})

export async function blogOgImage(post: {
  title: string
  description: string
  path: string
  imageUrl?: string
}) {
  return createImage(
    {
      template: "blog_post",
      title: post.title,
      description: post.description,
      image_url: post.imageUrl,
      path: post.path,
    },
    { iat: Math.floor(Date.now() / 1000) },
  )
}

// Next.js metadata example
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)
  const ogImage = await blogOgImage({
    title: post.title,
    description: post.excerpt,
    path: `/blog/${post.slug}`,
  })
  return {
    openGraph: { images: [ogImage] },
    twitter: { card: "summary_large_image", images: [ogImage] },
  }
}

POST https://ogpilot.com/api/v1/images
Content-Type: application/json

{"token":"YOUR_JWT_TOKEN"}

Never hardcode the API key in the browser. Sign on the server.

MCP: generate OG images from an agent

OG Pilot exposes a remote MCP endpoint at https://ogpilot.com/mcp. Documented tools include generate_og_image, debug_open_graph, compress_image, and extract_color_palette. Generation takes a page URL and returns an Open Graph image. Debug / compress / palette do not spend credits. Setup guide: https://ogpilot.com/docs/mcp

Connect MCP · Validate a URL

Copy-paste pointer for assistants (keep accurate to product docs; if exact Claude/ChatGPT JSON config differs by client, link /docs/mcp rather than inventing a connector JSON):

Remote MCP URL: https://ogpilot.com/mcp
Docs: https://ogpilot.com/docs/mcp
OAuth: follow the custom connector guide on /docs/mcp (OAuth 2.1 + PKCE)

What “DIY Satori” actually means

Satori converts a limited HTML/CSS tree to SVG. @vercel/og already wraps Satori + Resvg for PNG. A DIY path means you choose:

• Where Satori runs (Node worker, edge-compatible runtime, container)
• How you convert SVG → PNG (Resvg or another engine)
• Font loading / subsetting
• URL design, signing, rate limits, and CDN cache keys
• Monitoring when social crawlers hammer a popular post

That flexibility is real. So is the ongoing ops cost. NEED VERIFY any claim that DIY is “always cheaper” than hosted or Vercel Functions—it depends on volume, eng time, and failure modes.

Latency and cost — what we will not invent

• Cold vs warm latency: NEED VERIFY with your own timings for OG Pilot CDN hits, Vercel Function regions, and DIY workers. Social crawlers also cache aggressively; first-fetch latency ≠ what users see after a platform cache is warm.
• Cost per 1,000 images: NEED CITE from your host’s function/bandwidth pricing and from OG Pilot’s in-app plan after signup. Do not publish a round number here without a source.
• Engineering cost: DIY and heavy custom @vercel/og layouts trade SaaS fees for design-system maintenance inside Edge bundles (watch the 500KB cap).

Use /open-graph-debugger after deploy to confirm crawlers see the URL you intended.

Decision checklist

1. One framework on Vercel with JSX layouts you control? Start with ImageResponse.
2. Multiple apps/CMS and one brand system? Prefer a hosted OG image API.
3. Need agents to generate/debug cards? Prefer a product with MCP (/docs/mcp).
4. Extreme custom rendering and you already run image infra? DIY Satori can win—budget for ops.
5. Always put absolute og:image URLs in HTML and re-scrape after changes.

OG image API questions