【MOA】社内向けAI Web UI構築ガイド：open webui + pipeline + langfuse

## はじめに

最近、企業内でAIを活用したいというニーズが高まっています。しかし、セキュリティやコスト管理の観点から、パブリックなAIサービスをそのまま利用するのは難しい場合があります。そこで今回は、MOA（Magic of AWS）プロジェクトを基盤として、open webui、pipeline、そしてlangfuseを組み合わせて、社内向けのAI Web UIを構築する方法をご紹介します。

この組み合わせには以下のような利点があります：

- open webui：使いやすいUIと豊富な機能（アーティファクト機能など）
- pipeline：カスタマイズ可能な処理フロー
- langfuse：詳細なコスト管理と利用状況の分析

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">open webui + pipeline + langfuseで社内向けAI WEB UIを作ってみた<br>✅open webui：アーティファクト機能搭載のUI<br>✅pipeline + langfuse：ユーザー毎のコスト管理に便利<br>＊後ほど記事とリポジトリ公開していきます！ <a href="https://t.co/nqh5vpeL1z">https://t.co/nqh5vpeL1z</a> <a href="https://t.co/Z27Zf1AeVl">pic.twitter.com/Z27Zf1AeVl</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1843957866186887210?ref_src=twsrc%5Etfw">October 9, 2024</a></blockquote> 

## MOA（Magic of AWS）とは

MOAは、AWSの基盤技術を活用し、Dockerを通じて企業がクラウド環境でLLM（大規模言語モデル）を簡単に利用できるようにするプロジェクトです。AWS CLIがプリインストールされた独立した開発環境を提供することで、高度なセキュリティとプライバシーを保ちつつ、AI技術を効果的に活用できるよう支援します。

## セットアップ手順

### 1. 前提条件

- Dockerがインストールされていること
- docker-composeコマンドが使用可能であること

### 2. リポジトリのクローン

まず、MOAリポジトリをクローンします。

```bash
git clone https://github.com/Sunwood-ai-labs/MOA.git
cd MOA
```

### 3. 環境変数の設定

`.env`ファイルを作成し、必要な環境変数を設定します。

```
AWS_ACCESS_KEY_ID=YOUR_AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY=YOUR_AWS_SECRET_ACCESS_KEY
AWS_REGION_NAME=your-preferred-region
AWS_DEFAULT_REGION=your-preferred-region
AWS_DEFAULT_OUTPUT=json

OLLAMA_BASE_URL=http://ollama:11434
WEBUI_SECRET_KEY=sk-1234
LITELLM_PROXY_HOST=0.0.0.0
OPEN_WEBUI_PORT=8080

```

### 4. サービスの起動

以下のコマンドを実行して、全てのサービスを起動します。

```bash
docker-compose -f docker-compose.ollama.yml -f spellbook/langfuse/docker-compose.yml -f spellbook/docker-compose.pipelines.yml up
```

このコマンドにより、open webui、ollama、langfuse、pipelineの全てのサービスが起動します。

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">open webui + pipeline + langfuseで社内向けAI WEB UIを作ってみた：Step①<br>✅全部乗せDockerコマンドを実行<br>docker-compose -f docker-compose.ollama.yml -f spellbook/langfuse/docker-compose.yml -f spellbook/docker-compose.pipelines.yml up<br>✅これでlocalhost:8181/にアプリが起動します <a href="https://t.co/zMzA5GXmBg">https://t.co/zMzA5GXmBg</a> <a href="https://t.co/YMOpOuaokK">pic.twitter.com/YMOpOuaokK</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1843959548740309021?ref_src=twsrc%5Etfw">October 9, 2024</a></blockquote>

### 5. サービスの設定

#### pipelinesの設定
   - http://pipelines:9099 にアクセス
   - デフォルトパスワード: 0p3n-w3bu!

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">open webui + pipeline + langfuseで社内向けAI WEB UIを作ってみた：Step②<br>✅open-webui pipelinesをモデル設定から設定します<br>・アクセスURL: http://pipelines:9099<br>・デフォルトのパスワード: 0p3n-w3bu! <a href="https://t.co/fjDXhL3NOT">https://t.co/fjDXhL3NOT</a> <a href="https://t.co/DFzllRnsV3">pic.twitter.com/DFzllRnsV3</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1843960627729195462?ref_src=twsrc%5Etfw">October 9, 2024</a></blockquote> 

#### langfuseの設定
   - http://localhost:3000/ にアクセス
   - 新しいプロジェクトを作成し、public keyとsecret keyを取得

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">open webui + pipeline + langfuseで社内向けAI WEB UIを作ってみた：Step③<br>✅langfuseでキーペアを発行<br>・http://localhost:3000/にアクセスして、langfuseでpublic_keyとsecret_keyを発行します。<br>・langfuseの管理画面にアクセスし、新しいプロジェクトを作成してキーを取得します。 <a href="https://t.co/ngZujrd7Rz">https://t.co/ngZujrd7Rz</a> <a href="https://t.co/dejdW78On4">pic.twitter.com/dejdW78On4</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1843961653039411692?ref_src=twsrc%5Etfw">October 9, 2024</a></blockquote> 

#### パイプラインの設定
   - `langfuse_filter_pipeline.py`をインポートし、langfuseのキーを設定
   - `conversation_turn_limit_filter.py`をインポートして会話の制限を解除

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">open webui + pipeline + langfuseで社内向けAI WEB UIを作ってみた：Step④<br>✅pipelineとlangfuseの連携<br>langfuse_filter_pipeline.pyをパイプラインにインポートし、public_keyとsecret_keyを設定します。 <a href="https://t.co/2yZUjPqzLo">https://t.co/2yZUjPqzLo</a> <a href="https://t.co/vRt8ewY9nE">pic.twitter.com/vRt8ewY9nE</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1843962242750115899?ref_src=twsrc%5Etfw">October 9, 2024</a></blockquote> 

## 使用方法

設定が完了したら、http://localhost:8080 にアクセスしてopen webuiを使用できます。ユーザーはこのインターフェースを通じてAIと対話できます。

## コスト管理と分析

langfuseのダッシュボード（http://localhost:3000）で、ユーザーごとの利用状況やコストを詳細に分析できます。これにより、部門別や個人別の利用状況を把握し、必要に応じて利用制限を設けることも可能です。

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">open webui + pipeline + langfuseで社内向けAI WEB UIを作ってみた：Step⑤完<br>✅コストの確認<br>管理画面でユーザーのメールアドレスに紐づいてコストを見ることができます！！！！ <a href="https://t.co/ObUagH9Zkx">https://t.co/ObUagH9Zkx</a> <a href="https://t.co/dPzDyEwqWi">pic.twitter.com/dPzDyEwqWi</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1843963536386793780?ref_src=twsrc%5Etfw">October 9, 2024</a></blockquote> 

## まとめ

この構成により、セキュアでカスタマイズ可能な社内向けAI Web UIを構築できます。open webuiの使いやすさ、pipelineの柔軟性、そしてlangfuseの詳細な分析機能を組み合わせることで、企業のニーズに合ったAI活用環境を整えることができます。

今後の展開として、特定の業務プロセスに合わせたカスタムパイプラインの作成や、セキュリティポリシーに基づいた利用制限の実装なども検討できるでしょう。AIの力を社内で安全に活用し、業務効率の向上につなげていきましょう。

## リポジトリ

https://github.com/Sunwood-ai-labs/moa.git


<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>