Introducción

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

Así que la internacionalicé. En 5 minutos. Así es como lo hice:

Échale un vistazo aquí.

Consulta el código aquí.

¿Por qué internacionalizar?

Muchas veces, los desarrolladores están tan centrados en crear el producto que se olvidan de los usuarios. En aplicaciones como los chatbots de IA, que por naturaleza son multilingües y están diseñados para que cualquiera los use, ¿de qué sirve un chatbot que solo está disponible en 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 estás dejando fuera a 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: la internacionalización es difícil.

Las bibliotecas existentes, como next-intl o next-i18next, son un fastidio 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 todas las demás complicaciones de la internacionalización. Incluso los cambios más pequeños en el texto pueden tardar horas, o hasta días, en traducirse.

Hasta ahora.

He estado trabajando en 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

Empecé por hacer un fork y clonar el repositorio:

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

Luego, instalé las dependencias:

npm install

Si tú 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, añadí algunas configuraciones regionales al plugin next.config.js:

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

Podría haber añadido más configuraciones regionales, pero solo quería probar el chatbot con algunos idiomas distintos. ¡Añade tantas configuraciones regionales como quieras!

Aquí tienes una lista de todas las 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>
  )
}

Cualquier contenido 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 envuelve automáticamente en <T> cualquier componente de React que encuentre.

Usar el 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 sincronizadas con el código.
• Las traducciones incluyen automáticamente toda la información contextual, lo que permite obtener mejores traducciones.

Ejecutar el chatbot

Por supuesto, no me iba a olvidar de incluir todas las variables de entorno.

cp .env.example .env.local

Tuve que crear una cuenta gratuita en el panel de General Translation para obtener una clave de API. Solo me llevó unos clics.

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

npm run dev

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

Sencillo, ¿verdad?

Para que cambiar de idioma fuera aún más fácil, añadí un selector de idioma al 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 problemáticas escritas directamente en el código.

Por ejemplo, el archivo model-selector.tsx tenía algunas descripciones de modelos de chat escritas directamente en el código:

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

Arreglé esto importando el hook useGT de 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'),
},

¡Y ya está! 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. Cambié mi variable de entorno GT_API_KEY por una clave de 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 tocar 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, echa un vistazo al sitio web, al repositorio de GitHub o a la documentación.