Skip to navigation
Products & Surfaces

AI-powered theme generation

Generate a chat widget theme from a website URL or a written description, then review and save it with your chat Surface. In the classic dashboard, you can also attach reference images to a description.

Before you begin

  • Create a chat Surface. For setup instructions, see Setting up a chat Surface.
  • Theme generation uses a Google Gemini model. Website mode also uses Firecrawl to capture a screenshot of the site. Your organization needs access to Runtype platform keys, or its own Google and Firecrawl keys. For details, see Managing AI models and Firecrawl (web scraping).
  • To open the theme editor in the workbench or the classic dashboard, see Open the theme editor.

How theme generation works

The generator creates theme values from the input that you provide:

  • A website URL: The generator captures a screenshot of the page and infers colors and styling from it.
  • A description: The generator uses your text as the design direction.
  • Reference images (classic dashboard only): The images add visual input to a description.

The editor merges the generated values into the current theme. Generation can change colors, typography, corner radius, borders, shadows, and component styles, with these limits:

  • Generation updates the light theme only. If dark mode is on, the dark theme does not change.
  • Typography changes only the general font style, such as sans-serif or serif. The classic dashboard also changes the font weight. To use a specific brand font, set it manually on the Style tab.

Each generation is a run in your account and counts toward usage like your other runs. It creates or updates a flow named AI Theme Generator, and it stores each run as a record of type theme_generation named Generate Theme - followed by a timestamp.

Generated values change only the editor draft. To keep them, save the Surface.

Generate a theme from a website

To generate a theme from a website in the workbench, follow these steps:

  1. In Appearance, select the Generate tab.
  2. Select Website.
  3. Enter the website URL. You can enter a domain without https://.
  4. Click Generate theme. A Theme generated message appears, and the Style tab opens with the new theme in the preview.
  5. Click Save to save the Surface.

Generate a theme from a description

To generate a theme from a description in the workbench, follow these steps:

  1. In Appearance, select the Generate tab.
  2. Select Description.
  3. Enter the visual direction that you want, such as dark theme with purple accents and rounded corners.
  4. Click Generate theme. A Theme generated message appears, and the Style tab opens with the new theme in the preview.
  5. Click Save to save the Surface.

Review and save a theme

To adjust the generated theme, use the Style, Design, and Configure tabs. The preview updates as you edit.

The workbench does not keep theme history. Before you generate again, save the Surface if you want to keep the current theme. To generate again, replace the input and click Generate theme. In the workbench, switching between Website and Description clears the input.

To go back to the last saved theme in the workbench, open the menu next to Save and select Discard changes. In the classic dashboard, you can save the current theme as a preset. Presets are stored in your browser only.

Troubleshooting

If theme generation does not work as expected, check the following:

  • Could not generate a theme (workbench) or Failed to generate theme (classic dashboard): For a website, check that the URL is public and loads without a login. For a description, make the description more specific. If generation still fails, check that your organization has access to the Google and Firecrawl keys listed in Before you begin.
  • Generate theme is not available in the workbench: Enter a URL or a description first. The classic dashboard shows Please enter a URL or Please enter a description instead.
  • A reference image is not attached: The file is larger than 10 MB, or it is not an image. Files that are not images are ignored without a message.
  • The dark theme did not change: Generation updates the light theme only. Select Dark and adjust the dark theme manually. For details, see Preview and save changes.

Next steps

Continue with one of these guides: