Widget Internationalization for ChatGPT Apps

ChatGPT serves 800 million weekly users across every country and language on Earth. Your widget's ability to speak their language—literally and culturally—determines whether it delights users or confuses them. Internationalization (i18n) transforms a single-language widget into a globally accessible experience that respects linguistic diversity, cultural conventions, and regional preferences.

This guide demonstrates production-ready internationalization for ChatGPT widgets using react-i18next, the React Intl API, and OpenAI Apps SDK best practices. You'll learn translation management, right-to-left (RTL) layout support, locale-aware formatting for dates and numbers, dynamic language switching, and performance optimization techniques that keep your i18n-enabled widgets fast and responsive.

Whether you're building a booking widget for French-speaking Canadians, a payment form for Arabic-speaking users, or a scheduling tool for Japanese businesses, proper internationalization ensures your ChatGPT app works beautifully for everyone, everywhere.

Translation Management with react-i18next

Translation management is the foundation of internationalization. react-i18next provides a robust framework for organizing translations, handling pluralization, interpolating dynamic values, and managing translation namespaces across complex widgets.

Here's a production-ready i18n configuration that integrates seamlessly with ChatGPT widgets:

// i18n-config.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

interface I18nConfig {
  supportedLanguages: string[];
  fallbackLanguage: string;
  defaultNamespace: string;
  debug: boolean;
}

const config: I18nConfig = {
  supportedLanguages: [
    'en', 'es', 'fr', 'de', 'it', 'pt', 'ja', 'zh', 'ar', 'he', 'ru'
  ],
  fallbackLanguage: 'en',
  defaultNamespace: 'widget',
  debug: process.env.NODE_ENV === 'development'
};

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: config.fallbackLanguage,
    supportedLngs: config.supportedLanguages,
    defaultNS: config.defaultNamespace,
    debug: config.debug,

    // Language detection
    detection: {
      order: ['querystring', 'cookie', 'localStorage', 'navigator'],
      caches: ['localStorage', 'cookie'],
      lookupQuerystring: 'lng',
      lookupCookie: 'i18next',
      lookupLocalStorage: 'i18nextLng'
    },

    // Backend configuration
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      addPath: '/locales/add/{{lng}}/{{ns}}',
      allowMultiLoading: false,
      crossDomain: false,
      withCredentials: false,
      requestOptions: {
        mode: 'cors',
        credentials: 'same-origin',
        cache: 'default'
      }
    },

    // React configuration
    react: {
      useSuspense: true,
      bindI18n: 'languageChanged loaded',
      bindI18nStore: 'added removed',
      transEmptyNodeValue: '',
      transSupportBasicHtmlNodes: true,
      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p']
    },

    // Interpolation
    interpolation: {
      escapeValue: false,
      formatSeparator: ',',
      format: (value, format, lng) => {
        if (format === 'uppercase') return value.toUpperCase();
        if (format === 'lowercase') return value.toLowerCase();
        if (value instanceof Date) {
          return new Intl.DateTimeFormat(lng).format(value);
        }
        return value;
      }
    },

    // Pluralization
    pluralSeparator: '_',
    contextSeparator: '_',

    // Resource loading
    partialBundledLanguages: true,
    load: 'languageOnly',
    preload: ['en'],
    lowerCaseLng: true,
    cleanCode: true,

    // Missing keys
    saveMissing: config.debug,
    missingKeyHandler: (lngs, ns, key, fallbackValue) => {
      if (config.debug) {
        console.warn(`Missing translation: ${key} for ${lngs.join(', ')}`);
      }
    }
  });

// Type-safe translation keys
export type TranslationKeys =
  | 'common.submit'
  | 'common.cancel'
  | 'common.loading'
  | 'widget.title'
  | 'widget.description'
  | 'error.network'
  | 'error.validation';

export default i18n;

Translation files should be organized by namespace and language. Here's an example structure for English:

// public/locales/en/widget.json
{
  "title": "ChatGPT Widget",
  "description": "Powered by OpenAI",
  "actions": {
    "submit": "Submit",
    "cancel": "Cancel",
    "retry": "Try Again",
    "close": "Close"
  },
  "form": {
    "name": "Name",
    "email": "Email Address",
    "message": "Message",
    "required": "This field is required",
    "invalid_email": "Please enter a valid email address"
  },
  "status": {
    "loading": "Loading...",
    "success": "Success!",
    "error": "Something went wrong"
  },
  "pluralization": {
    "items_one": "{{count}} item",
    "items_other": "{{count}} items",
    "days_zero": "Today",
    "days_one": "{{count}} day",
    "days_other": "{{count}} days"
  },
  "dates": {
    "today": "Today",
    "yesterday": "Yesterday",
    "tomorrow": "Tomorrow",
    "last_week": "Last week",
    "next_week": "Next week"
  }
}

For Spanish, create a parallel structure with culturally appropriate translations:

// public/locales/es/widget.json
{
  "title": "Widget de ChatGPT",
  "description": "Impulsado por OpenAI",
  "actions": {
    "submit": "Enviar",
    "cancel": "Cancelar",
    "retry": "Intentar de nuevo",
    "close": "Cerrar"
  },
  "form": {
    "name": "Nombre",
    "email": "Correo electrónico",
    "message": "Mensaje",
    "required": "Este campo es obligatorio",
    "invalid_email": "Por favor ingrese un correo válido"
  },
  "status": {
    "loading": "Cargando...",
    "success": "¡Éxito!",
    "error": "Algo salió mal"
  },
  "pluralization": {
    "items_one": "{{count}} artículo",
    "items_other": "{{count}} artículos",
    "days_zero": "Hoy",
    "days_one": "{{count}} día",
    "days_other": "{{count}} días"
  },
  "dates": {
    "today": "Hoy",
    "yesterday": "Ayer",
    "tomorrow": "Mañana",
    "last_week": "La semana pasada",
    "next_week": "La próxima semana"
  }
}

Namespace organization prevents translation bloat. Separate common UI strings from feature-specific content, and load only what each widget needs.

RTL Support for Right-to-Left Languages

Right-to-left languages like Arabic, Hebrew, and Persian require complete layout mirroring. CSS logical properties, directional attributes, and BiDi text handling ensure your widgets look natural for RTL users.

Here's a production-ready RTL layout system:

// RTLProvider.tsx
import React, { createContext, useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

interface RTLContextType {
  isRTL: boolean;
  direction: 'ltr' | 'rtl';
  toggleDirection: () => void;
  setDirection: (dir: 'ltr' | 'rtl') => void;
}

const RTLContext = createContext<RTLContextType | undefined>(undefined);

const RTL_LANGUAGES = ['ar', 'he', 'fa', 'ur'];

export const RTLProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { i18n } = useTranslation();
  const [direction, setDirectionState] = useState<'ltr' | 'rtl'>('ltr');

  useEffect(() => {
    const currentLanguage = i18n.language;
    const isRTL = RTL_LANGUAGES.includes(currentLanguage);
    const newDirection = isRTL ? 'rtl' : 'ltr';

    setDirectionState(newDirection);

    // Update document direction
    document.documentElement.dir = newDirection;
    document.documentElement.lang = currentLanguage;

    // Update CSS custom property
    document.documentElement.style.setProperty('--text-direction', newDirection);

  }, [i18n.language]);

  const toggleDirection = () => {
    setDirectionState(prev => prev === 'ltr' ? 'rtl' : 'ltr');
  };

  const setDirection = (dir: 'ltr' | 'rtl') => {
    setDirectionState(dir);
    document.documentElement.dir = dir;
  };

  const isRTL = direction === 'rtl';

  return (
    <RTLContext.Provider value={{ isRTL, direction, toggleDirection, setDirection }}>
      {children}
    </RTLContext.Provider>
  );
};

export const useRTL = (): RTLContextType => {
  const context = useContext(RTLContext);
  if (!context) {
    throw new Error('useRTL must be used within RTLProvider');
  }
  return context;
};

// RTL-aware component
export const RTLBox: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className = '' }) => {
  const { direction } = useRTL();

  return (
    <div
      className={`rtl-box ${className}`}
      dir={direction}
      style={{
        '--direction': direction
      } as React.CSSProperties}
    >
      {children}
    </div>
  );
};

CSS logical properties automatically adapt to text direction without JavaScript intervention:

/* rtl-styles.css */
:root {
  --text-direction: ltr;
}

/* Use logical properties instead of left/right */
.widget-container {
  /* ❌ Don't use: margin-left: 20px; */
  /* ✅ Use: */
  margin-inline-start: 20px;

  /* ❌ Don't use: padding-right: 16px; */
  /* ✅ Use: */
  padding-inline-end: 16px;

  /* ❌ Don't use: border-left: 2px solid #d4af37; */
  /* ✅ Use: */
  border-inline-start: 2px solid #d4af37;
}

/* Flexbox with logical properties */
.widget-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* Automatically flips in RTL */
  align-items: center;
  gap: 12px;
}

/* Text alignment */
.widget-text {
  text-align: start; /* Not 'left' */
  direction: inherit;
}

/* RTL-specific overrides when needed */
[dir="rtl"] .widget-icon {
  transform: scaleX(-1); /* Mirror directional icons */
}

[dir="rtl"] .widget-chevron {
  rotate: 180deg; /* Flip arrow directions */
}

/* BiDi text handling */
.widget-content {
  unicode-bidi: plaintext; /* Respects text directionality */
}

.widget-input {
  unicode-bidi: embed;
  direction: inherit;
}

/* Floating elements */
.widget-float-start {
  float: inline-start; /* Not 'left' */
}

.widget-float-end {
  float: inline-end; /* Not 'right' */
}

/* Position logical properties */
.widget-absolute {
  position: absolute;
  inset-inline-start: 0; /* Not 'left: 0' */
  inset-inline-end: auto;
}

/* Scroll behavior */
.widget-scroll {
  overflow-x: auto;
  scroll-behavior: smooth;
  direction: inherit;
}

/* Logical border radius (advanced) */
.widget-card {
  border-start-start-radius: 8px; /* Top-left in LTR, top-right in RTL */
  border-start-end-radius: 8px;
  border-end-start-radius: 8px;
  border-end-end-radius: 8px;
}

BiDi text requires careful handling when mixing LTR and RTL content:

// BiDiText.tsx
export const BiDiText: React.FC<{
  children: string;
  className?: string;
}> = ({ children, className }) => {
  // Detect text direction
  const detectDirection = (text: string): 'ltr' | 'rtl' | 'auto' => {
    const rtlChars = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
    return rtlChars.test(text) ? 'rtl' : 'ltr';
  };

  const direction = detectDirection(children);

  return (
    <span
      className={className}
      dir={direction}
      style={{ unicodeBidi: 'embed' }}
    >
      {children}
    </span>
  );
};

RTL support ensures Arabic, Hebrew, and Persian users see perfectly mirrored layouts without breaking visual hierarchy or interaction patterns.

Date and Number Formatting with Intl API

The JavaScript Intl API provides locale-aware formatting for dates, numbers, currencies, and relative times. This eliminates hardcoded formats and respects regional conventions automatically.

Here's a production-ready formatting utility:

// formatters.ts
import { useTranslation } from 'react-i18next';

export class LocaleFormatter {
  constructor(private locale: string) {}

  // Date formatting
  formatDate(date: Date, options?: Intl.DateTimeFormatOptions): string {
    const defaultOptions: Intl.DateTimeFormatOptions = {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    };

    return new Intl.DateTimeFormat(
      this.locale,
      { ...defaultOptions, ...options }
    ).format(date);
  }

  formatDateTime(date: Date): string {
    return new Intl.DateTimeFormat(this.locale, {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    }).format(date);
  }

  formatTime(date: Date): string {
    return new Intl.DateTimeFormat(this.locale, {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    }).format(date);
  }

  formatRelativeTime(date: Date): string {
    const now = new Date();
    const diffMs = date.getTime() - now.getTime();
    const diffSeconds = Math.round(diffMs / 1000);
    const diffMinutes = Math.round(diffSeconds / 60);
    const diffHours = Math.round(diffMinutes / 60);
    const diffDays = Math.round(diffHours / 24);

    const rtf = new Intl.RelativeTimeFormat(this.locale, { numeric: 'auto' });

    if (Math.abs(diffSeconds) < 60) {
      return rtf.format(diffSeconds, 'second');
    } else if (Math.abs(diffMinutes) < 60) {
      return rtf.format(diffMinutes, 'minute');
    } else if (Math.abs(diffHours) < 24) {
      return rtf.format(diffHours, 'hour');
    } else {
      return rtf.format(diffDays, 'day');
    }
  }

  // Number formatting
  formatNumber(value: number, options?: Intl.NumberFormatOptions): string {
    return new Intl.NumberFormat(this.locale, options).format(value);
  }

  formatCurrency(value: number, currency: string): string {
    return new Intl.NumberFormat(this.locale, {
      style: 'currency',
      currency: currency
    }).format(value);
  }

  formatPercent(value: number, decimals: number = 0): string {
    return new Intl.NumberFormat(this.locale, {
      style: 'percent',
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals
    }).format(value);
  }

  formatCompact(value: number): string {
    return new Intl.NumberFormat(this.locale, {
      notation: 'compact',
      compactDisplay: 'short'
    }).format(value);
  }

  // List formatting
  formatList(items: string[], type: 'conjunction' | 'disjunction' = 'conjunction'): string {
    return new Intl.ListFormat(this.locale, {
      style: 'long',
      type: type
    }).format(items);
  }
}

// React hook
export const useFormatter = (): LocaleFormatter => {
  const { i18n } = useTranslation();
  return new LocaleFormatter(i18n.language);
};

// Example usage component
export const FormattedDate: React.FC<{ date: Date }> = ({ date }) => {
  const formatter = useFormatter();
  return <time dateTime={date.toISOString()}>{formatter.formatDate(date)}</time>;
};

export const FormattedCurrency: React.FC<{
  amount: number;
  currency: string;
}> = ({ amount, currency }) => {
  const formatter = useFormatter();
  return <span>{formatter.formatCurrency(amount, currency)}</span>;
};

Currency formatting requires special attention because symbol position varies by locale:

• English (US): $1,234.56
• French (France): 1 234,56 €
• German (Germany): 1.234,56 €
• Japanese: ¥1,234

The Intl API handles all these variations automatically when you provide the correct locale and currency code.

Dynamic Language Switching

Dynamic language switching allows users to change their preferred language without page reloads. The widget detects the user's language preference from ChatGPT's locale metadata, falls back to browser settings, and provides an explicit switcher when needed.

Here's a production-ready language switcher:

// LanguageSwitcher.tsx
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useRTL } from './RTLProvider';

interface Language {
  code: string;
  name: string;
  nativeName: string;
  flag: string;
}

const LANGUAGES: Language[] = [
  { code: 'en', name: 'English', nativeName: 'English', flag: '🇺🇸' },
  { code: 'es', name: 'Spanish', nativeName: 'Español', flag: '🇪🇸' },
  { code: 'fr', name: 'French', nativeName: 'Français', flag: '🇫🇷' },
  { code: 'de', name: 'German', nativeName: 'Deutsch', flag: '🇩🇪' },
  { code: 'it', name: 'Italian', nativeName: 'Italiano', flag: '🇮🇹' },
  { code: 'pt', name: 'Portuguese', nativeName: 'Português', flag: '🇧🇷' },
  { code: 'ja', name: 'Japanese', nativeName: '日本語', flag: '🇯🇵' },
  { code: 'zh', name: 'Chinese', nativeName: '中文', flag: '🇨🇳' },
  { code: 'ar', name: 'Arabic', nativeName: 'العربية', flag: '🇸🇦' },
  { code: 'he', name: 'Hebrew', nativeName: 'עברית', flag: '🇮🇱' },
  { code: 'ru', name: 'Russian', nativeName: 'Русский', flag: '🇷🇺' }
];

export const LanguageSwitcher: React.FC = () => {
  const { i18n } = useTranslation();
  const { setDirection } = useRTL();
  const [isOpen, setIsOpen] = useState(false);

  const currentLanguage = LANGUAGES.find(lang => lang.code === i18n.language) || LANGUAGES[0];

  const handleLanguageChange = async (languageCode: string) => {
    try {
      await i18n.changeLanguage(languageCode);

      // Update RTL direction
      const isRTL = ['ar', 'he', 'fa', 'ur'].includes(languageCode);
      setDirection(isRTL ? 'rtl' : 'ltr');

      // Store preference
      localStorage.setItem('i18nextLng', languageCode);

      // Update OpenAI widget state
      if (window.openai?.setWidgetState) {
        await window.openai.setWidgetState({ locale: languageCode });
      }

      setIsOpen(false);
    } catch (error) {
      console.error('Language change failed:', error);
    }
  };

  return (
    <div className="language-switcher">
      <button
        className="language-switcher__button"
        onClick={() => setIsOpen(!isOpen)}
        aria-label="Change language"
        aria-expanded={isOpen}
      >
        <span className="language-switcher__flag">{currentLanguage.flag}</span>
        <span className="language-switcher__name">{currentLanguage.nativeName}</span>
        <svg
          className="language-switcher__chevron"
          width="12"
          height="12"
          viewBox="0 0 12 12"
        >
          <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="2" fill="none" />
        </svg>
      </button>

      {isOpen && (
        <div className="language-switcher__menu">
          {LANGUAGES.map(language => (
            <button
              key={language.code}
              className={`language-switcher__option ${
                language.code === i18n.language ? 'language-switcher__option--active' : ''
              }`}
              onClick={() => handleLanguageChange(language.code)}
            >
              <span className="language-switcher__option-flag">{language.flag}</span>
              <span className="language-switcher__option-name">{language.nativeName}</span>
              {language.code === i18n.language && (
                <svg
                  className="language-switcher__check"
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M13 4L6 11L3 8"
                    stroke="#d4af37"
                    strokeWidth="2"
                    fill="none"
                  />
                </svg>
              )}
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

Language detection should respect ChatGPT's locale context when available:

// language-detection.ts
export const detectChatGPTLocale = (): string | null => {
  // Check OpenAI context
  if (window.openai?.getWidgetState) {
    const state = window.openai.getWidgetState();
    if (state?.locale) {
      return state.locale;
    }
  }

  // Fallback to browser detection
  return navigator.language || navigator.languages?.[0] || null;
};

export const initializeLanguage = async (i18n: any) => {
  const chatGPTLocale = detectChatGPTLocale();

  if (chatGPTLocale) {
    const language = chatGPTLocale.split('-')[0]; // 'en-US' -> 'en'
    await i18n.changeLanguage(language);
  }
};

Fallback chains prevent missing translations from breaking the user experience. Always define a complete fallback language (typically English) and load it synchronously.

Performance Optimization for i18n

Translation bundles can balloon to hundreds of kilobytes when supporting 10+ languages. Lazy loading, code splitting, and CDN caching keep your internationalized widgets performant.

Here's a lazy translation loader:

// lazy-translation-loader.ts
import i18n from 'i18next';

interface TranslationModule {
  [key: string]: any;
}

class LazyTranslationLoader {
  private loadedLanguages = new Set<string>();
  private loadingPromises = new Map<string, Promise<void>>();

  async loadLanguage(language: string, namespace: string = 'widget'): Promise<void> {
    const key = `${language}-${namespace}`;

    // Already loaded
    if (this.loadedLanguages.has(key)) {
      return Promise.resolve();
    }

    // Currently loading
    if (this.loadingPromises.has(key)) {
      return this.loadingPromises.get(key)!;
    }

    // Start loading
    const loadPromise = this.fetchTranslations(language, namespace);
    this.loadingPromises.set(key, loadPromise);

    try {
      await loadPromise;
      this.loadedLanguages.add(key);
    } finally {
      this.loadingPromises.delete(key);
    }
  }

  private async fetchTranslations(language: string, namespace: string): Promise<void> {
    try {
      const module: TranslationModule = await import(
        /* webpackChunkName: "locale-[request]" */
        `../locales/${language}/${namespace}.json`
      );

      i18n.addResourceBundle(language, namespace, module.default || module, true, true);
    } catch (error) {
      console.error(`Failed to load ${language}/${namespace}:`, error);

      // Load fallback if not English
      if (language !== 'en') {
        await this.fetchTranslations('en', namespace);
      }
    }
  }

  preloadLanguages(languages: string[], namespace: string = 'widget'): Promise<void[]> {
    return Promise.all(
      languages.map(lang => this.loadLanguage(lang, namespace))
    );
  }
}

export const translationLoader = new LazyTranslationLoader();

// React hook for lazy loading
export const useLazyTranslation = (namespace: string) => {
  const { i18n } = useTranslation();
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    translationLoader
      .loadLanguage(i18n.language, namespace)
      .then(() => setIsLoaded(true));
  }, [i18n.language, namespace]);

  return { isLoaded };
};

Optimize bundle sizes by splitting translations into feature-specific namespaces and loading only what each widget uses. A booking widget doesn't need payment translations; a checkout widget doesn't need calendar strings.

Conclusion

Internationalization transforms your ChatGPT widget from a single-language tool into a globally accessible experience. react-i18next provides robust translation management with pluralization and interpolation. RTL support ensures Arabic and Hebrew users see perfectly mirrored layouts through CSS logical properties. The Intl API handles locale-aware date, number, and currency formatting without hardcoded formats. Dynamic language switching respects user preferences while maintaining performance through lazy loading and code splitting.

Production-ready i18n requires planning: organize translations into namespaces, implement fallback chains, test RTL layouts thoroughly, and optimize bundle sizes for fast widget loading. The result is a ChatGPT app that feels native to users everywhere, respecting linguistic diversity and cultural conventions across 800 million weekly ChatGPT users.

Ready to build globally accessible ChatGPT apps? MakeAIHQ provides no-code tools, i18n templates, and automated RTL detection that let you internationalize widgets without wrestling with configuration. From zero to multilingual ChatGPT App Store presence in 48 hours—no coding required. Start your free trial today.

---

Internal Resources

• Complete Guide to Building ChatGPT Applications - Comprehensive pillar guide covering all aspects of ChatGPT app development
• App Localization and i18n for ChatGPT - Broader localization strategies beyond widgets
• React Widget Components for ChatGPT - Building React components optimized for ChatGPT
• Widget Bundle Size Optimization for ChatGPT - Performance techniques for production widgets

External References

• react-i18next Official Documentation - Complete reference for React internationalization
• Intl API Specification (MDN) - JavaScript internationalization API
• RTL Layout Best Practices (W3C) - Guidelines for right-to-left text handling

---

Schema Markup:

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Internationalize Widgets for ChatGPT Apps",
  "description": "Internationalize ChatGPT widgets. i18n, localization, RTL support, date/number formatting with react-i18next production examples.",
  "step": [
    {
      "@type": "HowToStep",
      "name": "Configure react-i18next",
      "text": "Set up react-i18next with language detection, backend loading, and namespace organization for translation management."
    },
    {
      "@type": "HowToStep",
      "name": "Implement RTL Support",
      "text": "Use CSS logical properties and RTL provider to mirror layouts for Arabic, Hebrew, and Persian languages."
    },
    {
      "@type": "HowToStep",
      "name": "Format Dates and Numbers",
      "text": "Leverage Intl API for locale-aware formatting of dates, currencies, and numbers across all supported languages."
    },
    {
      "@type": "HowToStep",
      "name": "Add Language Switcher",
      "text": "Create dynamic language switcher that detects ChatGPT locale, respects user preferences, and updates widget state."
    },
    {
      "@type": "HowToStep",
      "name": "Optimize Performance",
      "text": "Implement lazy loading for translations, split bundles by namespace, and cache resources for fast widget loading."
    }
  ]
}