ChatGPT

今日はVueフレームワークを使用した簡単なチャットアプリを紹介します。初めてChatGPTを使う人にも分かりやすく基本だけをまとめた簡単なものです。しかし、AIが今までの会話を記憶しているように構築できるので、過去の会話を参考にした質問も可能になります。 もちろん、記録を残したい場合は、別にデータベースなどを作成しないとブラウザがリロードした際にすべて初期化されてしまいます。 完成したコードはGitHubのリポジトリから見てください。 完成したものはこんな感じになります。 先に知っておくべきこと User-Agent エラー 上記の記事で紹介したNodeでChatGDPを使ったCLIではopenaiのライブラリを使いました。しかし、クライアント側で実行できるJavaScriptアプリでnpm i openaiでインストールしたライブラリを使ってOpenAIををコールをかけると下記のエラーが出ます。 これは前回の記事で使用したopenaiライブラリはより安全なNode.jsやPythonなどのサーバー側からのコールを許可したもののみになるからです。 今回はaxiosを使ってコールをかけますが、下記にopenAIのエンドポイントにHTTPリクエストを送るaxiosを使わないサンプルコードを紹介しておきます。 今日の記事では、axiosのライブラリを使って作業をするので自分の好みでコードを変えてください。 Vueのセットアップ ではViteを使ってVueのプロジェクトを作成します。 次にaxiosをインストールします。 では、テキストエディタを開いて、早速コードを書いていきます。 コードを書こう では以下のようにApp.vueにコードを書いていきます。 App.vue 補足： 最後にスタイルを追加して完了です。 アプリの検証とまとめ ではnpm run devのコマンドでアプリを起動してテストしてみましょう。 今日は基本のOpenAI APIの使い方を紹介しました。 OpenAIのAPIを使用すると、さまざまなタスクとアプリケーションを構築できます。以下にいくつかの例を挙げます： このように色々なことに活用できそうなので今後も注目が集まりそうです。