Skip to main content

​
Images & Assets

Images make your widgets clearer and more trustworthy: a company logo in a header, a product photo in a catalog card, a status illustration in an empty state. Chippy gives you two ways to add images: upload your own files, or generate new ones with AI.
Widget with product photos and a generated illustration

A widget using uploaded and AI-generated images

​
Upload an Image

1

Open the assets panel

In the builder, click the Assets tab in the left sidebar to open the asset manager.
Builder sidebar with the Assets tab highlighted

The assets tab in the builder sidebar

2

Upload your file

Click Upload and select an image from your computer. Supported formats: PNG, JPG, SVG, and WebP.
Upload dialog in the asset manager

Uploading an image file

3

Name the asset

Give the asset a descriptive name (e.g., company-logo, hero-banner, product-placeholder). This name is how you reference it in prompts.
4

Use it in a widget

In the builder chat, reference the asset by name:
Add the company-logo image to the top-left corner of the header card.
The AI places the image in your widget and sizes it appropriately.

​
Generate an Image with AI

Instead of uploading, you can describe an image and have the AI generate it for you.
1

Open the assets panel

Click the Assets tab in the builder sidebar.
2

Click Generate

Click Generate Image to open the AI image generator.
AI image generation dialog with a prompt field

The AI image generation dialog

3

Describe what you want

Write a clear description of the image. Be specific about the subject, style, colors, and mood.Example prompts:
A flat-style illustration of a friendly robot holding a clipboard, using orange and white colors on a transparent background.
A minimal line-art icon of a shipping box with a checkmark, suitable for a delivery confirmation widget.
An isometric illustration of a customer support desk with a headset and laptop, in a clean modern style.
4

Review and save

The AI generates the image. If you like it, save it to your assets. If not, adjust your description and regenerate.
5

Use it in a widget

Reference the generated image by name in your builder prompts, just like an uploaded asset.
AI image generation requires Solo plan or higher. See Plans for details.

​
How Images Appear in Widgets

When you add an image to a widget, the AI places it inline with the rest of your content. Common patterns include:
Examples of images in headers, cards, and empty states

Images used in different widget patterns

​
Best Practices

Functional over decorative

Every image should help the user understand something: a logo for brand identity, a photo for product recognition, an illustration for empty states. Skip images that are purely decorative.

Keep a consistent style

If you generate multiple images, use similar prompts for style and color. “Flat-style illustration with orange accents” applied consistently looks better than a mix of styles.

Optimize for the chat context

Widgets render inside ChatGPT’s chat view, which is narrow. Use images that read well at small sizes. Avoid text-heavy images or complex diagrams that require zooming.

Use SVG for icons and logos

SVG files scale cleanly at any size and stay sharp on all screens. Use PNG or JPG for photographs and complex illustrations.

Styling & Theming

Style your widgets with semantic colors, typography, and icons.

UI Tools

Learn how UI tools render widgets inside ChatGPT.