概要
皆さんはもうすでに ChatGPT を利用されたことはありますでしょうか？
現在ではニュースにも取り上げられるほど有名になっているこちらの ChatGPT ですが、本家のチャット画面では多少操作しづらかったりシンプルすぎるがゆえに使いずらい場合があるかと思います。
そんな ChatGPT ですが、誰もが利用しやすいチャット形式の Web アプリとして公開されたサービスがありましたので、ぜひ一度ご紹介したいと思います。
今回ご紹介する OSS は、JavaScript フレームワークである Next.js を採用して ChatGPT の画面を利用しやすくした Web アプリ「Next.js ChatGPT」になります。
それでは早速こちらについて詳細を見ていきたいと思います。
目次
特徴
GitHub の README に本 OSS の特徴が挙げられていましたので、特に強みかと思う点について以下に記載します。
- OpenAI の GPT-4 に対応
- OpenAI の GPT-3.5 Turbo に対応
- AI によるリアルタイム応答
- 複数プログラミング言語のコード強調表示
- TypeScript、JavaScript、および HTML コード ブロックのコードを実行可能
- ファイルをドラッグドロップして実行可能
- ダークモード
まだまだありますので、詳細を把握したい場合は以下の README ページを参照ください。
利用手順
利用自体は簡単で、README ページに表示されている「DEMOページ」へアクセスして利用するか、もしくはリポジトリからクローンしてローカル環境で利用するかになります。
DEMO ページで動作確認する方法
以下の DEMO ページへアクセスします。
https://nextjs-chatgpt-app-enricoros.vercel.app/
ローカル環境で動作確認する方法
以下コマンドを実行し、リポジトリをクローンし、ローカル動作させます。
git clone https://github.com/enricoros/nextjs-chatgpt-app.git cd nextjs-chatgpt-app npm install npm run dev
Next.js ChatGPT 自体の設定など
上記いずれかの方法で「Next.js ChatGPT」を起動した後、OpenAI の API キーを聞かれますので、まだ取得されていない場合は以下サイトからユーザー登録して API キーを取得してください。
初めてアプリを起動した場合は以下のような画面が表示されますので、こちらの「OpenAI API Key」に、API キーを入力します。
Select Model のほうは、基本的に無料で利用する場合は「GPT-3.5 Turbo」でよいかと思います。
入力後、「AI purpose」でどのロールか聞かれますが、動作確認をする程度であれば「Developer」で問題ありません。
これで一通り準備ができましたので、画面下部にある「Type a messge...」に何か ChatGPT に聞いてみたいことを聞いてみましょう！
API キーの設定がされていれば回答が返ってきます！！
使用感
私自身もこちらの「Next.js ChatGPT」を早速触ってみました！
本家の ChatGPT ではシンプルすぎて少し見ずらい部分がありましたが、こちらの場合は LINE のやり取りみたいに直感的にわかりやすく ChatGPT を利用できそうでした。
「特徴」の章でも木佐がありましたが、ソースコードがブロックに囲まれ手強調表示されていたり、ダークモードも採用されていますので、エンジニアの方にとっても優しい設計がされていますね！
まとめ
今回は今話題の ChatGPT を JavaScript フレームワークである Next.js で画面を利用しやすくした Web アプリ「Next.js ChatGPT」をご紹介しました。
こちらの「Next.js ChatGPT」を利用することで、AI と本当にチャットをやっている気分になりますし、何より画面がきれいに整備されているので使っていて気持ちよかったです。
本家の ChatGPT の画面も良いですが、シンプルすぎて逆に醜い・使いずらいという方にとっては、こちらの「Next.js ChatGPT」が肌に合うかもしれません。
ぜひ一度こちらの OSS を利用してみてはいかがでしょうか？
