Introducción

El otro día, me topé con una plantilla de chatbot de IA para Next.js en Vercel. Para mi sorpresa, solo estaba disponible en inglés.

Así que la internacionalicé. En 5 minutos. Aquí te cuento cómo:

Compruébalo aquí.

Consulta el código aquí.

¿Por qué internacionalizar?

A menudo, los desarrolladores están tan centrados en crear el producto que se olvidan de los usuarios. En aplicaciones como los chatbots de IA, que son inherentemente multilingües y están diseñadas para que cualquiera pueda usarlas, ¿de qué sirve un chatbot que solo admite inglés?

La mayoría de la gente en el mundo ni siquiera habla inglés. De hecho, solo alrededor del 20% lo hace. Si estás trabajando en una startup y tu producto solo está disponible en inglés, ¿no te estás perdiendo más del 80% de los clientes potenciales?

Resulta que hay una razón por la que la mayoría de los productos solo están disponibles en inglés. Y es que la internacionalización es difícil.

Las bibliotecas existentes, como next-intl o next-i18next, son engorrosas de configurar y usar. Y no solo eso: ni siquiera traducen. Aún tienes que contratar traductores, gestionar diccionarios con cientos de claves y lidiar con todos los demás quebraderos de cabeza de la internacionalización. Incluso los cambios menores en el texto pueden tardar horas, o incluso días, en traducirse.

Hasta ahora.

He estado desarrollando una nueva biblioteca llamada gt-next que facilita internacionalizar tu aplicación en cuestión de minutos. Es una solución integral para todas tus necesidades de internacionalización, incluidas las traducciones, el enrutamiento y más.

Usé gt-next para internacionalizar el chatbot de IA de Vercel en 5 minutos.

Instalación

Comencé haciendo un fork y clonando el repositorio:

git clone https://github.com/vercel/ai-chatbot.git

Después, instalé las dependencias:

npm install

Si también te encuentras con conflictos de dependencias, como me pasó a mí, prueba a usar esta rama.

git clone -b base https://github.com/General-Translation/ai-chatbot.git

A continuación, instalé los paquetes gt-next y gt.

npm install gt-next gt

Configuración

Luego, ejecuté la herramienta de configuración de la CLI y seleccioné "Sí" en todas las preguntas:

npx gt init

Después de esto, agregué algunos locales al plugin next.config.js:

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // francés, español, chino
})

Podría haber agregado más locales, pero solo quería probar el chatbot con unos cuantos idiomas diferentes. ¡Siéntete libre de agregar tantos locales como quieras!

Aquí tienes una lista de todos los que admite gt-next.

Cómo funciona

El núcleo de la biblioteca es el componente <T>.

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

Todo lo que esté envuelto en el componente <T> se puede traducir. La herramienta de configuración de la CLI usa un analizador de Babel personalizado para recorrer nuestra base de código y envolver automáticamente con <T> cualquier componente de React que encuentre.

El uso del componente <T> tiene varias ventajas frente a otras bibliotecas:

• Nunca tendrás que lidiar con diccionarios ni gestionar claves.
• Las traducciones siempre están actualizadas y se mantienen sincronizadas con el código.
• Las traducciones incluyen automáticamente toda la información contextual circundante, lo que permite obtener mejores traducciones.

Ejecutar el chatbot

Por supuesto, no podía olvidarme de incluir todas las variables de entorno.

cp .env.example .env.local

Tuve que crear una cuenta gratuita en el panel de control de General Translation para obtener una clave API. Solo hizo falta unos pocos clics.

Después de completar todas las variables de entorno necesarias, ejecuté el chatbot:

npm run dev

¡Eso es todo! Cambié el idioma de mi navegador a francés y la interfaz de usuario pasó a mostrarse en francés. Lo mismo con el español y el chino.

Sencillo, ¿verdad?

Para que cambiar de idioma fuera aún más fácil, agregué un selector de idioma en el encabezado del chatbot.

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... código existente ... */}
    <LocaleSelector />
    {/* ... código existente ... */}
  );
}

Funcionó sin configuración adicional.

Limpieza

Aunque la herramienta de configuración de la CLI hizo un buen trabajo al traducir todos los elementos de React, había algunas cadenas molestas que estaban codificadas de forma fija.

Por ejemplo, el archivo model-selector.tsx tenía algunas descripciones de modelos de chat codificadas de forma fija:

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

Dejé esto más limpio importando el hook useGT desde gt-next/client y usándolo para traducir las cadenas:

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

¡Eso es todo! Todo el texto del chatbot ya estaba internacionalizado y disponible en cualquier idioma.

Despliegue en producción

Desplegar en producción fue aún más fácil. Reemplacé mi variable de entorno GT_API_KEY por una clave API de producción y ejecuté el comando translate:

npx gt translate --locales es fr zh

Por último, desplegué el chatbot en Vercel.

Conclusión

La experiencia de internacionalizar el chatbot fue facilísima. No tuve que lidiar con archivos de configuración, diccionarios ni configuraciones de enrutamiento complejas.

En cuestión de minutos, tenía un chatbot de IA totalmente funcional e internacionalizado, disponible en español, francés y chino.

Si te interesa el código, puedes encontrarlo aquí.

Si te interesa usar General Translation, consulta el sitio web, el repositorio de GitHub o la documentación.