Generating Images with AI
Need an image for your app? Just ask the agent to create one. Describe what you want, and AI generates it for you. Example requests:- “Create a hero image of a modern office with plants”
- “Generate an icon of a shopping cart, flat design, blue”
- “Make a background pattern with geometric shapes”
How to Generate an Image
- Open your project and go to Agent Mode
- Describe the image you want
- Optionally specify the size (see below)
- Wait a few seconds for generation
- The image appears in your project’s
public/folder
You: Create a banner image for a coffee shop website, warm colors, cozy atmosphere
Agent: I’ll generate that image for you. What size would you like? The default is 16:9 (widescreen).
You: Square is fine
Agent: Done! I’ve created the image and saved it to /public/coffee-banner.png. Want me to add it to your homepage?
Choosing Size and Style
Available Sizes
| Aspect Ratio | Best For |
|---|---|
| 1:1 (Square) | Profile pictures, icons, thumbnails |
| 16:9 | Hero banners, video thumbnails |
| 4:3 | Standard photos, cards |
| 3:2 | Landscape photos |
| 9:16 | Mobile screens, stories |
| 2:3 | Portrait photos |
| 21:9 | Ultra-wide banners |
| 3:1 | Website headers |
| 1:3 | Vertical banners |
| 4:5 | Social media posts |
Style Tips
Be specific about style in your prompt:- “Flat design” — Simple, minimal, modern
- “Realistic photo” — Photographic quality
- “Illustration” — Hand-drawn or artistic style
- “Minimalist” — Clean with lots of white space
- “3D render” — Three-dimensional objects
Where Images Are Saved
Generated images automatically save to your project’spublic/ folder. The filename is based on your prompt, with automatic numbering if a similar file exists.
Example: coffee-banner.png, coffee-banner-2.png
You can find your images in:
- Code Editor →
public/folder - Or ask the agent: “Show me the images in my project”
Using Generated Images
After generation, ask the agent to add the image to your app:- “Add this image as the hero banner on the homepage”
- “Use this as the background for the contact section”
- “Replace the current logo with this image”