見出し画像

Chatbot UIをローカル環境で試す

J UNITE株式会社

こんにちは！フルスタックエンジニアをしている会社代表のMIです。

前から気になっていたChatbot UIを最近ようやく試してみました。このプロジェクトは、様々な生成AI APIモデルをローカル環境で簡単に試せるオープンソースのユーザーインターフェースを提供しています。

LibreChatとの違い

生成AI関連のオープンソースプロジェクトをいくつか調査する中で、LibreChatが特に優れていると感じ、実際にChatbot UIより先に使ってみました。Dockerがあれば簡単にセットアップできる点は魅力的でしたが、コードの可読性という観点では、Chatbot UIの方が個人的には理解しやすいと感じました。

LibreChatはバックエンドにNode.jsとMongoDBを使用し、フロントエンドと完全に分離されているのに対し、Chatbot UIはNext.jsのAPIルートを活用した構成になっています。Next.jsに慣れている私にとっては、この構成の方がコードの流れを追いやすく感じました。

個人的な用途ではChatbot UIの機能で十分であり、コードの理解や将来的なカスタマイズの容易さを考慮して、Chatbot UIを使用することにしました。

Chatbot UIの使い始め方

詳しくはLocal Quickstartをご確認ください。以下に、MacOS環境での導入手順を簡潔に説明します。

1. リポジトリのクローン

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

2. 依存関係のインストール

npm install

3. Supabaseのセットアップ

  • Supabase CLIをインストール

brew install supabase/tap/supabase

  • Supabaseを起動

supabase start

4. 環境変数の設定

  • .env.local.exampleを.env.localにコピー

cp .env.local.example .env.local

  • 必要な値を取得

supabase status

  • .env.localファイルに値を入力

5. SQLのセットアップ

  • supabase/migrations/20240108234540_setup.sqlファイルを編集

  • project_urlとservice_role_keyの値を更新

6. アプリケーションの起動

npm run chat

これで、http://localhost:3000でChatbot UIにアクセスできます。バックエンドGUIはhttp://localhost:54323/project/default/editorで確認できます。

セットアップ後は、ユーザー登録を行い、使用したいAPIキーを入力するだけで使い始められます。ChatGPTと同様のユーザーインターフェースで、様々なAIモデルを試すことができます。私は現在、主に無料で利用できるGemini APIをメインに使用しています。

Chatbot UIは、ローカル環境で様々なAIモデルを簡単に試せる優れたツールです。ChatGPTに似た使いやすいインターフェースを提供しながら、複数のAI APIを切り替えて使用できる柔軟性が魅力です。