Clouduxmcp

🚀 MediaCentral AI Assistant

AI技術を活用した、Avid MediaCentral CTMS（Connectivity Toolkit Media Services）用のアシスタントです。直感的なReact UIが備わっており、MediaCentralのPAM（Production Asset Management）およびMAM（Media Asset Management）システムと自然言語で対話できます。

🚀 クイックスタート

このアプリケーションを使用することで、MediaCentralのPAMおよびMAMシステムと自然言語で対話できます。以下の手順でセットアップして起動しましょう。

✨ 主な機能

• 🤖 AI搭載のチャットインターフェイス - MediaCentralシステムと自然言語で対話できます。
• 🔍 システムブラウジング - フォルダ、プロジェクト、アセットをインタラクティブなツリーナビゲーションで閲覧できます。
• 🔐 OAuth2認証 - MediaCentralとの安全な認証が可能です。
• 📊 システム検出 - PAM/MAMシステムを自動検出します。
• 🎯 MCPプロトコル - AIツールを統合するためのModel Context Protocolです。
• ⚡ リアルタイム更新 - リアルタイムのフィードバックとインタラクティブなUIが提供されます。

📦 インストール

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

git clone https://github.com/pandiaaman/CloudUxMCP.git
cd mcpserver

2. バックエンドのセットアップ

仮想環境を作成する（存在しない場合）

# バックエンドディレクトリに移動
cd avidmcpserver

# 仮想環境を作成
python -m venv .venv

# 仮想環境をアクティブ化
.\.venv\Scripts\Activate.ps1

# 依存関係をインストール
pip install -r requirements.txt

環境変数を設定する

avidmcpserverディレクトリに.envファイルを作成します。

# MediaCentralの設定
MCS_HOST=your-mediacentral-host.com
MCS_USERNAME=your-username
MCS_PASSWORD=your-password

# OpenAIの設定
OPENAI_API_KEY=sk-proj-your-openai-api-key

# サーバーの設定（オプション）
HOST=0.0.0.0
PORT=8000

注意: .env.exampleを.envにコピーし、自分の資格情報を更新してください。

cp .env.example .env

3. フロントエンドのセットアップ

# フロントエンドディレクトリに移動
cd ..\avidmcpui

# 依存関係をインストール
npm install

💻 使用例

基本的な使用法

アプリケーションの起動

オプション1: 両方のサービスを別々に起動する

ターミナル1 - バックエンドサーバー

# バックエンドディレクトリに移動
cd avidmcpserver

# 仮想環境をアクティブ化（まだアクティブ化されていない場合）
.\.venv\Scripts\Activate.ps1

# 自動リロードでFastAPIサーバーを起動
uvicorn main:app --reload --host 0.0.0.0 --port 8000

バックエンドAPIは以下の場所で利用できます。

• API: http://localhost:8000
• APIドキュメント: http://localhost:8000/docs
• ヘルスチェック: http://localhost:8000/health

ターミナル2 - フロントエンドサーバー

# フロントエンドディレクトリに移動
cd avidmcpui

# Vite開発サーバーを起動
npm run dev

フロントエンドUIは以下の場所で利用できます。

• UI: http://localhost:5173

オプション2: クイックスタートスクリプト（Windows）

ルートディレクトリにstart.ps1ファイルを作成します。

# バックエンドをバックグラウンドで起動
Start-Process powershell -ArgumentList "-NoExit", "-Command", "cd avidmcpserver; .\.venv\Scripts\Activate.ps1; uvicorn main:app --reload --host 0.0.0.0 --port 8000"

# バックエンドが起動するのを待つ
Start-Sleep -Seconds 3

# フロントエンドをバックグラウンドで起動
Start-Process powershell -ArgumentList "-NoExit", "-Command", "cd avidmcpui; npm run dev"

Write-Host "✅ サービスが起動しました！"
Write-Host "バックエンドAPI: http://localhost:8000"
Write-Host "フロントエンドUI: http://localhost:5173"

以下のコマンドで実行します。

.\start.ps1

アプリケーションの使用

1. 認証する

1. ブラウザでhttp://localhost:5173を開きます。
2. MediaCentralの資格情報を入力します。
   • MCS Host: あなたのMediaCentralホストURL
   • Username: あなたのユーザー名
   • Password: あなたのパスワード
3. Authenticateをクリックします。

2. AIアシスタントとチャットする

認証が完了すると、自然言語を使ってAIと対話できます。 例のクエリ:

• "Show me all connected systems"
• "What PAM systems are available?"
• "Browse the AvidWG system"
• "Show me what's in the Projects folder"
• "List all MAM systems"
• "Get service roots"

3. インタラクティブなシステムブラウジング

AIはシステムをインタラクティブなツリー構造で表示します。

• 📁 フォルダ/プロジェクト - クリックすると深くブラウズできます。
• 📄 アセット - 詳細を表示します。
• 展開/折りたたみ - ▶/▼アイコンを使用してナビゲートします。

📚 ドキュメント

APIエンドポイント

認証

• POST /api/authenticate - MediaCentralで認証します。
• GET /api/auth/status - 認証ステータスを確認します。

チャット

• POST /api/chat - AIアシスタントにクエリを送信します。
• POST /api/chat/clear - 会話履歴をクリアします。

システム

• GET /api/systems - すべての接続されたシステムを取得します。
• GET /api/systems/pam - PAMシステムのみを取得します。
• GET /api/systems/mam - MAMシステムのみを取得します。

リソース

• GET /api/resources - 利用可能なリソースを取得します。
• GET /api/service-roots - サービスルートを取得します。

ヘルスチェック

• GET /health - サーバーのヘルスチェックを行います。
• GET /api/openai/status - OpenAI APIキーのステータスを確認します。

設定

バックエンドの設定

avidmcpserver/.envを編集します。

# 必須
MCS_HOST=mediacentral-host.com
MCS_USERNAME=username
MCS_PASSWORD=password
OPENAI_API_KEY=sk-proj-...

# オプション
HOST=0.0.0.0
PORT=8000
LOG_LEVEL=INFO

フロントエンドの設定

フロントエンドは自動的にバックエンドAPIのhttp://localhost:8000に接続します。これを変更するには、avidmcpui/src/components/AIChatbot.jsxとavidmcpui/src/components/Authenticate.jsxを編集します。

トラブルシューティング

バックエンドの問題

問題: 仮想環境が見つからない

# まず作成します
cd avidmcpserver
python -m venv .venv
.\.venv\Scripts\Activate.ps1
pip install -r requirements.txt

問題: OpenAI APIキーエラー

• .envのAPIキーが有効であることを確認します。
• https://platform.openai.com/account/billingで残高を確認します。
• https://platform.openai.com/api-keysで新しいキーを取得します。

問題: MediaCentral認証が失敗する

• .envのMCS_HOST、MCS_USERNAME、MCS_PASSWORDを確認します。
• MediaCentralへのネットワーク接続を確認します。
• OAuthエンドポイントがアクセス可能であることを確認します。

問題: モジュールインポートエラー

# 依存関係を再インストール
pip install --force-reinstall -r requirements.txt

フロントエンドの問題

問題: バックエンドに接続できない

• バックエンドがhttp://localhost:8000で実行されていることを確認します。
• curl http://localhost:8000/healthが機能することを確認します。
• バックエンドでCORSが有効になっていることを確認します。

問題: npm installが失敗する

# キャッシュをクリアして再インストール
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

問題: ポート5173がすでに使用されている

# ポート5173を使用しているプロセスを終了
netstat -ano | findstr :5173
taskkill /PID <PID> /F

# または別のポートを使用
npm run dev -- --port 3000

共通の問題

問題: "react-markdown"が見つからない

cd avidmcpui
npm install react-markdown

問題: ブラウザコンソールにCORSエラーが表示される

• バックエンドは自動的にhttp://localhost:5173のCORSを有効にします。
• main.pyに適切なCORSミドルウェア設定があることを確認します。

開発

バックエンドの開発

# 仮想環境をアクティブ化
cd avidmcpserver
.\.venv\Scripts\Activate.ps1

# 自動リロードで実行（開発モード）
uvicorn main:app --reload --host 0.0.0.0 --port 8000

# テストを実行
python test_complete.py
python test_browse.py

フロントエンドの開発

# ホットリロードで開発サーバーを起動
cd avidmcpui
npm run dev

# 本番用にビルド
npm run build

# 本番ビルドをプレビュー
npm run preview

プロジェクト構造

バックエンドファイル

• main.py - FastAPIアプリケーション、RESTエンドポイント、CORSミドルウェア
• mcp_server.py - MCPプロトコルの実装、ツール定義
• mcp_client.py - OpenAI GPT - 4の統合、関数呼び出し
• auth_service.py - OAuth2認証、トークン管理
• ctms_service.py - CTMS APIの相互作用、システムブラウジング
• models.py - 検証用のPydanticデータモデル
• config.py - 環境設定

フロントエンドファイル

• AIChatbot.jsx - マークダウンレンダリング付きのメインチャットインターフェイス
• Authenticate.jsx - ログインフォームコンポーネント
• BrowseTree - システムナビゲーション用のインタラクティブなツリーコンポーネント
• App.jsx - ルート管理とメインレイアウト

使用されている技術

バックエンド

• FastAPI - 最新の非同期Webフレームワーク
• Uvicorn - ASGIサーバー
• httpx - 非同期HTTPクライアント
• OpenAI - GPT - 4の統合
• Pydantic - データ検証

フロントエンド

• React 19 - UIライブラリ
• Vite - ビルドツールと開発サーバー
• react-markdown - マークダウンレンダリング

コントリビュート

コントリビューションは歓迎されます！以下の手順に従ってください。

1. リポジトリをフォークします。
2. 機能ブランチを作成します: git checkout -b feature/amazing-feature
3. 変更をコミットします: git commit -m 'Add amazing feature'
4. ブランチにプッシュします: git push origin feature/amazing-feature
5. プルリクエストを開きます。

📄 ライセンス

このプロジェクトは独自の機密情報です。

サポート

問題や質問がある場合は、以下の方法で対応します。

• GitHubで問題を開きます。
• 開発チームに連絡します。
• http://localhost:8000/docsのAPIドキュメントを確認します。

謝辞

• Avid TechnologyのMediaCentral CTMS API
• OpenAIのGPT - 4言語モデル
• FastAPIとReactのコミュニティ