この記事の概要
自分達で生成AIを活用したサービスやAPIを作成できる「Dify（ディファイ）」のフロントエンドに、会社のロゴを入れたり、デザインを変更するには、カスタムクライアントの「webapp-conversation」を活用する必要があります。
この記事では、「webapp-conversation」を、IBM Cloud Code Engine でデプロイして動かすまでの手順を説明します。
また、本記事で想定するシステム構成は、下図のようになります。
セルフホスト版のDifyを用意する場合
SaaS版のDifyを用意する場合
前提 : Dify環境の確保
本記事にあたり、以下の資料を参考に、Difyの実行環境を入手しましょう。Difyの実行環境は、SaaSでも良いですし、IBM CloudやAWS等の仮想マシンを使ったセルフホスト環境のどちらでも構いません。
- SaaSを使う場合
- セルフホスト環境の場合
作業環境について
パソコンを用意しましょう
メモリが8GB以上のパソコンを用意しましょう。Windows、Mac、Linux各自で好みのもので良いです。残念ながら、iPadでは出来ません。2024年現在、高等学校などでは、iPad = パソコン として認識されている場合があります。この記事では、コンテナをビルドする作業を行う都合から、Windows、Mac、Linuxが入っているパソコンでしかできません。
本記事の執筆にあたり、Linux環境として「Ubuntu 24.04」を使っています。Windows環境の場合は、WSL2を使うことでほぼ同じ環境が用意できます。
コンテナ実行環境を用意しましょう
Dockerあるいは、Docker互換環境を用意します。Docker互換環境としては、OrbStackやPodmanがあります。
コンテナレポジトリを用意
Difyのカスタムクライアントをビルドすると、500MBを超えるので、IBM Cloudのコンテナレポジトリの無料版は使えません。今回は、Docker Hub を使います。
Docker Hubを使うために、無料プランにユーザー登録しておきます。
Difyカスタムクライアントのビルド
Difyのカスタムクライアントである「webapp-conversation」は、DockerもしくはDocker互換環境を前提としてコンテナ実行になります。
Githubからリポジトリをクローンして作業します。
クローンして環境変数を設定
クローン後、「webapp-conversation」ディレクトリに移動します。
git clone https://github.com/langgenius/webapp-conversation.git
cd webapp-conversation
Github上のドキュメントに従い、.env.exampleを複製し、.env.local というファイル名にします。
cp .env.example .env.local
nano .env.local
下記の内容が記載されています。
# APP ID
NEXT_PUBLIC_APP_ID=
# APP API key
NEXT_PUBLIC_APP_KEY=
# API url prefix
NEXT_PUBLIC_API_URL=
この３つの変数に、必要な値を記述する必要があります。
各変数に挿入する値を取得します。
APP API Keyの取得
次の手順で実行します。Difyに作ったチャットボットアプリのAPIキーです。
- Difyで作ったチャットボットにアクセスします。
- 「APIアクセス」>>「APIキー」をクリックします。
- 「APIシークレットキー」画面が表示されます。
- 「+新しいシークレットキーを作成」をクリックします。
- 表示されたAPIシークレットキーをコピーしておきましょう。例 app-8S64nBWrlA6KeAKaM9V2u07i
- 「OK」をクリックします。
APP ID と API URLの取得
次の手順で実行します。
- Difyで作ったチャットボットにアクセスします。
- 「監視」>>「カスタマイズ」をクリックします。
- 「AI Web Appのカスタマイズ」に表示された環境変数を確認します。「NEXT_PUBLIC_APP_ID」と「NEXT_PUBLIC_API_URL」の値をコピーしておきましょう。
「.env.local」に各値を記述します。
取得した各値を「.env.local」に記述し、保存します。
カスタムクライアントのカスタマイズ
カスタムクライアントとしてのアプリ名を設定するために、「config/index.ts」を編集します。
nano config/index.ts
編集すべき項目は下記です。
title: 'Chat APP',
description: '',
copyright: '',
privacy_policy: '',
default_language: 'en',
たとえば、次のように編集します。
title: 'Custom Chat APP',
description: 'MyChatApp',
copyright: 'MyChatApp Corp',
privacy_policy: '',
default_language: 'ja',
カスタムクライアント用のコンテナイメージをビルド
次の手順で作業を行います。Docker Hub接続します。Docker Hubのユーザー名は、例として、workuser1 とします。
workuser1の部分を、各自のユーザー名に読み替えて作業しましょう。
docker login --username workuser1
Dockerfileをもとにビルドします。2024年9月時点で2.8GBになります。かなりの大きさです。
IBM Container Registryの無料プランを超えていますので、Docker Hubを使うわけです。会社等で独自に構築したコンテナレジストリがあるのであれば、そちらでも良いでしょう。
docker build . -t workuser1/webapp-conversation:latest
ビルドしたカスタムクライアントをプッシュ
次の手順で実行します。
docker push workuser1/webapp-conversation:latest
コンテナが2GBを超えるので、それなりに時間がかかります。コーヒー前でも挽いて、ドリップして待ちましょう。
Docker Hub では、無料プランの場合、6か月間使われていないと自動削除されます。
無事に終わると、下記のURLでコンテナイメージにアクセスできるようになります。
docker.io/workuser1/webapp-conversation
IBM Cloud Code Engine でアプリケーションを実行
IBM Cloudにアクセスします。
IBM Cloud Code Engine にアクセスします。>> https://cloud.ibm.com/codeengine/overview
Project を作成
IBM Cloud Code Engine 上で、「Projects」をクリックします。
「Create」をクリックし、Projectを作成します。
作成したProject名をクリックします。
Project内に、アプリケーションを作成します。
アプリケーションの作成
Project画面で、「Applications」をクリックします。その後、「Create」をクリックします。
「Image reference」に、コンテナイメージをプッシュした際に取得した、docker.ioから始まるURLを記述します。
画面下に移動し、「Min number of instances」を1インスタンスにします。「Max number of instances」を2インスタンスにします。
画面右側に表示されている「Create」をクリックします。
下図のよう「Ready」が表示されるまで待ちます。
アプリケーションにアクセス
画面左上に表示されている Project名をクリックし、Project画面に戻ります。Project画面内に、稼働中のアプリケーションが表示されています。
「Open URL」をクリックします。
表示されたアプリケーションを使ってみましょう。
Difyのカスタムクライアントアプリケーションが表示されます。「開始」をクリックします。
実際にチャットボットとして動くことがわかります。
まとめ
この記事では、IBM Cloud Code Engineを使い、Difyのカスタムクライアントを動かす手順を記しました。
生成AIを活用したサービスを開発および構築する際に、フロントエンドを独自のものにしたいニーズはたくさんありますので、カスタムクライアントに関するノウハウは役立つはずです。