Spaces:

Drewtu
/

modelcontextprotocol-io

Running

App Files Files Community

Drewtu commited on May 5, 2025

Commit

8f321c6

verified ·

1 Parent(s): 2e325b0

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +903 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Modelcontextprotocol Io
-emoji: 📚
-colorFrom: blue
 colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: modelcontextprotocol-io
+emoji: 🐳
+colorFrom: green
 colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,903 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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&lt;string, string&gt; 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>

prompts.txt ADDED Viewed

File without changes