自分のサーバーに統合する

backend にトークン発行エンドポイントを追加し、ブラウザの SDK が短期の session JWT を受け取れるようにします — secret がクライアントに届くことは一切ありません。

これは認証モードを選ぶのパターンを具体化したものです：サーバー上のトークン発行エンドポイントと、SDK を呼び出す前にそれを呼び出すブラウザページです。

1. backend にトークンエンドポイントを追加する

import jwt from "jsonwebtoken";

const SECRET = process.env.QURAVIN_SIGNING_SECRET;   // API キーを取得する で入手
const APP_ID = "your-app-id";                        // あなたのアプリの登録 ID

app.get("/ai-token", requireUserLogin, (req, res) => {
  const token = jwt.sign(
    {
      iss: APP_ID,
      sub: req.user.id,                    // あなたのアプリのユーザー ID
      aud: "quravin",
      pipelines: ["translate-string"],     // このユーザーが呼び出せるパイプライン
      rate_limit: { rpm: 30 },
    },
    SECRET,
    { algorithm: "HS256", expiresIn: "15m" },
  );
  res.json({ token, expires_in: 15 * 60 });
});

requireUserLogin は独自の認証ミドルウェアです — トークンは、あなたのサーバーがすでに認証済みのユーザーにのみ発行されます。

2. ブラウザでトークンを取得して SDK を呼び出す

<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,   // API が 401 を返したら自動更新
  });

  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. エラーを処理する

クォータや rate limit に達すると、型付きエラーが返ります — ユーザーにわかりやすいメッセージと pricing へのリンクを表示してください：

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

これで一連の流れは完成です：サーバーがトークンを発行し、ブラウザは secret を一切見ることなく、すべての呼び出しは実行したユーザーに紐づけられます。SDK には ai.runMany によるバッチ処理、 ai.button の DOM バインディング、raw-prompt モード、そして完全なトラブルシューティング表を含む、より詳しいリファレンスもあります — さらに深く知りたい場合は、プラットフォーム担当者にお問い合わせください。