CSS Variables

The agent renders inside Shadow DOM. Customize it with CSS custom properties.

Tier 1: Brand Matching

These are the essential variables:

Variable	Description
`--char-color-primary`	Primary action color (send button, links)
`--char-color-primary-foreground`	Text on primary surfaces
`--char-color-background`	Main background
`--char-color-foreground`	Primary text color
`--char-radius`	Border radius (e.g., `0.75rem`)
`--char-font-sans`	Font stack

Example

Add these CSS rules targeting char-agent:

char-agent {
  --char-color-primary: #7c3aed;
  --char-color-primary-foreground: #ffffff;
  --char-color-background: #ffffff;
  --char-color-foreground: #0f172a;
  --char-radius: 0.75rem;
}

Tier 2: Deeper Customization

Variable	Description
`--char-color-muted`	Secondary surfaces
`--char-color-border`	Borders and dividers
`--char-user-bubble-bg`	User message background
`--char-assistant-bubble-bg`	Assistant message background

Try it

Change --char-color-primary to your favorite color and see the preview update.

Custom Trigger

Dark Mode

Files

Preparing Environment

npm install
npm run dev