Cloud Ux MCP

MediaCentral人工智能助手

Avid MediaCentral CTMS（连接工具包媒体服务）的AI助手，具有直观的React UI。此应用程序支持与MediaCentral的PAM（生产资产管理）和MAM（媒体资产管理）系统进行自然语言交互。

特性

• 🤖 人工智能聊天界面 -与MediaCentral系统交互的自然语言查询
• 🔍 系统浏览 -通过文件夹、项目和资产进行交互式树导航
• 🔐 OAuth2身份验证 -使用MediaCentral进行安全身份验证
• 📊 系统发现 -PAM/MAM系统的自动检测
• 🎯 MCP协议 -人工智能工具集成的模型上下文协议
• ⚡ 实时更新 -实时反馈和交互式UI

建筑

mcpserver/
├── avidmcpserver/          # Backend FastAPI server
│   ├── main.py             # REST API endpoints
│   ├── mcp_server.py       # MCP protocol implementation
│   ├── mcp_client.py       # OpenAI integration
│   ├── auth_service.py     # OAuth2 authentication
│   ├── ctms_service.py     # CTMS API interactions
│   ├── models.py           # Data models
│   ├── config.py           # Configuration
│   ├── requirements.txt    # Python dependencies
│   └── .env                # Environment variables
│
└── avidmcpui/              # Frontend React application
    ├── src/
    │   ├── components/
    │   │   ├── AIChatbot.jsx       # AI chat interface
    │   │   ├── AIChatbot.css       # Chat styling
    │   │   ├── Authenticate.jsx    # Login component
    │   │   └── Authenticate.css    # Login styling
    │   ├── App.jsx                 # Main app component
    │   └── main.jsx                # Entry point
    ├── package.json                # NPM dependencies
    └── vite.config.js              # Vite configuration

先决条件

• Python 3.11+ -后端运行时
• Node.js 16+ -前端运行时
• MediaCentral实例 -访问Avid MediaCentral CTMS
• OpenAI API密钥 -用于人工智能驱动的自然语言处理

安装

1.克隆存储库

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

2.后端设置

创建虚拟环境（如果不存在）

# Navigate to backend directory
cd avidmcpserver

# Create virtual environment
python -m venv .venv

# Activate virtual environment
.\.venv\Scripts\Activate.ps1

# Install dependencies
pip install -r requirements.txt

配置环境变量

创建一个 .env 文件在 avidmcpserver 目录：

# MediaCentral Configuration
MCS_HOST=your-mediacentral-host.com
MCS_USERNAME=your-username
MCS_PASSWORD=your-password

# OpenAI Configuration
OPENAI_API_KEY=sk-proj-your-openai-api-key

# Server Configuration (optional)
HOST=0.0.0.0
PORT=8000

注： 复制 .env.example 到 .env 并更新您的凭据：

cp .env.example .env

3.前端设置

# Navigate to frontend directory
cd ..\avidmcpui

# Install dependencies
npm install

运行应用程序

选项1：分别启动两个服务

终端1-后端服务器

# Navigate to backend directory
cd avidmcpserver

# Activate virtual environment (if not already activated)
.\.venv\Scripts\Activate.ps1

# Start the FastAPI server with auto-reload
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-前端服务器

# Navigate to frontend directory
cd avidmcpui

# Start the Vite dev server
npm run dev

前端UI将在以下网址提供：

• 用户界面: http://localhost:5173

选项2：快速启动脚本（Windows）

创建一个 start.ps1 根目录中的文件：

# Start backend in background
Start-Process powershell -ArgumentList "-NoExit", "-Command", "cd avidmcpserver; .\.venv\Scripts\Activate.ps1; uvicorn main:app --reload --host 0.0.0.0 --port 8000"

# Wait for backend to start
Start-Sleep -Seconds 3

# Start frontend in background
Start-Process powershell -ArgumentList "-NoExit", "-Command", "cd avidmcpui; npm run dev"

Write-Host "✅ Services started!"
Write-Host "Backend API: http://localhost:8000"
Write-Host "Frontend UI: http://localhost:5173"

运行方式：

.\start.ps1

用法

1.身份验证

1. 打开http://localhost:5173在浏览器中
2. 输入您的MediaCentral凭据：

- MCS主机：您的MediaCentral主机URL - 用户名：您的用户名 - 密码：您的密码

1. 点击 验证

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.交互式系统浏览

人工智能将以交互式树形结构显示系统：

• 📁 文件夹/项目 -点击浏览更深入
• 📄 资产 -查看详细信息
• 展开/折叠 -使用▶/▼ 导航图标

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:

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

# Optional
HOST=0.0.0.0
PORT=8000
LOG_LEVEL=INFO

前端配置

前端自动连接到 http://localhost:8000 用于后端API。要更改此设置，请编辑 avidmcpui/src/components/AIChatbot.jsx 和 avidmcpui/src/components/Authenticate.jsx.

故障排除

后端问题

问题：找不到虚拟环境

# Create it first
cd avidmcpserver
python -m venv .venv
.\.venv\Scripts\Activate.ps1
pip install -r requirements.txt

问题：OpenAI API密钥错误

• 在中验证您的API密钥 .env 有效
• 查看余额https://platform.openai.com/account/billing
• 获取新密钥https://platform.openai.com/api-keys

问题：MediaCentral身份验证失败

• 验证 MCS_HOST, MCS_USERNAME, MCS_PASSWORD 在 .env
• 检查与MediaCentral的网络连接
• 确保OAuth端点可访问

问题：模块导入错误

# Reinstall dependencies
pip install --force-reinstall -r requirements.txt

前端问题

问题：无法连接到后端

• 确保后端正在运行http://localhost:8000
• 检查 curl http://localhost:8000/health 作品
• 验证后端是否启用了CORS

问题：npm安装失败

# Clear cache and reinstall
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

问题：端口5173已在使用中

# Kill the process using port 5173
netstat -ano | findstr :5173
taskkill /PID 
 /F

# Or use a different port
npm run dev -- --port 3000

常见问题

问题：未找到“react markdown”

cd avidmcpui
npm install react-markdown

问题：浏览器控制台显示CORS错误

• 后端自动启用CORS http://localhost:5173
• 检查 main.py 具有适当的CORS中间件配置

发展

后端开发

# Activate virtual environment
cd avidmcpserver
.\.venv\Scripts\Activate.ps1

# Run with auto-reload (development mode)
uvicorn main:app --reload --host 0.0.0.0 --port 8000

# Run tests
python test_complete.py
python test_browse.py

前端开发

# Start dev server with hot reload
cd avidmcpui
npm run dev

# Build for production
npm run build

# Preview production 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 -带有markdown渲染的主聊天界面
• 身份验证.jsx -登录表单组件
• 浏览树 -用于系统导航的交互式树组件
• 附件x -路线管理和主要布局

使用的技术

后端

• 快速API -现代异步web框架
• 乌维科恩 -ASGI服务器
• HTTPX -异步HTTP客户端
• 开放人工智能 -GPT-4集成
• 派丹蒂克 -数据验证

前端

• 反应19 -UI库
• 维特 -构建工具和开发服务器
• 反应降价 -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上打开一个问题
• 联系开发团队
• 查看API文档，网址：http://localhost:8000/docs

致谢

• MediaCentral CTMS API的Avid技术
• GPT-4语言模型的OpenAI
• FastAPI和React社区