【Next.js】OpenAI APIを導入して実際に呼び出してみた|API Key・クレジット設定

OpenAI導入_サムネイル Programming

OpenAIを呼び出す

翻訳アプリの一番の機能であるOpenAIをつけてみました。
作業の前に、API Keyは絶対に公開しないように注意しましょう。

OpenAI API Platform

まず、OpenAI API Platformでプロジェクトを作成し、API Keyを発行します。

🔗OpenAI-Platformへ接続

API Keyには権限を設定できます。

今回は翻訳処理でOpenAI APIを呼び出すため、必要な権限だけを設定しました。

ヒョニ
ヒョニ

私はDefault projectに作ってしまいましたが、Projectを生成することも可能です!

Permissionsはテスト用だとAllでもいいかと思いますが、私は制限をかけました。

どんなプロジェクトにするかによってPermissionの内容が違ってくるので、AIと相談したり調べたりしながら必要な権限だけチェックしましよう。

発行したAPI Keyは、コードに直接書かず、環境変数で管理します。

API Keyが発行されたら、すぐに.env.localに設定してください。API Keyは後から画面上で確認することができないため、発行時に安全な場所で管理しましょう。

Package

OpenAIの公式SDKをインストールします。

npm install openai

OpenAIを呼び出して確認する

ここまで終わったら、最後にOpenAIを実際に呼び出して、しっかり反応するかテストしてみます。

ファイル追加

root直下に`test-openai.ts`を作成します。

コード作成

以下のようにコードを追加します。

モデル名は、API Platformで利用できるモデルの中から選択しました。

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});


async function testOpenAI() {
    const response = await openai.responses.create({
        model : "gpt-5.6-terra",
        input : "Hello, how are you?"
    })

    console.log("OpenAI Response:", response.output_text);

}

testOpenAI();

テスト実行

ターミナルに以下を実行します。

node --env-file=.env.local test-openai.ts

実行結果

429 You have no credits remaining.
code: 'credit_balance_exhausted'

今回はまだAPIクレジットを追加していなかったため、このエラーが返ってきました。

ただし、API Keyを使ってOpenAI APIへのリクエスト自体は実行できていることを確認できました。

あとはAPIクレジットを追加すれば、実際のレスポンスを確認できます。

APIクレジット追加+テスト実行

OpenAI APIは、ChatGPTのサブスクリプションとは別に料金が発生します。

現在は、APIを利用するためにクレジットを事前に購入する方式が利用できます。最初の購入は$5から可能なので、まずは必要な分だけ少額で始めてみようと思います。

また、Auto-recharge(自動チャージ)は設定時に有効になっている場合があるため、必要なければOFFにしておくと安心です。

APIクレジットの追加方法

  1. まずは、BilingOverviewページへ接続する
  2. 「Add to credit balance」または「Buy credits」を選択する
  3. 追加する金額を設定する
    • 金額は$5から設定できます。※デフォルトでは$10が設定
  4. Auto-recharge(自動チャージ)をOFFにする
    • 自動的に追加料金が発生するのを避けたい場合は、ここを確認しておくと安心です。

これでAPIクレジットの追加は完了です。

再度テストを実行

クレジットを追加したので、先ほどと同じコマンドをもう一度実行します。

node --env-file=.env.local test-openai.ts

今度は無事にOpenAIからレスポンスが返ってきました。

APIresponse

最初はクレジット不足でエラーになりましたが、クレジットを追加することで、無事にOpenAI APIからレスポンスを取得できました。

これで、TransFlowからOpenAI APIを呼び出す準備ができました。

次は、実際にOpenAIを使ってSegmentの文章を翻訳する処理を実装していきます。

タイトルとURLをコピーしました