Bolt

Bolt ist eine KI-gestützte, browserbasierte Entwicklungsplattform von StackBlitz. Diese Anleitung erklärt, wie man eine React-basierte App 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, hat jedoch einige Kompatibilitätsprobleme mit Lingo.dev:

  • Sie können nur einen API-Schlüssel zur Authentifizierung bei der Lingo.dev Engine verwenden, nicht den login-Befehl der CLI.
  • In Bolt ist der Lingo.dev Compiler nur mit Vite-basierten Apps kompatibel. Sie können Next.js nicht verwenden.
  • Die <LocaleSwitcher />-Komponente 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 große Sprachmodelle (LLMs), um Apps 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 die Lingo.dev Engine oder einen benutzerdefinierten LLM-Anbieter verwenden.

Lingo.dev Engine

Die Lingo.dev Engine ist unsere eigene, gehostete Plattform, die dynamische Modellauswahl, automatisches 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 der Lingo.dev Engine an.
  2. Navigieren Sie zur Seite Projekte.
  3. Klicken Sie auf API-Schlüssel > Kopieren.

Benutzerdefinierter LLM-Provider

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

Die genauen Anweisungen zur Einrichtung eines API-Schlüssels hängen vom jeweiligen Anbieter ab.

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

Schritt 2. Installieren Sie 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 den folgenden Befehl aus:

    npm install lingo.dev

Schritt 3. Konfigurieren Sie 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 Modell(e), das/die für die Lokalisierung verwendet werden soll(en).

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-Anbieter

Wenn Sie einen benutzerdefinierten LLM-Anbieter verwenden, setzen Sie models auf ein Objekt, das Quell- und Zielsprachen mit den Modellen verknüpft, die sie lokalisieren sollen. Zum Beispiel lokalisiert diese Konfiguration alle Strings mit "groq:qwen/qwen3-32b":

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:qwen/qwen3-32b",
    },
  })(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 die relevanten Umgebungsvariablen zur Datei 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 Paket lingo.dev exportiert eine <LingoProviderWrapper />-Komponente. Diese Komponente ist dafür verantwortlich, Übersetzungen zu laden und sie in der gesamten App 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. Sprachumschalter hinzufügen

Das Paket lingo.dev exportiert eine ungestylte <LocaleSwitcher />-Komponente. Diese Komponente rendert ein Dropdown-Menü, das Benutzern ermöglicht, ihre bevorzugte Sprache einzustellen und diese Auswahl bei wiederkehrenden Besuchen beibehält.

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

Wenn 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 Verzeichnis lingo/ erstellen

Nächste Schritte