As well as generating images from scratch, Caffeine lets you upload your own images and PDF files and use them in your app. Uploaded files give the AI context — it can reference images when designing your app's UI and use them as source material for edits or compositing, and can incorporate PDF content as needed.
How to upload an image or file
In the chat panel, click the attachment icon (or drag and drop a file onto the chat input). You can attach one or more images or PDF files to your message before sending. Thumbnails of your uploaded files appear above the prompt field.
When you send the message along with your files, the AI sees both your text description and the file content. It uses images to inform design decisions — colors, layout, style — and can incorporate them directly into your app. PDF files are read and their content is made available to the AI for reference during the build.
Use a design image as a reference
If you already have a visual in mind — a screenshot of another app, a mockup you made, or any image that shows the look you want — attach it to your first message. Caffeine will treat it as the visual target for the build and match the layout, colors, and style as closely as possible.
This is the fastest way to communicate a specific visual direction. Instead of describing the design in words, you show it. Caffeine reads the image and uses it to guide every design decision for that build.
What you can do with uploaded images
Use your own logo or brand assets. Upload a logo file and ask the AI to use it in the app: "Use this logo in the header." The image is stored in your project's assets and referenced in the generated frontend code.
Edit or extend an uploaded image. Ask the AI to modify an image you've uploaded: "Adjust this image to use a darker color palette" or "Use this photo as the background for the hero section."
Combine images. Upload multiple images and ask the AI to combine them: "Create a composite of these two images for the about page."
File requirements
- Maximum file size: 10 MB per image file; 4 MB per PDF file
- Accepted formats: All standard image formats (JPG, PNG, WebP, GIF, and others). HEIC files (from iPhone cameras) are automatically converted to JPEG before upload. PDF files are also accepted.
Project upload limits
Uploaded images count against a per-project quota. When the limit is reached, further uploads are rejected until existing files are removed.
On a free plan:
- Up to 20 uploaded files per project
- Up to 100 MB total across all uploaded files
On a paid plan:
- Up to 100 uploaded files per project
- Up to 500 MB total across all uploaded files
Generated images (created by the AI rather than uploaded by you) do not count against this quota.
Uploading a collection of images
If you upload 5 or more images, the AI will always pause before building and suggest a better approach — no matter what kind of app you are making. It will also suggest this if your prompt implies repeating or regularly updated content (for example, a gallery, portfolio, product catalog, or restaurant menu), even if you upload fewer than 5 images.
It will offer to build a simple content manager into your app so you can log in and add, edit, or remove content yourself at any time, without needing to rebuild. If you prefer to go ahead with your uploaded images as-is, just say so and the AI will follow your lead.
Where uploaded images end up
Uploaded images are stored as assets in your project. When the AI incorporates them into your app, they are placed in your app's public assets folder and referenced directly in the generated frontend code. They are also included when you export your project to GitHub or download the source code as a ZIP.
Uploaded files vs. generated images
These are distinct things that work together:
- Uploaded images are image files you provide. The AI uses them as reference material or places them directly into your app.
- Uploaded PDFs are document files you provide. The AI reads their content and uses it to populate or structure your app.
- Generated images are created by the AI from descriptions. They are stored separately at
frontend/public/assets/generated/.
You can mix both in the same project — for example, provide your own logo (uploaded) while letting the AI generate supporting illustrations (generated).
Frequently asked questions
What image formats can I upload?
All standard web formats are accepted: JPG, PNG, WebP, GIF, and others. HEIC files from iPhone cameras are automatically converted to JPEG.
Is there a file size limit?
Each image can be up to 10 MB.
The AI suggested a content manager instead of using my photos. What does that mean?
When you upload 5 or more images, or when your prompt suggests repeating content like a gallery, menu, or product catalog, the AI recognises that this type of content usually needs to change over time. Embedding the images as static files would mean rebuilding the entire app whenever you want to add or remove anything. The content manager option lets you update your content from inside the app itself — no rebuilding required. If you'd rather proceed with static images, just say so and the AI will build it that way.
Can I upload images and use the AI's image generator in the same project?
Yes. Uploaded and AI-generated images work side by side without conflict.