ソフトウェア開発者のための OSS、まとめてみました！

ソフトウェア開発を行なっている自分が、個人的に面白いと思ったプログラムの最新技術や、オープンソースソフトウェア（OSS）をまとめています！

MENU

ChatGPT を Next.js with TypeScript で Web アプリ化したOSS「Chatbot UI」！

articles

概要

今回も ChatGPT を利用した Web アプリについて紹介したいと思います。

最近話題の ChatGPT を駆使した Web アプリは世の中にたくさん出てきていますが、今回は最近の Web アプリ開発者ならば聞き馴染みのあるフレームワーク、プログラミング言語で構成されています。

今回紹介する OSS は、Web アプリ開発のモダンなフレームワーク Next.js と TypeScript、TailwindCSS を利用して作成された「Chatbot UI」になります！

今回の Web アプリですが、ChatGPT がとても使いやすくなっている Web アプリになっています！

それでは早速中身についてみていきましょう。

目次

https://twitter.com/i/status/1636103188733640704

特徴

特徴としては以下の点が挙げられていましたのでこちらにも記載します。

  • ライトモード/ダークモード切替
  • 会話データのローカル保存
  • マークダウンサポート
  • アプリに OpenAI API キー追加機能
  • 会話情報の命名・会話の検索機能
  • GPT-4 サポート、などなど

上記に挙げた内容はほんの一部ですので、より詳細について把握されたい場合は GitHub の README を参照ください。

利用手順

デプロイ方法については以下の 3 パターンがあるようです。

  • Vercel での配備
  • Docker での配備
  • ローカル環境での配備

それぞれ見ていきましょう。

Vercel での配備

以下のリンクから「Chatbot UI」を Vercel 上に配備することができます。

vercel.com

Docker での配備

Docker で配備する場合は以下のコマンドより可能です。

一部 OpenAI API キーを指定する部分がありますので、そちらは各自のキーを入力ください。

docker build -t chatgpt-ui .
docker run -e OPENAI_API_KEY=xxxxxxxx -p 3000:3000 chatgpt-ui

ローカル環境での配備

ローカル環境で配備する場合は以下のコマンドより可能です。

  1. リポジトリのクローンを行い、Node モジュールインストール
   git clone https://github.com/mckaywrigley/chatbot-ui.git
   cd chatbot-ui
   npm i

  1. chatbot-ui ルート配下に .env.local ファイルを作成し、以下のように OpenAI API キーを記述します。 .env.local OPENAI_API_KEY=xxxxxxxx

  2. ローカル環境で Web アプリを起動

   npm run dev
  1. 起動後、http://localhost:3000 へアクセス

使用感

早速私もこちらの「Chatbot UI」を使用してみました。

配備方法も簡単なので特に苦も無くすぐに配備できました。

配備後、上図のように適当な質問文を記載しましたが、ChatGPT から返答がきれいな UI で帰ってきていることがわかります！

シンプルな UI のため、特に使いづらいなどなく直感的に操作できました。

ちなみにライトモードの時の UI は以下の感じです。

また、「Chatbot UI」について UI を変更したい場合は以下のソース群を修正するとよいと README に記載があり、開発者にとっても勉強になるのでとても助かりますね！

  • チャットのインターフェースを変更するなら components/Chat
  • サイドバーのインターフェースを変更するなら components/Sidebar
  • システムプロンプトを変更するなら utils/index.ts

まとめ

今回は Web アプリ開発のモダンなフレームワーク Next.js と TypeScript、TailwindCSS を利用して作成された「Chatbot UI」をご紹介しました。

最近の Web アプリ開発用フレームワークだけあって、とてもサクサク動作し見た目もきれいなため、使っていてとても気持ちよかったです。

ChatGPT を利用した Web アプリなどは巷にたくさんあると思いますが、Next.js と TypeScript を使用したものはまだ数えるほどしか OSS 上に存在しないと思うので、どのように作成されているかなどソースから追ってみるのも面白いかもしれませんね。

もし ChatGPT に興味がある方、もしくはどのように ChatGPT を利用した Web アプリを Next.js で実現しているのだろうかなどと知りたい方は、ぜひ一度こちらの「Chatbot UI」を試してみてはいかがでしょうか？

ライセンス

MIT License

リンク

www.chatbotui.com

github.com