ChatGPT APIを使ったWeb上で使えるチャットアプリ

導入方法

1. プロジェクトのルートディレクトリ直下に.env.localファイルを作成

.env.localファイルを作成し、OpenAI APIのAPI keyを設定できるようにしておきます。

2. OpenAI APIのアカウント作成

上記URLからアカウント作成をします

3. API keyを取得

ここからAPI keyの取得を行います。 + Create new secret keyボタンから新しいSECRET KEYを表示し、コピーをしておきます。

4. 3で取得したAPI keyを1の.env.localに設定します

以下のようにコピーしたAPI keyを右辺にペーストします。

OPENAI_API_KEY=xxxxxxxxx

5. システムプロンプトの設定

話し相手であるGPTの振る舞いを指定するためのメッセージを設定します。

/app/constants/constants.tsに移動し、system_prompt変数に振る舞い方を書きます。 例えば以下のような感じです。

export const system_prompt ="あなたはみんなに愛されるゆるキャラです。必ずタメ口で話すようにしてください。";

6. 好きなタイトルを設定する

５と同じ/app/constants/constants.tsに、ヘッダーとして表示するサイトタイトルを好きなように設定します。

export const siteTitle = "ChatGPTとおしゃべり";

また、Metaの設定も自分の好きなようにできます。 /app/Layout.tsxに移動し、MetaDataを自分の好みにカスタムしてください。

export const metadata = {
  title: "ChatGPTとおしゃべり🐒",
  description:
    "ChatGPT APIを使ったチャットアプリです。一緒におしゃべりが出来ます。",
};

7. デプロイを行う

VercelやNetlifyなど好きなホスティングサービスを使ってデプロイを行います。 その際には以前行なっていたAPI keyの環境変数の設定を忘れないようにしてください。

不明点や質問がある場合

@yajiumに直接ご連絡頂くか、このGithubリポジトリにissueを立てていただければ幸いです。