Bolt

Bolt es una plataforma de desarrollo basada en navegador y potenciada por IA de StackBlitz. Esta guía explica cómo localizar una aplicación basada en React con Lingo.dev Compiler en Bolt.

Limitaciones conocidas

Bolt utiliza contenedores web para ejecutar aplicaciones web dentro del navegador. Esta es una tecnología potente, pero tiene algunos problemas de compatibilidad con Lingo.dev:

  • Solo puedes usar una clave API para autenticarte con Lingo.dev Engine, no el comando login de la CLI.
  • En Bolt, Lingo.dev Compiler solo es compatible con aplicaciones basadas en Vite. No puedes usar Next.js.
  • El componente <LocaleSwitcher /> no funciona dentro de la ventana de Vista previa integrada de Bolt.
  • Ollama no es compatible con Bolt ya que Ollama necesita ejecutarse localmente.

Paso 1. Obtener una clave API

Lingo.dev Compiler utiliza modelos de lenguaje de gran escala (LLMs) para localizar aplicaciones con IA. Para usar uno de estos modelos, necesitas una clave API de uno de los proveedores compatibles. Puedes usar Lingo.dev Engine o un proveedor de LLM personalizado.

Lingo.dev Engine

Lingo.dev Engine es nuestra plataforma alojada propia que proporciona selección dinámica de modelos, enrutamiento automático, memoria de traducción y soporte de glosario. El registro es gratuito y todos los usuarios obtienen 10.000 tokens al mes de uso gratuito.

Para obtener una clave API:

  1. Inicia sesión en Lingo.dev Engine.
  2. Navega a la página de Proyectos.
  3. Haz clic en Clave API > Copiar.

Proveedor de LLM personalizado

Lingo.dev Compiler también se integra con una variedad de proveedores externos, incluyendo:

Las instrucciones exactas para configurar una clave API dependen del proveedor.

Nota: Asegúrate de activar tu cuenta con el proveedor de LLM y aceptar sus Términos de servicio antes de usarlo en Compiler.

Paso 2. Instalar lingo.dev

El paquete lingo.dev contiene el compilador.

Para instalar el paquete:

  1. Crea o abre un proyecto en Bolt.

  2. Cambia a la pestaña Code.

  3. Haz clic en Terminal.

  4. Ejecuta el siguiente comando:

    npm install lingo.dev

Paso 3. Configurar Vite

Cuando se utiliza Vite, Lingo.dev Compiler debe inicializarse en el archivo de configuración del proyecto:

  • Si estás usando TypeScript, el archivo de configuración es vite.config.ts.
  • Si estás usando JavaScript, el archivo de configuración es vite.config.js.

Puedes configurar el comportamiento del compilador durante la inicialización. Esta configuración determina los idiomas entre los que se traducirá y el modelo o modelos que se utilizarán para la localización.

Para ver la lista completa de opciones disponibles, consulta Opciones del compilador.

Lingo.dev Engine

Si estás utilizando Lingo.dev Engine, establece models como "lingo.dev":

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    lingoDir: "lingo",
    sourceLocale: "en",
    targetLocales: ["es"],
    rsc: false,
    useDirective: false,
    debug: false,
    models: "lingo.dev",
  })(viteConfig),
);

Proveedor LLM personalizado

Si estás utilizando un proveedor LLM personalizado, establece models como un objeto que mapee los idiomas de origen y destino con los modelos que deberían localizarlos. Por ejemplo, esta configuración localiza todas las cadenas con "groq:mistral-saba-24b":

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    lingoDir: "lingo",
    sourceLocale: "en",
    targetLocales: ["es"],
    rsc: false,
    useDirective: false,
    debug: false,
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Paso 4. Establecer una variable de entorno

Para asegurar que Lingo.dev Compiler pueda acceder a las claves API de los modelos configurados, las claves API deben estar disponibles como variables de entorno.

Para configurar las variables de entorno en Bolt:

  1. Crea un archivo .env.

    1. Haz clic derecho en el panel de archivos.
    2. Selecciona Nuevo archivo.
    3. Introduce .env.

  2. Añade las variables de entorno relevantes al archivo:

    # Lingo.dev Engine
LINGODOTDEV_API_KEY="TU_CLAVE_API_AQUÍ"

# Google AI
GOOGLE_API_KEY="TU_CLAVE_API_AQUÍ"

# GROQ
GROQ_API_KEY="TU_CLAVE_API_AQUÍ"

# Mistral
MISTRAL_API_KEY="TU_CLAVE_API_AQUÍ"

# OpenRouter
OPENROUTER_API_KEY="TU_CLAVE_API_AQUÍ"

Nota: Bolt cifra automáticamente las variables de entorno. Para obtener más información, consulta Variables de entorno (developer.stackblitz.com).

Paso 4. Añadir proveedor

El paquete lingo.dev exporta un componente <LingoProviderWrapper />. Este componente es responsable de cargar las traducciones y hacerlas disponibles en toda la aplicación.

Para utilizar el componente, impórtalo en el archivo src/main.tsx y envuélvelo alrededor del componente <App />:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
      <App />
    </LingoProviderWrapper>
  </React.StrictMode>,
);

(Opcional) Paso 5. Añadir selector de idioma

El paquete lingo.dev exporta un componente <LocaleSwitcher /> sin estilos. Este componente renderiza un desplegable que permite a los usuarios establecer su idioma preferido y recuerda esa selección en visitas posteriores.

Para utilizar el componente, inclúyelo como descendiente del componente <LingoProviderWrapper /> y establece la propiedad locales como un array que contenga los idiomas de origen y destino:

import { LocaleSwitcher } from "lingo.dev/react/client";

function App() {
  return (
    <div className="App">
      <header>
        <LocaleSwitcher locales={["en", "es"]} />
      </header>
      <main>
        <h1>Welcome to your app</h1>
        <p>This content is automatically translated</p>
      </main>
    </div>
  );
}

export default App;

Advertencia: El componente <LocaleSwitcher /> no funciona en la ventana Vista previa integrada de Bolt. Para ver el componente en acción, haz clic en el icono Abrir vista previa en una pestaña separada.

Paso 6. Compilar y probar

Si el servidor de desarrollo aún no está en ejecución, inícielo con el siguiente comando:

npm run dev

El compilador automáticamente:

  1. Analizará sus componentes de React para encontrar contenido traducible
  2. Extraerá las claves de traducción
  3. Generará traducciones potenciadas por IA
  4. Creará archivos de traducción optimizados en el directorio lingo/

Próximos pasos