Comprehensive White Label Configuration System

[ngo275]

Comprehensive White Label Configuration System

This PR implements a complete white label configuration system for the AppAgent repository, making the application fully configurable for branding, domain, email addresses, and other key identifiers.

🎯 Overview

The white label configuration system allows users to customize:

• App Name: Replace "AppAgent" throughout the application
• Domain: Replace "app-agent.ai" with custom domain
• Email Addresses: Configure support, info, and marketing emails
• Tagline & Description: Customize app messaging
• Social Media: Configure Twitter handle and other social links

🔧 Implementation Details

Core Configuration (src/lib/config.ts)

export const WHITE_LABEL_CONFIG = {
  appName: process.env.NEXT_PUBLIC_APP_NAME || 'AppAgent',
  domain: process.env.NEXT_PUBLIC_DOMAIN || 'app-agent.ai',
  tagline: process.env.NEXT_PUBLIC_TAGLINE || 'From ASO to Release, All Streamlined',
  description: process.env.NEXT_PUBLIC_DESCRIPTION || 'AppAgent automates ASO...',
  supportEmail: process.env.NEXT_PUBLIC_SUPPORT_EMAIL || 'support@app-agent.ai',
  infoEmail: process.env.NEXT_PUBLIC_INFO_EMAIL || 'info@app-agent.ai',
  marketingEmail: process.env.NEXT_PUBLIC_MARKETING_EMAIL || 'shu@app-agent.ai',
  marketingName: process.env.NEXT_PUBLIC_MARKETING_NAME || 'Shu from AppAgent',
  twitterHandle: process.env.NEXT_PUBLIC_TWITTER_HANDLE || '@ngo275',
};

Custom Translation Hook (src/hooks/useWhiteLabelTranslations.ts)

Created a custom hook that wraps Next.js's useTranslations to automatically replace hardcoded values with white label configuration at runtime, maintaining compatibility with the existing i18n system.

📁 Files Updated

Configuration & Core

• src/lib/config.ts - Added WHITE_LABEL_CONFIG
• src/hooks/useWhiteLabelTranslations.ts - Custom translation hook
• src/lib/white-label-utils.ts - Utility functions

Layout Components

• src/components/layouts/landing-page.tsx
• src/components/layouts/dashboard.tsx
• src/components/layouts/settings.tsx
• src/components/layouts/plain.tsx

Email System

• src/lib/resend.ts - Email sender configuration
• src/lib/emails/send-*.ts - All email subject lines
• src/components/emails/*.tsx - Email templates

App Metadata & Integration

• src/app/layout.tsx - App metadata and OpenGraph
• src/lib/payment/stripe/index.ts - Stripe integration
• src/lib/auth.ts - Authentication configuration

Localization & Content

• locales/en.json - English translations
• locales/ja.json - Japanese translations
• src/markdown/*.mdx - Legal documents

Documentation

• WHITE_LABEL_CONFIG.md - Comprehensive configuration guide
• .env.sample - Environment variable examples
• README.md - Updated with white label information

🧪 Testing Performed

✅ Local Development Testing

• Ran yarn dev and verified application loads correctly
• Confirmed all layout components display configured values
• Tested email configuration integration
• Verified no i18n template variable errors in browser console

✅ Code Quality

• Ran yarn lint --fix successfully
• All lint-staged hooks passed during commit
• No TypeScript errors or warnings

✅ Browser Verification

• Confirmed app name displays correctly in header/footer
• Verified tagline shows configured value
• Tested support email links use configured addresses
• No raw localization keys visible in UI

🚀 Usage

Environment Variables

NEXT_PUBLIC_APP_NAME="YourApp"
NEXT_PUBLIC_DOMAIN="yourapp.com"
NEXT_PUBLIC_TAGLINE="Your Custom Tagline"
NEXT_PUBLIC_SUPPORT_EMAIL="support@yourapp.com"
NEXT_PUBLIC_INFO_EMAIL="info@yourapp.com"
NEXT_PUBLIC_MARKETING_EMAIL="hello@yourapp.com"
NEXT_PUBLIC_MARKETING_NAME="Your Team"
NEXT_PUBLIC_TWITTER_HANDLE="@yourapp"

Backward Compatibility

• All changes maintain backward compatibility
• Default values preserve existing "AppAgent" branding
• No breaking changes to existing functionality

🔍 Key Features

1. Environment Variable Driven: Easy configuration through .env files
2. Runtime Replacement: Dynamic branding without build-time changes
3. Comprehensive Coverage: Updates app metadata, emails, legal docs, and UI
4. i18n Compatible: Works seamlessly with Next.js internationalization
5. Maintainable: Centralized configuration with clear documentation

📋 Migration Guide

For existing deployments wanting to customize branding:

1. Copy environment variables from .env.sample
2. Set your custom values in production environment
3. Restart the application
4. All branding will automatically update

🔗 Related

• Link to Devin run: https://app.devin.ai/sessions/490045dd697546b8a3fa0203badc8b17
• Requested by: Shu (ngo38114@gmail.com)

✨ Benefits

• White Label Ready: Complete branding customization
• Easy Deployment: Single configuration file approach
• Professional: Maintains code quality and patterns
• Scalable: Supports multiple branded deployments
• Future-Proof: Extensible configuration system

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
app-agent	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 22, 2025 5:46pm