いろんな生成AIモデルが使えるChatGPTライクなサイトをローカル構築しよう（ChatBot UI）

こんにちは。
近年生成AIが注目されていますよね。マルチモーダルへの対応などもあって、一層世間の期待が高まっている印象です。

モデルについても、GPTだけでなくGeminiやClaude3など様々なLLMが登場していています。**簡単にモデルを比較したい、使い分けが大変、一つのサイトにまとまっていてほしい**、そう思いませんか？

そこで今回は、いろんなモデルを一つのサイトで使える「**[ChatBot UI](https://github.com/mckaywrigley/chatbot-ui)**」をローカルで構築する方法をご紹介します。

ちなみに完成図はこんな感じです。
もちろんパラメータ編集やプロンプトの保存などいろんな機能も使えちゃいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632520/add49668-8a91-2616-bd32-b695dd69af0d.png)

## 環境
Windows(WSL), node(v20.11.1), npm(v10.2.4)

## 導入手順
[Local QuickStart](https://github.com/mckaywrigley/chatbot-ui?tab=readme-ov-file#local-quickstart)に従って導入していきます。
#### ChatBot UIのダウンロード
作業ブランチ下に`git clone`してきます。
```bash
git clone https://github.com/mckaywrigley/chatbot-ui
```
#### 必要パッケージのインストール
node(v20.11.1)でインストールできました。
```bash
npm install
```

:::note warn
**huskyのインストールに失敗する場合**

Permission Deniedされてインストールに失敗する場合、以下のコードを実行すると動作するかもしれません。（自分は解決しました）
```bash
chmod +x ./node_modules/husky/lib/bin.js
```
:::

#### Docker環境の構築
本来Docker for Windowsでインストールしてしまえばいいのですが、WSL環境でDockerを動かしたかったので、[WSL(Ubuntu)にDocker環境を構築する](https://zenn.dev/thyt_lab/articles/fee07c278fcaa8)を参考にしました。（ほぼそのままです）

- パッケージの最新化
```bash
sudo apt update
sudo apt upgrade -y
```

- 必要パッケージのインストール
```bash
sudo apt install ca-certificates curl gnupg
```

- GPGキーの登録
```bash
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg
```

- aptの参照リポジトリを追加し、Dockerをインストール
```bash
echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```
```bash
sudo apt update
sudo apt install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```

- ユーザの追加
```bash
sudo usermod -aG docker $USER
```

#### Supabase CLIの開始
[公式サイト](https://supabase.com/docs/guides/cli/getting-started?platform=npx#installing-the-supabase-cli)によれば、npxコマンドが使えるので使います。
もしかしたら、rootでないと動かないかも。
```bash
npx supabase start
```
このとき表示される、`API URL`, `anon key`, `service_role key`をコピーしておきましょう。

#### シークレット情報の設定
APIキー等のシークレット情報は、`.env.local`に設定します。
`.env.local`の例が`.env.local.example`ですのでコピーして開きます。
```bash
cp .env.local.example .env.local
vi .env.local
```
コピーした値を貼り付けます。
```
NEXT_PUBLIC_SUPABASE_URL=***API URLの値***
NEXT_PUBLIC_SUPABASE_ANON_KEY=***anon keyの値***
SUPABASE_SERVICE_ROLE_KEY=***service_role keyの値***
```

#### アプリの起動
```bash
npm run chat
```
起動したら`http://localhost:3000`からアクセスできます。

#### アプリの終了
Ctrl+Zで`npm run chat`を終了し、supabaseもstopします。
```bash
npx supabase stop
```

## 初期セットアップ
まずこんな画面が表示されるかと思います。
自分のEmailとPasswordを入力してSign Upをクリックしましょう。
適当なアドレスとパスワードでいいと思います。（が、脆弱なパスワードだと弾かれます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632520/76687b7c-416f-73d8-e253-61cf927143fd.png)

次に、ユーザ名と表示名を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632520/8ca9889e-f96b-d231-d337-81e521272cff.png)

次に、API Keyを設定します。
GPTをはじめ、いろんなAPIに対応してます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632520/981b3830-26bd-dde8-0404-dd0b286fa25d.png)

完了画面です、Nextを押してアプリ画面に進みましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632520/8d30e285-168c-83d0-225b-288024d77865.png)

無事アプリが表示されました。
触ってみれば使い方は分かると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632520/7087d401-c0e9-b6b9-fdc5-370b422dc7e0.png)

## 参考サイト
[ChatBot UI](https://github.com/mckaywrigley/chatbot-ui)
[WSL(Ubuntu)にDocker環境を構築する](https://zenn.dev/thyt_lab/articles/fee07c278fcaa8)
[Supabase CLI](https://supabase.com/docs/guides/cli/getting-started?platform=npx#installing-the-supabase-cli)