Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ModelContextProtocol.io (MCP)</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%); | |
| } | |
| .protocol-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .code-block { | |
| font-family: 'Courier New', monospace; | |
| background-color: #2d3748; | |
| border-radius: 0.5rem; | |
| position: relative; | |
| } | |
| .copy-btn { | |
| position: absolute; | |
| top: 0.5rem; | |
| right: 0.5rem; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .code-block:hover .copy-btn { | |
| opacity: 1; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white"> | |
| <div class="container mx-auto px-6 py-12"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-4xl font-bold">ModelContextProtocol.io</h1> | |
| <p class="mt-2 text-xl opacity-90">High-performance context-aware protocol for AI systems</p> | |
| </div> | |
| <div class="hidden md:block"> | |
| <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full text-sm font-semibold">v1.2.0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-6 py-8"> | |
| <!-- MCP Core Architecture --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-2">MCP Core Architecture</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6"> | |
| <!-- Function Transport --> | |
| <div class="protocol-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-exchange-alt text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Function Transport</h3> | |
| </div> | |
| <p class="text-gray-600">QUIC (UDP-based) for low-latency communication with optimized packet routing and congestion control.</p> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 text-sm text-gray-500"> | |
| <span class="font-medium">Port:</span> 5840 | |
| </div> | |
| </div> | |
| <!-- Session --> | |
| <div class="protocol-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-user-shield text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Session</h3> | |
| </div> | |
| <p class="text-gray-600">JWT-based agent authentication with rotating keys and session timeouts for secure communication.</p> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 text-sm text-gray-500"> | |
| <span class="font-medium">TTL:</span> 24h | |
| </div> | |
| </div> | |
| <!-- Context --> | |
| <div class="protocol-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-project-diagram text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Context</h3> | |
| </div> | |
| <p class="text-gray-600">Protocol Buffers encoding for efficient serialization with schema evolution support.</p> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 text-sm text-gray-500"> | |
| <span class="font-medium">Version:</span> proto3 | |
| </div> | |
| </div> | |
| <!-- Semantic --> | |
| <div class="protocol-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-brain text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Semantic</h3> | |
| </div> | |
| <p class="text-gray-600">RDF/OWL knowledge graphs for rich semantic understanding and reasoning capabilities.</p> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 text-sm text-gray-500"> | |
| <span class="font-medium">Format:</span> Turtle | |
| </div> | |
| </div> | |
| <!-- Action --> | |
| <div class="protocol-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-bolt text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Action</h3> | |
| </div> | |
| <p class="text-gray-600">OpenAPI-like task definitions with JSON Schema validation for consistent execution.</p> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 text-sm text-gray-500"> | |
| <span class="font-medium">Spec:</span> 3.0.0 | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PowerShell Installation --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-2">PowerShell Installation</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="border-b border-gray-200"> | |
| <div class="flex"> | |
| <button class="tab-btn px-6 py-3 text-sm font-medium text-gray-700 border-b-2 border-transparent hover:text-indigo-600 hover:border-indigo-300 active" data-tab="script"> | |
| Full Script | |
| </button> | |
| <button class="tab-btn px-6 py-3 text-sm font-medium text-gray-700 border-b-2 border-transparent hover:text-indigo-600 hover:border-indigo-300" data-tab="features"> | |
| Key Features | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div id="script" class="tab-content active"> | |
| <div class="code-block relative rounded-lg overflow-hidden mb-4"> | |
| <pre class="p-4 text-gray-200 overflow-x-auto"><code># MCP PowerShell Installation Script | |
| # Version 1.2.0 | |
| param ( | |
| [Parameter(Mandatory=$false)] | |
| [string]$InstallPath = "$env:ProgramFiles\MCP" | |
| ) | |
| # Validate system requirements | |
| if (-not (Test-Path "HKLM:\SOFTWARE\Microsoft\NET Framework Setup\NDP\v4\Full")) { | |
| Write-Error ".NET Framework 4.8 or later required" | |
| exit 1 | |
| } | |
| # Create installation directory | |
| if (-not (Test-Path $InstallPath)) { | |
| New-Item -ItemType Directory -Path $InstallPath | Out-Null | |
| } | |
| # Download and extract MCP components | |
| $ProgressPreference = 'SilentlyContinue' | |
| Invoke-WebRequest -Uri "https://mcp.io/download/latest/windows" -OutFile "$InstallPath\mcp-core.zip" | |
| Expand-Archive -Path "$InstallPath\mcp-core.zip" -DestinationPath $InstallPath -Force | |
| # Register Windows service | |
| New-Service -Name "MCP Agent" -BinaryPathName "$InstallPath\mcp-agent.exe" ` | |
| -DisplayName "MCP Context Agent" -StartupType Automatic | Out-Null | |
| # Configure firewall rules | |
| if (Get-Command "New-NetFirewallRule" -ErrorAction SilentlyContinue) { | |
| New-NetFirewallRule -DisplayName "MCP QUIC" -Direction Inbound ` | |
| -LocalPort 5840 -Protocol UDP -Action Allow | Out-Null | |
| New-NetFirewallRule -DisplayName "MCP HTTP/3" -Direction Inbound ` | |
| -LocalPort 5841 -Protocol TCP -Action Allow | Out-Null | |
| } | |
| # Set environment variables | |
| [Environment]::SetEnvironmentVariable("MCP_HOME", $InstallPath, "Machine") | |
| [Environment]::SetEnvironmentVariable("MCP_JWT_SECRET", (New-Guid).Guid, "Machine") | |
| # Verify installation | |
| Start-Service "MCP Agent" | |
| if ((Get-Service "MCP Agent").Status -ne "Running") { | |
| Write-Error "Service failed to start" | |
| exit 1 | |
| } | |
| Write-Host "MCP installed successfully at $InstallPath" -ForegroundColor Green</code></pre> | |
| <button class="copy-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">PowerShell 7+</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Windows 10/11</span> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium">Admin Privileges</span> | |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">.NET 4.8</span> | |
| </div> | |
| </div> | |
| <div id="features" class="tab-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-blue-500 text-white p-2 rounded-full mr-3"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-800">System requirement validation</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm">Checks for PowerShell version, .NET Framework, and OS compatibility before installation.</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-green-500 text-white p-2 rounded-full mr-3"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-800">Automatic service registration</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm">Creates and configures a Windows service for automatic startup and management.</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-purple-500 text-white p-2 rounded-full mr-3"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-800">Firewall configuration</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm">Sets up necessary inbound rules for QUIC (UDP 5840) and HTTP/3 (TCP 5841).</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-red-500 text-white p-2 rounded-full mr-3"> | |
| <i class="fas fa-cog"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-800">Environment variables setup</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm">Configures system-wide variables including installation path and JWT secret.</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-yellow-500 text-white p-2 rounded-full mr-3"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-800">Post-install verification</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm">Validates service startup and provides clear success/error messaging.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Protocol Specifications --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-2">Protocol Specifications</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Context Encoding --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-code mr-2 text-indigo-600"></i> | |
| Context Encoding (.mcproto) | |
| </h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="code-block relative rounded-lg overflow-hidden"> | |
| <pre class="p-4 text-gray-200 overflow-x-auto"><code>syntax = "proto3"; | |
| message ContextFrame { | |
| string agent_id = 1; // UUIDv4 format | |
| bytes semantic_graph = 2; // RDF/Turtle serialized | |
| repeated Action actions = 3; | |
| message Action { | |
| string name = 1; | |
| map<string, string> parameters = 2; | |
| int32 priority = 3; // 0-100 scale | |
| } | |
| // Timestamp in RFC 3339 format | |
| string timestamp = 4; | |
| // Optional digital signature | |
| bytes signature = 5; | |
| }</code></pre> | |
| <button class="copy-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="font-medium text-gray-800 mb-2">Supported Serialization Formats</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">Protocol Buffers</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">JSON</span> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium">MessagePack</span> | |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">CBOR</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Network Endpoints --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-network-wired mr-2 text-indigo-600"></i> | |
| Network Endpoints | |
| </h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Endpoint</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Protocol</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Port</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-indigo-600">mcp://agent.register</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">QUIC</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">5840</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-indigo-600">mcp://context.push</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">HTTP/3</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">5841</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-indigo-600">mcp://metrics.stream</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">WebSocket</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">5842</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-indigo-600">mcp://admin.console</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">HTTPS</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">5843</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-6 bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-blue-500 mt-1"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium text-blue-800">Endpoint Security</h4> | |
| <p class="text-sm text-blue-700 mt-1"> | |
| All endpoints require JWT authentication with rotating keys. QUIC connections use TLS 1.3 with 0-RTT. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3DS Automator Script --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-2">3DS Automator Script (Node.js)</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-xl font-semibold text-gray-800 flex items-center"> | |
| <i class="fab fa-node-js mr-2 text-green-600"></i> | |
| 3DS Automator for MCP-PayPal Agent | |
| </h3> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium mr-2"> | |
| Puppeteer | |
| </span> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium"> | |
| Headless Chrome | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="code-block relative rounded-lg overflow-hidden mb-6"> | |
| <pre class="p-4 text-gray-200 overflow-x-auto"><code>const puppeteer = require('puppeteer'); | |
| const yargs = require('yargs'); | |
| const args = yargs | |
| .option('amount', { type: 'number', required: true }) | |
| .option('token', { type: 'string', required: true }) | |
| .argv; | |
| (async () => { | |
| const browser = await puppeteer.launch({ | |
| headless: true, | |
| args: ['--no-sandbox', '--disable-setuid-sandbox'] | |
| }); | |
| const page = await browser.newPage(); | |
| try { | |
| // Simulate navigating to payment gateway's 3DS page | |
| await page.goto(`https://mcp-payment-gateway/3ds?token=${args.token}&amount=${args.amount}`); | |
| // Fill 3DS form (example selectors - adjust per your gateway) | |
| await page.type('#cardholder-name', 'MCP Payment Agent'); | |
| await page.type('#verification-code', '123456'); // Mock OTP | |
| await page.click('#submit-3ds'); | |
| // Wait for success/failure | |
| await page.waitForSelector('.auth-result', { timeout: 10000 }); | |
| const result = await page.$eval('.auth-result', el => el.textContent.trim()); | |
| // Output result to PowerShell | |
| console.log(result === 'Authentication successful' ? 'success' : 'failed'); | |
| } catch (error) { | |
| console.error('failed'); | |
| } finally { | |
| await browser.close(); | |
| } | |
| })();</code></pre> | |
| <button class="copy-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-3">Setup Instructions</h4> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <pre class="text-sm text-gray-800"><code># Install dependencies | |
| npm install puppeteer yargs | |
| # Run the script | |
| node 3ds-automator.js \ | |
| --amount 99.99 \ | |
| --token "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."</code></pre> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-3">Configuration Options</h4> | |
| <ul class="space-y-2 text-sm text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span><span class="font-mono font-medium">--headless</span>: Run browser in headless mode (default: true)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span><span class="font-mono font-medium">--timeout</span>: Maximum wait time in ms (default: 10000)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span><span class="font-mono font-medium">--debug</span>: Enable verbose logging</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hugging Face Spaces Deployment --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-2">Hugging Face Spaces Deployment</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-xl font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-robot mr-2 text-purple-600"></i> | |
| MCP-PayPal Agent Space | |
| </h3> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium mr-2"> | |
| FastAPI | |
| </span> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium"> | |
| WebSocket | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Dockerfile --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-800 mb-3 flex items-center"> | |
| <i class="fab fa-docker mr-2 text-blue-500"></i> | |
| Dockerfile | |
| </h4> | |
| <div class="code-block relative rounded-lg overflow-hidden"> | |
| <pre class="p-4 text-gray-200 overflow-x-auto text-sm"><code>FROM python:3.9-slim | |
| # Install PowerShell 7 | |
| RUN apt-get update && \ | |
| apt-get install -y wget apt-transport-https && \ | |
| wget -q https://packages.microsoft.com/config/debian/10/packages-microsoft-prod.deb && \ | |
| dpkg -i packages-microsoft-prod.deb && \ | |
| apt-get update && \ | |
| apt-get install -y powershell | |
| # Install Node.js for PM2/WebSocket | |
| RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - && \ | |
| apt-get install -y nodejs | |
| # Install dependencies | |
| RUN npm install -g pm2 | |
| RUN pip install fastapi uvicorn websockets | |
| # Copy scripts | |
| COPY MCP-PayPal-Agent.ps1 /app/ | |
| COPY 3ds-automator.js /app/ | |
| COPY mcp-agent.js /app/ | |
| # Expose ports | |
| EXPOSE 8080 # WebSocket | |
| EXPOSE 5840 # MCP QUIC | |
| # Start services | |
| CMD ["pm2-runtime", "start", "/app/mcp-agent.js"]</code></pre> | |
| <button class="copy-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-xs"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| </div> | |
| <!-- FastAPI Webhook --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-bolt mr-2 text-yellow-500"></i> | |
| FastAPI Webhook | |
| </h4> | |
| <div class="code-block relative rounded-lg overflow-hidden"> | |
| <pre class="p-4 text-gray-200 overflow-x-auto text-sm"><code>from fastapi import FastAPI, WebSocket | |
| import subprocess | |
| app = FastAPI() | |
| @app.websocket("/ws") | |
| async def websocket_endpoint(websocket: WebSocket): | |
| await websocket.accept() | |
| while True: | |
| data = await websocket.receive_text() | |
| # Execute PowerShell script on payment request | |
| result = subprocess.run( | |
| ["pwsh", "/app/MCP-PayPal-Agent.ps1", f"-OrderSource {data}"], | |
| capture_output=True, text=True | |
| ) | |
| await websocket.send_text(result.stdout)</code></pre> | |
| <button class="copy-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-xs"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| </div> | |
| <!-- PM2 WebSocket Agent --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-plug mr-2 text-green-500"></i> | |
| PM2 WebSocket Agent | |
| </h4> | |
| <div class="code-block relative rounded-lg overflow-hidden"> | |
| <pre class="p-4 text-gray-200 overflow-x-auto text-sm"><code>const WebSocket = require('ws'); | |
| const { exec } = require('child_process'); | |
| const wss = new WebSocket.Server({ port: 8080 }); | |
| const MCP_LOGS = new Map(); // Track payment states | |
| wss.on('connection', (ws) => { | |
| ws.on('message', async (message) => { | |
| const { auth, action, payload } = JSON.parse(message); | |
| if (auth === process.env.MCP_JWT_TOKEN) { | |
| switch (action) { | |
| case 'process-payment': | |
| exec(`pwsh ./MCP-PayPal-Agent.ps1 -OrderSource "${payload.source}"`, (error, stdout) => { | |
| MCP_LOGS.set(payload.id, stdout); | |
| ws.send(JSON.stringify({ status: 'completed', log: stdout })); | |
| }); | |
| break; | |
| case 'get-status': | |
| ws.send(JSON.stringify({ status: 'pending', log: MCP_LOGS.get(payload.id) })); | |
| break; | |
| } | |
| } | |
| }); | |
| });</code></pre> | |
| <button class="copy-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-xs"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-purple-800 mb-3">Deployment Steps</h4> | |
| <ol class="space-y-3 text-sm text-purple-700"> | |
| <li class="flex items-start"> | |
| <span class="bg-purple-100 text-purple-800 rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0">1</span> | |
| <span>Authenticate with Hugging Face CLI: <span class="font-mono bg-purple-100 px-2 py-1 rounded">huggingface-cli login</span></span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-purple-100 text-purple-800 rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0">2</span> | |
| <span>Upload your space: <span class="font-mono bg-purple-100 px-2 py-1 rounded">huggingface-cli upload username/mcp-paypal-agent ./ --repo-type=space</span></span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-purple-100 text-purple-800 rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0">3</span> | |
| <span>Configure environment variables in Space settings (MCP_JWT_TOKEN, etc.)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-purple-100 text-purple-800 rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0">4</span> | |
| <span>Test WebSocket connection: <span class="font-mono bg-purple-100 px-2 py-1 rounded">websocat wss://your-hf-space.ngrok-free.app/ws</span></span> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Key Integration Points --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-2">Key Integration Points</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Component</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Purpose</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Port</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Protocol</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-windows text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">PowerShell</div> | |
| <div class="text-sm text-gray-500">7.2.0+</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">Payment logic and order processing</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">CLI</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fab fa-chrome text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">3DS Automator</div> | |
| <div class="text-sm text-gray-500">Puppeteer</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">Headless authentication flows</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">9222</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">Chrome DevTools</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-plug text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">PM2 WebSocket</div> | |
| <div class="text-sm text-gray-500">Node.js</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">Real-time control interface</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">8080</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">WebSocket</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-network-wired text-red-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">MCP Protocol</div> | |
| <div class="text-sm text-gray-500">Agent communication</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">Context-aware messaging</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">5840-5841</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">QUIC/HTTP3</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Example Workflow --> | |
| <section> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-2">Example Workflow</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <ol class="relative border-l border-gray-200 space-y-10"> | |
| <!-- Step 1 --> | |
| <li class="ml-6"> | |
| <div class="absolute w-6 h-6 bg-blue-100 rounded-full -left-3 border border-white flex items-center justify-center"> | |
| <span class="text-blue-600 font-bold">1</span> | |
| </div> | |
| <div class="p-4 bg-blue-50 rounded-lg"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">User uploads order.pdf</h3> | |
| <p class="text-gray-700">Customer uploads an invoice or order document to the Hugging Face Space interface.</p> | |
| <div class="mt-3 bg-white p-3 rounded border border-gray-200"> | |
| <pre class="text-sm text-gray-800"><code>{ | |
| "filename": "order.pdf", | |
| "size": "245KB", | |
| "type": "application/pdf" | |
| }</code></pre> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- Step 2 --> | |
| <li class="ml-6"> | |
| <div class="absolute w-6 h-6 bg-green-100 rounded-full -left-3 border border-white flex items-center justify-center"> | |
| <span class="text-green-600 font-bold">2</span> | |
| </div> | |
| <div class="p-4 bg-green-50 rounded-lg"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">WebSocket message sent</h3> | |
| <p class="text-gray-700">Frontend initiates payment processing via WebSocket message with JWT authentication.</p> | |
| <div class="mt-3 bg-white p-3 rounded border border-gray-200"> | |
| <pre class="text-sm text-gray-800"><code>{ | |
| "auth": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", | |
| "action": "process-payment", | |
| "payload": { | |
| "source": "order.pdf", | |
| "gateway": "PayPal" | |
| } | |
| }</code></pre> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- Step 3 --> | |
| <li class="ml-6"> | |
| <div class="absolute w-6 h-6 bg-purple-100 rounded-full -left-3 border border-white flex items-center justify-center"> | |
| <span class="text-purple-600 font-bold">3</span> | |
| </div> | |
| <div class="p-4 bg-purple-50 rounded-lg"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">PowerScript execution</h3> | |
| <p class="text-gray-700">PM2 triggers the MCP-PayPal-Agent.ps1 script which processes the payment through multiple steps.</p> | |
| <div class="mt-3"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-white rounded-full text-xs font-medium border border-purple-200">1. PDF Extraction</span> | |
| <span class="px-3 py-1 bg-white rounded-full text-xs font-medium border border-purple-200">2. Payment Initiation</span> | |
| <span class="px-3 py-1 bg-white rounded-full text-xs font-medium border border-purple-200">3. 3DS Authentication</span> | |
| <span class="px-3 py-1 bg-white rounded-full text-xs font-medium border border-purple-200">4. Confirmation Email</span> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- Step 4 --> | |
| <li class="ml-6"> | |
| <div class="absolute w-6 h-6 bg-yellow-100 rounded-full -left-3 border border-white flex items-center justify-center"> | |
| <span class="text-yellow-600 font-bold">4</span> | |
| </div> | |
| <div class="p-4 bg-yellow-50 rounded-lg"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Result returned</h3> | |
| <p class="text-gray-700">WebSocket connection receives the final status and transaction details.</p> | |
| <div class="mt-3 bg-white p-3 rounded border border-gray-200"> | |
| <pre class="text-sm text-gray-800"><code>{ | |
| "status": "completed", | |
| "transaction_id": "txn_GH123456789", | |
| "amount": 99.99, | |
| "currency": "USD", | |
| "timestamp": "2023-07-15T14:32:10Z" | |
| }</code></pre> | |
| </div> | |
| </div> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="gradient-bg text-white mt-16"> | |
| <div class="container mx-auto px-6 py-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">ModelContextProtocol.io</h3> | |
| <p class="text-gray-300">High-performance context-aware protocol for building next-generation AI agent systems.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">GitHub Repository</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">API Reference</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Community</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-white text-2xl"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white text-2xl"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white text-2xl"><i class="fab fa-twitter"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm"> | |
| <p>© 2023 ModelContextProtocol.io. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Tab functionality | |
| document.querySelectorAll('.tab-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const tabId = btn.getAttribute('data-tab'); | |
| // Remove active class from all buttons and content | |
| document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); | |
| // Add active class to clicked button and corresponding content | |
| btn.classList.add('active'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Copy button functionality | |
| document.querySelectorAll('.copy-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const codeBlock = btn.closest('.code-block').querySelector('code'); | |
| const textToCopy = codeBlock.textContent; | |
| navigator.clipboard.writeText(textToCopy).then(() => { | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!'; | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Drewtu/modelcontextprotocol-io" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |