Bolt

Bolt ist eine KI-gestützte, browserbasierte Entwicklungsplattform von StackBlitz. Diese Anleitung erklärt, wie man eine React-basierte Anwendung mit dem Lingo.dev Compiler in Bolt lokalisiert.

Bekannte Einschränkungen

Bolt verwendet Web-Container, um Web-Apps im Browser auszuführen. Dies ist eine leistungsstarke Technologie, weist jedoch einige Kompatibilitätsprobleme mit Lingo.dev auf:

  • Sie können nur einen API-Schlüssel zur Authentifizierung bei der Lingo.dev Engine verwenden, nicht den Befehl login der CLI.
  • In Bolt ist der Lingo.dev Compiler nur mit Vite-basierten Apps kompatibel. Sie können Next.js nicht verwenden.
  • Die Komponente <LocaleSwitcher /> funktioniert nicht im eingebetteten Vorschau-Fenster von Bolt.
  • Ollama wird in Bolt nicht unterstützt, da Ollama lokal ausgeführt werden muss.

Schritt 1. API-Schlüssel erhalten

Der Lingo.dev Compiler verwendet Large Language Models (LLMs), um Anwendungen mit KI zu lokalisieren. Um eines dieser Modelle zu nutzen, benötigen Sie einen API-Schlüssel von einem der unterstützten Anbieter. Sie können Lingo.dev Engine oder einen benutzerdefinierten LLM-Anbieter verwenden.

Lingo.dev Engine

Lingo.dev Engine ist unsere eigene, gehostete Plattform, die dynamische Modellauswahl, Auto-Routing, Übersetzungsspeicher und Glossar-Unterstützung bietet. Die Registrierung ist kostenlos und alle Benutzer erhalten 10.000 Tokens pro Monat zur kostenlosen Nutzung.

Um einen API-Schlüssel zu erhalten:

  1. Melden Sie sich bei Lingo.dev Engine an.
  2. Navigieren Sie zur Seite Projekte.
  3. Klicken Sie auf API-Schlüssel > Kopieren.

Benutzerdefinierter LLM-Anbieter

Lingo.dev Compiler integriert sich auch mit einer Reihe von Drittanbieter-Diensten, darunter:

Die genauen Anweisungen zum Einrichten eines API-Schlüssels hängen vom Anbieter ab.

Hinweis: Stellen Sie sicher, dass Sie Ihr Konto beim LLM-Anbieter aktiviert und deren Nutzungsbedingungen akzeptiert haben, bevor Sie es im Compiler verwenden.

Schritt 2. Installation von lingo.dev

Das Paket lingo.dev enthält den Compiler.

Um das Paket zu installieren:

  1. Erstellen oder öffnen Sie ein Projekt in Bolt.

  2. Wechseln Sie zum Tab Code.

  3. Klicken Sie auf Terminal.

  4. Führen Sie folgenden Befehl aus:

    npm install lingo.dev

Schritt 3. Konfiguration von Vite

Bei der Verwendung von Vite muss der Lingo.dev Compiler in der Konfigurationsdatei des Projekts initialisiert werden:

  • Wenn Sie TypeScript verwenden, ist die Konfigurationsdatei vite.config.ts.
  • Wenn Sie JavaScript verwenden, ist die Konfigurationsdatei vite.config.js.

Sie können das Verhalten des Compilers während der Initialisierung konfigurieren. Diese Konfiguration bestimmt die Sprachen, zwischen denen übersetzt werden soll, und das/die für die Lokalisierung zu verwendende(n) Modell(e).

Eine vollständige Liste der verfügbaren Optionen finden Sie unter Compiler-Optionen.

Lingo.dev Engine

Wenn Sie die Lingo.dev Engine verwenden, setzen Sie models auf "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),
);

Benutzerdefinierter LLM-Provider

Wenn Sie einen benutzerdefinierten LLM-Provider verwenden, setzen Sie models auf ein Objekt, das Quell- und Ziel-Locales mit den Modellen verknüpft, die sie lokalisieren sollen. Beispielsweise lokalisiert diese Konfiguration alle Strings mit "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),
);

Schritt 4. Umgebungsvariable festlegen

Um sicherzustellen, dass der Lingo.dev Compiler auf die API-Schlüssel für die konfigurierten Modelle zugreifen kann, müssen die API-Schlüssel als Umgebungsvariablen verfügbar sein.

So richten Sie die Umgebungsvariablen in Bolt ein:

  1. Erstellen Sie eine .env-Datei.

    1. Klicken Sie mit der rechten Maustaste auf den Dateibereich.
    2. Wählen Sie Neue Datei.
    3. Geben Sie .env ein.

  2. Fügen Sie der Datei die relevanten Umgebungsvariablen hinzu:

    # Lingo.dev Engine
LINGODOTDEV_API_KEY="HIER_KOMMT_IHR_API_SCHLÜSSEL"

# Google AI
GOOGLE_API_KEY="HIER_KOMMT_IHR_API_SCHLÜSSEL"

# GROQ
GROQ_API_KEY="HIER_KOMMT_IHR_API_SCHLÜSSEL"

# Mistral
MISTRAL_API_KEY="HIER_KOMMT_IHR_API_SCHLÜSSEL"

# OpenRouter
OPENROUTER_API_KEY="HIER_KOMMT_IHR_API_SCHLÜSSEL"

Hinweis: Bolt verschlüsselt Umgebungsvariablen automatisch. Weitere Informationen finden Sie unter Umgebungsvariablen (developer.stackblitz.com).

Schritt 4. Provider hinzufügen

Das lingo.dev-Paket exportiert eine <LingoProviderWrapper />-Komponente. Diese Komponente ist dafür verantwortlich, Übersetzungen zu laden und sie in der gesamten Anwendung verfügbar zu machen.

Um die Komponente zu verwenden, importieren Sie sie in die Datei src/main.tsx und umschließen Sie damit die <App />-Komponente:

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>,
);

(Optional) Schritt 5. Locale-Umschalter hinzufügen

Das Paket lingo.dev exportiert eine ungestylte <LocaleSwitcher />-Komponente. Diese Komponente rendert ein Dropdown-Menü, mit dem Benutzer ihre bevorzugte Sprache einstellen können, und speichert diese Auswahl für zukünftige Besuche.

Um die Komponente zu verwenden, fügen Sie sie als Nachkomme der <LingoProviderWrapper />-Komponente ein und setzen Sie die locales-Prop auf ein Array, das die Quell- und Zielsprachen enthält:

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;

Warnung: Die <LocaleSwitcher />-Komponente funktioniert nicht im eingebetteten Vorschau-Fenster von Bolt. Um die Komponente in Aktion zu sehen, klicken Sie auf das Symbol Vorschau in separatem Tab öffnen.

Schritt 6. Bauen und Testen

Falls der Entwicklungsserver noch nicht läuft, starten Sie ihn mit folgendem Befehl:

npm run dev

Der Compiler wird automatisch:

  1. Ihre React-Komponenten nach übersetzbaren Inhalten scannen
  2. Übersetzungsschlüssel extrahieren
  3. KI-gestützte Übersetzungen generieren
  4. Optimierte Übersetzungsdateien im lingo/-Verzeichnis erstellen

Nächste Schritte