Zenn
🙆

OpenAI の開発者クイックスタートを実施

2024/05/16に公開
Node.js
TypeScript
OpenAI
tech

はじめに

OpenAI のクイックスタートには、cURL、Python，Node.js の利用方法が記載されています。ここではクイックスタートの Node.js + TypeScript の利用方法を試してみます。

https://platform.openai.com/docs/quickstart?context=node

作業プロジェクトの準備

TypeScript の簡易プロジェクトを作成します。

package.json を作成

まず、package.json を作成します。

$ mkdir -p node-openai
$ cd node-openai
$ pnpm init

下記で package.json を上書きします。ポイントは scripts に 3 つのスクリプトを追加しています。typecheck で型をチェックし、dev でローカルで動作確認、build でトランスパイルします。

package.json
{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "typecheck": "tsc --noEmit",
    "dev": "ts-node index.ts",
    "build": "tsc"
  },
  "keywords": [],
  "author": ""
}

TypeScript & ts-node をインストール

TypeScript と ts-node をインストールします。

$ pnpm install -D typescript ts-node @types/node

TypeScriptの設定ファイルを作成

tsconfig.json を作成します。

$ npx tsc --init

tsconfig.json を上書きします。

tsconfig.json
{
  "compilerOptions": {
    "target": "es2022",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop":true
  },
  "include": ["**/*.ts","**/*.js"],
  "exclude": ["node_modules", "dist"]
}

git を初期化します。

$ git init

.gitignore を作成します。

$ touch .gitignore
.gitignore
# dependencies
node_modules

動作確認コードを作成

動作を確認するためのコードを作成します。

$ touch index.ts
index.ts
console.log('Hello, World');

型チェック

型チェックします。

$ pnpm run typecheck

動作確認

動作確認を実施します。

$ pnpm run dev

Hello, World

コミットします。

$ git add .
$ git commit -m "feat:初回コミット"

OpenAI の APIキーの取得

OpenAI の　API キーを取得します。

https://platform.openai.com/account/api-keys

「Log in」からログインします。

Alt text

「Craete new secret key」から新規に API キーを作成します。

Alt text

名称ををつけて、「Create secret key」をクリックして API キーを作成します。

Alt text

「API キー」をコピーして、「Done」をクリックしてクローズします。

Alt text

クレジットカードを登録

クレジットカードを登録します。クレジットカードを登録することで、API キーを利用できます。

https://platform.openai.com/account/billing/overview

Settings -> Billing で Billing の設定画面に遷移し、「Add payment details」をクリックします。

Alt text

「Individual」をクリックします。

Alt text

クレジットカード情報を入力し、「Continues」をクリックします。

Alt text

「Initial credit purchase」でチャージする金額を設定します。

Alt text

「Confirm payment」をクリックし、チャージを完了します。

Alt text

「Billing」を確認すると、チャージが完了していることが確認できます。

Alt text

月額の利用上限と通知上限を設定

月額の利用上限を設定できます。月額の利用上限を超えた場合は、API リクエストはリジェクトされます。また、月額の利用が一定のしきい値を超えた場合メールで通知する設定もできます。ここでは、どちらの上限金額も 10 ドルを設定します。

「Limits」をクリックします。「Set monthly budget」で月額の利用上限、「Seet an email notification threshold」で月額利用が一定のしきい値を超えた場合の通知上限を設定します。問題なければ、「Save」をクリックし保存します。

Alt text

OpenAI の APIキーの設定

.env ファイルを作成します。

$ touch .env
.env.local
OPENAI_API_KEY='your-api-key-here'

.env.local.example ファイルを作成します。

$ touch .env.local.example
.env.local.example
OPENAI_API_KEY='your-api-key-here'

.gitignore に .env*.local ファイルを追加します。

$ vi .gitignore
.gitignore
+# env files
+.env*.local
+.env

環境変数を ts-node で読み込むために、dotenv をインストールします。

$ pnpm install -D dotenv

インストール

OpenAI の Node.js のライブラリをインストールします。

$ pnpm install openai@latest

コードを作成

OpenAIのAPIを実行するコードを作成します。

今回はChat Compoletions APIを利用します。

Chat Completions APIの簡易説明はこちらにあります。

https://platform.openai.com/docs/guides/text-generation/chat-completions-api

今回は試しに動かしてみる程度なので、必要な部分だけ説明します。

Chat Completions API は、ユーザーとの対話をシミュレートするために設計されています。ユーザからのメッセージを入力として受取、モデルが生成したメッセージを出力として返します。

項目 説明
messages これまでのユーザーとアシスタントのメッセージをリストとして指定します。アシスタントとはボットです。
role メッセージの役割を指定します。system、assistant または user が指定できます。
system contentを通じてを通じて達成するための目的、ガイドラインを提示します。
user ユーザーがアシスタントに送信するメッセージをcontentを通して表します。
assistant アシスタントからの返答をcontentを通して表します。
model 対話を生成するのに利用するモデルを指定します。今回は、gpt-3.5-turbo を指定します。
index.ts
import "dotenv/config";
import OpenAI from "openai";

const openai = new OpenAI();

async function main() {
  const completion = await openai.chat.completions.create({
    messages: [
      {
        role: "system",
        content: "あなたは日本の童話を語ってくれるアシスタントです。",
      },
      {
        role: "user",
        content: "桃太郎の話を聞きたいです。",
      },
    ],
    model: "gpt-3.5-turbo",
  });

  console.log(completion.choices);
}

main();

実行します。しっかり、桃太郎の話を返してくれました。

$ pnpm run dev

[
  {
    index: 0,
    message: {
      role: 'assistant',
      content: '桃太郎は、日本の有名な民話の一つです。その話は次のようになります。\n' +
        '\n' +
        'むかし、遠い昔、ある村でおじいさんとおばあさんが住んでいました。ある日、おばあさんが川で洗濯をしていると、川を流れてきた大きな桃を見つけました。おばあさんは桃を持ち帰り、おじいさんと一緒に桃を切って中を見ると、中から立派な赤ん坊が現れました。おじいさんとおばあさんは驚きながらも、その赤ん坊を育てることにしました。\n' +
        '\n' +
        '成長したその子供は、桃太郎と名付けられました。桃太郎はとても元気な子供で、ある日、村を荒らす鬼退治のために出かけることを決意します。おじいさんとおばあさんは心配しつつも、桃太郎に幸運を祈ります。\n' +
        '\n' +
        '桃太郎は、おじいさんとおばあさんが用意してくれたお団子と桃を持ち、犬・猿・キジを仲間にして、鬼の住む鬼ヶ島へ向かいました。途中、桃太郎たちはたくさんの困難に立ち向かいながらも、団結して協力し、ついに鬼を倒すことに成功します。\n' +
        '\n' +
        '帰り道、桃太郎たちは喜びを胸に帰村し、村人たちはその勇敢さに感動しました。そして、桃太郎と仲間たちはその後も村を守り続け、村人たちは平和な暮らしを送ることができたと言われています。\n' +
        '\n' +
        '桃太郎の話は、勇気や団結、友情の大切さを教えてくれる素敵な童話です。'
    },
    logprobs: null,
    finish_reason: 'stop'
  }
]

レスポンス内容の項目の説明はこちらです。

項目 説明
messages これまでのユーザーとアシスタントのメッセージをリストとして指定します。アシスタントとはボットです。
role メッセージの役割を指定します。system、assistant または user が指定できます。
assistant アシスタントからの返答をcontentを通して表します。
logprobs 説明を省略します。
finish_reason モデルが生成したメッセージの終了理由を示します。stop は、モデルが生成したメッセージが終了したことを示します。

コミットします。

$ git add .
$ git commit -m "初期コミット"

まとめ

OpenAI の API を利用して、簡単な対話を行うことができました。今後は、より複雑な対話を行うために、より多くの API を利用していきたいと思います。

作業リポジトリはこちらです。

https://github.com/hayato94087/node-openai

参考

https://platform.openai.com/docs/quickstart?context=node

Discussion