← Developer guides

Plain webpage direct integration

Drop a script tag on any page — no build step, no framework — and call the API from a static or server-rendered HTML page.

This is for a plain HTML page — server-rendered, static, or a <script> tag dropped into any site, no build step, no framework. Using React instead? See React SPA integration. Not sure which guide fits your stack? See Choose your integration path.

The fastest possible demo

A script tag and a few lines of JavaScript — the quickest way to see a real call succeed. You’ll need a real x-api-key first (see below for where that comes from — it’s a different credential than the client_id/client_secret pair from Get your API key).

1. Add the script tag

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

2. Create the client and call ai.run()

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

Click the button — out holds { translation: "Hallo" }. That’s a full round trip: submit, poll, done. endpoint is your API base URL with no extra path — don’t append anything after the domain.

Where do I get an API key?

A static x-api-key is a separate, self-service credential from the client_id/client_secret pair — open your app’s detail page in the Console and click Regenerate API Key. See Get your API key’s “What about a static x-api-key?” section for details.

This snippet is for quick local testing only — never ship a real apiKey in browser code. Continue to the next section for the safe, production version.

For production: use a session token instead

Never put a static x-api-key in a page your users’ browsers download. Anyone can read it out of the page source and use it as if they were you. The production-safe pattern: your own backend mints a short-lived, per-user session JWT and hands it to the page — the page never sees a secret that outlives one visit.

Building that backend endpoint is the same regardless of what language it’s written in — Node.js server integration shows a full working example (the POST /auth/token request it makes is plain HTTP, so any backend language does the same thing). Once you have a token endpoint, the browser side looks like this:

<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,   // auto-refreshes when the API returns 401
  });

  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" }) is a same-origin call to your own backend — no CORS involved, just your usual cookie-based session. See Choose your auth mode for the full apiKey-vs-sessionToken comparison, and Tool reference for every tool’s inputs and the errors each path can return.