> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.runtype.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.runtype.com/_mcp/server.

# 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](/user-guide/products-surfaces/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](/user-guide/settings/managing-ai-models) and [Firecrawl (web scraping)](/user-guide/integrations/firecrawl-web-scraping).
* To open the theme editor in the workbench or the classic dashboard, see [Open the theme editor](/user-guide/products-surfaces/widget-theming-and-customization#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

#### Workbench

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.

#### Classic dashboard

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

1. In the **Chat Style Editor**, select the **Generate** tab.
2. Select **URL**.
3. Enter the website URL. You can enter a domain without `https://`.
4. Click **Generate theme**. The editor applies the generated values to the preview.
5. Click **Use Style** to save the widget configuration.

## Generate a theme from a description

#### Workbench

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.

#### Classic dashboard

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

1. In the **Chat Style Editor**, select the **Generate** tab.
2. Select **Describe**.
3. Enter the visual direction that you want, such as `dark theme with purple accents and rounded corners`.
4. Optional: Click **Attach reference images**, then choose one or more image files. Each image must be 10 MB or smaller.
5. Click **Generate theme**. The editor applies the generated values to the preview.
6. Click **Use Style** to save the widget configuration.

## 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](#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](/user-guide/products-surfaces/widget-theming-and-customization#preview-and-save-changes).

## Next steps

Continue with one of these guides:

* [Widget theming and customization](/user-guide/products-surfaces/widget-theming-and-customization): adjust colors, typography, layout, and widget behavior
* [Embedding the chat widget (script tag)](/user-guide/products-surfaces/embedding-the-chat-widget-script-tag): add the saved widget to your website
* [Client tokens and domain restrictions](/user-guide/products-surfaces/client-tokens-and-domain-restrictions): control where your client-side widget runs