5 idiomas, 8,560 skills: cómo construimos un marketplace MCP multilingüe

Cuando lanzamos MarketNow hace 2 semanas, todo estaba en inglés. Hoy soportamos 5 idiomas: English, Español, Português, 中文, Français. Este artículo explica cómo lo hicimos sin react-i18next ni librerías pesadas.

El problema

MarketNow es un marketplace de 8,560 MCP skills. Nuestros usuarios son:

• 
  Desarrolladores en EE.UU. y Europa (inglés)


• 
  Agentes IA que consumen JSON (language-agnostic)


• 
  Comunidades dev en Latinoamérica (español/portugués)


• 
  Mercado AI en China (chino — el segundo más grande del mundo)


• 
  Comunidades en Francia, Quebec, África francófona

Un sitio solo en inglés pierde ~60% del tráfico potencial.

La solución: Context + CONTENT objects

1. LanguageContext

Creamos un context simple que persiste el idioma en localStorage:

const LanguageContext = createContext(null);



export function LanguageProvider({ children }) {

  const [lang, setLang] = useState(detectInitialLang);



  const t = useCallback((key, vars) => {

    const dict = TRANSLATIONS[lang] || TRANSLATIONS[DEFAULT_LANG];

    let str = dict[key] ?? TRANSLATIONS[DEFAULT_LANG][key] ?? key;

    // Interpolate {count} → params.count

    if (vars) {

      for (const [k, v] of Object.entries(vars)) {

        str = str.replace(new RegExp(`\{${k}\}`, 'g'), String(v));

      }

    }

    return str;

  }, [lang]);



  return (

    <LanguageContext.Provider value={{ lang, setLang, t }}>

      {children}

    </LanguageContext.Provider>

  );

}

2. Translation dictionary

Un solo archivo translations.js con ~400 keys × 5 idiomas:

export const TRANSLATIONS = {

  en: {

    'nav.marketplace': 'MARKETPLACE',

    'hero.title1': 'The trust layer for',

    'hero.title2': 'agent commerce.',

    'home.freeTitle': '⚡ {count} Free Skills — Install Now',

    // ... 400+ keys

  },

  es: { /* ... */ },

  pt: { /* ... */ },

  zh: { /* ... */ },

  fr: { /* ... */ },

};

3. CONTENT objects para páginas complejas

Las páginas con mucho contenido (Trust, Security, About) usan un patrón CONTENT:

const CONTENT = {

  en: {

    title: 'Trust Roadmap',

    points: [

      { title: 'Human-in-the-loop by default', claudeSaid: '...', whatWeDid: [...] },

      // ... 7 points

    ],

  },

  es: { /* ... */ },

  // ... 5 languages

};



export default function Trust() {

  const { lang } = useLang();

  const c = CONTENT[lang] || CONTENT.en;

  return <h1>{c.title}</h1>;

}

Lo que aprendimos

1. NO uses display:none para SEO content

Primero usamos <div class="sr-only"> con CSS para esconder contenido SEO. Resultado: Google lo indexaba, pero los usuarios con screen readers lo veían duplicado. Mezclaba idiomas.

Solución: <noscript> tag. Google lo indexa inmediatamente, los usuarios con JS ven React.

2. Las categorías técnicas se mantienen en inglés

"AI/ML", "DevOps", "Security" — son términos universales. Los tradujimos pero mantuvimos los originales como fallback.

3. El selector de idioma debe ser visible

Pusimos un dropdown con banderas (🇺🇸🇪🇸🇧🇷🇨🇳🇫🇷). Click → cambia todo al instante, sin reload.

Resultado

• 
  5 idiomas completos (no parciales)


• 
  400+ strings traducidos por idioma


• 
  23 páginas con contenido traducido


• 
  0 librerías externas (solo React Context)


• 
  Persistencia en localStorage


• 
  Detección automática del idioma del navegador

Links

• 
  


• Trust roadmap

¿Qué idioma deberíamos añadir next? Estamos considerando japonés (ja) y alemán (de).

MarketNow es la capa de confianza para el comercio de agentes. 8,560 MCP skills, Sentinel L2 security, x402 + USDC on Base. Maintained by AliceLabs LLC (Wyoming, USA).