Images Agents Pricing Docs Blog View as Markdown (Agent) Get started
Human Agent

Generate OG and social images for every page in one prompt

Pages without an og:image look empty when shared. Hand your coding agent this prompt and it adds a script that generates an image for each page, hosts it on PixelVault, and wires the meta tags at 1200×630. It runs at build time, never in the browser.

Works with Claude CodeCursorWindsurfCopilot
  1. 1
    Copy the prompt

    The one big button below.

  2. 2
    Paste it into your agent

    In your project — Claude Code, Cursor, etc.

  3. 3
    Drop in your key

    Set your secret key as PIXELVAULT_API_KEY in .env or CI secrets. Server-side only.

Prompt for your coding agent
Give every page of my site a generated social/OG image, hosted on PixelVault.

Context - read this first and use only the documented API:
- Overview + API: https://pixelvault.dev/llms.txt (sections "Generate an image from a prompt" and "Image Transforms")

Do this:
1. Find where my site builds each page's <head> (a layout or SEO component) and list the pages that have no og:image today.

2. Create a script (for example scripts/generate-og.mjs, with an npm script "generate-og") that, for each page missing one:
   - builds a prompt from the page title and description plus ONE shared style sentence in a single constant, and ALWAYS includes "no text, no letters, no logos" (the image models cannot render text reliably);
   - calls POST https://api.pixelvault.dev/v1/images/generate;
   - stores the returned data.url in a manifest file (for example og-images.json, keyed by route) so each page is generated once.

3. In the head layout, when the manifest has a URL for the current page, add these tags using the URL plus ?size=social, which PixelVault serves as a 1200x630 social card:
   <meta property="og:image" content="URL?size=social">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:image" content="URL?size=social">
   Pages without an entry keep my existing default image.

4. Run it on at most 3 pages first and show me the URLs, then tell me how to check one with a social-card validator.

Result I want: each page has a distinct 1200x630 social image on a permanent img.pixelvault.dev URL, generated once and stored in the manifest.

Rules:
- Call the API from server-side or build-time code only. The key is a SECRET key (pv_live_...): read it from the PIXELVAULT_API_KEY environment variable, never hard-code it, never put it in browser code or in a public env var (no NEXT_PUBLIC_, PUBLIC_ or VITE_ prefix), and make sure .env is listed in .gitignore.
- Use only the documented endpoint: POST https://api.pixelvault.dev/v1/images/generate with header "Authorization: Bearer $PIXELVAULT_API_KEY" and JSON body {"prompt": "...", "model": "flux-1-schnell"}. The hosted image is in data.url (data.optimized_url is a smaller WebP/AVIF). Do NOT invent options, endpoints or packages.
- Each image costs 1 credit on the default model and the free plan has 10 credits a month. Before generating a batch, call GET https://api.pixelvault.dev/v1/usage and stop if data.generation.credits_remaining is lower than the number of images you plan to make. Never generate in an unbounded loop: cap the number of images per run.
- Errors: 402 (out of credits, or a model my plan does not include) means stop and tell me, do not retry. 429 means wait for the Retry-After header. 502, 503 and 504 are safe to retry (credits are refunded), at most twice. 422 prompt_rejected means change the prompt.
- Generated images are not repeatable. Never regenerate an image that already has a saved URL unless I ask.
- Keep the change minimal and match my existing code style.
- Do not put text in the generated image. If I want the page title on the card, tell me instead of trying to draw it in the prompt.

What the agent will do

  • Add one script that generates a background image for each page without a social image
  • Store each hosted URL in a manifest so a page is generated once
  • Add og:image and twitter:image tags using ?size=social (1200×630)
  • Leave pages without an entry on your existing default image

Grab your free key

This one needs your secret key (pv_live_…), not a publishable one, because generating images spends credits. Keep it server-side: set it as PIXELVAULT_API_KEY in your local .env or your CI secrets, never in browser code.

Get your free key →

Free plan: 10 generation credits a month (1 per image on the default model), plus 200 MB of storage. No card. Verify your email to generate.

Prefer to wire it up yourself?

Once an image is hosted, the social-card size is a URL parameter, with nothing extra to call:

<meta property="og:image" content="https://img.pixelvault.dev/proj_xyz/img_abc.jpg?size=social" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://img.pixelvault.dev/proj_xyz/img_abc.jpg?size=social" />

The prompt generates the source image for you with the generate endpoint and stores its URL. The size presets are in the transforms reference.

Be realistic about the images

The image models here are open Cloudflare Workers AI models. They make good abstract backgrounds and illustrations but cannot draw legible text, so the prompt keeps text out of the image on purpose. If you want the page title on the card, treat the generated image as the background and add the title with your own template.

FAQ

Do I need to regenerate when I change a page?

No. Each page is generated once and its URL is kept in the manifest. Delete a page's entry and run the script again when you want a new image.

What does it cost?

One credit per image on the default model. The free plan includes 10 credits a month, Starter 300, Pro 1,500. Failed generations are refunded.

Is the secret key safe here?

The script runs at build time with the key in an environment variable. The prompt tells the agent to keep it out of browser code and out of git.