オープンソース Chatbot UI の魅力とローカル環境構築

はじめに

本記事ではOSS Chatbot UI の魅力と、ローカル環境で手軽に試すまでの手順を分かりやすくまとめていきます。
※記載内容は2024/03/31時点のものです。

Chatbot UI とは

ChatGPTライクなユーザインタフェースのオープンソース生成AIチャットアプリです。
MITライセンスなので改変や商用利用もできます。

特徴

１．利用方法は３種類 [サーバデプロイ、ローカルデプロイ、公式ホスト版利用 ]

２．ChatGPT等のAPIキーの情報を設定することで、様々なLLMを利用できる
　　※カスタマイズして利用したいLLMを追加することも可能

３．会話履歴を保存できる

４．よく利用する設定（モデル/プロンプト/Temperature/Context Length等）を定義できる

５．RAG が利用できる

６．APIキーを指定することで以下のLLM が利用可能

// OpenAI Models (UPDATED 1/29/24)
export type OpenAILLMID =
　 | "gpt-4-turbo-preview" // GPT-4 Turbo
　 | "gpt-4-vision-preview" // GPT-4 Vision
　 | "gpt-4" // GPT-4
　 | "gpt-3.5-turbo" // Updated GPT-3.5 Turbo

// Google Models
export type GoogleLLMID =
　 | "gemini-pro" // Gemini Pro
　 | "gemini-pro-vision" // Gemini Pro Vision

// Anthropic Models
export type AnthropicLLMID =
　 | "claude-2.1" // Claude 2
　 | "claude-instant-1.2" // Claude Instant
　 | "claude-3-haiku-20240307" // Claude 3 Haiku
　 | "claude-3-sonnet-20240229" // Claude 3 Sonnet
　 | "claude-3-opus-20240229" // Claude 3 Opus

// Mistral Models
export type MistralLLMID =
　 | "mistral-tiny" // Mistral Tiny
　 | "mistral-small-latest" // Mistral Small
　 | "mistral-medium-latest" // Mistral Medium
　 | "mistral-large-latest" // Mistral Large

export type GroqLLMID =
　 | "llama2-70b-4096" // LLaMA2-70b
　 | "mixtral-8x7b-32768" // Mixtral-8x7b

// Perplexity Models (UPDATED 1/31/24)
export type PerplexityLLMID =
　 | "pplx-7b-online" // Perplexity Online 7B
　 | "pplx-70b-online" // Perplexity Online 70B
　 | "pplx-7b-chat" // Perplexity Chat 7B
　 | "pplx-70b-chat" // Perplexity Chat 70B
　 | "mixtral-8x7b-instruct" // Mixtral 8x7B Instruct
　 | "mistral-7b-instruct" // Mistral 7B Instruct
　 | "llama-2-70b-chat" // Llama2 70B Chat
　 | "codellama-34b-instruct" // CodeLlama 34B Instruct
　 | "codellama-70b-instruct" // CodeLlama 70B Instruct
　 | "sonar-small-chat" // Sonar Small Chat
　 | "sonar-small-online" // Sonar Small Online
　 | "sonar-medium-chat" // Sonar Medium Chat
　 | "sonar-medium-online" // Sonar Medium Online

※ブログの末尾に機能一覧をまとめていますので詳細はそちらを参照してください

ローカル環境構築

Windows10、WSL2(Ubuntu) でローカル環境構築する手順を解説します。
※Supabase というDBをDokcerで動作させる構成になっています。Docker Desktopについては一定の会社規模になると有料となるため、WSL2を利用されている方が多いと思いますので、今回はWLS2を利用した手順にしてます。

１．WLS2(Ubuntu)・Docker Enjineインストール

@nujust さんの記事が分かりやすかったのでリンクさせていただきました。

※ WSL2インストール後に以下コマンド実行しておいてください
sudo apt update && sudo apt upgrade　：　パッケージ更新
sudo apt-get install curl unzip　：　curlとunzipインストール

sudo npm install -g n　：　Node.js最新インストール
sudo n latest

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"　：　Homebrewインストール
※実行後に表示されるNext steps:に記載されている手順を実行して環境変数設定もしてください

２．Chatbot UI 設定

ステップ１．git clone

コマンド：
git clone https://github.com/mckaywrigley/chatbot-ui.git

Ubuntu

~/ChatbotUI # git clone https://github.com/mckaywrigley/chatbot-ui.git
Cloning into 'chatbot-ui'...
remote: Enumerating objects: 4990, done.
remote: Total 4990 (delta 0), reused 0 (delta 0), pack-reused 4990
Receiving objects: 100% (4990/4990), 3.26 MiB | 10.09 MiB/s, done.
Resolving deltas: 100% (2807/2807), done.
~/ChatbotUI # ls -l
total 4
drwxrwxr-x 15 devkita devkita 4096 Apr  8 09:27 chatbot-ui
~/ChatbotUI #

ステップ２．依存関係インストール

コマンド：
cd chatbot-ui
npm install

Ubuntu

~/ChatbotUI/chatbot-ui # npm install
長いので省略
~/ChatbotUI/chatbot-ui #

ステップ３．Supabase インストール

コマンド：
brew install supabase/tap/supabase

Ubuntu

~/ChatbotUI/chatbot-ui # brew install supabase/tap/supabase
==> Auto-updating Homebrew...
Adjust how often this is run with HOMEBREW_AUTO_UPDATE_SECS or disable with
HOMEBREW_NO_AUTO_UPDATE. Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).
==> Tapping supabase/tap
Cloning into '/home/linuxbrew/.linuxbrew/Homebrew/Library/Taps/supabase/homebrew-tap'...

～ 長いので省略 ～

==> supabase
Bash completion has been installed to:
  /home/linuxbrew/.linuxbrew/etc/bash_completion.d
~/ChatbotUI/chatbot-ui #

ステップ４．Supabase 起動

コマンド：
supabase start

Ubuntu

~/ChatbotUI/chatbot-ui # supabase start
15.1.0.147: Pulling from supabase/postgres

～ 長いので省略 ～

Digest: sha256:3537ae89d217432a27fae5b76ce1a2147a0ce1692cc9858a3fcddf5a55c93460
Status: Downloaded newer image for public.ecr.aws/supabase/studio:20240326-5e5586d
Started supabase local development setup.

         API URL: http://127.0.0.1:54321　← ★(1)
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
          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: XXXXXXXXXX　← ★(2)
service_role key: YYYYYYYYYY　← ★(3)
~/ChatbotUI/chatbot-ui #

ステップ５．環境設定

.env.local ファイルを用意して設定していきます。
cp .env.local.example .env.local

必須設定項目
・NEXT_PUBLIC_SUPABASE_URL　← ★(1)を設定
・NEXT_PUBLIC_SUPABASE_ANON_KEY　← ★(2)を設定
・SUPABASE_SERVICE_ROLE_KEY　← ★(3)を設定

設定後

Ubuntu

~/ChatbotUI/chatbot-ui # diff .env.local.example .env.local
2,3c2,3
< NEXT_PUBLIC_SUPABASE_URL=
< NEXT_PUBLIC_SUPABASE_ANON_KEY=
---
> NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
> NEXT_PUBLIC_SUPABASE_ANON_KEY=XXXXXXXXXX
6c6
< SUPABASE_SERVICE_ROLE_KEY=
---
> SUPABASE_SERVICE_ROLE_KEY=YYYYYYYYYY
12c12
< OPENAI_API_KEY=
---
> OPENAI_API_KEY=ZZZZZZZZZZZ　← オプション項目（今回はOpenAI API利用するために設定しています）
36c36
~/ChatbotUI/chatbot-ui #

これで環境設定は終わりです。

３．Chatbot UI 起動

コマンド：
npm run chat

Ubuntu

~/ChatbotUI/chatbot-ui # npm run chat

> chatbot-ui@2.0.0 chat
> supabase start && npm run db-types && npm run dev

supabase start is already running.
Run supabase status to show status of local Supabase containers.

> chatbot-ui@2.0.0 db-types
> supabase gen types typescript --local > supabase/types.ts

Connecting to db 5432
(node:1) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

> chatbot-ui@2.0.0 dev
> next dev

   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env.local

Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

> [PWA] Compile server
> [PWA] Compile server
> [PWA] Compile client (static)
> [PWA] Custom worker found: /home/devkita/ChatbotUI/chatbot-ui/worker/index.js
> [PWA] Build custom worker: /home/devkita/ChatbotUI/chatbot-ui/public/worker-development.js
> [PWA] Auto register service worker with: /home/devkita/ChatbotUI/chatbot-ui/node_modules/next-pwa/register.js
> [PWA] Service worker: /home/devkita/ChatbotUI/chatbot-ui/public/sw.js
> [PWA]   url: /sw.js
> [PWA]   scope: /
> [PWA] Build in develop mode, cache and precache are mostly disabled. This means offline support is disabled, but you can continue developing other functions in service worker.
 ✓ Ready in 2.9s
 ⚠ GenerateSW has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.

４．Chatbot UI にアクセス

ブラウザから「 http://localhost:3000/ 」にアクセスして「Start Chatting →」をクリック。

EmailとPasswordを入力して Sign Up クリック。

ユーザ名を入力して Next クリック。

利用するLLM の APIキーを必要に応じて設定します。
※前の手順で.env.localを直接設定しているので、ここでは何も設定せず Next をクリック。

設定完了です。Next をクリック。

５．Chatbot UI を利用

あとは利用するだけです。
画面右上にモデル選択欄があります。

質問を投げてみる。

各機能についてGit上にあまり記載が少なかったので、簡単にまとめてみました。

カスタマイズについて

Chatbot UI から Amazon BedrockのナレッジベースAPIを呼び出す方法として以下に書いているので、良かったら見てください。

最後に

いかがでしたでしょうか？
オープンソースなのでカスタマイズが自由にできるので、生成AI開発者の検証環境や企業独自の生成AIチャットツールとして活用できそうですね。