作成日：2024年5月19日(日)
更新日：2024年8月31日(土) resouce does not existへの対処
更新日：2025年3月9日(日) o1/o3 serise対応版のご紹介追加
１．はじめに
Azure App Serviceなどのクラウドサービスを使用して会社で生成AIのチャットボットシステムを管理していると、バグフィックスなどの動作確認のために開発環境が必要になります。また、同じ作業を行う人材を育成する際にも、ローカルPC環境で動作するチャットボットは初学者向けの練習の場となります。 Mckay Wrigley氏が作成したLegacyブランチには多少問題があるため、このページでは、Qiita記事「Chatbot UI legacyの問題」で作成したFork版のChatbot UIをローカル環境で動作させるための構築手順をまとめます。
この記事は作成から日数が経過しておりますが、2025年3月9日(土)に@kekekekentaさんがChatbot UI legacyをo1/o3 seriseに対応させた記事「Chatbot UI (legacy) を o3-mini や GPT-4.5 Preview に対応してみた（APIバージョン2025-02-01-preview）」を作成されていますので、最新版をご希望の型はそちらを参照ください。
丁度、会社で、「Azure OpenAI の推論モデル」の記事でChatbot UIの利用をあきらめようとしていたところでしたので、貢献に感謝いたします。
２．必要資材
開発環境として必要な資材を、ローカルPC環境としてWindows 10/11を想定して以下にまとめます。以下の組み合わせ以外でも開発は可能ですので、私が準備した環境を参考にするという観点からのまとめであることをご理解ください。
| No | アプリケーション | 説明 |
|---|---|---|
| 1 | Git for Windows | バージョン管理ツールで、WindowsでGitを使うためのアプリケーション |
| 2 | TortoiseGit | Gitクライアントで、GUIを通じてGitの機能を利用できます |
| 3 | Node.js | JavaScriptのランタイムで、サーバーサイドでJavaScriptを実行可能にします |
| 4 | Visual Studio Code | コードエディタで、多機能開発ツールとして人気があります |
３．Chatbot UI legacyとは
Chatbot UI legacyはMckay Wrigley氏が2024年4月にGitHubで公開を始めたオープンソースソフトウェアのWeb UIチャットボットシステムです。このソースコードはNext.js(Node.js)で書かれており、OpenAIのLLM（Large Language Model）のAPI（Azure OpenAI Service）に接続して動作します。
現在の最新バージョンはChatbot UI Version2.0.0です。しかし、2023年4月20日にローンチされたシンプルな旧バージョンは、GitHUBのlegacyブランチに残されています。残念ながら、Mckay Wrigley氏が作成したLegacyブランチは、2023年4月5日 1:09:19のコミットをベースにしているため、そのままでは問題が発生します（「モデルの取得中にエラーが発生しました」というエラーメッセージが表示され、動作しません）。
legacy版を安定させる方法は2024年5月2日(水)のQiita記事「Chatbot UI legacyの問題」を参照してください。
①Chatbot UI legacyの問題を整理したQiita記事
②対策を講じたFork
③Forkに取り込んだissues
| No | 区分 | 題名 | 内容 | 備考 |
|---|---|---|---|---|
| 1 | Issues | https://github.com/mckaywrigley/chatbot-ui/issues/316 | chatbot UIからの応答が無条件に1,000トークン付近で切れてしまう問題の対策です。utils/server/index.tsのmax_tokensがWeb UIで変更できず（デフォルトで1,000に固定されているため、LLMからの応答が1,000トークン毎に切れてしまいます。）「続けてください」と入力することで回避は可能ですが、かなり面倒なので対策しました。 | 2024年1月10日にVer2.0.0にマージされているようです。 |
| 2 | Azure OpenAI gpt-35-turbo-16k | Azure OpenAIのgpt-35-turbo-16kモデルの追加 | types/openai.tsにAzure OpenAIのgpt-35-turbo-16k、gpt-4、gpt-4-32kを追加しています。これによりモデルの切り替えも可能です。 | |
| 3 | SyntaxError: Unexpected token 'D', "[DONE]" is not valid JSON | https://github.com/mckaywrigley/chatbot-ui/issues/580 | LLMからの非同期応答時に最後にJSONの代わりに文字列の”[DONE]”が応答される仕様ですが、utils/server/index.tsの93行目付近のtryが文字列の”[DONE]”に対応できずにSentax Errorで実行時エラーとなってしますため、dataが”[DONE]”以外の場合だけ処理するようにする |
４．構築する環境
Chatbot UIを動作させるためのローカルPC環境の詳細を説明します。
本番環境ではChatbot UI legacyはAzure App Serviceで動作します。しかし、ローカルPCではAzure上にLLMだけを配置し、Chatbot UI legacyはクライアントPC内で動作させます。
５．構築手順
Chatbot UIをローカル環境で動作させるための具体的な手順をステップバイステップで説明します。
5.1. ソフトウェアをインストール
Git/TortoiseGit/Visual Studio Code/Node.jsのインストール
インストールはインストーラのデフォルト環境でインストールするのみです。
5.2. Chatbot UI Legacyをデプロイ
TortoiseGitのクローン機能でChatbot UI legacyのForkからデプロイします。
URL：https://github.com/potofo/chatbot-ui
ブランチ：fixed
potofo/chatbot-uiのfixedブランチをデプロイします。
5.3. .envファイルを準備する
chatbot-uiフォルダ直下にある.env.local.exampleから.envファイルを作成して以下の環境変数を追加します。
Azure OpenAIのAPIエンドポイントとAPIキーは自身で発行するか、管理者に確認してください。
| No | 値 | 説明 | 備考 |
|---|---|---|---|
| 1 | OPENAI_API_TYPE | azure OpenAI APIサービスを使用する場合は「openai」Azure OpenAI Serviceを使用する場合は「azure」を指定します。 |
「モデルの取得中にエラーが発生しました。」と表示されたら、#1,#2,#3,#4すべての設定を見直してください。 |
| 2 | OPENAI_API_HOST | https://xxxxx.openai.azure.com/ | Azure OpenAIサービスのAPIエンドポイントです。 |
| 3 | OPENAI_API_KEY | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | Azure OpenAIサービスのAPIキーです。 |
| 4 | AZURE_DEPLOYMENT_ID | gpt-35-turbo-16k Azure OpenAI studioで作成したモデルのデプロイ名 (例：gpt-35-turbo モデル名と同じ名前をデプロイ名にした場合)を指定します。 |
「モデルの取得中にエラーが発生しました。」と表示されたら、この設定を見直してください。 予め、Azure OpenAI Serviceに「gpt-35-turbo-16k」がデプロイされている必要があります。 |
| 5 | DEFAULT_MODEL | gpt-35-turbo-16k Azure OpenAIのモデル名を入力します。 |
予め、Azure OpenAI Serviceに「gpt-35-turbo-16k」がデプロイされている必要があります。 |
| 6 | OPENAI_API_VERSION | 2024-02-15-preview | プレビューバージョンのライフサイクルは「Azure OpenAI APIプレビューのライフサイクル」ページを参照してください。 |
.env.local.exampleファイルと.envファイルの差分（クリックで拡大表示）
5.4. Nodeパッケージをインストールする
Chatbot UI Legacyをデプロイしたフォルダでコマンドプロンプトを起動し以下のNode.jsのパッケージインストールコマンド（npm install）を実行します。
Node.jsではパッケージインストールコマンドにより、フォルダ内にあるpackage.jsonに従いnode_modules配下にパッケージをダウンロードします。
npm installコマンド実行直後の画面
npm installコマンド実行完了時の画面（私の環境ではおよそ５分程度でダウンロードが完了しました）
5.5. 実行
Chatbot UI legacyの実行はnpm run devコマンドで実行します。
「モデル取得中にエラーが発生しました。」と表示された場合は.envファイルの設定に誤りがあります。
5.6. ブラウザからアクセス
Edgeブラウザから「http://localhost:3000」にアクセスしてChatbot UI画面を起動します。
６．トラブルシューティング
構築過程で発生する可能性のある一般的な問題とその解決策を提供します。
| No | 現象 | 解決策 |
|---|---|---|
| 1 | ブラウザでアクセスすると「モデル取得中にエラーが発生しました。」エラーとなる | ケース１：「5.2. Chatbot UI Legacyをデプロイ」でブランチを指定していない。ｋ 原因：Chatbot UI legacyのバグ対策が含まれていない可能性があります。 確認方法：デプロイしたフォルダを右クリックし[TortoiseGit]⇒[切り替え/チェックアウト]を選択してブランチが「fixed」になっているかを確認する。 解決方法：「main」や「HEAD」、「feature-supports-azure-openai-api-2023-05-15-or-later」となっている場合には「fixed」に修正する |
| 2 | ↓ | ケース２：「5.3. .envファイルを準備する」の環境変数に間違いがある 原因：OPENAI_API_TYPEやOPENAI_API_HOST、OPENAI_API_KEY、AZURE_DEPLOYMENT_ID、OPENAI_API_VERSIONはLLMと接続するためのエンドポイント(通信端点)を生成する大切なパラメータです。間違えるとモデル情報が取得できないため、「モデル取得中にエラーが発生しました。」というエラーになります。 確認方法：chatbot-ui/.envファイルを確認する 解決方法：chatbot-ui/.envを修正する |
| 3 | 「The API deployment for this resource does not exist. If you created the deployment within the last 5 minutes, please wait a moment and try again.」エラーとなる | AZURE_DEPLOYMENT_IDの指定が誤っている。 gpt-35-turbo-16kと設定すべきところでgpt-3.5-turbo-16kと設定しているなど。 解決方法：chatbot-ui/.envを修正する |
７．参考URL
今回の記事の執筆に関して関連する記事、GitHUBリポジトリを以下にまとめます。
-
Chatbot UI (legacy) を o3-mini や GPT-4.5 Preview に対応してみた（APIバージョン2025-02-01-preview）
@kekekekentaさんのChatbot UI o1/o3 seriaseサポート記事 -
KentaroAOKI/chatbot-ui/feature-supports-azure-openai-api-2025-02-01-preview
@kekekekentaさんのo1/o3 serise対応ブランチ -
mckaywrigley/chatbot-ui/legacy
Chatbot UI legacyオリジナルのブランチ（2023年4月6日～4月20日の対策がされていないため、「モデル取得中にエラーが発生しました」エラーとなります。 -
[Chatbot UI legacyの問題 (Qiita:2024年5月2日記事)
mckaywrigley/chatbot-ui/legacyの問題に対する対策を解説しています。 -
potofo/chatbot-ui/fixed
mckaywrigley/chatbot-ui/legacyの問題の対策を取り込んだFork