OpenRouter.ai入門｜OpenAI・Gemma・Mistralなど複数LLMを共通APIで使う方法

1. はじめに

OpenAI APIをはじめとしたLLMが注目を集めています。日々多くのサービスが作られたり、新しいテクニックが生み出されています。ディープリサーチやAIエージェントなど、活用の幅も広がっています。

そうしたLLMをAPI経由で利用する場合、一定の料金がかかります。あらかじめチャージしておいたり、従量課金型など複数の課金体系があります。APIは利用量が読めないため、サブスクリプションモデルは多くないようです。そのため、利用が増えれば増えるほど、料金がかさんでしまうと言う問題があります。

そこで使ってみたいのがOpenRouter.aiです。OpenRouter.aiはさまざまなLLMに対する共通したインタフェースを提供するサービスです。OpenAI APIに限らず、GemmaやMistralなどのAPIが利用できます。また、最近では消費税の影響なのか、OpenAI APIを直接利用するよりも安価になっています。

※ 2025年7月時点では、日本から利用する場合 OpenRouter.ai 経由の方がコストを抑えやすいケースが多い。ただし為替やモデル単価によって逆転することもあるので、都度シミュレーションを推奨となります。

そこで、本記事ではOpenRouter.aiを使って、さまざまなLLMを利用する方法を紹介します。

2. 開発環境の準備

OpenRouter.aiを利用する際には、まず開発環境を整える必要があります。必要なのは以下の3つです。

Node.js
OpenRouter.aiのアカウント
OpenRouter.aiのAPIキー

開発環境としてはPythonも推奨されていますが、今回はMonacaなのでTypeScriptを選択しています。

APIリクエストの基本

OpenRouter.aiでは、OpenAIのSDKがそのまま利用できます。以下のように、APIキーを設定してリクエストを送信します。

import OpenAI from "openai";

const apiKey = 'YOUR_API_KEY';
const openai = new OpenAI({
  baseURL: "https://openrouter.ai/api/v1",
  apiKey,
});

後はOpenAIへリクエストするのと同じように呼び出せます。以下は、GoogleのGemma3を利用する例です。

response = await openai.chat.completions.create({
    model: "google/gemma-3-27b-it:free",
    messages: [{"role": "user", "content": "こんにちは！"}],
})
console.log(response.choices[0].message.content);

model を変更すれば別なLLMモデルを利用できます。

response = await openai.chat.completions.create({
    model: "mistralai/mistral-small-3.1-24b-instruct-2503",
    messages: [{"role": "user", "content": "こんにちは！"}],
})
console.log(response.choices[0].message.content);

モデル名はOpenRouter.aiのサイトで確認できます。

ストリーミングでの利用

OpenRouter.aiの難点としては、元のサービスと比べると若干不安定である点と、レスポンスが遅い傾向がある点が挙げられます。そのため、上記のようにすべてのレスポンスを待つよりも、ストリーミングでの利用をおすすめします。

export async function streamCallbackFunction(content: string, callback: (token: string) => void) {
  const chatStream = await openai.beta.chat.completions.stream({
    messages: [{ role: "user", content }],
    model,
    stream: true,
  });

  for await (const message of chatStream) {
    const token = message.choices[0].delta.content;
    if (token) {
      callback(token);
    }
  }

  const chatCompletion = await chatStream.finalChatCompletion();
  return chatCompletion;
}

上記の関数を、以下のように呼び出します。

const response = await streamCallbackFunciton("Monacaについて教えてください", (token) => {
  console.log(token);
});

このように実行することで、tokenの中にレスポンスが適宜入ってきます。

Mon
aca
は
、
HTML
5
、
JavaScript
、
CSS

もちろん、このtokenをすべて集めれば、LLMからの回答として利用できます。

Monacaは、HTML5、JavaScript、CSS3を使って、Webアプリやモバイルアプリを開発するための統合開発環境（IDE）です。特に、PhoneGap/Cordovaをベースとしたハイブリッドアプリ開発に強みを持っています。

**Monacaの特徴**

*   **クラウドIDE:** ブラウザ上で動作するため、特別なソフトウェアのインストールは不要です。どこからでもアクセスして開発できます。

簡単なチャットアプリのデモ

最後に、OpenRouter.aiを使って簡単なチャットアプリを作成してみました。今回はFramework7 Reactを使っています。UIはMessagesコンポーネントを使っています。

return (
  <Page name="chat">
    <Navbar>
      <NavTitle>チャット</NavTitle>
      <Link slot="right" href="/">
        ホーム
      </Link>
    </Navbar>

    <Messages>
      {messages.map((message, index) => (
        <Message
          key={index}
          type={message.type}
          name={message.name}
          avatar={message.avatar}
        >
          <span slot="text" dangerouslySetInnerHTML={{ __html: message.text }}></span>
        </Message>
      ))}
      <div ref={messagesEndRef} />
    </Messages>

    <Messagebar
      value={messageText}
      onInput={(e) => setMessageText(e.target.value)}
    >
      <Link
        iconIos="f7:arrow_up_circle_fill"
        iconMd="material:send"
        slot="inner-end"
        onClick={handleSendMessage}
      />
    </Messagebar>
  </Page>
);

そして、質問を受け付けた後で、上記で紹介したストリーミングを使って回答を表示します。

// メッセージ送信処理
const handleSendMessage = async () => {
  if (!messageText.trim()) return;

  // 新しいメッセージを追加
  const newMessage = {
    type: 'sent',
    text: messageText,
    date: new Date(),
  };

  messages.push(newMessage);

  setMessages([...messages]);
  setMessageText('');
  const aiResponse = {
    type: 'received',
    name: 'AI',
    text: ...,
    avatar: '/openrouter.png',
    date: new Date(),
  };
  messages.push(aiResponse);
  setMessages([...messages]);
  await new Promise((r) => setTimeout(r, 1000));
  await streamCallbackFunciton(messageText, (token) => {
    const message = messages[messages.length - 1];
    if (message.text === '...') {
      message.text = token;
    } else {
      message.text += token;
    }
    message.text = message.text.replace(/\n/g, '<br />');
    setMessages([...messages]);
  });
};

実際に動作させた結果は、以下のようになります。

まとめ

今回はOpenRouter.aiを使って、さまざまなLLMを利用する方法を紹介しました。OpenRouter.aiを使うことで、各種LLMを共通したAPIで利用できます。各LLMの品質や出力結果を確認するのに便利です。

OpenAIのSDKがそのまま使えますので、開発も容易です。ぜひ試してください。

OpenRouter

1. はじめに

2. 開発環境の準備

APIリクエストの基本

ストリーミングでの利用

簡単なチャットアプリのデモ

まとめ

関連