Chatbot UI を自分のPCに導入する手順

2023年4月11日 18:01

［１］Chatbot UI とは

Bingに聞きました。チャットボットUI って知ってますか？
Bing>
McKay Wrigley12さんのchatbot-uiというGitHubのリポジトリを見つけました。Next.js, TypeScript, Tailwind CSSを使ってChatbot UI Liteの上に構築されたOpenAIのチャットモデル用の高度なチャットボットのキットです。ChatGPTのインターフェースと機能を模倣することを目的としています。

Bingとの会話。Deeplで翻訳

ChatGPTと同じ画面構成で、しかもそこに様々な機能が付加されていて、とても使いやすくなっています。課金はOpenAIの使用分だけ。（ChatGPT Plusの金額とは別です）

これは、[April 3rd, 2023]のメモです。導入先はWindows10。使ったツールはVScode1.75.1 。

［２］Chatbot UIをPCにコピーする前に、node.js（とnpm) を確認

（１）node.jsがなければインストールします。node.jsに含まれるnpmが必要です。

ダウンロードURL： https://nodejs.org/

node.jsのインストールが終わると、Windowsのシステム環境変数にnpmのパスが自動で登録されています。（もし、できていなかったら手動で登録しておきます）

（２）npmを最新のバージョンにします。

コマンドラインで、次のコマンドを実行します

npm install -g npm

コマンドの説明

「npm install -g npm」というコマンドは、基本的にnpmツールを、利用可能な最新バージョンに更新するよう指示するものである。npmをグローバルにインストールすることで、すべてのNode.jsプロジェクトでシステム全体を通して更新されたバージョンにアクセスできるようになります。

ChatGPT４に聞いてDeepl翻訳して抜粋

［３］Chatbot UI のリポジトリを、自分のPCの中に複製（クローン）する

ChatbotUIのレポジトリの複製（クローン）をローカルPCに作ります。

GitHubからChatbotUIのリポジトリをPCに複製（クローン）して動かす

（１）ChatbotUIのクローンURLを取得する

McKay Wrigley12さんのchatbot-uiはこちら
mckaywrigley/chatbot-ui: An open source ChatGPT UI. (github.com)

ここから、図の手順でクローンURLをコピーします。
［Code］クリック > [Local] タブ > [CitHub CLI] > urlをコピー

（２）VScode でリポジトリを複製（クローン）するフォルダを開き、そこにリポジトリのクローンを作成する。

git > ［リポジトリのクローン］ > 上部のテキストボックスに、コピーしておいたクローンURLを貼り付け > ［GitHubから複製］をクリック

インストールが終わると「chatbot-ui」フォルダができて、インストールされたファイルが表示されます。

（３）環境設定ファイル (.env.local) を、編集する

エクスプローラに.env.local.example があるので、名前を.env.localに変えて、自分のOpenAIキーを入れます。

［４］Chatbot UI を使う

VScodeでターミナル（シェル、コマンドプロンプト）を出しておきます
Windows10の場合 … Ctrl+@ ( 表示/非表示のtoggle)

（１）起動する　（npm i, npm run dev)

初めて動かすときは、npm i を実行

npm i

npm i コマンドは、プロジェクトに必要な依存関係をインストールするために使用され、プロジェクトをリポジトリからクローンまたはダウンロードした後に1回だけ実行する必要があります。

最初のインストール後は、プロジェクトの依存関係に変更がない限り、「npm run dev」を実行する前に「npm i」を毎回実行する必要はありません。

ただし、後述の「npm run dev」を実行して問題が発生した場合は、「npm i」を再度実行して、必要な依存関係がすべて最新であることを確認します。

ChatGPT3.5 と Deepl 翻訳

Chatbot UI を起動するために、npm run dev を実行

npm run dev

ChatbotUIが起動し、ターミナルのログの中に、下記のようにURLが現れます。

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

アクセス用のURL

（２）ブラウザで使う（http://localhost:3000）

VScodeで、上述の http://localhost:3000 の文字にマウスをのせて、Ctrl + Click

Chatbot UI はいろいろと至れり尽くせり。
ChatGPTの画面にそっくりで、わかりやすいです。
・チャット履歴はフォルダを作ってまとめることができる
・チャット履歴を検索できる
・プロンプトを登録できる（チャットボックスの先頭で / を押すと呼び出せる)
・プロンプトもフォルダを作ってまとめることができるし、検索もできる
・システムプロンプトが入力できる
・履歴のエクスポートもインポートもOK
など

（３）終了する

VScodeのターミナルで Ctrl+c を押します。
「バッチジョブを終了しますか」と聞かれるので、 y を押して終了します。

バッチジョブを終了しますか (Y/N)?
y

終了メッセージ

［５］注意

(1) パッケージの更新：頻繁に更新されるので要チェックです。 (git status, git pull)

(2) 課金に注意：使用量に気をつけましょう。

［６］補足: ポート番号が自動変更されたときの対応

トラブル：
前回まではport 3000を使用していたのに、
次のようなメッセージがでて、portが3001に変わりました。
結果、3000ポートで使っていたデータにアクセスできなくなってしまいました。

warn - Port 3000 is in use, trying 3001 instead.
ready - started server on 0.0.0.0:3001, url: http://localhost:3001
info - Loaded env from C:\dev\chatbot-ui\.env.local
(node:17312) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

ポートが変わったときの警告

（ChatGPT4に聞いて使用中の3001ポートをKillする方法を教えてもらったけれど）一番簡単な解決法で解決。--> 再起動。