Copy-paste prompt · Hero images # Generate blog hero images at build time in one prompt Stop hunting for stock photos. Hand your coding agent this prompt and it adds a script that generates a hero for every post without one, hosts it on PixelVault, and saves the permanent URL in your content. It runs on your machine or in CI, never in the browser. Works with `Claude Code``Cursor``Windsurf``Copilot` 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 Copy prompt Add build-time AI hero image generation to my site, hosted on PixelVault. Context - read this first and use only the documented API: - Overview + API: https://pixelvault.dev/llms.txt (section "Generate an image from a prompt") Do this: 1. Find how my site stores posts (Markdown/MDX front matter, a CMS export, or a JSON manifest) and which posts have no hero image yet. 2. Create a script (for example scripts/generate-heroes.mjs, with an npm script "generate-heroes") that, for each post missing a hero: - builds an image prompt from the post's title and summary, plus ONE shared style sentence kept in a single constant so every hero looks consistent (for example "flat vector illustration, soft gradient, no text, no letters"); - calls POST https://api.pixelvault.dev/v1/images/generate with that prompt; - saves the returned data.url into the post's front matter (or the manifest) together with the prompt, so each hero is generated once and can be reproduced. 3. Render the saved URL as the hero in my post layout. For the displayed image append ?w=1200&fmt=auto to the URL so it is resized and served as WebP/AVIF. 4. Run the script on at most 3 posts first and show me the URLs so I can check the style before it generates the rest. Result I want: every post has a hosted hero image on a permanent img.pixelvault.dev URL, generated once, with the prompt stored next to it. 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. - This script runs on my machine or in CI before deploy. It must not become part of the site's runtime, and the key must not end up in the built output. ## What the agent will do - Add one script that finds posts without a hero and generates one each - Save the hosted `img.pixelvault.dev` URL (and prompt) in your front matter or manifest - Render it in your post layout, resized with URL params - Stop after 3 posts so you can check the style first ## 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 →](/signup/) 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? The prompt automates the documented call. By hand it is one request per post. This is the whole generation step in Node: ``` const res = await fetch("https://api.pixelvault.dev/v1/images/generate", { method: "POST", headers: { Authorization: "Bearer " + process.env.PIXELVAULT_API_KEY, "Content-Type": "application/json", }, body: JSON.stringify({ prompt: "Flat vector hero, a robot writing at a laptop, soft gradient, no text", }), }); if (!res.ok) throw new Error(res.status + " " + (await res.json()).error.code); const { data } = await res.json(); console.log(data.url, "credits left:", data.generation.credits_remaining); ``` The hero is hosted the moment it is generated, so `data.url` is already a permanent CDN link. Add `?w=1200&fmt=auto` when you display it. See the [generate endpoint reference](/docs/#generate) and the [walkthrough with examples](/blog/generate-images-with-one-api-call/). ## Be realistic about the images Generation uses open Cloudflare Workers AI models (FLUX by default). They are good at illustrations and abstract backgrounds and unreliable at rendering text, so the prompt asks for no text in the image. Try your style on three posts before you commit to all of them. If you need a different look, change the shared style sentence and regenerate with a fresh prompt. ## Why server-side only? Generating spends credits, so it needs your secret key, and a secret key in browser code is a key anyone can copy. The prompt tells the agent to read it from an environment variable, keep it out of git, and run the script before deploy. Need images from visitors instead? That is the [paste-and-host prompts](/prompts/), which use a safe publishable key. ## FAQ How much does a hero image cost? One credit per image on the default model. The free plan includes 10 credits a month, Starter 300, Pro 1,500. If a generation fails you are refunded. Will it regenerate images I already have? No. The prompt saves each URL next to the post and tells the agent never to regenerate an image that already has one unless you ask. Which coding agents does this work with? Any of them: Claude Code, Cursor, Windsurf, Copilot Chat. The prompt points the agent at [pixelvault.dev/llms.txt](/llms.txt) for the live API.