プレーンな Web ページでの直接統合

任意のページに script タグを追加するだけ — ビルドステップもフレームワークも不要 — 静的またはサーバーレンダリングされた HTML ページから API を呼び出します。

これはプレーンな HTML ページ向けです — サーバーレンダリング、静的、または任意のサイトに埋め込んだ <script> タグ、ビルドステップもフレームワークも不要です。React を使う場合は React SPA 統合を参照してください。どのガイドが自分のスタックに合うかわからない場合は、統合パスを選ぶを参照してください。

最速のデモ

script タグと数行の JavaScript だけ — 実際の呼び出しを成功させるまでの最速の道のりです。まず本物の x-api-key が必要です（入手先は下記を参照してください — これは API キーを取得するで得られる client_id/client_secret のペアとは別の資格情報です）。

1. script タグを追加する

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

2. クライアントを作成して 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>

ボタンをクリックすると、out に { translation: "Hallo" } が入ります。これで送信・ポーリング・完了という一連の流れが完了です。endpoint には余分なパスを付けない、あなたの API ベース URL を指定します — ドメインの後ろに何も付け足さないでください。

API キーはどこで手に入りますか？

静的な x-api-key は、client_id/client_secret ペアとは別の、セルフサービスの資格情報です — コンソールでアプリの詳細ページを開き、Regenerate API Key をクリックしてください。詳しくは API キーを取得するの「静的な x-api-key については？」セクションを参照してください。

このコード例はあくまで簡易的なローカルテスト用です — 本物の apiKey を絶対にブラウザのコードに含めないでください。 安全な本番向けのバージョンについては、次のセクションに進んでください。

本番では: 代わりに session token を使う

静的な x-api-key を、ユーザーのブラウザがダウンロードするページに絶対に含めないでください。 ページのソースからそれを読み取れば、誰でもあなたになりすませてしまいます。本番で安全なパターンは次の通りです：あなた自身の backend が短期の、ユーザーごとの session JWT を発行してページに渡します — ページは、1 回の訪問より長生きする secret を一切見ません。

その backend エンドポイントを構築する方法は、どの言語で書かれていても同じです — Node.js サーバー統合に完全に動作する例があります（そこで行われる POST /auth/token リクエストは普通の HTTP なので、どの backend 言語でも同じことを行います）。トークンエンドポイントができたら、ブラウザ側は次のようになります。

<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,   // API が 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" }) は、あなた自身の backend への同一オリジンの呼び出しです — CORS は関与せず、いつも通りの cookie ベースのセッションだけです。apiKey と sessionToken の全体比較については認証モードを選ぶを、各ツールの入力とそれぞれの経路が返しうるエラーについてはツールリファレンスを参照してください。