← Entwickler-Anleitungen

Integrieren Sie es in Ihren eigenen Server

Fügen Sie Ihrem backend einen Token-Erstellungs-Endpunkt hinzu, damit das Browser-SDK ein kurzlebiges Session-JWT erhält — kein Secret erreicht jemals den Client.

Dies ist das Muster aus Wählen Sie Ihren Auth-Modus, konkret umgesetzt: ein Token-Erstellungs-Endpunkt auf Ihrem Server und eine Browser-Seite, die ihn aufruft, bevor sie das SDK aufruft.

1. Einen Token-Endpunkt zu Ihrem Backend hinzufügen

import jwt from "jsonwebtoken";

const SECRET = process.env.QURAVIN_SIGNING_SECRET;   // aus Holen Sie sich Ihren API-Schlüssel
const APP_ID = "your-app-id";                        // die registrierte ID Ihrer Anwendung

app.get("/ai-token", requireUserLogin, (req, res) => {
  const token = jwt.sign(
    {
      iss: APP_ID,
      sub: req.user.id,                    // die Nutzer-ID Ihrer Anwendung
      aud: "quravin",
      pipelines: ["translate-string"],     // welche Pipelines dieser Nutzer aufrufen darf
      rate_limit: { rpm: 30 },
    },
    SECRET,
    { algorithm: "HS256", expiresIn: "15m" },
  );
  res.json({ token, expires_in: 15 * 60 });
});

requireUserLogin ist Ihre eigene Auth-Middleware — das Token geht nur an einen Nutzer, den Ihr Server bereits authentifiziert hat.

2. Das Token abrufen und das SDK im Browser aufrufen

<input id="text" />
<button id="go">Translate</button>
<span id="result"></span>

<script src="https://js.quravin.com/v1.js"></script>
<script>
  const fetchToken = async () => {
    const r = await fetch("/ai-token", { credentials: "include" });
    if (!r.ok) throw new Error("Token fetch failed");
    return (await r.json()).token;
  };

  const ai = new Quravin.Quravin({
    endpoint: "https://api.example.com/ai-pipeline",
    sessionToken: await fetchToken(),
    onTokenExpired: fetchToken,   // erneuert sich automatisch, wenn die API 401 zurückgibt
  });

  document.getElementById("go").onclick = async () => {
    const out = await ai.run({
      pipeline: "translate-string",
      inputs: { text: document.getElementById("text").value, target_language: "German" },
    });
    document.getElementById("result").textContent = out.translation;
  };
</script>

3. Fehler behandeln

Ein erreichtes Kontingent oder Rate-Limit gibt einen typisierten Fehler zurück — zeigen Sie dem Nutzer eine klare Meldung und einen Link zu pricing:

try {
  const out = await ai.run({ pipeline: "translate-string", inputs: { /* ... */ } });
} catch (err) {
  showToast("Translation failed: " + err.message);
}

Das ist der ganze Kreislauf: Ihr Server erstellt Tokens, der Browser sieht nie ein Secret, und jeder Aufruf wird dem Nutzer zugeordnet, der ihn getätigt hat. Das SDK hat außerdem eine vollständigere Referenz — Batching mit ai.runMany, die ai.button-DOM-Bindung, den Raw-Prompt-Modus und eine vollständige Troubleshooting-Tabelle — fragen Sie Ihren Plattform-Kontakt danach, wenn Sie tiefer einsteigen möchten.