CloudUxMCP by pandiaaman - MCP Server

MediaCentral AI Assistant

An AI-powered assistant for Avid MediaCentral CTMS (Connectivity Toolkit Media Services) with an intuitive React UI. This application enables natural language interaction with MediaCentral's PAM (Production Asset Management) and MAM (Media Asset Management) systems.

Features

🤖 AI-Powered Chat Interface - Natural language queries to interact with MediaCentral systems
🔍 System Browsing - Interactive tree navigation through folders, projects, and assets
🔐 OAuth2 Authentication - Secure authentication with MediaCentral
📊 System Discovery - Automatic detection of PAM/MAM systems
🎯 MCP Protocol - Model Context Protocol for AI tool integration
⚡ Real-time Updates - Live feedback and interactive UI

Architecture

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

Prerequisites

Python 3.11+ - Backend runtime
Node.js 16+ - Frontend runtime
MediaCentral Instance - Access to Avid MediaCentral CTMS
OpenAI API Key - For AI-powered natural language processing

Installation

1. Clone the Repository

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

2. Backend Setup

Create Virtual Environment (if not exists)

# 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

Configure Environment Variables

Create a .env file in the avidmcpserver directory:

# 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

Note: Copy .env.example to .env and update with your credentials:

cp .env.example .env

3. Frontend Setup

# Navigate to frontend directory
cd ..\avidmcpui

# Install dependencies
npm install

Running the Application

Option 1: Start Both Services Separately

Terminal 1 - Backend Server

# 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

The backend API will be available at:

API: http://localhost:8000
API Docs: http://localhost:8000/docs
Health Check: http://localhost:8000/health

Terminal 2 - Frontend Server

# Navigate to frontend directory
cd avidmcpui

# Start the Vite dev server
npm run dev

The frontend UI will be available at:

UI: http://localhost:5173

Option 2: Quick Start Script (Windows)

Create a start.ps1 file in the root directory:

# 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"

Run with:

.\start.ps1

Usage

1. Authenticate

Open http://localhost:5173 in your browser
Enter your MediaCentral credentials:
- MCS Host: Your MediaCentral host URL
- Username: Your username
- Password: Your password
Click Authenticate

2. Chat with AI Assistant

Once authenticated, you can interact with the AI using natural language:

Example Queries:

"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. Interactive System Browsing

The AI will display systems in an interactive tree structure:

📁 Folders/Projects - Click to browse deeper
📄 Assets - View details
Expand/Collapse - Use ▶/▼ icons to navigate

API Endpoints

Authentication

POST /api/authenticate - Authenticate with MediaCentral
GET /api/auth/status - Check authentication status

Chat

POST /api/chat - Send a query to the AI assistant
POST /api/chat/clear - Clear conversation history

Systems

GET /api/systems - Get all connected systems
GET /api/systems/pam - Get PAM systems only
GET /api/systems/mam - Get MAM systems only

Resources

GET /api/resources - Get available resources
GET /api/service-roots - Get service roots

Health

GET /health - Server health check
GET /api/openai/status - OpenAI API key status

Configuration

Backend Configuration

Edit 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

Frontend Configuration

The frontend automatically connects to http://localhost:8000 for the backend API. To change this, edit avidmcpui/src/components/AIChatbot.jsx and avidmcpui/src/components/Authenticate.jsx.

Troubleshooting

Backend Issues

Issue: Virtual environment not found

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

Issue: OpenAI API key error

Verify your API key in .env is valid
Check balance at https://platform.openai.com/account/billing
Get a new key at https://platform.openai.com/api-keys

Issue: MediaCentral authentication fails

Verify MCS_HOST, MCS_USERNAME, MCS_PASSWORD in .env
Check network connectivity to MediaCentral
Ensure OAuth endpoints are accessible

Issue: Module import errors

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

Frontend Issues

Issue: Cannot connect to backend

Ensure backend is running on http://localhost:8000
Check curl http://localhost:8000/health works
Verify CORS is enabled in backend

Issue: npm install fails

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

Issue: Port 5173 already in use

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

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

Common Issues

Issue: "react-markdown" not found

cd avidmcpui
npm install react-markdown

Issue: Browser console shows CORS errors

Backend automatically enables CORS for http://localhost:5173
Check main.py has proper CORS middleware configuration

Development

Backend Development

# 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

Frontend Development

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

# Build for production
npm run build

# Preview production build
npm run preview

Project Structure

Backend Files

main.py - FastAPI application, REST endpoints, CORS middleware
mcp_server.py - MCP protocol implementation, tool definitions
mcp_client.py - OpenAI GPT-4 integration, function calling
auth_service.py - OAuth2 authentication, token management
ctms_service.py - CTMS API interactions, system browsing
models.py - Pydantic data models for validation
config.py - Environment configuration

Frontend Files

AIChatbot.jsx - Main chat interface with markdown rendering
Authenticate.jsx - Login form component
BrowseTree - Interactive tree component for system navigation
App.jsx - Route management and main layout

Technologies Used

Backend

FastAPI - Modern async web framework
Uvicorn - ASGI server
httpx - Async HTTP client
OpenAI - GPT-4 integration
Pydantic - Data validation

Frontend

React 19 - UI library
Vite - Build tool and dev server
react-markdown - Markdown rendering

Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

License

This project is proprietary and confidential.

Support

For issues or questions:

Open an issue on GitHub
Contact the development team
Check the API documentation at http://localhost:8000/docs

Acknowledgments

Avid Technology for MediaCentral CTMS API
OpenAI for GPT-4 language model
FastAPI and React communities