ChatGPTアプリを作ってみた

wago·
公開:2024/2/22

ReactのWebアプリを触ることがあったので、OpenAIのchat-completion APIで遊ぶついでに勉強も兼ねてReactでChatGPT劣化アプリを作成してみた

成果物

GitHub - wagowa5/chatgpt-react-app: Reactの勉強
github.com

やったこと

技術書店オンラインでちょうどよくやりたいこととレベルがマッチしていそうな本を発見できたので、この本をまずはそのまま真似しました。

ChatGPTアプリを作って学ぶReact：philosophy
techbookfest.org

  • 本では最後にRaspberryPiで公開していましたが、RaspberryPiを用意するよりAWSを使うほうが早かったのでS3とCloudFrontで公開

  • 本通りだとAPIキーがベタ書きされているのでローカルでのみの公開とするよう注意書きがあったので、OpenAI API部分をAPIGatewayとLambdaに変更しAPIキーのベタ書きをやめました

    • (APIGatewayにキー設定はしていないのでキー流出はないがAPIを誰でも使えてしまうのは問題ではある)

  • せっかくAPIGatewayとLambdaにしたのでWebSocketでstream表示できるように改修してみた

改善点

  • API Gateway

    -APIキーを設定

  • Lambda

    -OpenAI ChatCompletionsのエラーハンドリング

    -チャット履歴を保存できるようにする(RDSの導入など)

  • React

    -API GatewayのAPIキーを環境変数で管理できるようにする

    -チャットを複数管理できるようにする

@wago
wago