← Entwickler-Anleitungen

Direkte Integration für einfache Webseiten

Fügen Sie ein Script-Tag auf einer beliebigen Seite ein — kein Build-Schritt, kein Framework — und rufen Sie die API von einer statischen oder serverseitig gerenderten HTML-Seite aus auf.

Dies ist für eine einfache HTML-Seite gedacht — serverseitig gerendert, statisch, oder ein <script>-Tag, das auf einer beliebigen Seite eingefügt wird, kein Build-Schritt, kein Framework. Verwenden Sie stattdessen React? Siehe React-SPA-Integration. Nicht sicher, welche Anleitung zu Ihrem Stack passt? Siehe Wählen Sie Ihren Integrationspfad.

Die schnellstmögliche Demo

Ein Script-Tag und ein paar Zeilen JavaScript — der schnellste Weg, um einen echten erfolgreichen Aufruf zu sehen. Sie brauchen zuerst einen echten x-api-key (siehe unten, woher der kommt — das ist ein anderer Schlüssel als das client_id/client_secret-Paar aus Holen Sie sich Ihren API-Schlüssel).

1. Das Script-Tag einfügen

<script src="https://js.quravin.com/v1.js"></script>

2. Den Client erstellen und ai.run() aufrufen

<button id="go">Translate</button>
<div id="out"></div>

<script>
  const ai = new Quravin.Quravin({
    endpoint: "https://api.quravin.com",
    apiKey:   "YOUR_API_KEY",
  });

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

Klicken Sie auf den Button — out enthält { translation: "Hallo" }. Das ist ein vollständiger Roundtrip: absenden, pollen, fertig. endpoint ist Ihre API-Basis-URL ohne zusätzlichen Pfad — hängen Sie nichts an die Domain an.

Woher bekomme ich einen API-Schlüssel?

Ein statischer x-api-key ist ein separates, selbstbedienbares Credential, getrennt vom client_id/client_secret-Paar — öffnen Sie die Detailseite Ihrer Anwendung in der Console und klicken Sie auf Regenerate API Key. Details finden Sie im Abschnitt „Was ist mit einem statischen x-api-key?” von Holen Sie sich Ihren API-Schlüssel.

Dieses Snippet eignet sich nur für schnelle lokale Tests — liefern Sie niemals einen echten apiKey im Browser-Code aus. Weiter geht’s im nächsten Abschnitt mit der sicheren Produktionsversion.

Für Produktion: stattdessen ein Session-Token verwenden

Setzen Sie niemals einen statischen x-api-key auf eine Seite, die die Browser Ihrer Nutzer herunterladen. Jeder kann ihn aus dem Seitenquelltext lesen und ihn verwenden, als wäre er Sie. Das produktionssichere Muster: Ihr eigenes Backend erstellt ein kurzlebiges, nutzerbezogenes Session-JWT und übergibt es der Seite — die Seite sieht nie ein Secret, das länger als einen Besuch lebt.

Diesen Backend-Endpunkt zu bauen ist unabhängig davon, in welcher Sprache er geschrieben ist, gleich — Node.js-Server-Integration zeigt ein vollständiges funktionierendes Beispiel (die POST /auth/token-Anfrage, die er stellt, ist reines HTTP, sodass jede Backend-Sprache dasselbe tut). Sobald Sie einen Token-Endpunkt haben, sieht die Browser-Seite so aus:

<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.quravin.com",
    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: "de" },
    });
    document.getElementById("result").textContent = out.translation;
  };
</script>

fetch("/ai-token", { credentials: "include" }) ist ein same-origin-Aufruf an Ihr eigenes Backend — kein CORS involviert, nur Ihre gewohnte Cookie-basierte Session. Siehe Wählen Sie Ihren Auth-Modus für den vollständigen Vergleich zwischen apiKey und sessionToken, und Tool-Referenz für die Eingaben jedes Tools und die Fehler, die jeder Pfad zurückgeben kann.