ImageGen for VS Code

ImageGen gives VS Code agents a native image generation capability inside your editor.

Before this extension, Copilot agents could write and edit code but could not natively generate project images as part of the same workflow. ImageGen adds that missing capability as a first-class tool, so agents can generate, optimize, and insert images directly into your repo. It also includes a manual UI for direct image generation and editing when you want full control.

In short: ImageGen turns image generation into a native VS Code skill for both agents and humans.

Supported Providers

Features

• Native Agent Image Skill in VS Code: Copilot can autonomously call ImageGen tools to generate and edit images during normal coding/chat flows.
• GitHub Copilot Integration: Ask Copilot to generate an image for your markdown files or blog posts, and it will invoke the ImageGen tool to create, compress, and insert the image path.
• Image Editing from Chat: Provide an existing image (workspace path, URL, data URL, or Markdown image snippet) plus an edit instruction, and Copilot can transform it with GenAI.
• Call Metrics for Agents: Tool responses include provider call duration and per-image cost estimate so agents can reason about speed/cost tradeoffs.
• Multi-Provider Support: Choose from six leading image generation models, each with different cost and quality tradeoffs.
• Manual Generation/Edit View: A dedicated webview UI to write prompts, choose a provider, adjust settings, and generate or edit images manually.
• Automatic WebP Compression: All generated images are processed via a WebAssembly (WASM) encoder and saved as highly optimized .webp files to keep your project lightweight and web-ready.
• Secure API Key Storage: Your API keys are safely stored in your operating system's native credential manager (via VS Code SecretStorage), never in plain text configuration files.

Requirements

You need API keys for the providers you want to use:

• Google Gemini models → Google AI Studio
• OpenAI GPT Image → OpenAI Platform
• BFL FLUX.2 + Seedream → OpenRouter (one key covers all three)

Performance & Resource Safety

• Network provider calls use retry with request timeouts to avoid hanging operations.
• Manual/chat image editing enforces an input image size limit (default 12 MB).
• Extremely large decoded image resolutions are rejected to prevent high memory/CPU spikes during WebP encoding.

Both timeout and input-size limits are configurable via extension settings.

Getting a Free Gemini API Key (Google AI Studio)

Google offers a free tier for Gemini APIs through AI Studio — no credit card required to get started.

1. Go to Google AI Studio and sign in with a Google account.
2. Click Create API key, then select an existing Google Cloud project or create a new one.
3. Copy the generated key and store it in ImageGen via ImageGen: Set API Key → Gemini.

Free tier limits (as of early 2026): The Gemini 2.0 Flash image generation model includes a generous free quota for personal and development use. Paid usage is billed per image once you exceed the quota or opt into a paid plan. Check the AI Studio pricing page for current limits.

Getting an OpenRouter API Key

OpenRouter is a unified API gateway that gives you access to hundreds of models — including the FLUX.2 and Seedream models supported by ImageGen — through a single key and a single billing account.

1. Visit openrouter.ai and sign up or log in.
2. Navigate to Keys (or go directly to openrouter.ai/keys) and click Create key.
3. Give the key a name (e.g. imagegen-vscode), set an optional spend limit, and click Create.
4. Copy the key and store it in ImageGen via ImageGen: Set API Key → OpenRouter.

One OpenRouter key covers all OpenRouter-backed providers in ImageGen (FLUX.2 [max], FLUX.2 [pro], and Seedream 4.0). You can top up your credit balance from the OpenRouter dashboard and set per-key spend limits to stay in control of costs.

Usage

1. Setup

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run:

ImageGen: Set API Key

Select which provider key to configure, then paste your key into the secure input box. Repeat for each provider you want to use. Keys are stored securely using VS Code SecretStorage (OS credential vault), not in workspace files or settings.

2. Using with GitHub Copilot (Agent Workflow)

Open GitHub Copilot Chat (Ctrl+Alt+I) and prompt the agent:

"Write a short introduction for a blog post about TypeScript. Then use your image generation tool to create a futuristic header image for it."

Copilot will invoke the #generateImage tool, generate the image, save it as .webp, and return a Markdown image link plus call metrics (API duration and estimated cost).

This is the core UVP: image generation is now a native tool in the agent workflow, not an external app or manual copy/paste step.

3. Editing Existing Images in Copilot Chat

You can also transform an existing image in chat using the #editImage tool.

Example prompt:

"Use your image editing tool to take assets/images/header.webp, keep the same subject, and make it cyberpunk with neon blue lighting."

Accepted inputImage formats:

• Workspace-relative path: assets/images/header.webp
• Absolute path: C:/Users/you/Pictures/header.png
• URL: https://example.com/image.png
• Data URL: data:image/png;base64,...
• Markdown image snippet: ![alt](https://github.com/marquaye/vscode-imagegen/raw/HEAD/assets/images/header.webp)

Current provider support for image editing:

• ✅ Gemini (Nano Banana 2 / Nano Banana Pro)
• ✅ OpenAI (GPT Image 1.5)
• ❌ OpenRouter-backed models in this extension currently support text-to-image only

4. Using the Manual View

Run the command ImageGen: Open in Editor Panel to launch the UI.

• Generate mode: Select your provider, enter a detailed prompt, adjust WebP quality/aspect ratio, and click Generate Image.
• Edit mode: Switch Mode to Edit existing image, provide input image (path, URL, markdown image snippet, data URL, or upload a local file), add edit instructions, and click Edit Image.

Once the preview appears, click Insert into Active Editor to place the Markdown link at your cursor.

If no workspace folder is open, generated images are saved to a local fallback directory:

• Windows: %USERPROFILE%/Pictures/ImageGen (or %USERPROFILE%/ImageGen if Pictures is unavailable)
• macOS/Linux: $HOME/Pictures/ImageGen (or $HOME/ImageGen if Pictures is unavailable)

Extension Settings

Extension Commands

Development

This extension uses WebAssembly (WASM) for cross-platform image compression and Bun as the package manager and bundler.

# Install dependencies
bun install

# Build the extension
bun run build

# Watch mode during development
bun run watch

Press F5 in VS Code to launch the Extension Development Host. The build step runs automatically via vscode:prepublish.

Release Notes

1.0.1

• Added manual Generate/Edit modes in the webview UI, including local file upload for edit input.
• Added abort/cancel support for manual runs to stop in-flight provider requests.
• Added Copilot #editImage tool and provider-side image editing support for Gemini + OpenAI.
• Added provider request timeout handling and clearer timeout/cancellation error messaging.
• Added OpenAI manual controls for output resolution and model quality.
• Added fallback save location when no workspace is open (Pictures/ImageGen or ~/ImageGen).
• Added configurable safety limits: imagegen.requestTimeoutMs and imagegen.maxInputImageMB.

1.0.0

• Initial release.
• Added Copilot Tool integration (vscode.lm.registerTool).
• Added manual Webview panel for text-to-image generation.
• Integrated WASM-based WebP compression (@jsquash/webp).
• Multi-provider support: Google Gemini, OpenAI, BFL FLUX.2, Seedream 4.0.