Clouduxmcp

🚀 MediaCentral AI Assistant

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

🚀 Quick Start

To quickly start using the MediaCentral AI Assistant, follow the steps below:

1. Clone the Repository:

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

2. Install Dependencies: Refer to the Installation section for detailed installation steps.
3. Run the Application: You can choose to start the backend and frontend services separately or use the quick start script on Windows. See the Running the Application section for more details.
4. Authenticate and Use: Open the application in your browser, authenticate with your MediaCentral credentials, and start chatting with the AI assistant using natural language.

✨ Features

• 🤖 AI-Powered Chat Interface: Interact with MediaCentral systems through natural language queries.
• 🔍 System Browsing: Navigate through folders, projects, and assets using an interactive tree structure.
• 🔐 OAuth2 Authentication: Ensure secure authentication with MediaCentral.
• 📊 System Discovery: Automatically detect PAM/MAM systems.
• 🎯 MCP Protocol: Integrate AI tools using the Model Context Protocol.
• ⚡ Real-time Updates: Receive live feedback and enjoy an interactive UI.

📦 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

💻 Usage Examples

1. Authenticate

1. Open http://localhost:5173 in your browser.
2. Enter your MediaCentral credentials:
   • MCS Host: Your MediaCentral host URL.
   • Username: Your username.
   • Password: Your password.
3. Click Authenticate.

2. Chat with AI Assistant

Once authenticated, you can interact with the AI using natural language. Here are some 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.

📚 Documentation

API Endpoints

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.

🔧 Technical Details

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

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.

📄 License

This project is proprietary and confidential.

🛠️ 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

🤝 Contributing

Contributions are welcome! Please follow these steps:

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

📞 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.