Generate images through an API, right inside your IDE

Put the image where the project needs it

Your page needs a cover. Instead of moving downloads between tools, have the visual saved directly into the project. Our suggested workflow separates the creative brief, the service-calling script and the assistant’s instructions. Each can evolve without rebuilding the entire process.

1. Prepare service access

This educational example uses the OpenAI Python SDK and Images API: generate from a prompt, then decode the Base64 result. Install with python -m pip install --upgrade openai. Set OPENAI_API_KEY in your IDE terminal environment and set IMAGE_MODEL to a GPT Image model your account can access, such as gpt-image-2 if available. Never put the key in source code, browser code or Git.

2. Write a useful brief

Create brief.txt in the project root. Describe the subject, materials, lighting, palette and framing. For example: “Blog cover, futuristic development studio, brushed metal, slate-blue light, horizontal composition, central subject, no text.” Keep a shared structure across covers and vary the subject. Exact dimensions require parameters supported by the model; a prompt alone does not guarantee them.

3. Save the image into the project

Save this code as scripts/generate_image.py and run python scripts/generate_image.py from the project root. Unique filenames preserve previous outputs. This example expects a GPT Image Base64 response; it does not handle services returning a URL or a job ID that needs polling. The code was checked without making a live API call for this tutorial.

import base64
import os
from pathlib import Path
from uuid import uuid4
from openai import OpenAI

client = OpenAI(timeout=180.0, max_retries=0)
prompt = Path("brief.txt").read_text(encoding="utf-8")
result = client.images.generate(
    model=os.environ["IMAGE_MODEL"],
    prompt=prompt,
    n=1,
    output_format="png",
)
if not result.data or not result.data[0].b64_json:
    raise RuntimeError("No image returned")
image = base64.b64decode(result.data[0].b64_json, validate=True)
folder = Path("assets/generated")
folder.mkdir(parents=True, exist_ok=True)
target = folder / f"image-{uuid4().hex[:12]}.png"
target.write_bytes(image)
print(target)

4. Add a skill to VS Code

With an Agent Skills-compatible assistant, such as GitHub Copilot agent mode in VS Code, create .github/skills/image-assets/SKILL.md. A skill describes a procedure; it supplies neither a key nor model access. Keep the script at scripts/generate_image.py. Adapt this starting point to your project.

---
name: image-assets
description: Generate an original image asset from a brief using the project's image API script.
---
Use for an explicit request to create an image for this project.
1. Read the design guidelines. Define subject, palette, crop and intended use.
2. Write the agreed visual brief to brief.txt in the project root.
3. Check that OPENAI_API_KEY and IMAGE_MODEL are set without printing them.
4. Run python scripts/generate_image.py from the project root once.
5. If generation fails or times out, report it; do not retry automatically.
6. Open the saved image if an image-viewing tool is available. Otherwise
   state that visual inspection remains outstanding.
7. Keep the original. Create a web-optimized copy and use it in the page.
8. Check the path, layout, crop and alternative text. Report the saved file.
Never expose API keys, overwrite an existing image or invent a successful result.

5. Ask for a concrete outcome

In your IDE chat: “Use image-assets to create a cover for this article, follow the site’s palette and integrate an optimized version without overwriting existing images.” Your assistant needs terminal access and, for visual checking, an image-viewing tool. Your IDE permissions still apply. Another useful workflow is generating tutorial illustrations from a folder of briefs, one image at a time.

From generated file to publishable page

Keep the original PNG, create a WebP copy and inspect the mobile crop. Reserve image space to avoid layout shifts. Write alternative text when the image conveys information; purely decorative images can use an empty alt attribute. Do not blindly retry after a timeout: the request might have completed despite the missing response.

What about CONSTELLO?

Check your account’s catalogue and documentation for available capabilities. Chat API compatibility does not guarantee an image-generation endpoint. Before adapting this script to CONSTELLO or another service, confirm the URL, model and response format. This tutorial does not claim to validate a CONSTELLO image integration. The goal is to keep asset creation close to your code.