Skip to main content

​
Overview

OmniSearches provides comprehensive internationalization (i18n) support, allowing users to interact with the application in their preferred language. The interface automatically adapts to display translated text while maintaining full search functionality across all supported languages.
Currently supported languages: English, Simplified Chinese (简体中文), and Traditional Chinese (繁體中文)

​
Supported Languages

English

Full UI and search support

简体中文

Simplified Chinese

繁體中文

Traditional Chinese

​
How It Works

OmniSearches uses i18next and react-i18next for internationalization:
  1. Language Detection: Automatically detects browser language on first visit
  2. Persistent Preference: Stores language choice in localStorage
  3. Dynamic Translation: All UI elements update instantly when language changes
  4. Search Integration: Can request search results in specific languages

​
Changing Language

​
Via Web Interface

  1. Look for the globe icon (🌐) in the navigation bar
  2. Click to open the language selector dropdown
  3. Select your preferred language from the list
  4. The interface updates immediately
Your language preference is saved automatically and will persist across sessions.

​
Programmatically

Using the Language Context
import { useLanguage } from '@/contexts/LanguageContext';

function MyComponent() {
  const { currentLanguage, changeLanguage, languages } = useLanguage();

  return (
    <div>
      <p>Current: {currentLanguage}</p>
      <button onClick={() => changeLanguage('zh-CN')}>
        Switch to Simplified Chinese
      </button>
    </div>
  );
}

​
Available Language Codes

LanguageCodeLabel
EnglishenEnglish
Simplified Chinesezh-CN简体中文
Traditional Chinesezh-HK繁體中文

​
Translation Coverage

All major UI components are fully translated:
  • Search placeholder text
  • Search mode labels
  • Search button text
  • Source attribution labels
  • Related questions headers
  • Image gallery captions
  • Error messages
  • Success notifications
  • Help text and tooltips
  • Copyright notices
  • Attribution text
  • External links

​
Language-Specific Search Results

You can request search results in a specific language using the API:

​
Via API

Request in Specific Language
const response = await fetch('/api/search', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: 'Your search query',
    mode: 'default',
    language: 'English' // or 'Chinese', 'Spanish', etc.
  })
});

​
Reasoning Mode

The reasoning endpoint also supports language preferences:
Reasoning in Chinese
curl "https://api.omnisearches.com/api/reasoning?q=你的问题&language=Chinese"
While the UI is limited to English, Simplified Chinese, and Traditional Chinese, the AI can generate responses in any language you specify in the language parameter.

​
Implementation Details

​
Language Context

OmniSearches uses React Context to manage language state globally:
client/src/contexts/LanguageContext.tsx
const languages = [
  { code: 'en', label: 'English' },
  { code: 'zh-CN', label: '简体中文' },
  { code: 'zh-HK', label: '繁體中文' }
];

export function LanguageProvider({ children }: { children: React.ReactNode }) {
  const { i18n } = useTranslation();
  const [currentLanguage, setCurrentLanguage] = useState(i18n.language);

  const changeLanguage = (lang: string) => {
    i18n.changeLanguage(lang);
    setCurrentLanguage(lang);
    localStorage.setItem('language', lang);
  };

  return (
    <LanguageContext.Provider value={{ currentLanguage, changeLanguage, languages }}>
      {children}
    </LanguageContext.Provider>
  );
}

​
Language Selector Component

The language selector provides an accessible dropdown interface:
client/src/components/LanguageSelector.tsx
import { useLanguage } from '@/contexts/LanguageContext';
import { Globe, ChevronDown } from 'lucide-react';

export function LanguageSelector() {
  const { currentLanguage, changeLanguage, languages } = useLanguage();
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="relative">
      <button onClick={() => setIsOpen(!isOpen)}>
        <Globe className="w-4 h-4" />
        <span>{languages.find(lang => lang.code === currentLanguage)?.label}</span>
        <ChevronDown className="w-3 h-3" />
      </button>

      {isOpen && (
        <div className="dropdown">
          {languages.map((lang) => (
            <button
              key={lang.code}
              onClick={() => {
                changeLanguage(lang.code);
                setIsOpen(false);
              }}
            >
              {lang.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

​
Translation Files

Translations are organized by language code in the i18n directory: 
client/src/i18n/
├── config.ts          # i18next configuration
├── locales/
│   ├── en.json       # English translations
│   ├── zh-CN.json    # Simplified Chinese
│   └── zh-HK.json    # Traditional Chinese

​
Using Translations

In Components
import { useTranslation } from 'react-i18next';

function SearchButton() {
  const { t } = useTranslation();
  
  return (
    <button>{t('buttons.search')}</button>
  );
}

​
Adding New Languages

To add support for a new language:
1

Create Translation File

Add a new JSON file in client/src/i18n/locales/:
locales/es.json
{
  "slogan": {
    "home": "Tu motor de búsqueda con IA"
  },
  "buttons": {
    "search": "Buscar"
  }
  // ... more translations
}
2

Update Language List

Add the language to the context:
LanguageContext.tsx
const languages = [
  { code: 'en', label: 'English' },
  { code: 'zh-CN', label: '简体中文' },
  { code: 'zh-HK', label: '繁體中文' },
  { code: 'es', label: 'Español' } // New language
];
3

Configure i18next

Import the new translations in your i18n config:
config.ts
import es from './locales/es.json';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: en },
    'zh-CN': { translation: zhCN },
    'zh-HK': { translation: zhHK },
    es: { translation: es }
  }
});
4

Test Translation

Switch to the new language and verify all UI elements display correctly.

​
Browser Language Detection

OmniSearches automatically detects the user’s browser language on first visit:
Automatic Detection
i18n.use(LanguageDetector).init({
  detection: {
    order: ['localStorage', 'navigator'],
    caches: ['localStorage']
  }
});
Detection order:
  1. localStorage: Checks for previously saved language preference
  2. Navigator: Falls back to browser language setting
  3. Default: Uses English if no match found

​
Accessibility

The language selector is fully accessible:
  • Keyboard Navigation: Tab to focus, Enter to select
  • ARIA Labels: Proper labeling for screen readers
  • Visual Indicators: Clear active state and hover effects
  • Focus Management: Dropdown closes on outside click

​
Best Practices

Default to User Preference

Always respect the user’s saved language choice

Provide Visual Feedback

Show clear indication of current language

Keep Translations Consistent

Use the same terms across all UI elements

Test All Languages

Verify translations in context, not just text

​
Limitations

  • Right-to-left (RTL) languages are not currently supported
  • Some external content (sources, citations) may not be translated
  • API error messages are in English only

Search Modes

All search modes support multilingual queries

API Reference

Specify language in API requests

Build docs developers (and LLMs) love

Get started for freeTalk to us