Supabaseを用いたRAGをIBM Cloud CodeEngineでセルフホストするまで

# はじめに
以下のように、人気の「Dify」を使ってRAGを用いたチャットボットをつくり、AIアバター等につなげて運用していたのですが、運用が長くなってくると、RAGに用いるドキュメントをデータベースとして運用管理したくなります。

https://qiita.com/kolinz/items/a27976f19f28fd4829d9

そこで、セルフホスト版と、パブリッククラウドの両方で運用でき、PostgreSQLベースの[Supabase](https://supabase.com/)で、RAGに用いるドキュメントを運用管理することにしました。このように、表形式で管理できることで、運用管理の生産性が向上します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/b705c445-21f8-4f5e-8d34-964e5737d089.png)

（あくまで個人的な感想です。LLMおよびSLMのファインチューニング向けデータを作ることもあるので、表形式で管理できると安心します。）

# Flowiseを選択した理由
Supabaseを使う影響で、Supabaseに対応する、Difyに代わるAIエージェント作成ツールとして、[Flowise](https://flowiseai.com/)を使うことにしました。Supabase対応以外にも、Flowiseを選定した理由があります。

**1. IBM watsonx.aiにつなげることができる**
Flowiseでチャット等を実現する際に、watsonx.aiにつなげるノードがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/4520d915-f029-487e-9523-99450d59753d.png)

**2. Supabaseをはじめとして、RAGにおけるベクトルストア（ベクトルデータベース）の選択肢が多い**
この点はDifyにはできないこと。
https://docs.flowiseai.com/integrations/langchain/vector-stores

**3. GraphRAG 対応**
Neo4jによるグラフデータベースをつなげることができるので、通常のRAG以外に、Graph RAGもいけます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/95c5f334-b84e-41a3-bcd0-0f2173e90dd7.png)

DifyでもAPI連携をがんばればできなくもないですが、ツール側で用意されていることで、取り組みやすさはあります。

# IBM Cloud CodeEinge でセルフホスト
Flowiseには、パブリッククラウド版がありFree版もあります。
現在運用している生成AIアプリが、個人情報ではありませんが、アプリを使う人にとっては信頼できる場所で運用されていることが重要な情報になりますので、セルフホスト環境である必要があります。
以前に、IBM Cloud上の仮想マシンでFlowiseを動かしたことがありますので、今回は、サーバーレス環境でもあるIBM Cloud CodeEngine上でFlowiseを動かしてみることにします。

https://qiita.com/kolinz/items/6ccde7ffa87bdd4f0a6f

# 下準備を行う
Flowiseを使って今回作るRAGを用いたチャットボットは、RAGのベクトルストア（ベクトルデータベース）としてSupabase、LLMの部分にGoogle Geminiを使うことにします。

完成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/18782071-a86e-41a8-add2-8bbc8cc35a0e.png)

Supabaseは、今回はパブリッククラウド版を使いますが、セルフホスト版に切り替えることができます。
LLM部分は、watsonx.aiやOllamaを使ったIBMのLLMである、「[Granite3.3](https://www.ibm.com/jp-ja/new/announcements/ibm-granite-3-3-speech-recognition-refined-reasoning-rag-loras)」などに変更して動かすこともできます。「[Granite4.0](https://huggingface.co/collections/ibm-granite/granite-40-language-models-6811a18b820ef362d9e5a82c)」は、この記事を書いている段階ではプレビュー版の状態でした。

## Supabaseの準備
今回はパブリッククラウド版を使います。セルフホスト版をつなげる方法は次回以降にあつかいます
Flowiseのオンラインヘルプに、FlowiseにおけるSupabaseの設定ついて説明した[ドキュメント](https://docs.flowiseai.com/integrations/langchain/vector-stores/supabase)があるので、それを参考にSupabaseのテーブルを作成します。
上記のドキュメントとは異なり、テーブルに格納するデータは日本語にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/b705c445-21f8-4f5e-8d34-964e5737d089.png)

## Google GeminiのAPIキーを取得
[Google AI Studio](https://aistudio.google.com/app/apikey)にアクセスし、GeminiのAPIを使うために必要なAPIキーを取得してください。

# CodeEngineで、RAGを用いたチャットボットをつくる
まずは、CodeEngine上でFlowiseを起動し、その後、チャットボットを作成していきます。

## CodeEngineで認証機能付きのFlowise環境を構築する
サーバーレスであるCodeEngineを用いて、Flowiseの実行環境をつくっていきます。
[IBM Cloud Catalog](https://cloud.ibm.com/catalog)で、CodeEngineを選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/c00942b0-6e01-48d9-926b-0d222cb41797.png)

「Start creating」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/525534a5-8a06-4ac9-a78e-1e1c2b6c4f2e.png)

「Create project」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/375202eb-2db2-47c9-bae9-576580db7b96.png)

画面右側に「Create Project」が表示されるので、Locationなどを選び、「Create」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ca709cf8-3412-4852-b433-52eea720923f.png)

画面中央に戻り、「Component type」に「Application」を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/19f89ed1-8349-4559-89e3-a9dbbc7730e7.png)

「Name」に「Flowise」と入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ce62842b-0b10-423c-9055-362f95d2fdf8.png)

Codeの「Use an existing container image」を選び、「Image reference」の項目に、以下を入力します。

```
docker.io/flowiseai/flowise:latest
```
下図のようになるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/d405075e-6109-49d3-b419-a90281b19b7d.png)

試しに動かすレベルであれは、リソース設定についてはそのままでも良いですが、安定して運用する場合は「Min number of instances」の数値を「0」→「1」にしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/53d7309f-8841-4ad0-acbf-6c999321f6dc.png)

画面下に移動し、「Optional settings」の「Environment variables」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ac84b86a-8ac9-4a7d-974f-4f4c6330e98d.png)

環境変数を設定し、Flowiseの画面にアクセスしたとき、あらかじめ設定したユーザー名とパスワードで認証が行われるようにします。
「Add」をクリックします。最初はユーザー名の設定です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/e4326552-e2d7-4f15-b798-bb9c83574517.png)

「Literal value」を選び、
- 「Environment variable name」の値として、「FLOWISE_USERNAME」を入れます。
- 「Value」の値として、「admin」を入れます。admin以外でも構いませんので任意のユーザー名にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/4b549ae0-e1ed-4508-a423-950560cf1496.png)

その後、「Add」をクリックします。
同じ動作で、パスワードを設定します。
- 「Environment variable name」の値として、「FLOWISE_PASSWORD」を入れます。
- 「Value」の値として、「zxcvfr45」を入れます。この値はあくまで例です。適切な文字数のパスワードにしましょう。

結果として、このように設定されているはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/322f470d-0bed-4084-aa3c-2ef5864231af.png)

画面右側の「Summary」に表示されている、「Create」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/d7cff31c-a4bc-474a-a627-89d06b29cacf.png)

「Ready」の状態が表示されるまで待ちます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/0ffb63fc-ec43-467c-880c-ac7872607f6d.png)

「Ready」と表示された後、画面右側の「Test application」>>「Application URL」の順にクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/635392eb-81e0-4877-8b42-3873f23c0619.png)

Flowiseのログイン画面が表示されるので、先ほど設定した「FLOWISE_USERNAME」と「FLOWISE_PASSWORD」のそれぞれの値を入力し、「Login」をクリックします。これで、Flowiseの画面を使う際に認証を行う、少しだけセキュアな環境が手に入りました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/432fb38b-4095-483a-82a7-0564e0b303b1.png)

ログイン後は、Flowiseの通常画面が表示されるので、「Add new」をクリックして、チャットボットをつくりましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/512f7b8d-119a-430c-aa13-1f3ca343f761.png)

## Flowiseで、RAGを用いたチャットボットをつくる

CodeEngineで稼働するサーバーレスなFlowise実行環境が手に入りましたので、SuapbaseやGoogle Geminiを使って、RAGを用いたチャットボットをつくっていきます。

Flowiseの画面で「Add new」をクリックすることで、1つ目の「Chatflow」をつくることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/a266d4fb-e687-4359-9f4c-430e66e28e54.png)

画面左上の「＋」をクリックすることで、様々なノード（箱状のもの）を追加し、ノードを複数配置して線で結ぶことでチャットボットとして動かすことができます。

### Supabaseノードの配置
Supabase環境に接続するノードを、画面の余白部分にドラッグ&ドロップで配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/3dbaa8d7-af76-444c-b398-268bd48a2ba2.png)

配した「Supabase」ノードについて、「Connect Credential」の「▼」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/8bd0708a-ca12-4218-b975-a64768952b5e.png)

「Create New」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/2c6f4a6b-c45a-4dd1-b0c7-7261d15f5897.png)

「Supabase API」の画面に表示される各項目に必要な値を入力します。
- 「CREDENTIAL NAME」：英数字で任意の値を入力します。例 Supabase
- 「Supabase API Key」：Supabaseの画面の「Project Settings」内に「Data API」に表示される「anon」「public」に表示されている文字列をコピーして入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/234c2f14-4e5d-4dc2-bae3-194b1281f189.png)

この後の作業で使う「Project URL」の値も控えておきます。
Supabaseのノードに戻り、以下の項目に必要な値を入力します。
- 「Project URL」
- 「Table Name」
- 「Query Name」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/26b68b7a-46da-4a57-953b-e5df9452a867.png)

### Buffer Memoryノードの配置
「Buffer Memory」ノードを画面の余白部分に配置します。「Buffer Memory」ノードは、チャットボット内の会話を記録/取得するために必要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/15ea2f63-9efd-491a-9110-ec54762eacf6.png)

### Googleの生成AIサービス、Gemini関係ノードの配置
「ChatGoogleGenerativeAI」ノードと「GoogleGenerativeAI Embeddings」ノードの２つを配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/80ac9dff-5b75-4d15-8d2e-cfef56cf3f50.png)

ひとまず、２つ並べます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/76770f97-961c-4be2-800c-8b17e9dbe03d.png)

Supabaseノードを設定した時と同じ要領で、それぞれのノードの「Connect Credential」の「▼」をクリックします。
- 「CREDENTIAL NAME」は、「ChatGoogleGenerativeAI」ノードと「GoogleGenerativeAI Embeddings」ノードは、別々の値にします。
- 「Google AI API Key」は、Google AI Studioで取得したAPIキーを入力します。こちらは両ノードともに同じ値です。

例として、下図のように設定します。
- 「GoogleGenerativeAI Embeddings」ノードの「Model Name」に「embedding-001」を選んでいます。選択できるモデルであれば、他のモデルでも構いません。
- 「ChatGoogleGenerativeAI」ノードでは、「Model Name」に「gemini-2.0-flash-lite」を選んでいます。選択できるモデルであれば、他のモデルでも構いません。
- 「Temperature」の値は、通常は1以下が推奨されます。標準では0.9が設定されており、0に近づけば近づくほど、RAGに用いるデータ（Supabase内のドキュメント）に近い結果がでるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/bd252031-a103-464b-ad96-d0d9286b99b8.png)

### Conversational Retrieval QA Chainノードの配置
チャットボットの機能を提供する「Conversational Retrieval QA Chain」ノードを配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/2312ef32-79e9-4ddb-a0d4-69b0cfa2510b.png)

### 各ノードを線で結ぶ
下図のようになるように、各ノードを線で結びます。

完成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/18782071-a86e-41a8-add2-8bbc8cc35a0e.png)

画面右上のフロッピーディスクのアイコン（Save Chatflow）をクリックし、保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/f1620180-fb36-4a1d-883d-475ec524bff0.png)

作成したChatflowに名前をつけます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/f15d714c-a60d-4ff7-8c22-a00b2b0c7e07.png)

### チャットボットの動作確認を行う

画面右上に表示されている「Chat」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/b7339d34-c0fd-433b-9b9e-0b6f0fa59dd5.png)

チャットUIが表示されるので、質問してみましょう。質問に対して、ベクトルストアに指定したSupabaseのテーブルに登録されている内容に近いレスポンスが生成されるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/31e2104d-a2c1-4445-9741-755b1a95aa06.png)

# チャットボットを公開する
Chatflowが完成した場合は、チャットボットとして公開しましょう。
画面右上の「API Endpoint」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/61d42473-74fe-4810-8329-d6b113b00939.png)

「Embed in website or use as API」の画面が表示されます。
「Share Chatbot」のタブをクリックします。「Make Public」をクリックし公開します。表示されているURLにアクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/c619fd0d-4648-4d5b-8199-a49ee5b90481.png)

チャットボットとして利用できることがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/e6a69698-1553-4536-a19c-49b2eb47f979.png)

# 今後の展開

これで、サーバーレス環境であるCodeEngineで、Flowiseを実行できることが確認できました。
「Supabase」のセルフホスト版や「watsonx.ai」、Ollama＋IBM Granite3.3の活用、AIアバターとの連携など続けて取り組んでいきたいと思います。