Bolt

Bolt est une plateforme de développement basée sur le navigateur et propulsée par l'IA de StackBlitz. Ce guide explique comment localiser une application basée sur React avec Lingo.dev Compiler dans Bolt.

Limitations connues

Bolt utilise des conteneurs web pour exécuter des applications web dans le navigateur. C'est une technologie puissante, mais elle présente quelques problèmes de compatibilité avec Lingo.dev :

  • Vous pouvez uniquement utiliser une clé API pour vous authentifier auprès de Lingo.dev Engine, et non la commande login du CLI.
  • Dans Bolt, Lingo.dev Compiler est uniquement compatible avec les applications basées sur Vite. Vous ne pouvez pas utiliser Next.js.
  • Le composant <LocaleSwitcher /> ne fonctionne pas dans la fenêtre Preview intégrée de Bolt.
  • Ollama n'est pas pris en charge dans Bolt car Ollama doit être exécuté localement.

Étape 1. Obtenir une clé API

Lingo.dev Compiler utilise des modèles de langage de grande taille (LLM) pour localiser des applications avec l'IA. Pour utiliser l'un de ces modèles, vous avez besoin d'une clé API provenant de l'un des fournisseurs pris en charge. Vous pouvez utiliser Lingo.dev Engine ou un fournisseur LLM personnalisé.

Lingo.dev Engine

Lingo.dev Engine est notre propre plateforme hébergée qui offre une sélection dynamique de modèles, un routage automatique, une mémoire de traduction et la prise en charge de glossaires. L'inscription est gratuite et tous les utilisateurs bénéficient de 10 000 jetons d'utilisation gratuite par mois.

Pour obtenir une clé API :

  1. Connectez-vous à Lingo.dev Engine.
  2. Accédez à la page Projects.
  3. Cliquez sur API key > Copy.

Fournisseur LLM personnalisé

Lingo.dev Compiler s'intègre également à une gamme de fournisseurs tiers, notamment :

Les instructions exactes pour configurer une clé API dépendent du fournisseur.

Remarque : Assurez-vous d'activer votre compte auprès du fournisseur de LLM et d'accepter leurs conditions d'utilisation avant de l'utiliser dans Compiler.

Étape 2. Installer lingo.dev

Le package lingo.dev contient le compilateur.

Pour installer le package :

  1. Créez ou ouvrez un projet dans Bolt.

  2. Passez à l'onglet Code.

  3. Cliquez sur Terminal.

  4. Exécutez la commande suivante :

    npm install lingo.dev

Étape 3. Configurer Vite

Lors de l'utilisation de Vite, Lingo.dev Compiler doit être initialisé dans le fichier de configuration du projet :

  • Si vous utilisez TypeScript, le fichier de configuration est vite.config.ts.
  • Si vous utilisez JavaScript, le fichier de configuration est vite.config.js.

Vous pouvez configurer le comportement du compilateur pendant l'initialisation. C'est cette configuration qui détermine les locales entre lesquelles traduire et le(s) modèle(s) à utiliser pour la localisation.

Pour la liste complète des options disponibles, consultez Options du compilateur.

Lingo.dev Engine

Si vous utilisez Lingo.dev Engine, définissez models sur "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),
);

Fournisseur LLM personnalisé

Si vous utilisez un fournisseur LLM personnalisé, définissez models comme un objet qui associe les locales source et cible aux modèles qui devraient les localiser. Par exemple, cette configuration localise toutes les chaînes avec "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),
);

Étape 4. Définir une variable d'environnement

Pour garantir que Lingo.dev Compiler puisse accéder aux clés API des modèles configurés, les clés API doivent être disponibles en tant que variables d'environnement.

Pour configurer les variables d'environnement dans Bolt :

  1. Créez un fichier .env.

    1. Faites un clic droit sur le panneau des fichiers.
    2. Sélectionnez Nouveau fichier.
    3. Saisissez .env.

  2. Ajoutez les variables d'environnement pertinentes au fichier :

    # Lingo.dev Engine
LINGODOTDEV_API_KEY="VOTRE_CLÉ_API_ICI"

# Google AI
GOOGLE_API_KEY="VOTRE_CLÉ_API_ICI"

# GROQ
GROQ_API_KEY="VOTRE_CLÉ_API_ICI"

# Mistral
MISTRAL_API_KEY="VOTRE_CLÉ_API_ICI"

# OpenRouter
OPENROUTER_API_KEY="VOTRE_CLÉ_API_ICI"

Remarque : Bolt chiffre automatiquement les variables d'environnement. Pour en savoir plus, consultez Variables d'environnement (developer.stackblitz.com).

Étape 4. Ajouter le fournisseur

Le package lingo.dev exporte un composant <LingoProviderWrapper />. Ce composant est responsable du chargement des traductions et de leur mise à disposition dans toute l'application.

Pour utiliser ce composant, importez-le dans le fichier src/main.tsx et encapsulez-le autour du composant <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>,
);

(Optionnel) Étape 5. Ajouter le sélecteur de langue

Le package lingo.dev exporte un composant non stylisé <LocaleSwitcher />. Ce composant affiche un menu déroulant permettant aux utilisateurs de définir leur langue préférée et mémorise cette sélection lors des visites ultérieures.

Pour utiliser ce composant, incluez-le en tant que descendant du composant <LingoProviderWrapper /> et définissez la propriété locales sur un tableau contenant les locales source et cible :

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;

Avertissement : Le composant <LocaleSwitcher /> ne fonctionne pas dans la fenêtre Aperçu intégrée de Bolt. Pour voir le composant en action, cliquez sur l'icône Ouvrir l'aperçu dans un onglet séparé.

Étape 6. Compiler et tester

Si le serveur de développement n'est pas déjà en cours d'exécution, démarrez-le avec la commande suivante :

npm run dev

Le compilateur va automatiquement :

  1. Analyser vos composants React pour identifier le contenu traduisible
  2. Extraire les clés de traduction
  3. Générer des traductions optimisées par IA
  4. Créer des fichiers de traduction optimisés dans le répertoire lingo/

Prochaines étapes