Using images
There are five ways to add images to your Appifex project. Each method works with web, mobile, and backend platforms.
Upload to chat
Attach images directly in the chat and tell the AI where to place them. The AI will save the image as a project asset and reference it in your code.
"Use this as the app logo in the navbar"
"Replace the hero background with this image"
You can attach up to 3 images per message (5 MB each). Supported formats: PNG, JPEG, GIF, WebP.
Be specific about what the image is for, not just where it goes. Saying "use this as the app logo" works better than "put this image somewhere."
If you attach an image as a design reference (e.g., "make it look like this"), the AI will use it for visual inspiration without saving it as a project asset. Only images you want placed in the app are persisted.
Use an external URL
Paste an image URL in your prompt and the AI will download, save, and place it automatically.
"Use the image from https://example.com/hero-photo.jpg as the hero background"
"Download https://example.com/logo.png and use it as the site favicon"
The AI downloads the image, uploads it to cloud storage, and writes it to your project at the correct platform path.
Upload to the Assets tab
For images you want available across multiple prompts, upload them to the Assets tab before generating code.
- Open your project session
- Click the Assets tab in the right panel
- Click Upload or drag and drop images
- Give each asset a descriptive name (e.g., "app logo", "hero background")
- In your prompt, reference the asset by name:
"Use my app logo in the navbar and the hero background behind the main heading"
The AI sees all uploaded assets and their display names. You can upload up to 100 assets per project.
Give assets descriptive names rather than filenames. The AI responds better to "use my app logo" than "use logo-final-v3.png."
Generate images with AI
Ask the AI to generate custom images using text descriptions. Images are created with OpenAI's image generation model and saved directly to your project.
"Generate a hero illustration of a rocket launching into space"
"Create an app icon with a green leaf on a white background"
Transparent backgrounds
For logos, icons, and overlays, request a transparent background. The AI generates a PNG with an alpha channel.
"Generate a logo with a transparent background —
a minimalist mountain peak in dark blue"
"Create an app icon with transparent background:
a stylized letter A in gradient purple"
Transparent backgrounds require PNG format. The AI handles this automatically when you mention "transparent."
When to generate vs search
| Need | What to use | Example prompt |
|---|---|---|
| Custom artwork | Generate | "Generate an illustration of a friendly robot waving" |
| Real-world photos | Search | "Find a photo of a modern office workspace" |
| Logos and icons | Generate (transparent) | "Generate a minimalist logo with transparent background" |
| Stock imagery | Search | "Search for a sunset over mountains" |
Image search costs ~$0.001 per search. Image generation costs ~$0.04-0.08 per image.
Use images from GitHub
If your project is connected to GitHub, you can push images directly to the public directory of your repository.
- Navigate to your repo on GitHub
- Go to
web/public/images/(or create the directory) - Click Add file > Upload files
- Upload your images and commit
- In Appifex, reference the image path:
"Use the image at public/images/hero-banner.jpg for the hero section"
The file is available at /images/hero-banner.jpg in your app code.
Best practices
| Practice | Why |
|---|---|
| Compress images before uploading | Faster load times, smaller bundle size |
| Use PNG for logos and icons | Supports transparency |
| Use JPEG for photos | Smaller file size for photographic content |
| Be specific in prompts | "Use as the navbar logo at 40px height" beats "put this somewhere" |
| Name assets descriptively | Helps the AI understand intent without extra prompting |
| Use generate for custom art | Don't search for something that doesn't exist — generate it |
| Use search for real photos | Real stock photos look better than AI-generated photography |