Customization & Branding

Transform your Enterprise AI Chatbot Platform to match your organization's brand and requirements. This guide covers all customization options available through the config.toml file and other configuration methods.

Configuration Sections

1 Layout Configuration

[layout]

title = "Acme Corp AI Assistant"
description = "Secure AI chatbot platform for Acme Corporation employees"

2 Greeting Configuration

[greeting]

title = "Welcome to Acme AI Assistant!"
subtitle = "How can I help you be more productive today?"

3 Theme Configuration

# HEX Format (recommended)

primary_color = "#00ff88"
secondary_color = "#00cc6a"

# HSL Format

primary_color = "hsl(150deg, 100%, 50%)"
secondary_color = "hsl(150deg, 100%, 40%)"

# Green (Tech/Growth)

primary_color = "#00ff88" # Green
secondary_color = "#00cc6a" # Dark Green

# Blue (Professional)

primary_color = "#2563eb" # Blue
secondary_color = "#1e40af" # Dark Blue

# Purple (Creative)

primary_color = "#7c3aed" # Purple
secondary_color = "#6d28d9" # Dark Purple

4 Header Configuration

[header]

title = "Acme AI Assistant"
subtitle = "Enterprise AI Platform"
show_logo = true

5 Footer Configuration

[footer]

enabled = true
company_name = "Acme Corporation"
privacy_policy = """
This AI platform is provided by **Acme Corporation** for authorized employees only.

All interactions are logged for security and compliance purposes.
"""
usage_policy = """
**Acme Corp AI Usage Guidelines:**

- Verify all AI-generated content before use
- Do not input confidential or sensitive data
- Use for business purposes only
  """

6 Suggested Actions

# Business Communication

  [[suggested_actions]]
  title = "Draft a professional email"
  label = "for client follow-up"
  action = "Draft a professional email for client follow-up"

# Data Analysis

[[suggested_actions]]
title = "Analyze this spreadsheet data"
label = "and provide insights"
action = "Analyze this spreadsheet data and provide key insights"

# Documentation

[[suggested_actions]]
title = "Create documentation for"
label = "our new project workflow"
action = "Create documentation for our new project workflow"

Advanced Customization

Custom Logo and Assets

Replace default assets with your company branding:

File Structure:

public/

├── images/
│ ├── logo.png # Company logo (light theme)
│ ├── logo-dark.png # Company logo (dark theme)
│ ├── favicon.ico # Browser favicon
│ └── og-image.png # Social sharing image

Environment-Based Configuration

You can have different configurations for different environments:

File: config.production.toml

[layout]

title = "Acme AI - Production"
description = "Production AI platform for Acme Corporation"

[header]
title = "Acme AI"
subtitle = "Production Environment"

Complete Example Configuration

Here's a complete example of a customized config.toml for a fictional company:

[layout]

title = "TechCorp AI Assistant"
description = "Enterprise AI platform for TechCorp employees - boost productivity with secure AI"

[greeting]
title = "Welcome to TechCorp AI!"
subtitle = "How can I help you be more productive today?"

[theme]
primary_color = "#00ff88"
secondary_color = "#00cc6a"

[header]
title = "TechCorp AI"
subtitle = "Secure AI for Innovation"
show_logo = true

[footer]
enabled = true
company_name = "TechCorp IT Department"
privacy_policy = """
This AI platform is provided by **TechCorp** for authorized employees only.

**Data Handling:**

- All conversations are encrypted and stored securely
- Usage data is collected for improvement and compliance
- No personal conversations are reviewed unless required for security

**Contact:** For privacy concerns, contact privacy@techcorp.com
"""
usage_policy = """
**TechCorp AI Usage Guidelines:**

**Acceptable Use:**
✓ Business research and analysis
✓ Document drafting and editing
✓ Code review and debugging
✓ Meeting preparation and notes

**Prohibited Use:**
✗ Sharing confidential client data
✗ Personal or non-business use
✗ Generating inappropriate content
✗ Attempting to bypass security measures
"""

[[suggested_actions]]
title = "Analyze market trends"
label = "for Q4 planning"
action = "Analyze current market trends for Q4 strategic planning"

[[suggested_actions]]
title = "Write a project proposal"
label = "for cloud migration"
action = "Write a project proposal for cloud migration including timeline and budget"

[[suggested_actions]]
title = "Create a meeting agenda"
label = "for product roadmap review"
action = "Create a detailed meeting agenda for product roadmap review"

[[suggested_actions]]
title = "Draft technical documentation"
label = "for API endpoints"
action = "Draft comprehensive technical documentation for our new API endpoints"

Testing Your Configuration

1 Restart Development Server

After making changes to config.toml, restart your development server:

# Stop the server (Ctrl+C)

# Then restart

pnpm dev

2 Clear Browser Cache

Clear your browser cache to see changes:

• Chrome/Edge: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
• Firefox: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)

3 Test Different Themes

Test both light and dark themes to ensure your colors work well in both modes.