はじめに

ChatGPTライクなUIを提供するOSSとしてChatbot UIがあります。
本記事では、Chatbot UIを導入し、Azure OpenAIを利用するまでの手順を記録します。

方針

Windows11のWSL2(AlmaLinux 9)を使ってChatbot UIを使えるようにします。

前提

Azure Open AIに任意のモデルをがデプロイされていることを前提とします。

環境

Azure Virtual MachinesにWindows11 24H2をD4as_v3で構築して作業していきます。
ローカルWindowsでも手順変わりなく実施できると思います。

なお、私が行った検証だとD2as_v3ではスペック不足でした。
それなりにスペックを要求されるようです。

手順

Azure OpenAIの設定値の取得

Chatbot UIの設定に利用するためメモしておきます。
Azure OpenAI Studioを開いてください。

エンドポイントとAPIキーの取得

「チャットプレイグラウンド」の「デプロイ」にChatbot UIで利用するモデルを選択します。
そして「コードの表示」を選択します。

「サンプルコード」で「キー認証」を選択します。

一番下までスクロールし、エンドポイントとAPIキーをコピーします。
エンドポイントを①、APIキーを②とします。

名前（deployment_name）の取得

「モデルデプロイ」のページからChatbot UIで利用するモデルの名前（deployment_name）を控えてください。
これを③として後ほど利用します。

WSL2のインストール

ここからは「ターミナル」でコマンドを実行していきます。
PowerShellでも問題ありません。管理者権限で実行してください。

WSL2の有効化

コマンド

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

仮想マシンプラットフォームの機能を有効化

コマンド

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

再起動

コマンド

Restart-Computer

WSLのアップデート

コマンド

wsl --update

WSL2をデフォルトに設定

コマンド

wsl --set-default-version 2

AlmaLinux 9のインストール

ダウンロード

ご自身のアーキテクチャに合わせたappxをダウンロードしてください、
それなりに時間がかかります。

Intel/AMD (x86_64)

Invoke-WebRequest -Uri https://wsl.almalinux.org/9/AlmaLinuxOS-9_latest_x64.appx -OutFile AlmaLinuxOS-9.appx -UseBasicParsing

ARM64 (AArch64)

Invoke-WebRequest -Uri https://wsl.almalinux.org/9/AlmaLinuxOS-9_latest_ARM64.appx -OutFile AlmaLinuxOS-9.appx -UseBasicParsing

ZIP化＆展開

コマンド

move .\AlmaLinuxOS-9.appx .\AlmaLinuxOS-9.zip; Expand-Archive .\AlmaLinuxOS-9.zip

インストール

2箇所ある'C:\wsl\AlmaLinuxOS-9'はインストール先となります。
環境に応じて任意の場所を指定してください。

コマンド

cd AlmaLinuxOS-9; mkdir -p 'C:\wsl\AlmaLinuxOS-9'; wsl --import AlmaLinuxOS-9 'C:\wsl\AlmaLinuxOS-9' .\install.tar.gz

結果確認

コマンド

wsl -l -v

結果

  NAME             STATE           VERSION
* AlmaLinuxOS-9    Stopped         2

AlmaLinux 9の初期設定

WSLの起動

コマンド

wsl --distribution AlmaLinuxOS-9

ユーザ、パスワード、グループ設定

各コマンドの<USER>は任意のユーザ名を指定してください。

コマンド

adduser <USER> && passwd <USER>

結果

Changing password for user <USER>.
New password:
Retype new password:
passwd: all authentication tokens updated successfully.

コマンド

usermod -G wheel <USER>

一般ユーザに変更

この後は作成したユーザで作業します。

コマンド

su <USER>

コマンド

cd ~

systemdの有効化

設定ファイルの存在確認

ないことを確認します。

コマンド

ls -la /etc/wsl.conf

結果

ls: cannot access '/etc/wsl.conf': No such file or directory

設定ファイルの作成

コマンド

sudo sh -c 'echo -e "[boot]\nsystemd=true" > /etc/wsl.conf'

設定ファイルの確認

コマンド

cat /etc/wsl.conf

結果

[boot]
systemd=true

WSLから切断

ユーザから抜けて、rootからも抜けて、ターミナルに戻ります。

コマンド

exit

コマンド

exit

WSLの停止

コマンド

wsl --terminate AlmaLinuxOS-9

WSLに再接続

コマンド

wsl --distribution AlmaLinuxOS-9

<USER>は任意のユーザ名を指定してください。

コマンド

su <USER>

コマンド

cd ~

パッケージの更新とアップグレード

コマンド

sudo dnf update -y && sudo dnf upgrade -y

Dockerのインストール

リポジトリの追加

コマンド

sudo dnf config-manager --add-repo=https://download.docker.com/linux/centos/docker-ce.repo

インストール

コマンド

sudo dnf install docker-ce -y

バージョン確認

コマンド

docker --version

結果

Docker version 27.3.1, build ce12230

起動

コマンド

sudo systemctl start docker

自動起動設定

コマンド

sudo systemctl enable docker

Dockerグループにユーザを追加

$USERはそのままでOKです。

コマンド

sudo gpasswd -a $USER docker

WSLから切断

設定反映のため切断します。

コマンド

exit

コマンド

exit

WSLに再接続

<USER>は作成したユーザ名を指定してください。

コマンド

wsl --distribution AlmaLinuxOS-9

コマンド

su <USER>

コマンド

cd ~

Node.js 22のインストール

リポジトリの追加

結果

curl -fsSL https://rpm.nodesource.com/setup_22.x | sudo bash -

インストール

コマンド

sudo dnf install nodejs -y

バージョン確認

コマンド

node --version

結果

v22.11.0

Gitのインストール

インストール

コマンド

sudo dnf install git -y

バージョン確認

コマンド

git --version

結果

git version 2.43.5

Chatbot UIのインストール

ホームディレクトリに移動

コマンド

cd ~

リポジトリのクローン

コマンド

git clone https://github.com/mckaywrigley/chatbot-ui.git

Chatbot UIのディレクトリに移動

コマンド

cd ~/chatbot-ui

依存関係のインストール

コマンド

npm install

supabaseのインストール

Chatbot UIのディレクトリに移動

コマンド

cd ~/chatbot-ui

インストール

公式はHomebrewですが、本記事ではnpxでインストールします。

コマンド

npx npm install supabase --save-dev

起動

コマンド

npx supabase start

設定値の表示

④～⑥の値をメモしておいてください。
次の手順で利用します。

コマンド

npx supabase status

結果

(略)
Started supabase local development setup.

         API URL: http://127.0.0.1:54321　→　(４)
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
  S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
          DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: XXXXX　→　(５)
service_role key: XXXXX　→　(６)
   S3 Access Key: XXXXX
   S3 Secret Key: XXXXX
       S3 Region: local

Chatbot UIの設定

Chatbot UIのディレクトリに移動

コマンド

cd ~/chatbot-ui

環境変数ファイルのコピー

コマンド

cp .env.local.example .env.local

環境変数の設定

最初の手順と、1つ前の手順で控えた①～⑥を記入します。
③について、対応するモデルがない場合は、適当なIDに記載してください。

例えば、GPT-4oは環境変数にありませんが、AZURE_GPT_35_TURBO_NAMEにGPT-4oの名前（deployment_name）を記載すると、
Chatbot UIのモデルで「GPT 3.5 Turbo」を選択した際に、GPT-4oが呼び出されるようになります。

コマンド

vi .env.local

.env.local

# Supabase Public
NEXT_PUBLIC_SUPABASE_URL=(４)
NEXT_PUBLIC_SUPABASE_ANON_KEY=(５)

# Supabase Private
SUPABASE_SERVICE_ROLE_KEY=(６)

(略)

# Azure API Information
AZURE_OPENAI_API_KEY=(２)
AZURE_OPENAI_ENDPOINT=(１)
AZURE_GPT_35_TURBO_NAME=(３)
AZURE_GPT_45_VISION_NAME=
AZURE_GPT_45_TURBO_NAME=
AZURE_EMBEDDINGS_NAME=

(略)

Chatbot UIの起動

Chatbot UIのディレクトリに移動

コマンド

cd ~/chatbot-ui

起動

コマンド

npm run chat

ブラウザアクセス

FWなどの設定は適宜行ってください。
外部に公開する場合は接続元IP制限を掛けることを強く推奨します。

URL

http://localhost:3000

Chatbot UIの初期設定

トップページ

「Start Chatting」を選択してください。

ユーザ作成

適当なメールアドレスとパスワードを入力し、「Sign Up」を選択してください。
登録メールなどは飛ばないので何でも良いですが、忘れないものを設定してください。

プロファイル作成1

スクリーンネームの類なので適当なユーザ名と表示名を入力してください。
デフォルトのままでもOKです。

プロファイル作成2

環境変数で設定している事項なので、何もせず「Next」を選択してください。

プロファイル作成3

「Next」を選択してください。

APIキー設定

トップページが表示されたら、左下の「プロファイル設定」アイコンを選択してください。

「API Keys」を選択し、Azure OpenAIの設定を開きます。
「Azure OpenAI API Key」に先に控えた②を入力し、保存してください。
これをしないと(なぜか)モデル選択ができません。

動作確認

モデルの選択

右上から利用するモデルを選択します。
環境変数にモデルの名前（deployment_name）を記載したもの選択してください。

動作確認

設定に誤りがなければモデルと対話できます。
下記画像では「GPT-3.5 Turbo」となっていますが、中身は「GPT-4o」となります。

以上でChatbot UIの構築は完了です。
おつかれさまでした。

参考文献など