[生成AI]有料プランを解約するためのChatbot UIセットアップ完全マニュアル

2024年5月26日 18:21

割引あり

生成AIを活用したいけれど、有料プランの費用が気になる方へ。本記事では、複数の生成AIサービスを低コストで利用できるオープンソースプラットフォーム「Chatbot UI」の導入から活用方法までを詳しく解説します。

はじめに

近年、ChatGPTに代表される生成AI（Generative AI）が大きな注目を集めています。生成AIは、与えられたプロンプト（指示）に基づいて、人間のような自然な文章を生成することができます。この技術は、カスタマーサポート、コンテンツ作成、教育など、様々な分野で活用されています。

しかし、生成AIを利用するには、OpenAIやAnthropicなどのサービスを利用する必要があり、多くの場合、有料プランへの加入が必要です。有料プランは、より高度な機能や大量のリクエストを処理できるメリットがある一方で、コストがかさむというデメリットがあります。

そこで注目されているのが、Chatbot UIです。Chatbot UIは、OpenAIやAnthropicなどの複数の生成AIサービスを一つのインターフェースで利用できるオープンソースのプラットフォームです。Chatbot UIを使えば、各サービスの有料プランを解約し、APIキーを取得するだけで、生成AIを利用することができます。

本記事では、Chatbot UIの導入から活用方法まで、詳しく解説していきます。生成AIを利用したいが、有料プランのコストに悩んでいる方、複数の生成AIサービスを効率的に利用したい方は、ぜひ本記事を参考にしてください。特に、ライトユーザーにお勧めします。

Chatbot UIを使えば、生成AIの利用コストを大幅に削減できるだけでなく、複数のAIモデルを簡単に切り替えて使うことができます。また、プロンプトテンプレートを活用することで、効率的に生成AIを利用することもできます。

本記事を読み進めることで、生成AIブームを賢く乗りこなし、ビジネスや日常生活に生成AIを活用するためのヒントが得られるはずです。それでは、早速Chatbot UIの世界を探求していきましょう。

注意: Chatbot UIを活用する際の料金について

Chatbot UIを使用する際、生成AIのAPIキーを利用すると、従量課金により料金が発生することに注意が必要です。Chatbot UI自体の使用は無料ですが、生成AIを使用すると、APIキーの利用量に応じて料金が発生します。

有料サービスの場合、月額定額制が一般的ですが、APIキーを使用する場合は、利用状況によっては月額料金を超える可能性があります。APIキーを使用する際は、利用量を適切に管理し、予期せぬ高額な請求が発生しないよう注意してください。

生成AIを活用することで、Chatbot UIの機能を最大限に活用できますが、料金面での注意点を理解し、適切に利用することが重要です。

記事概要

本記事は、生成AIの有料プランの課題を解決するためのツールであるChatbot UIについて、導入から活用方法まで詳しく解説します。

第1部では、生成AIブームと有料プランの課題について説明します。有料プランのメリットとデメリットを比較し、Chatbot UIを使うことでどのようなメリットがあるのかを明らかにします。

第2部では、Chatbot UIの概要を紹介します。Chatbot UIとはどのようなツールなのか、その主な特徴と機能、そして対応している生成AIモデルについて解説します。

第3部では、Chatbot UIで使用する生成AIのAPIキーを取得する方法を説明します。OpenAI、Anthropic、Google AI Studioのアカウント作成方法とAPIキーの取得手順を、それぞれ詳しく解説します。

第4部では、Chatbot UIを使用するための事前準備として、Node.jsとDocker Desktopのインストール方法を説明します。WindowsとmacOSそれぞれの場合に分けて、インストール手順を詳しく解説します。

第5部では、Chatbot UIのセットアップ方法を説明します。リポジトリのクローンとセットアップ、依存関係のインストールと構築、Supabaseのインストール、環境変数の設定といった一連の手順を、順を追って詳しく解説します。

第6部では、Chatbot UIの使い方を説明します。チャットインターフェースの基本操作、複数のAIモデルの切り替え方法、プロンプトテンプレートの活用方法など、Chatbot UIを効果的に使うためのポイントを解説します。

免責事項

本記事で提供する情報、プログラムコード、手順は、あくまで参考例として提供されています。開発環境の違いや、Chatbot UIのアップデートによる仕様変更などにより、記事通りに動作しない可能性があります。本記事は、2024年5月時点の情報に基づいて作成されていますので、ご了承ください。

また、本記事で提供するプログラムを実行した結果、発生した損害や問題について、著者は一切の責任を負いません。各種サービスの利用料金などは、読者ご自身の責任で管理してください。特に、生成AIのAPIは、使用量に応じて課金されるサービスです。APIの呼び出し回数やデータ転送量によっては、高額な料金が発生する可能性がありますので、十分にご注意ください。

本記事で紹介するChatbot UIは、オープンソースのプロジェクトであり、サンプルコードとして提供されています。より少ない手順で生成AIを使ったアプリケーションを動作させることを目的としているため、実際に運用する場合は、セキュリティ面や性能面でさらなる改善が必要です。必要に応じて、より強固な認証方式を検討し、適切なセキュリティ対策を講じてください。

OpenAI、Anthropic、Google AI Studioなどの各種アカウントやAPIキーの管理は、読者ご自身の責任で行ってください。APIキーを紛失したり、第三者に漏洩したりすることがないよう、十分にご注意ください。

以上の点を予めご了承の上、本記事をご活用ください。本記事が、読者の皆様のChatbot UI導入や生成AIの活用の一助となれば幸いです。なお、本記事の内容は、予告なく変更される場合がありますので、あらかじめご了承ください。

第1部　生成AIブームと有料プランの課題

近年、ChatGPTに代表される生成AI技術の発展により、チャットボットが大きな注目を集めています。多くの企業や個人がチャットボットを導入し、ユーザーとのコミュニケーションを自動化・効率化しようとしています。しかし、生成AIサービスの多くは有料プランを提供しており、コストが課題となっています。

有料プランとメリットデメリット

生成AIサービスの有料プランは、以下のようなメリットがあります。

より高度な機能の利用
大量のリクエストに対応可能
専用のサポートやトレーニング
最新のサービスをいち早く使用できる

一方で、デメリットとしては以下が挙げられます。

高額な月額料金
お試し利用ができない
契約期間の拘束

特に、中小企業や個人開発者にとって、有料プランの導入は大きな負担となります。

Chatbot UIを使うメリット

そこで、オープンソースのチャットボットフレームワーク「Chatbot UI」の活用が注目されています。Chatbot UIは、以下のようなメリットがあります。

無料で利用可能
カスタマイズ性が高い
自社サーバーでの運用が可能

Chatbot UIを使えば、低コストで手軽にチャットボットを構築することができます。また、オープンソースであるため、自社のニーズに合わせてカスタマイズすることも可能です。

次章以降では、次章以降では、Chatbot UIの導入方法をスクリーンショットとともに詳しく解説していきます。

第2部　Chatbot UI

Chatbot UIは、オープンソースのチャットボットフレームワークです。Node.jsとReactを使って開発されており、GitHubで公開されています。Chatbot UIを使うことで、開発者は手軽にチャットボットを構築し、自社サービスに組み込むことができます。

主な特徴と機能

Chatbot UIには、以下のような特徴と機能があります。

レスポンシブデザイン
- モバイル端末にも対応した美しいUIを提供
マルチランゲージサポート
- 多言語対応が可能で、ローカライズが容易
テーマのカスタマイズ
- CSSを編集することで、自社ブランドに合わせたデザインに変更可能
会話履歴の管理
- ユーザーとの会話履歴を保存し、分析に活用可能
プラグイン機構
- 機能拡張が可能なプラグインシステムを提供

対応している生成AIモデル

Chatbot UIは、以下の生成AIモデルに対応しています。非常にたくさんのモデルに対応しているため、その中の一部を紹介します。

OpenAI gpt-4-turbo
- 最新の自然言語処理技術を使った高品質な応答が可能
Anthropic claude-3-2-240229
- 倫理的な制約を持った安全な応答を提供
Google AI Studio gemini-pro
- 大規模なトレーニングデータ、カスタマイズ性、エンタープライズサポートを提供

Chatbot UIは、これらの生成AIモデルと連携することで、高度な自然言語処理能力を持ったチャットボットを構築することができます。Chatbot UIは公式のウェブアプリとして使用する方法と、ローカルにインストールする方法で使用できます。本記事では、月額利用料が発生しないローカルインストールの方法を中心に解説します。

次のパートでは、Chatbot UI 導入の準備として、生成AI の API キーを取得する方法を説明します。

第3部　生成AIのAPIキーを取得

Chatbot UIを使ってチャットボットを構築するには、生成AIサービスのAPIキーが必要です。APIキーは、Chatbot UIと生成AIサービスを連携するための認証情報です。この章では、代表的な生成AIサービスであるOpenAI、Anthropic、Google AI Studioのアカウント作成方法とAPIキーの取得方法を解説します。

次のセクションでは、生成AIのAPIを利用するための準備として、OpenAIのアカウント作成とAPIキーの取得方法について説明します。その後、Anthropic（Claudeのサービスプロバイダー）、Google AI Studio（Geminiのサービスプロバイダー）のアカウント作成とAPIキーの作成を行います。

OpenAI APIキーの作成

OpenAI APIキーを作成するには、以下の手順を実行します。次に示す図は、OpenAIのウェブサイトで新しいAPIキーを作成している様子です。Nameとして、用途や分類を登録しておくと、APIキーの管理に役立ちます。

OpenAIのウェブサイト（https://openai.com/）にアクセスし、アカウントを作成またはログインします。
ダッシュボードにアクセスし、「API keys」セクションに移動します。
「Create new secret key」ボタンをクリックして、新しいAPIキーを生成します。
生成されたAPIキーをコピーし、安全な場所に保存します。このキーは後で使用するので、忘れないようにしてください。

APIキーを作成したら、アプリケーションからChatGPT APIを呼び出すことができます。次に、Anthropic APIキーとGoogle AI APIキーの作成手順を説明します。

Anthropic APIキーの作成

Anthropic APIキーを作成するには、以下の手順を実行します。次の図は、Anthropicのウェブサイトで新しいAPIキーを作成している様子です。Nameとして、用途や分類を登録しておくと、APIキーの管理に役立ちます。

Anthropicのウェブサイト（https://www.anthropic.com/）にアクセスし、アカウントを作成またはログインします。
ダッシュボードにアクセスし、「API」セクションに移動します。
「Generate API Key」ボタンをクリックして、新しいAPIキーを生成します。
生成されたAPIキーをコピーし、安全な場所に保存します。

Google AI APIキーの作成

Google AI APIキーを作成するには、以下の手順を実行します。初回のAPIキー作成時には、新しいGCP（Google Cloud Platform）プロジェクトを作成する必要があります。2回目以降のAPIキー作成時には、次の図に示すように既存のプロジェクト「Generative Language Client」を選択してください。

Google Cloud Platformのウェブサイト（https://console.cloud.google.com/）にアクセスし、アカウントを作成またはログインします。
Google AI Studioのウェブサイト（https://aistudio.google.com/）にアクセスして、左サイドバーから「Get API Key」セクションを選びます。
「Create API Key in new project」を選択します（初回のみ）。
生成されたAPIキーをコピーし、安全な場所に保存します。
2つ目以降のAPIキーを作成するときは、「Create API Key」から、プロジェクト名「Generative Language Client」を選んでください。現時点では、APIキーに識別のための名前をつけることはできないので、作成したキーの用途などを別途メモしておくことをおすすめします。
Google AI StudioのAPIキーはGCPプロジェクトに紐づいており、利用状況によっては料金が発生する可能性があります。無料枠の範囲内で利用するか、料金体系をよく確認してから利用するようにしてください。

これで、3つの生成AIのAPIキーが作成されました。次に、APIキーの取り扱いについての注意事項を説明します。

APIキーを秘匿情報として保護する方法

APIキーを含む秘匿情報を直接Chatbot UIのソースコードに組み込むことは避けるべきです。なぜなら、Chatbot UIのソースコードはバージョン管理システムで共有されるため、APIキーが開発者に公開されてしまう可能性があるからです。これは、セキュリティ上の大きなリスクになります。APIキーが不正に利用され、多額の支払いが発生する可能性があります。

そこで、APIキーなどの秘匿情報を安全に管理する方法として、環境変数を使用することをお勧めします。その具体的な方法は、「第5部　環境変数の設定」で説明します。

以上で、3つの生成AIのAPIキーが取得できました。次は、Chatbot UIの導入の準備として、　Node.jsとDocker Desktopをパソコンにインストールします。

第4部　セットアップ準備

Chatbot UIを導入する前に、開発環境を整える必要があります。この章では、Node.jsとDocker Desktop、Gitのインストール方法を解説します。

コマンドラインツールとして、Windowsの場合は「PowerShell」、macOSの場合は「ターミナル」を使用します。以下は、ターミナルと呼称します。

Node.jsのインストール

Chatbot UIは、Node.js上で動作するアプリケーションです。そのため、まずはNode.jsをインストールする必要があります。

Node.jsの公式サイト（https://nodejs.org/）にアクセスします。
「LTS（長期サポート）」と表示されているバージョンをクリックし、インストーラーをダウンロードします。
ダウンロードしたインストーラーを実行し、指示に従ってインストールを進めます。
インストールが完了したら、ターミナルを開き、node -vコマンドを実行して、Node.jsのバージョンが表示されることを確認します。

Docker Desktopのインストール

Chatbot UIは、Supabaseをローカルで動かすために、Docker Desktopを使用します。Docker Desktopをインストールするには、以下の手順に従ってください。（Docker Desktopは個人利用に限り、無償で使用できます）

Docker公式サイト（https://www.docker.com/products/docker-desktop）にアクセスします。
「Download Desktop and Take a Tutorial」をクリックし、使用しているOSに合わせて「Mac with Intel chip」「Mac with Apple chip」「Windows」のいずれかを選択します。
インストーラーをダウンロードし、実行します。指示に従ってインストールを進めます。
インストールが完了したら、Docker Desktopを起動します。

著者のWindows10では、Docker Desktopのインストールに大変苦戦しました。Windowsの機能、BIOSのIVT設定など調べましたが解決せず。最後にHyper-Vを有効にするコマンドを実行して再起動することで、インストールを完了できました。この方法が正しいか判断できませんが、記録に残しておきます。
bcdedit /set hypervisorlaunchtype auto

Gitのインストール

Chatbot UIのソースコードは、Gitを使用して管理されています。Gitをインストールするには、以下の手順に従ってください。

Windows:

Git for Windows公式サイト（https://gitforwindows.org/）にアクセスします。
「Download」ボタンをクリックし、インストーラーをダウンロードします。
ダウンロードしたインストーラーを実行し、指示に従ってインストールを進めます。
インストールが完了したら、ターミナルを開き、git --versionコマンドを実行して、Gitのバージョンが表示されることを確認します。

macOS:

１. ターミナルを開き、以下のコマンドを実行して、Homebrewをインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)

２. Homebrewのインストールが完了したら、以下のコマンドを実行して、Gitをインストールします。

brew install git

３. インストールが完了したら、ターミナルを開き、git --versionコマンドを実行して、Gitのバージョンが表示されることを確認します。

これで、Chatbot UIを導入するための事前準備が整いました。次章では、実際にChatbot UIとSupabaseをインストールする手順を解説します。

第5部　Chatbot UIのセットアップ

この章では、Chatbot UIのセットアップ方法を解説します。リポジトリのクローン、依存関係のインストールと構築、Supabaseのインストール、環境変数の設定を行います。

リポジトリのクローン

まず、Chatbot UIのリポジトリをローカルにクローンします。以下の手順に従ってください。

１. ターミナルを開きます。以下のコマンドを実行して、~/GitHubRepositoriesフォルダーに移動します。

mkdir ~/GitHubRepositories
cd ~/GitHubRepositories

２. 次に、以下のコマンドを実行して、Chatbot UIのリポジトリをクローンします。

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

クローンが完了したら、以下のコマンドを実行して、クローンしたリポジトリのディレクトリに移動します。

cd GitHubRepositories

依存関係のインストールと構築

次に、Chatbot UIの依存関係をインストールし、アプリケーションを構築します。

以下のコマンドを実行して、依存関係をインストールします。

npm install

Supabaseのインストール

Supabaseは、オープンソースのバックエンドサービスで、PostgreSQLデータベース、認証機能、ストレージ機能などを提供します。Chatbot UIは、Supabaseをローカルで動かすことで、データを安全に保存し、テキストだけでなく画像などの様々なデータ形式に対応できます。Supabaseをインストールするには、以下の手順に従ってください。

ターミナルを開き、以下のコマンドを実行して、Supabase CLIをインストールします。

Mac:

brew install supabase/tap/supabase

Windows:

scoopをインストールしてから、supabaseをインストールします。

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

インストールが完了したら、次のコマンドを実行して、Supabaseを起動します。

supabase start

Docker Desktopアプリを確認して、「chatbotui」コンテナーが起動したら、Supabaseのインストールは完了です。

環境変数の設定

Chatbot UIの環境変数を設定します。

ターミナルでChatbot UIのローカルリポジトリのルートディレクトリに移動し、以下のコマンドを実行して、.env.local.exampleファイルを.env.localファイルにコピーします。.env.localファイルはバージョン管理外なので、GitHubなどへの情報漏洩を防ぐことができます。

cp .env.local.example .env.local

次に、以下のコマンドを実行して、必要な値を取得します。

supabase status

コマンドを実行すると、以下の設定値が確認できます。

         API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
  S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
          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
service_role key: xxxxxxxxxx
   S3 Access Key: xxxxxxxxxx
   S3 Secret Key: xxxxxxxxxx
       S3 Region: local

.env.localファイルを開き、取得した値を記入します（3箇所）。

# Supabase Public
NEXT_PUBLIC_SUPABASE_URL=<API URLの値>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon keyの値>

# Supabase Private
SUPABASE_SERVICE_ROLE_KEY=<service_role keyの値>

# Ollama
NEXT_PUBLIC_OLLAMA_URL=http://localhost:11434

.env.localファイルのAPI Keysのセクションに、第3部で取得した生成AIのAPIキーを記入します（3箇所）。ここで、APIキーを指定した場合は、Chatbot UIのウェブアプリでのAPIキー設定は無効になります。

# API Keys (Optional: Entering an API key here overrides the API keys globally for all users.)
OPENAI_API_KEY=<OpenAI API Key>
ANTHROPIC_API_KEY=<Anthropic API Key>
GOOGLE_GEMINI_API_KEY=<Google AI API Key>
MISTRAL_API_KEY=
GROQ_API_KEY=
PERPLEXITY_API_KEY=
OPENROUTER_API_KEY=

SQLデータベースの確認

最後に、SQLデータベー設定を確認します。/supabase/migrations/20240108234540_setup.sqlを開きます。

52: DECLARE
53:   project_url TEXT := 'http://supabase_kong_chatbotui:8000';
54:   service_role_key TEXT := '<service_role_key>'; -- full access needed for http request to storage
55:   url TEXT := project_url || '/storage/v1/object/' || bucket || '/' || object;

53行目のproject_urlは、「/config.tol」設定ファイルを変更していないときは、そのままで変更する必要はありません。54行目の<service_role_key>が、先ほど「supabase status」コマンドを実行したときに表示された値と同じであるか確認します（著者の場合は、そのままで問題なしでした）。

以上で、すべての設定は完了です。次のパートでは、Chatbot UIの使い方を説明します。

第6部　Chatbot UIの使い方

この章では、Chatbot UIの使い方について解説します。チャットインターフェースの基本操作、複数のAIモデルの切り替え、システムプロンプト、プロンプトテンプレートの活用について学びましょう。

ここから先は

2,842字 / 5画像

期間限定 PayPay支払いすると抽選でお得に！

ログイン

この記事が気に入ったらサポートをしてみませんか？