ChatGPTのAPIにリクエストをする実装

[komaitaira]

概要

chatgptのapiにリクエストをして、返ってきたレスポンスを画面に表示するようにした

対応の詳細

• libにopenapiのapiにリクエストをする関数を実装（lib/callChatGpt.js）
• カスタムフック（hooks/useChatGpt.js）を実装し、その中でcallChatGptを呼び出すようにする
• 返ってきたレスポンスをApp.jsに表示（レスポンスが返ってくるまでのローディングを仮実装）

レビュー観点

• コミット順に見ていくとわかりやすいかもです https://github.com/Apocalyptic-Wonderboiled/wonder-app/pull/11/commits
• 関数名もっと良さそうなのあれば意見いただきたいです！
• libに実際にリクエストする処理を切り出したが、その辺問題なさそうか
  • 切り出した理由は、仮にテストを書くとしたらapiリクエスト部分だけ切り出された方が書きやすいのと、テストスコープが限定されると考えるため（なおテストは書いていない）
  • 使い回しが効きやすいようにしたかったため（なお使い回しする予定は今のところない）

動作確認

• npm installをしてopenapiのライブラリをインストールする
• .envをプロジェクトルートに配置し、apiキーを設定する

REACT_APP_OPENAI_API_KEY=ここにapiキーを貼る

2023-08-26.15.56.46.mov

その他

補足ですが、gpt4系から書き方が変わったようでモブプロの時と若干異なる実装になっています！
https://github.com/openai/openai-node#usage
delete configuration.baseOptions.headers['User-Agent'];という記述も不要になりました🙏
openai/openai-node#6 (comment)

[yuki-snow1823]

動いた！！！すげ〜〜〜。

何個かコメントしました！

[yoshi0202]

通りすがりなのでスルーでも！

[kanp7]

承認します！