🐙

【GPT3.5turbo】NextJsで動くGPT3.5turbo【#１Setup】

2023/04/17に公開

Next.js

OpenAI

tech

【#１Setup】

YouTube:https://youtu.be/qh12gK-KO8w

https://youtu.be/qh12gK-KO8w

今回は「GPT3.5turbo」を「NextJs」に組み込む方法について解説します。

  "dependencies": {
    "@types/node": "18.15.11",
    "@types/react": "18.0.35",
    "@types/react-dom": "18.0.11",
    "autoprefixer": "10.4.14",
    "eslint": "8.38.0",
    "eslint-config-next": "13.3.0",
    "next": "13.3.0",
    "openai": "^3.2.1",
    "postcss": "8.4.22",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.1",
    "typescript": "5.0.4"
  }

まずはセットアップから行います。

https://nextjs.org/docs#automatic-setup

npx create-next-app@latest --typescript

こちらのセットアップでは上記コマンド実行時に
「Tailwind css」もインストールしています。

ここまでできましたら、

https://openai.com/

メニューの「Developers」から「Documentation」のページを表示します。

右上にアカウントの表示がされるのですが
アカウント登録をしていない場合は先にこちらの登録から行います。
登録時に電話番号を入力しコードを受け取る必要があります。

ここまでできましたら、
メニューの「API reference」をクリックします。

そして、

npm install openai

こちらのライブラリをインストールします。

インストールができましたら、
右上のアカウントの部分をクリックして
「View API keys」をクリックします。

初回はAPIKEYがありませんので、
「Create new secret key」のボタンを押して、
「Secret key」を作成します。

こちらのキーを環境変数で管理しますので
NextJsアプリの一番上の階層に「.env.local」を
作成して以下のファイルを作成します。

.env.local

OPENAI_API_KEY="sk-sfg........................................."

ここまでできましたら、
セットアップは完了です。

【#１Setup】

Discussion