【ChatBot UI】ChatGPT APIをウェブ上から利用できるオープンソースUI！使い方~カスタマイズ方法まで

AIツール個人開発オープンソースAI 生成AIずかん

2024-01-192024-04-03

WEELメディア事業部LLMライターのゆうやです。

Chatbot UIは、AIモデルをもっと気軽に動かすために、オープンソースのユーザーインターフェースを提供するツールです。

このツールは、ローカル環境に実装して使用できますが、ユーザは自身のChatbot UI 2.0のインスタンスをクラウドで実行することもできます。

また、データストレージにSupabaseを使用しており、ローカルでSupabaseを起動し、環境変数やSQLセットアップを行います。

今後、公式デスクトップアプリのリリースも予定されており、面倒なセットアップ作業をしなくても利用できるようになります。

今回は、Chatbot UIの概要や使ってみた概要をお伝えします。

是非最後までご覧ください！

Chatbot UIの概要

Chatbot UIは、AIモデルをもっと気軽に動かすために、オープンソースのユーザーインターフェースを提供するツールです。

このツールは、ローカル環境に実装して使用できますが、ユーザは自身のChatbot UI 2.0のインスタンスをクラウドで実行することもできます。

また、データストレージにSupabaseを使用しており、ローカルでSupabaseを起動し、環境変数やSQLセットアップを行います。

Chatbot UIは、非常にシンプルなUIで誰でも簡単に使用できます。

使用感を簡潔にまとめた動画です。

Chatbot UI overhaul drops next week.

It’s honestly really, really good.

Powerful & polished.

And as always, 100% open-source. pic.twitter.com/enLG83iTNe
— Mckay Wrigley (@mckaywrigley) December 22, 2023

Chatbot UIでは、様々なモデルが使用可能ですが、これはオープンソースの大規模言語モデルを簡単にローカルで動作させることが可能なOllamaをインストールして組み込んでいるからです。

ここからは、Chatbot UIの実装方法と使い方を説明します。

Chatbot UIの使い方

Chatbot UIのインストール方法は少々面倒なのですが、難しくはないので順に説明していきます。

まず以下のコマンドでGitHubのリポジトリをクローンします。

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

次にルートディレクトリに移動して、依存関係をインストールします。

cd chatbot-ui
npm install

ここまで完了したら次はSupabaseをインストールします。

インストールするにあたり、Dockerを利用するのであらかじめインストールしておいてください。

Supabase CLIをインストールするために、以下のコマンドを実行します。

MacOS/Linux

brew install supabase/tap/supabase

Windows

scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

インストールが完了したら、以下のコマンドで起動します。

supabase start

これでSupabaseのインストールは完了です。

次に、環境変数とSQLのセットアップを行います。

以下のコマンドを実行してください。

cp .env.local.example .env.local

次に以下を実行して必要な値を取得します。

supabase status

続いてSQLの設定ですが、supabase/migrations/20240108234540_setup.sqlの以下の２箇所を修正する必要があります。

53行目のproject_url(http://supabase_kong_chatbotui:8000)のchatbotuiをconfig.tomlファイルのproject_idに変更する。（同じ場合は変更する必要な
service_role_keyをsupabase statusで取得した値に変更。

これで環境変数とSQLのセットアップは完了です。

次にローカルにモデルを実装するためにOllamaをインストールします。

以下のリンク先を参考にインストールしてください。

jmorganca/ollama

これでChatBot UIの実装は完了したので、以下のコマンドを実行して起動します。

npm run chat

少し実装が面倒ですが、デスクトップアプリが近日公開予定とのことなので、そちらが登場すれば大幅に楽になります。

こちらのインストール方法の詳細な方法は、以下の動画をご覧ください。

それでは早速使っていきましょう！

なお、チャットボットを簡単に作成できるDocsGPTについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
→【DocsGPT】GPT-4を使って自分専用AIチャットボットを作れるオープンソース

ChatBot UIを実際に使ってみた

先ほどの起動コマンドを実行すると、以下のようにリンクが出てくるのでクリックしてアクセスします。

アクセスすると以下のような画面になります。

アカウントの作成を求められますが、ここで入力するEmailとパスワードは適当でいいそうです。

適当に入力してSign Upします。

そのまま初期設定を済ませると、このような画面になります。

非常にシンプルなUIでわかりやすそうですね。

モデルを変更するには、右上のGPT-4 Turboをクリックします。

OllamaでダウンロードしたモデルはLocalで、API Keyで使用するモデルはHostedで選択できます。

では試しにLlama2を使用してみましょう。

以下のプロンプトを入力します。

Introduce yourself

自己紹介して

Hello there! *adjusts glasses* My name is Assistant-Bot, and I'm here to help you with any questions or tasks you may have. It's nice to meet you! 
*smiles* Is there something specific you need assistance with today? 😊

こんにちは！アシスタントボットです。ご質問やお仕事のお手伝いをさせていただきます。よろしくお願いします！今日は何かお困りですか？

生成スピードは非常に速く、回答も全く問題ありません。

使ってみた感想としては、非常に使いやすく、ChatGPTとほぼ変わらない感覚で使用できます。

ここからは、ChatBot UIの機能をさらに深掘りしていきます。

ChatBot UIの推しポイントである使いやすさと高い柔軟性を検証してみた

ChatBot UIは、単にシンプルなUIというだけでなく、様々な機能が搭載されています。

その機能をいくつか紹介しましょう。

プリセット機能

ChatBot UIにはプリセット機能があり、このように好きなモデルとシステムプロンプトを登録しておけるので、使いたいモデルを最適な設定で瞬時に使うことができます。

この機能は、様々なモデルが使用できるChatBot UIをさらに便利なものにしていると言えます。

プロンプト保存機能

プロンプト保存機能は、自分がよく使うプロンプトを保存しておける機能です。

この機能も非常に便利な機能で、保存したプロンプトは以下のようにテキストボックスで“/”を入力すると選択できます。

ユーザーのことがよく考えられたとても便利な機能だと思います。

ファイル保存機能

ファイル保存機能は、よく使うファイルを保存しておける機能です。

こちらは先ほど紹介したプロンプト保存機能のファイル版のような機能で、テキストボックスで“@“を入力することで選択できます。

試しにllavaに全ポケモンのデータが入ったcsvファイルを解析させてみます。

このように問題なくデータを解析してくれて、日本語も問題なく入出力できます。

今回はChatBot UIの概要や実際に使ってみた感想をお伝えしましたが、本当に使いやすくてユーザー目線で考えられた機能が搭載されているツールです。

実装が面倒という難点はありますが、今後デスクトップアプリも公開されるので、間違いなく最高のWebUIになると思います。

この記事を読んで気になった方は是非試してみてください！

まとめ

Chatbot UIは、AIモデルをもっと気軽に動かすためのオープンソースのユーザーインターフェースを提供するツールです。

このツールは、ローカル環境に実装して使用できますが、ユーザは自身のChatbot UI 2.0のインスタンスをクラウドで実行することもできます。

また、データストレージにSupabaseを使用しており、モデルの実装にはOllamaを使用します。

実際に使ってみた感想は、実装には若干時間がかかるものの、非常に使いやすく、ユーザー目線で考えられた機能が搭載されていて、現時点で最高のWebUIだと感じました。

今後、さらにこのようなWebUIが進化して、より高度な機能や先進的なユーザーインターフェースを搭載するWebUIが登場するかもしれませんね！

生成系AIの業務活用なら！

・生成系AIを活用したPoC開発

・生成系AIのコンサルティング

・システム間API連携

無料ダウンロード

最後に

いかがだったでしょうか？

弊社では

・マーケティングやエンジニアリングなどの専門知識を学習させたAI社員の開発
・要件定義・業務フロー作成を80%自動化できる自律型AIエージェントの開発
・生成AIとRPAを組み合わせた業務自動化ツールの開発
・社内人事業務を99%自動化できるAIツールの開発
・ハルシネーション対策AIツールの開発
・自社専用のAIチャットボットの開発

などの開発実績がございます。

まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。

➡︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。

生成AIを社内で活用していきたい方へ