Style Studio

Style Studio is a full-screen design environment inside the app builder where you can customize the look and feel of your chatbot’s interface using AI or manual CSS. Describe what you want in plain English and the AI generates a complete theme — colors, typography, bubble shapes, animations, and more.

How It Works

Style Studio pairs a live chat preview with the Alchemist AI assistant. You describe the visual style you want, and the AI generates CSS that targets over 50 custom properties controlling every visual aspect of the chat interface.

You: "Make it look like a premium fintech app with dark mode, sharp corners, and a monospace font"
    |
AI generates CSS targeting:
  --chat-font-family, --chat-bubble-radius, --chat-user-bubble-bg,
  --chat-assistant-bubble-bg, --chat-input-bg, --chat-send-btn-bg, ...
    |
Live preview updates instantly

The AI sees a sprite sheet of all chat UI elements (welcome screen, user messages, assistant messages with markdown, tool cards, web sources, image generation, voice, error states, typing indicators, input area, and standalone tools) so it understands exactly what it is styling. This visual context means the AI can make informed decisions about color contrast, spacing, and typography across every element type.

Getting Started

What You Can Customize

Style Studio controls the entire chat interface through CSS custom properties. Here are the major categories:

Animation Config

The AI can also recommend streaming text animation settings alongside the CSS. These control how new text appears during AI responses:

Animation settings appear as a metadata badge in the Style Studio when the AI recommends them. They are saved to your app’s capabilities automatically.

Welcome Background Presets

The AI can suggest a background animation for your chatbot’s welcome screen. Available presets:

• Retro Grid — Perspective grid lines that recede into the distance
• Aurora — Soft, shifting aurora borealis gradients
• Particles — Floating particle field
• Gradient Flow — Smooth flowing color gradients
• Mesh Gradient — Organic mesh gradient blobs

CSS Security and Scoping

Custom CSS goes through two safety layers before it reaches the browser:

Sanitization

All CSS is sanitized to remove potentially dangerous patterns:

• @import directives (prevents loading external stylesheets)
• javascript: URLs, expression(), and behavior: (legacy XSS vectors)
• Event handler attributes and script tags
• Non-image data URIs (data:image/* is allowed for backgrounds)
• External URLs not on the Google Fonts allowlist

Scoping

Every CSS rule is automatically prefixed with [data-app-id="<your-app-id>"] so your custom styles only affect your chatbot. This means:

• Your CSS cannot leak into the host page when embedded as a widget
• Multiple chatbots on the same page cannot interfere with each other
• @keyframes and @font-face declarations are left global (they need to be)
• @media and @supports queries have their inner selectors scoped

Layout Archetypes

The AI uses five layout archetypes when generating styles:

1. Conversational — Traditional chat bubbles, rounded corners, alternating alignment
2. Document-style — Full-width assistant messages, minimal borders, reading-focused
3. Outlined/Card — Visible borders, card-like bubbles, structured feel
4. Hybrid — Mix of conversational user bubbles with document-style assistant responses
5. Symmetric — Both sides centered, uniform styling, minimal visual hierarchy

The AI chooses the archetype based on keywords in your description and can switch between them on request.

Google Fonts

The AI has access to a curated list of Google Fonts and will include @font-face declarations in the generated CSS. Fonts are loaded from fonts.googleapis.com and fonts.gstatic.com, which are the only external domains allowed in custom CSS.

Tips for Better Results

1. Be specific about mood: “Professional and trustworthy” gives better results than “make it look good”
2. Reference brands: “Style it like Linear” or “Apple-inspired minimal” gives the AI strong direction
3. Provide hex codes: If you have brand colors, include them directly
4. Iterate incrementally: Start with a broad direction, then refine details
5. Ask about dark mode: The AI can generate styles that work well in both light and dark modes

How It Integrates

Custom CSS from Style Studio is saved to your app’s customCss field. When a consumer loads your chatbot:

1. The CSS is sanitized and scoped server-side
2. A <style> tag is injected with the scoped rules
3. Google Fonts are loaded via standard @font-face declarations
4. Animation config is applied to the streaming text renderer

This works everywhere your chatbot appears — the standalone page, embedded widget, and custom domains.