Books pro: OpenRouterに限定して、開発者視点で整理したものです。

項目	内容	技術資料
統一API	OpenAI互換APIでOpenAI、Anthropic、Google、Mistralなど多数のモデルを同じインターフェースで利用できる。	API Overview
OAuth (PKCE)	ユーザーがOpenRouterへログインし、あなたのアプリへ認可。認可コードからユーザー専用APIキーを取得できる。第三者アプリ向け認証基盤。	OAuth PKCE Guide
BYOK (Bring Your Own Key)	ユーザー自身のOpenAI・Anthropic・Google・Azure・AWS BedrockなどのAPIキーを登録し、そのキー経由でモデルを利用できる。キーは暗号化保存。	BYOK Documentation
ルーティング	モデルやプロバイダーを自動切替。優先順位やフォールバックも設定可能。	BYOK Documentation
APIキー管理	APIキーごとに名称、用途、クレジット上限を設定。OAuthでも利用可能。	Authentication API
Management API	SaaSがエンドユーザーごとのAPIキーを自動生成・削除・上限変更できる管理API。	Management API Keys FAQ

料金体系

項目	内容	資料
通常利用	OpenRouterクレジットから従量課金。モデル料金は各プロバイダー価格を基本とし、推論料金への上乗せはない（クレジット購入時に手数料あり）。	Pricing FAQ
BYOK	月100万BYOKリクエストまでは無料。それ以降は、同一モデル・プロバイダー価格の5%をOpenRouterクレジットから徴収。	BYOK Documentation
アプリ別上限	APIキーごとにクレジット上限を設定できる。ユーザー単位・アプリ単位の利用制御が可能。	Authentication API

実装手段

① OAuth認証（推奨される公開アプリ向け）


ユーザー
    ↓
OpenRouter OAuth
    ↓
認可コード
    ↓
APIキーへ交換
    ↓
あなたのアプリ

利用者はAPIキーをコピーする必要がなく、あなたは取得したユーザー専用APIキーでOpenRouter APIを呼び出します。

② APIキー入力


ユーザー
    ↓
OpenRouter APIキー入力
    ↓
あなたのアプリ

もっとも単純な方式です。キーには利用上限を設定できます。

③ BYOK


OpenAI Key
Anthropic Key
Gemini Key
        ↓
OpenRouter
        ↓
あなたのアプリ

利用者はOpenRouterへ各社APIキーを登録し、OpenRouter経由で統一APIを利用します。キーは暗号化保存されます。

④ Management API（SaaS向け）


あなたのSaaS
        ↓
Management API
        ↓
ユーザーごとのAPIキー生成

エンドユーザーごとにAPIキーを自動発行し、利用上限やリセット周期（日次・週次・月次）をプログラムから管理できます。

OpenRouterが提供する技術

OpenAI互換REST API
OAuth 2.0 + PKCE
BYOK（OpenAI、Anthropic、Google、Azure、AWS Bedrockなど）
APIキー管理
Management API
モデルルーティング
フォールバック
クレジット管理
アプリ別利用上限
OpenAI SDK互換
Python・TypeScript SDK

OpenRouterは現在、「エンドユーザーが自分のAI利用権を第三者アプリへ委任する」ための仕組みを、OAuth・BYOK・Management APIまで含めて最も体系的に提供しているプラットフォームと言えます。

OpenRouter OAuthで、各ユーザーが自分の残高・課金枠を使う実装について、公式サンプルとGitHub上の実例を分けてまとめます。

まず見るべき公式サンプル

1. OAuth PKCE公式ガイド

OpenRouter OAuth PKCE Guide

今回のユースケースに最も直接対応しています。

公式フローは次の3段階です。


1. ユーザーを https://openrouter.ai/auth へ送る
2. コールバックで認可コードを受け取る
3. 認可コードをユーザー管理APIキーへ交換する

OpenRouterでは事前のOAuthクライアント登録やclient_secretを要求せず、PKCEのcode_verifierとcode_challengeを使います。localhostの任意ポートもコールバック先として利用できます。

公式の認可URLは次の形です。


https://openrouter.ai/auth
  ?callback_url=https://example.com/callback
  &code_challenge=...
  &code_challenge_method=S256

認可後、次のエンドポイントでコードをキーへ交換します。


POST https://openrouter.ai/api/v1/auth/keys
Content-Type: application/json

{
  "code": "認可コード",
  "code_verifier": "PKCEの元文字列",
  "code_challenge_method": "S256"
}

レスポンスのkeyが、そのユーザーのOpenRouter APIキーです。

2. Sign In with OpenRouter公式リポジトリ

GitHub: OpenRouterTeam/sign-in-with-openrouter

これがOAuth実装の公式リファレンスです。

含まれるもの：

PKCEコード生成
OpenRouterへのリダイレクト
認可コード交換
APIキー保存
React用ContextとHook
サインインボタン
クロスタブ同期
SSR対策
エラー処理

リポジトリ内の主要箇所は次のとおりです。


src/lib/
  OpenRouter OAuthの本体

src/components/
  Sign In with OpenRouterボタン

src/hooks/
  OpenRouterAuthProvider
  useOpenRouterAuth

src/demo/
  実行可能なデモ

この公式例はバックエンド不要で、取得したキーをlocalStorageに保存します。ただし公式READMEも、ページ内のJavaScriptからキーを読めるため、本番利用ではCSPやXSS対策が必要だと明記しています。

デモ：

3. OpenRouter公式の完成アプリ例

GitHub: OpenRouterTeam/multimedia-explorer

これは単なる断片ではなく、不特定多数のユーザーがOAuthでOpenRouterへ接続する完成アプリです。

主な実装：

OpenRouter OAuth 2.0＋PKCE
ユーザー本人のOpenRouterクレジット利用
テキスト・画像・動画モデルの動的取得
APIルートからのモデル呼び出し
非同期動画ジョブのポーリング
React Hookによる認証状態管理

特に参考になるファイル構成は次です。


lib/openrouter-auth.ts
  OAuth 2.0 PKCE処理

lib/openrouter.ts
  SDKクライアント生成

hooks/use-openrouter-auth.ts
  認証状態管理

app/api/
  ラッパーAPIの実装

ユーザーはOpenRouterアカウントでOAuth接続し、自分のクレジットを使って画像・動画・テキストモデルを利用します。

4. OpenRouter公式Examples

GitHub: OpenRouterTeam/openrouter-examples

OAuth後に取得したユーザーキーを使って、実際にモデルを呼び出す部分はこちらが参考になります。

収録例：

cURL
TypeScript fetch
Vercel AI SDK
Effect AI
Prompt Caching
ストリーミング
モデル固有機能

リポジトリは実行可能なサンプル集として用意されており、TypeScript、cURL、Vercel AI SDKなどに分かれています。

最小のfetch呼び出しは、OAuthで得たキーをBearerトークンに設定します。


const response = await fetch(
  "https://openrouter.ai/api/v1/chat/completions",
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${userOpenRouterKey}`,
      "Content-Type": "application/json",
      "HTTP-Referer": "https://your-app.example",
      "X-OpenRouter-Title": "Your App"
    },
    body: JSON.stringify({
      model: "openai/gpt-4.1-mini",
      messages: [
        {
          role: "user",
          content: "こんにちは"
        }
      ]
    })
  }
);

if (!response.ok) {
  throw new Error(`OpenRouter error: ${response.status}`);
}

const result = await response.json();
console.log(result.choices[0].message.content);

5. 公式TypeScript SDK

GitHub: OpenRouterTeam/typescript-sdk

TypeScript SDK公式ドキュメント

OAuthで取得したキーをそのままSDKへ設定できます。


import { OpenRouter } from "@openrouter/sdk";

const client = new OpenRouter({
  apiKey: userOpenRouterKey
});

const result = await client.chat.send({
  model: "openai/gpt-4.1-mini",
  messages: [
    {
      role: "user",
      content: "この文章を要約してください"
    }
  ],
  stream: false
});

console.log(result.choices[0].message);

公式OAuthガイドでも、このSDKを使ったキー利用例が掲載されています。

6. Vercel AI SDK公式プロバイダー

GitHub: OpenRouterTeam/ai-sdk-provider

Next.jsやVercel AI SDKを使う場合の公式プロバイダーです。


npm install ai @openrouter/ai-sdk-provider


import { createOpenRouter } from "@openrouter/ai-sdk-provider";
import { generateText } from "ai";

const openrouter = createOpenRouter({
  apiKey: userOpenRouterKey
});

const { text } = await generateText({
  model: openrouter("openai/gpt-4.1-mini"),
  prompt: "BYOKについて説明してください"
});

console.log(text);

公式プロバイダーは、OpenRouterで提供される多数のモデルをVercel AI SDK形式で利用できます。2026年7月時点ではAI SDK v7対応版が公開されています。

GitHub上のサードパーティ実例

7. Streamlit＋OAuth PKCE

GitHub: 0xblocktrain/openrouter-streamlit

Python／Streamlitで、


Connect OpenRouter
↓
OAuth PKCE
↓
ユーザー専用キー取得
↓
チャット実行

を実装した小規模サンプルです。

ユーザー側でAPIキーをコピーする必要がなく、ボタンからOpenRouterへ接続してキーを取得する構成です。

起動方法も単純です。


python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
streamlit run Chatbot.py

8. Streamlitの複数サンプル

GitHub: alexanderatallah/openrouter-streamlit

含まれる例：

チャットボット
ファイルQ&A
LangChain
PromptTemplate
検索連携

古めの部分もありますが、PythonでOpenRouterをラップする構造を確認するには有用です。

9. OAuth対応のStreamlit派生例

GitHub: alonsosilvaallende/chatplotlib-openrouter

Streamlit上でOpenRouter OAuth PKCEを使うスターターです。チャットや可視化アプリへユーザー自身のOpenRouter利用枠を持ち込ませる例として参考になります。

10. IntelliJプラグインでのOAuth例

GitHub: DimazzzZ/openrouter-intellij-plugin

デスクトップIDEプラグインで、

「Connect to OpenRouter」
OAuth／PKCE
手動キー入力
モデル選択

を実装しています。

Webサービスだけでなく、ローカルアプリやIDE拡張でOAuthを使いたい場合の実装例になります。

11. MCP＋OpenRouter OAuth

GitHub: janwilmake/chat-completions-mcp

OpenRouter OAuthで認証し、/chat/completionsをMCPツールとして公開する例です。

今回の「開発したラッパーAPIを、ユーザー自身の課金枠で使わせる」という考え方に近く、


MCPクライアント
↓ OAuth
OpenRouter
↓
ユーザー本人のクレジット

という構造を確認できます。

Books pro

2026年7月12日日曜日

OpenRouterに限定して、開発者視点で整理したものです。

料金体系

実装手段

① OAuth認証（推奨される公開アプリ向け）

② APIキー入力

③ BYOK

④ Management API（SaaS向け）

OpenRouterが提供する技術

まず見るべき公式サンプル

1. OAuth PKCE公式ガイド

2. Sign In with OpenRouter公式リポジトリ

3. OpenRouter公式の完成アプリ例

4. OpenRouter公式Examples

5. 公式TypeScript SDK

6. Vercel AI SDK公式プロバイダー

GitHub上のサードパーティ実例

7. Streamlit＋OAuth PKCE

8. Streamlitの複数サンプル

9. OAuth対応のStreamlit派生例

10. IntelliJプラグインでのOAuth例

11. MCP＋OpenRouter OAuth

ラベル

ブログアーカイブ

2026年7月12日日曜日

OpenRouterに限定して、開発者視点で整理したものです。

料金体系

実装手段

① OAuth認証（推奨される公開アプリ向け）

② APIキー入力

③ BYOK

④ Management API（SaaS向け）

OpenRouterが提供する技術

まず見るべき公式サンプル

1. OAuth PKCE公式ガイド

2. Sign In with OpenRouter公式リポジトリ

3. OpenRouter公式の完成アプリ例

4. OpenRouter公式Examples

5. 公式TypeScript SDK

6. Vercel AI SDK公式プロバイダー

GitHub上のサードパーティ実例

7. Streamlit＋OAuth PKCE

8. Streamlitの複数サンプル

9. OAuth対応のStreamlit派生例

10. IntelliJプラグインでのOAuth例

11. MCP＋OpenRouter OAuth

ラベル

ブログ アーカイブ

ブログアーカイブ