Products & Surfaces

AI-powered theme generation

Use AI-powered theme generation to create a chat widget theme from a website URL, a description, or reference images. The generator adds the result to the Chat Style Editor, where you review and adjust it before saving it to your chat Surface.

Before you begin

Create a chat Surface and open its Ship tab. For setup instructions, see Setting up a chat Surface.

How theme generation works

The generator uses the input that you provide to create theme values for the chat widget:

  • A website URL provides a screenshot that the generator analyzes for colors and styling.
  • A description provides the design direction for the generated theme.
  • Reference images add visual input when you use description-based generation.

After generation, the editor merges generated values with the current theme. The result can include colors, typography, corner radius, component styles, borders, and shadows.

To save the result to the Surface, click Use Style.

Generate a theme from a website

To generate a theme from a website URL, follow these steps:

  1. On the Ship tab, click Customize in Widget Appearance.
  2. On the Generate tab, select URL.
  3. Enter the website URL.
  4. Click Generate theme. The editor applies the generated values to the preview.

The URL generator captures a screenshot of the website and uses it to infer colors and styling.

Generate a theme from a description

To generate a theme from written instructions or reference images, follow these steps:

  1. On the Generate tab, select Describe.
  2. Enter a description, such as dark theme with purple accents and rounded corners.
  3. Optional: Click Attach reference images, then choose one or more image files. Keep each image under 10 MB.
  4. Click Generate theme. The editor applies the generated values to the preview.

Review and save a theme

After generation, review the result and save it to your Surface:

  1. Review the colors, typography, borders, corner radius, and shadows in the preview.
  2. Adjust the theme in the Style, Design, or Configure tabs.
  3. Click Use Style. The editor saves the widget configuration to the Surface.

The editor does not provide a theme history. Save the current theme as a preset before you regenerate if you need to return to an earlier result.

Regenerate a theme

To generate another theme, follow these steps:

  1. On the Generate tab, select URL or Describe.
  2. Replace the existing input.
  3. Click Generate theme.

The editor merges the generated values from this run with the current theme. Click Use Style to save the result to the Surface.

Choose manual customization

Use generated themes as a starting point when you have a website, a written visual direction, or reference images. Choose manual customization when you need exact control over gradients, patterns, or individual theme values. For manual controls, see Widget theming and customization.

Next steps

Continue with one of these guides: