Style Studio

Style Studio is a full-screen design environment in the AVCodex Builder where you customize the look of your agent's chat interface. Two paths: tell The Alchemist what you want and let it generate a complete theme, or write CSS by hand. The studio drives over 50 CSS custom properties controlling colors, typography, bubble shapes, animations, and more.

This matters when an agent is sitting on an integrator's portal alongside their other tools, when it's embedded inside a client's branded room-support page, or when you want a programmer-facing internal tool to look obviously different from a customer-facing one.

Style Studio pairs a live chat preview with The Alchemist. You describe the visual style you want, and The Alchemist generates CSS that targets every visual aspect of the chat interface.

You: "Match our integrator brand: deep navy, brushed-steel grays, technical sans-serif"
    |
The Alchemist 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 Alchemist sees a sprite sheet of every chat UI element (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. With that visual context, it makes informed calls on color contrast, spacing, and typography across each element type.

1. Open Style Studio

Open your agent in the Builder and click the Style tab.

2. Describe Your Style

Open The Alchemist panel and describe the look you want. Be specific about colors, typography, mood, or reference a brand. Examples:

• "Minimal and clean. Lots of whitespace, soft grays, Inter font. Should feel like a technical reference document, not a marketing site."
• "Match our integrator brand: navy blue (#1a237e), gold accents, serif headings."
• "Match a Q-SYS Designer aesthetic. Dark UI, technical typography, sharp corners."
• "Internal programmer tool. Dark mode, monospace, terminal feel."

3. Iterate

The Alchemist supports multi-turn conversation. Ask for changes:

• "Make the user bubbles more rounded."
• "Switch to a darker background."
• "Add a subtle glow to the send button."

Each iteration builds on the previous CSS, so changes are cumulative.

4. Save

Changes auto-save after 1.5 seconds of inactivity. CSS, animation config, and welcome background preset all persist automatically.

Style Studio drives the chat interface through CSS custom properties. Major categories:

The Alchemist can also recommend streaming-text animation settings alongside the CSS. These control how new text appears as the agent responds:

Animation settings appear as a metadata badge in Style Studio when The Alchemist recommends them. They save to your agent's capabilities automatically.

The Alchemist can suggest a background animation for the welcome screen:

• 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.

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

Sanitization#

All CSS is sanitized to strip dangerous patterns:

• @import directives (no 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 agent. That means:

• Your CSS cannot leak into the host page when embedded as a widget on an integrator's site.
• Multiple agents on the same page cannot interfere with each other.
• @keyframes and @font-face declarations stay global (they have to).
• @media and @supports queries have their inner selectors scoped.

Note: You never write the scoping selector yourself. Write CSS as if your rules are already inside the chat container. The scoper handles the rest.

The Alchemist works from 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 (good for design-engineer agents pulling spec answers from manufacturer PDFs).
3. Outlined / Card: Visible borders, card-like bubbles, structured feel (good for technical reference agents).
4. Hybrid: Conversational user bubbles paired with document-style assistant responses.
5. Symmetric: Both sides centered, uniform styling, minimal visual hierarchy.

The Alchemist picks an archetype based on keywords in your description and can switch on request.

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

Warning: The Alchemist avoids display or decorative fonts (Playfair Display, DM Serif Display, etc.) as the primary chat font. They're built for headings, not long-form reading, and they hurt readability in chat.

1. Be specific about mood: "Technical and trustworthy" gives better results than "make it look good".
2. Reference brands or AV products: "Match a Q-SYS Designer aesthetic" or "Looks like Crestron Construct" gives The Alchemist strong direction.
3. Provide hex codes: If you have brand colors (your integrator's, or a client's), include them.
4. Iterate incrementally: Start broad, then refine details.
5. Ask about dark mode: The Alchemist can generate styles that work in both light and dark modes (good for techs working in dim AV racks or broadcast control rooms).

Custom CSS from Style Studio saves to your agent's customCss field. When a user loads the agent:

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

This works everywhere the agent appears: the standalone page, the embedded widget, and custom domains.

*AVCodex · Your AV expertise. Amplified by AI.*