For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dashboard
User GuideDeveloper GuidesAPI Reference
User GuideDeveloper GuidesAPI Reference
  • Getting Started
    • What is Runtype?
    • Creating your account
    • Platform Keys vs. BYOK
    • Understanding the Runtype UI
    • Quickstart: Social Media Post Generator
    • Quickstart: From Agent to Chat Widget
  • Dashboard
    • What is the Dashboard?
    • Daily Executions
  • Playground
    • What is the Playground?
  • Products & Surfaces
    • What are Products?
    • What are Surfaces?
    • Creating a Product
    • Setting up a Chat Surface
    • Setting up an API Surface
    • Setting up an MCP Surface
    • Setting up an A2A Surface
    • Setting up a Slack Surface
    • MCP authentication
    • Authenticating with product API keys
    • Embedding the chat widget (script tag)
    • Embedding the chat widget (React)
    • Surface orchestration modes
    • Product views
    • Adding Capabilities to a product
    • Connecting external agents
    • How A2A works
    • Connecting to Cursor / VS Code
    • Connecting to Claude Desktop
    • Scoping API keys to capabilities
    • Auto-generated OpenAPI spec
    • Calling your API endpoints
    • Client tokens and domain restrictions
    • AI-powered theme generation
    • Widget theming and customization
    • Product versioning and status
  • Flows
    • What are Flows?
    • Creating and Editing Flows
    • Flow step types overview
    • Agent and Flow Templates
    • Using prompt steps
    • Using transform-data steps
    • Using conditional steps
    • Using fetch-url and api-call steps
    • Using record steps (upsert/retrieve)
    • Flow variables and templates
    • Flow versioning and publishing
    • Running flows in batch
    • Handling batch failures
    • Debugging flows
  • Agents
    • What are Agents?
    • Creating and configuring Agents
    • Agent tools
  • Records
    • What are Records?
    • Creating and managing records
    • Using records in flows
    • Filtering and searching records
  • Tools
    • What are Tools?
    • Built-in Tools
    • Creating custom tools
    • Creating external tools
    • Runtime tools
  • Evals
    • What are Evals?
    • Running an Eval
    • Interpreting eval results
  • Schedules
    • What are Schedules?
    • Automating batch processing
  • Logs
    • What are Logs?
    • Working with Logs
  • Integrations
    • Connecting AI model providers
    • Slack integration
    • Google Workspace integration
    • GitHub integration
    • Linear integration
    • Weaviate (vector search)
    • Firecrawl (web scraping)
    • Exa (web search)
  • Settings
    • What's in Settings?
    • Available AI models
    • What are Organizations?
    • Managing AI models
    • Managing API keys
    • Billing and plans
    • Usage data
    • Team members and permissions
    • Appearance and preferences
    • Integrations (PostHog, Weaviate, Daytona)
  • Troubleshooting & FAQ
    • FAQ
    • Rate Limits and Usage
    • Managing Runtype with Claude
    • Flow execution failures
    • Common errors and solutions
    • Authentication issues
Dashboard
LogoLogo
On this page
  • How AI theming works
  • Generate from website URL
  • Generate from brand colors
  • Generation options
  • Review and refine
  • Regenerate themes
  • When to use AI theming
  • Next steps
Products & Surfaces

AI-powered theme generation

Was this page helpful?
Previous

Widget theming and customization

Next
Built with

Generate a chat widget theme automatically by providing your website URL or brand colors. Runtype’s AI analyzes your brand and creates matching styling.

How AI theming works

The AI theme generator:

  1. Analyzes your website or brand inputs
  2. Extracts colors, fonts, and design patterns
  3. Generates a complete widget theme
  4. Applies styling automatically

You can further customize the generated theme using the standard theming tools.

Generate from website URL

  1. Open your chat Surface
  2. Go to the Ship tab
  3. Click Generate Theme
  4. Select From Website
  5. Enter your website URL
  6. Click Generate

The AI visits your site, analyzes the design, and applies matching colors and fonts to the widget.

Generate from brand colors

If you don’t have a website yet or prefer to specify colors manually:

  1. Click Generate Theme
  2. Select From Brand Colors
  3. Enter your primary brand color (hex code)
  4. Optionally add secondary and accent colors
  5. Click Generate

The AI creates a harmonious color scheme based on your inputs.

Generation options

Customize how the theme is generated:

  • Style preference — Modern, classic, vibrant, or minimal
  • Contrast level — High contrast for accessibility or subtle for elegance
  • Font matching — Use website fonts or select generic alternatives

Review and refine

After generation:

  1. Preview the theme in the preview panel
  2. Review colors, fonts, and spacing
  3. Make manual adjustments if needed
  4. Click Apply Theme

The generated theme becomes your starting point—you can modify any aspect using Widget theming and customization.

AI theming works best with established websites that have clear branding. For new Products, manually select colors or use a template instead.

Regenerate themes

You can regenerate at any time:

  1. Click Generate Theme again
  2. Choose new inputs or options
  3. Compare with current theme
  4. Apply if preferred

Previous themes aren’t saved—regenerating replaces your current custom styling.

When to use AI theming

Good for:

  • Matching an existing website’s design
  • Quick setup without manual styling
  • Starting point for further customization

Skip if:

  • You have very specific design requirements
  • Your brand uses complex gradients or patterns
  • You need pixel-perfect control

Next steps

  • Widget theming and customization for manual styling
  • Setting up a chat surface
  • Embedding the chat widget (script tag)