ChatRAG

Branding & UI Customization

Customize ChatRAG to match your brand with logos, colors, welcome messages, and UI preferences.

App Identity

App Name & Title

NEXT_PUBLIC_APP_NAME=ChatRAG
NEXT_PUBLIC_SITE_TITLE=Your AI Assistant
NEXT_PUBLIC_FAVICON_URL=/favicon.ico

App name appears in the header, page titles, and meta tags

Logo Configuration

Header Logo

Choose between text or image logo for the header:

# Option 1: Text Logo
NEXT_PUBLIC_HEADER_LOGO_TYPE=text
NEXT_PUBLIC_HEADER_LOGO_TEXT=ChatRAG

# Option 2: Image Logo
NEXT_PUBLIC_HEADER_LOGO_TYPE=image
NEXT_PUBLIC_HEADER_LOGO_URL=/logos/header-logo.png

AI Response Avatar

Customize the logo that appears with AI messages:

NEXT_PUBLIC_AI_RESPONSE_LOGO_URL=/logos/ai-avatar.png
NEXT_PUBLIC_AI_RESPONSE_LOGO_BORDER=true
NEXT_PUBLIC_AI_RESPONSE_LOGO_SIZE=md  # sm, md, or lg

Logo Best Practices

  • Use PNG format with transparency for best results
  • Header logo: 120-150px wide recommended
  • AI avatar: 40x40px or 80x80px for sharp display
  • Place logos in /public/logos/ directory

Welcome Messages

Welcome Text

NEXT_PUBLIC_WELCOME_TEXT=What can I help with?
NEXT_PUBLIC_WELCOME_TEXT_MODE=custom  # or "ai_generated"
NEXT_PUBLIC_WELCOME_TEXT_GRADIENT=none  # or gradient style

Welcome Messages Array

Rotating welcome messages with dynamic user name:

NEXT_PUBLIC_WELCOME_MESSAGES=[
  "Hey, {Username}! What can I help you with today?",
  "Hello {Username}! Ready to assist you.",
  "Hi there! How can I help?"
]

Use {Username} placeholder for personalization

Suggestions Configuration

Enable Suggestions

NEXT_PUBLIC_SHOW_SUGGESTIONS=true
NEXT_PUBLIC_SUGGESTION_GROUPS=[
  {
    "title": "Getting Started",
    "suggestions": [
      "How do I upload documents?",
      "What models are available?",
      "How does RAG work?"
    ]
  },
  {
    "title": "Features",
    "suggestions": [
      "Generate an image",
      "Create a video",
      "Search my documents"
    ]
  }
]

UI Preferences

Chat Input Size

NEXT_PUBLIC_CHAT_INPUT_TEXT_SIZE=md

Options: sm, md, lg

Document Dashboard

NEXT_PUBLIC_HIDE_DOCUMENT_DASHBOARD=false

Show/hide document upload interface

Read-Only Documents

NEXT_PUBLIC_READ_ONLY_DOCUMENTS_ENABLED=false

Prevent user uploads (admin-only)

Performance Flags

NEXT_PUBLIC_DISABLE_DEBUG_LOGS=false
NEXT_PUBLIC_REDUCED_MOTION=false

Optional: Use temporarily for profiling

Embed Widget Branding

Widget Appearance

NEXT_PUBLIC_EMBED_ENABLED=true
NEXT_PUBLIC_EMBED_TITLE=ChatRAG
NEXT_PUBLIC_EMBED_PRIMARY_COLOR=#6366f1
NEXT_PUBLIC_EMBED_POSITION=bottom-right  # or bottom-left, top-right, top-left
NEXT_PUBLIC_EMBED_AUTO_OPEN=false
NEXT_PUBLIC_EMBED_GREETING=Como te puedo ayudar?

Widget Access Control

NEXT_PUBLIC_EMBED_ALLOWED_DOMAINS=*  # or "domain1.com,domain2.com"
EMBED_REQUIRE_AUTH=false

Language & Localization

Users can change the chatbot language in User Settings. Built-in languages include:

English
Spanish
Portuguese
French
German
Italian
Dutch
Japanese
Korean
Chinese
Hindi
Arabic

User Name Extraction

Automatically extract and use user names for personalization:

NEXT_PUBLIC_NAME_EXTRACTION_ENABLED=true
NEXT_PUBLIC_NAME_EXTRACTION_MODEL=gpt-4o-mini

When enabled, ChatRAG will try to learn the user's name from conversation and use it in welcome messages with the {Username} placeholder.

Applying Branding Changes

Via Config UI (Recommended)

  1. Open npm run config
  2. Navigate to Branding section
  3. Update logos, colors, and text
  4. Click "Save Settings"
  5. Restart dev server: npm run dev

Manual Configuration

Edit .env.local directly and restart server

Branding Best Practices

Consistent Brand Identity

Use the same colors, fonts, and tone across all customizable elements

Optimize Images

Compress logos and use appropriate sizes to maintain fast load times

Test Dark Mode

Ensure your logos and colors work well in both light and dark themes

Mobile-Friendly

Test branding on mobile devices to ensure readability and proper scaling

← Previous: WhatsApp IntegrationNext: Deployment →