Skip to main content
CodeFire includes a built-in Image Studio for generating images using AI. Perfect for creating app icons, hero illustrations, mockups, or any visual assets you need during development.
AI image generation studio

​
Generating Images

  1. Open the Image Studio tab in a project window
  2. Enter a prompt (e.g., “A minimalist app icon with a brain symbol, blue gradient”)
  3. Select aspect ratio (1:1, 16:9, 9:16, 4:3, 3:2)
  4. Select size (1K, 2K, 4K)
  5. Click Generate (or press Cmd+Enter)
CodeFire sends your prompt to the AI model (via OpenRouter) and displays the generated image.
Generating images requires an OpenRouter API key. Set this in Settings → CodeFire Engine.

​
Aspect Ratios

CodeFire supports five aspect ratios:
  • 1:1 — Square (app icons, avatars, social media)
  • 16:9 — Widescreen (hero images, banners, presentations)
  • 9:16 — Portrait (mobile screenshots, stories)
  • 4:3 — Standard (classic photos, slides)
  • 3:2 — Wide (landscapes, product photos)
Choose the ratio that matches your use case. The AI model respects the aspect ratio when generating.

​
Image Sizes

Three size options:
  • 1K — Fast, lower resolution (good for drafts)
  • 2K — Balanced quality and speed
  • 4K — High resolution (production-ready assets)
Higher resolutions cost more tokens and take longer to generate.

​
Editing Images

CodeFire supports iterative editing:
  1. Generate an image
  2. Click Edit
  3. Enter edit instructions (e.g., “Make the background darker”)
  4. Click Apply Edit
The AI modifies the image based on your instructions while preserving the overall composition.
Image editing uses the same aspect ratio and size as the original image.

​
History

All generated images are saved and displayed in the History panel:
  • Thumbnail preview
  • Prompt used to generate the image
  • Timestamp (when generated)
  • Click an image to view full-size

​
Managing History

  • Select an image to view it in the main panel
  • Delete removes the image from disk and database
  • Copy copies the image to your clipboard
  • Reveal shows the file in Finder
Images are stored in: 
~/Library/Application Support/CodeFire/images/

​
Example Prompts

CodeFire includes example prompts to get you started:
  • “A minimalist app icon with a brain symbol, blue gradient”
  • “Hero illustration of a developer working late, isometric style”
  • “Clean dashboard mockup with charts and cards, dark mode”
Click an example to load it into the prompt field.

​
Image Metadata

Each generated image stores:
  • Prompt — The text used to generate it
  • Aspect ratio — 1:1, 16:9, etc.
  • Size — 1K, 2K, 4K
  • File path — Location on disk
  • Project ID — Links image to a specific project
  • Parent image ID — If edited, references the original
  • Response text — Any text the AI included in the response
  • Timestamp — When generated

​
OpenRouter Configuration

Image generation requires an OpenRouter API key:
  1. Go to openrouter.ai/keys
  2. Create a new API key
  3. Open CodeFire → Settings → CodeFire Engine
  4. Paste the key into the “OpenRouter API Key” field
  5. Click Save
CodeFire uses OpenRouter to access image generation models. All image generation costs are billed through OpenRouter.
OpenRouter charges vary by model. Check pricing at openrouter.ai/pricing.

​
Best Practices

Instead of “app icon”, try “minimalist app icon with a brain symbol, blue gradient, flat design, white background”.
Generate multiple variations at 1K size first. Once you find one you like, regenerate at 4K for production.
Don’t try to get the perfect image in one shot. Generate, then edit with small adjustments (“make background darker”, “remove shadows”).
Include style keywords in your prompt: “isometric”, “flat design”, “3D render”, “watercolor”, etc.
Refine your prompt before generating at 4K. Small text changes can dramatically improve results without needing multiple high-res generations.

​
MCP Integration

When the CodeFire MCP server is installed, your AI agent can generate images programmatically: 
# User prompt:
"Generate an app icon for this project"

# Agent uses MCP:
generate_image(
  prompt="Minimalist app icon with a brain symbol, blue gradient",
  aspect_ratio="1:1",
  image_size="4K"
)

# Returns path to generated image
# Agent can reference it in subsequent responses
See the MCP Setup Guide for installation instructions.

​
Image Actions

The Image Studio provides four actions for each image:
  1. Copy — Copies image to clipboard (paste into Slack, Figma, etc.)
  2. Edit — Opens the edit panel for iterative refinement
  3. Reveal — Shows the file in Finder (for sharing or moving)
  4. Delete — Removes from disk and database (permanent)

​
Performance Tips

  • 1K images generate in ~5 seconds
  • 2K images take ~10 seconds
  • 4K images can take 20+ seconds
If generation seems slow, check your OpenRouter account balance and rate limits.

Project Management

Generated images are linked to specific projects

Notes

Reference image file paths in notes

Task Tracking

Attach generated images to tasks

Build docs developers (and LLMs) love

Get started for freeTalk to us