［１］Chatbot UI とは

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

コマンドの説明

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

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

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

npm run dev

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

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

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

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

（３）終了する

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

［５］ 注意

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

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

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

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

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