💬

OpenAI Assistants API Quickstart の紹介

2024/05/12に公開

はじめに

OpenAI Assistants API Quickstartは、Next.js 上で OpenAI の Asistants API を利用できるサンプルコードです。リポジトリは OpenAI が提供しているものです。

https://twitter.com/OpenAIDevs/status/1785807183864820209

Assistans API

Assistants API は、OpenAI が提供する API の 1 つで、対話型の AI を作成するための API です。例えば、質問応答、チャットボット、コーチング、サポート、教育、ゲームなどのアプリケーションを作成できます。

https://platform.openai.com/docs/assistants/overview

リポジトリをクローン

OpenAI Assistants API Quickstart のリポジトリをクローンします。

$ git clone https://github.com/openai/openai-assistants-quickstart.git
$ cd openai-assistants-quickstart

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 キーを設定

OpenAI の API キーを設定します。

環境変数ファイルを作成します。

$ copy .env.example .env
.env
# DO NOT COMMIT THIS FILE - IT WILL CONTAIN YOUR SENSITIVE KEYS.
# Instead, rename this file to ".env" instead of ".env.example". (.env will not be committed)

# Create an OpenAI API key at https://platform.openai.com/account/api-keys
OPENAI_API_KEY="sk-123..."
+OPENAI_API_KEY="sk-XXXXXXXXXXXXXXXXXXXXXXX"

# (optional) Create an OpenAI Assistant at https://platform.openai.com/assistants.
# IMPORTANT! Be sure to enable file search and code interpreter tools.
-OPENAI_ASSISTANT_ID="123..."

依存関係をインストールします。

$ pnpm install

動作確認

ローカルで動作確認します。

$ pnpm run dev

実行すると以下のような画面を出ます。「Create Assistant」をクリックし、Assistant ID を作成します。

alt text

作成した Assistant ID をコピーし、環境変数に追加します。

alt text

.env
# DO NOT COMMIT THIS FILE - IT WILL CONTAIN YOUR SENSITIVE KEYS.
# Instead, rename this file to ".env" instead of ".env.example". (.env will not be committed)

# Create an OpenAI API key at https://platform.openai.com/account/api-keys
OPENAI_API_KEY="sk-123..."
+OPENAI_API_KEY="sk-XXXXXXXXXXXXXXXXXXXXXXX"

# (optional) Create an OpenAI Assistant at https://platform.openai.com/assistants.
# IMPORTANT! Be sure to enable file search and code interpreter tools.
+OPENAI_ASSISTANT_ID="asst_XXXXXXXXXXXXXXXXXXXXXXX"

https://platform.openai.com/assistants にアクセスると、Assistant ID が作成されていることが確認できます。

alt text

再度、ローカルで動作確認します。

「Basic Chat」をクリックします。

alt text

会話してみます。

alt text

さいごに

OpenAI Assistants API Quickstart を利用して、Next.js 上で OpenAI の Asistants API を利用する方法を紹介しました。

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

https://github.com/hayato94087/openai-assistants-quickstart

参考

OpenAI の OpenAI Assistants API Quickstart 公式リポジトリです。

https://github.com/openai/openai-assistants-quickstart

Assistants API 公式ドキュメントです。

https://platform.openai.com/docs/assistants/overview

Discussion