Readme i18n

mckaywrigley/chatbot-ui

Share
English(original)DeutschEspañolfrançais日本語한국어PortuguêsРусский中文
Last translated: 14 Jun 2025

Translation Not Available Yet

This repository's README hasn't been translated yet. Once translated, it will be easier to read and understand in your native language (中文).

After translating, add the links to README so others can view it directly.

Chatbot UI

誰でも使えるオープンソースAIチャットアプリ

Chatbot UI

デモ

最新のデモはこちらでご覧いただけます。

更新情報

皆さんからのフィードバックを受け、大規模なアップデートに取り組んでいます。

より簡単なデプロイ方法、バックエンド互換性の向上、モバイルレイアウトの改善などが進行中です。

近日中にまたお知らせします。

-- Mckay

公式ホスティング版

自分でホストしなくてもChatbot UIが使えます！

公式ホスティング版はこちらから。

スポンサー

Chatbot UIが役に立ったら、スポンサーとしてオープンソース活動をサポートしてください :)

課題管理

「Issues」はコードベースに関連する実際の問題に限定しています。

機能リクエストやクラウドプロバイダー関連の問題など、過剰な数のIssueが寄せられています。

セットアップなどで問題が発生した場合は、上部の「Discussions」タブ内の「Help」セクションを参照してください。

コードベースに関係ないIssueは即座にクローズされる可能性があります。

ディスカッション

ぜひ「Discussions」タブに参加してください！

ディスカッションは質問をしたり、アイデアを共有したり、助けを得るのに最適な場所です。

あなたの質問は、他の誰かも同じ疑問を持っている可能性が高いです。

レガシーコード

Chatbot UIは最近2.0バージョンにアップデートされました。

1.0のコードはlegacyブランチで確認できます。

更新方法

ローカルのChatbot UIリポジトリのルートで、ターミナルで以下を実行:

npm run update

ホスティングインスタンスを実行している場合は、最新のマイグレーションをライブデータベースに適用するために以下も実行:

npm run db-push

ローカルクイックスタート

以下の手順でローカルにChatbot UIインスタンスを実行できます。

完全なビデオチュートリアルはこちらでご覧いただけます。

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

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

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

ローカルのChatbot UIリポジトリのルートディレクトリでターミナルを開き、以下を実行:

npm install

3. Supabaseをインストール＆ローカル実行

Supabaseを選んだ理由

以前はブラウザのローカルストレージを使用していましたが、以下の理由で適切な解決策ではありませんでした:

  • セキュリティ問題
  • ストレージ制限
  • マルチモーダルユースケースの制限

Supabaseを採用した理由:

  • 使いやすい
  • オープンソース
  • Postgresベース
  • ホスティングインスタンスに無料枠あり

将来は他のプロバイダーもサポート予定です。

1. Dockerをインストール

Supabaseをローカルで実行するにはDockerが必要です。こちらから無料でダウンロードできます。

2. Supabase CLIをインストール

MacOS/Linux

brew install supabase/tap/supabase

Windows

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

3. Supabaseを起動

ローカルのChatbot UIリポジトリのルートで、ターミナルで以下を実行:

supabase start

4. シークレット情報を入力

1. 環境変数

ローカルのChatbot UIリポジトリのルートで、ターミナルで以下を実行:

cp .env.local.example .env.local

必要な値は以下を実行して取得:

supabase status

注: NEXT_PUBLIC_SUPABASE_URLにはsupabase statusのAPI URLを使用

.env.localファイルに値を入力してください。

環境変数が設定されている場合、ユーザー設定での入力が無効になります。

2. SQLセットアップ

最初のマイグレーションファイルsupabase/migrations/20240108234540_setup.sqlで、上記で取得した値で2つの値を置き換える必要があります:

  • project_url (53行目): config.tomlファイルでproject_idを変更しない場合、デフォルトのhttp://supabase_kong_chatbotui:8000のまま
  • service_role_key (54行目): supabase statusで取得した値

これにより、ストレージファイルが適切に削除されない問題を防ぎます。

5. Ollamaをインストール (ローカルモデルを使用する場合)

こちらの手順に従ってください。

6. アプリをローカルで実行

ローカルのChatbot UIリポジトリのルートで、ターミナルで以下を実行:

npm run chat

Chatbot UIのローカルインスタンスがhttp://localhost:3000で実行されます。互換性のあるnodeバージョン(例: v18)を使用してください。

バックエンドGUIはhttp://localhost:54323/project/default/editorで確認できます。

ホスティングクイックスタート

以下の手順でクラウドにChatbot UIインスタンスを実行できます。

ビデオチュートリアルは近日公開予定。

1. ローカルクイックスタートを実施

上記の「ローカルクイックスタート」の手順1-4を繰り返します。

ローカルとホスティングインスタンス用に別々のリポジトリを作成することをお勧めします。

GitHubに新しいリポジトリを作成し、コードをプッシュしてください。

2. Supabaseでバックエンドをセットアップ

1. 新しいプロジェクトを作成

Supabaseにアクセスし、新しいプロジェクトを作成します。

2. プロジェクト値を取得

プロジェクトダッシュボードで、左下の「Project Settings」アイコンタブをクリック。

以下の環境変数の値を取得:

  • Project Ref: 「General settings」の「Reference ID」
  • Project ID: プロジェクトダッシュボードのURL(例: https://supabase.com/dashboard/project/<YOUR_PROJECT_ID>/settings/general)

「Settings」で左の「API」テキストタブをクリック。

以下の環境変数の値を取得:

  • Project URL: 「API Settings」の「Project URL」
  • Anon key: 「Project API keys」の「anon public」
  • Service role key: 「Project API keys」の「service_role」(パスワードのように扱ってください!)

3. 認証を設定

左の「Authentication」アイコンタブをクリック。

「Providers」テキストタブで「Email」が有効になっていることを確認。

個人用インスタンスでは「Confirm email」をオフにすることをお勧めします。

4. ホスティングDBに接続

ホスティング用Chatbot UIリポジトリを開きます。

最初のマイグレーションファイルsupabase/migrations/20240108234540_setup.sqlで、上記で取得した値で2つの値を置き換えます:

  • project_url (53行目): 上記のProject URL値
  • service_role_key (54行目): 上記のService role key値

ローカルのChatbot UIリポジトリのルートでターミナルを開き、以下のコマンドを実行:

Supabaseにログイン:

supabase login

プロジェクトをリンク(上記の「Project ID」を使用):

supabase link --project-ref <project-id>

これでプロジェクトがリンクされました。

最後に、データベースをSupabaseにプッシュ:

supabase db push

これでホスティングデータベースがセットアップされました!

3. Vercelでフロントエンドをセットアップ

Vercelにアクセスし、新しいプロジェクトを作成。

セットアップページでGitHubリポジトリをインポートし、「Build & Development Settings」でFramework Presetを「Next.js」に変更。

環境変数に以下の値を追加:

  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • NEXT_PUBLIC_OLLAMA_URL (ローカルOllamaモデル使用時のみ; デフォルト: http://localhost:11434)

APIキーも環境変数として追加可能:

  • OPENAI_API_KEY
  • AZURE_OPENAI_API_KEY
  • AZURE_OPENAI_ENDPOINT
  • AZURE_GPT_45_VISION_NAME

全ての環境変数リストは'.env.local.example'ファイルを参照。APIキーの環境変数が設定されている場合、ユーザー設定での入力が無効になります。

「Deploy」をクリックし、フロントエンドのデプロイを待ちます。

デプロイが完了すると、Vercelが提供するURLでホスティング版Chatbot UIが使用可能になります。

コントリビューション

コントリビューションガイドを準備中です。

連絡先

Mckayへの連絡はTwitter/Xまで