| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Agent Builder | MCP Store</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"> |
| <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#00ff9d', |
| secondary: '#00b4ff', |
| dark: '#0a0a0a', |
| darker: '#050505', |
| light: '#f0f0f0', |
| gray: { |
| 800: '#1e1e1e', |
| 700: '#2d2d2d', |
| 600: '#3a3a3a', |
| } |
| }, |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| mono: ['Roboto Mono', 'monospace'], |
| }, |
| animation: { |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'blink': 'blink 1s step-end infinite', |
| }, |
| keyframes: { |
| blink: { |
| '0%, 100%': { opacity: '1' }, |
| '50%': { opacity: '0' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .terminal-input::before { |
| content: '> '; |
| color: #00ff9d; |
| } |
| .code-block { |
| position: relative; |
| } |
| .code-block::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 4px; |
| height: 100%; |
| background: linear-gradient(to bottom, #00ff9d, #00b4ff); |
| } |
| .glow-effect { |
| box-shadow: 0 0 10px rgba(0, 255, 157, 0.5); |
| } |
| .glow-effect:hover { |
| box-shadow: 0 0 15px rgba(0, 255, 157, 0.7); |
| } |
| .sidebar-item:hover { |
| background: linear-gradient(90deg, rgba(0, 255, 157, 0.1) 0%, rgba(0, 255, 157, 0) 100%); |
| border-left: 2px solid #00ff9d; |
| } |
| .sidebar-item.active { |
| background: linear-gradient(90deg, rgba(0, 255, 157, 0.2) 0%, rgba(0, 255, 157, 0) 100%); |
| border-left: 2px solid #00ff9d; |
| } |
| .tab-item { |
| position: relative; |
| } |
| .tab-item.active::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| height: 2px; |
| background-color: #00ff9d; |
| } |
| .mcp-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
| } |
| .config-section { |
| border-left: 1px solid #2d2d2d; |
| } |
| .config-section:first-child { |
| border-left: none; |
| } |
| .category-chip { |
| transition: all 0.2s ease; |
| } |
| .category-chip.active { |
| background-color: rgba(0, 255, 157, 0.1); |
| border-color: #00ff9d; |
| color: #00ff9d; |
| } |
| .mcp-detail-modal { |
| backdrop-filter: blur(5px); |
| } |
| .product-logo { |
| width: 36px; |
| height: 36px; |
| object-fit: contain; |
| border-radius: 6px; |
| background: white; |
| padding: 4px; |
| } |
| </style> |
| </head> |
| <body class="bg-dark text-light font-sans flex h-screen overflow-hidden"> |
| |
| <div class="w-64 bg-darker border-r border-gray-800 flex flex-col"> |
| <div class="p-4 border-b border-gray-800 flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3"> |
| <i class="fas fa-robot text-dark"></i> |
| </div> |
| <h1 class="text-xl font-bold"> |
| <span class="text-primary">Agent</span>Builder |
| </h1> |
| </div> |
| |
| <div class="p-4 border-b border-gray-800"> |
| <button class="w-full bg-primary hover:bg-opacity-90 text-dark font-semibold py-2 px-4 rounded-md flex items-center justify-center transition-all"> |
| <i class="fas fa-plus mr-2"></i> New Agent |
| </button> |
| </div> |
| |
| <nav class="flex-1 overflow-y-auto"> |
| <div class="p-2"> |
| <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Navigation</h3> |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> |
| <i class="fas fa-sliders-h mr-3 text-gray-400"></i> |
| <span>Agent Builder</span> |
| </a> |
| <a href="#" class="sidebar-item active flex items-center py-2 px-3 rounded-md mb-1 transition-all"> |
| <i class="fas fa-store mr-3 text-secondary"></i> |
| <span>MCP Store</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> |
| <i class="fas fa-boxes mr-3 text-gray-400"></i> |
| <span>My Agents</span> |
| </a> |
| </div> |
| |
| <div class="p-2 mt-4"> |
| <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Recent Agents</h3> |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> |
| <div class="w-2 h-2 rounded-full bg-primary mr-3"></div> |
| <span>Customer Support Bot</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> |
| <div class="w-2 h-2 rounded-full bg-secondary mr-3"></div> |
| <span>Data Analyzer</span> |
| </a> |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> |
| <div class="w-2 h-2 rounded-full bg-gray-500 mr-3"></div> |
| <span>Content Generator</span> |
| </a> |
| </div> |
| </nav> |
| |
| <div class="p-4 border-t border-gray-800"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3"> |
| <i class="fas fa-user text-gray-400"></i> |
| </div> |
| <div> |
| <div class="text-sm font-medium">John Doe</div> |
| <div class="text-xs text-gray-500">Admin</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 flex flex-col overflow-hidden"> |
| |
| <div class="bg-darker border-b border-gray-800 p-4 flex items-center justify-between"> |
| <div class="flex items-center"> |
| <h2 class="text-xl font-bold"> |
| <i class="fas fa-store mr-2 text-secondary"></i> |
| <span>MCP</span> Store |
| </h2> |
| <div class="ml-4 text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded font-mono"> |
| <span class="text-primary">128</span> MCPs available |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="relative mr-4"> |
| <input type="text" placeholder="Search MCPs..." class="bg-gray-800 border border-gray-700 rounded-md pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent w-64"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i> |
| </div> |
| <button class="bg-gray-800 hover:bg-gray-700 text-light px-4 py-2 rounded-md text-sm font-medium transition-all mr-2"> |
| <i class="fas fa-filter mr-2"></i> Filters |
| </button> |
| <button class="bg-primary hover:bg-opacity-90 text-dark px-4 py-2 rounded-md text-sm font-medium transition-all"> |
| <i class="fas fa-upload mr-2"></i> Submit MCP |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-auto p-6"> |
| <div class="max-w-7xl mx-auto"> |
| |
| <div class="mb-6 overflow-x-auto"> |
| <div class="flex space-x-2 pb-2"> |
| <button class="category-chip active px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap"> |
| All Categories |
| </button> |
| <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap"> |
| <i class="fas fa-headset mr-2"></i> Customer Support |
| </button> |
| <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap"> |
| <i class="fas fa-database mr-2"></i> Data Processing |
| </button> |
| <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap"> |
| <i class="fas fa-tasks mr-2"></i> Productivity |
| </button> |
| <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap"> |
| <i class="fas fa-chart-line mr-2"></i> Analytics |
| </button> |
| <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap"> |
| <i class="fas fa-globe mr-2"></i> Web Services |
| </button> |
| <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap"> |
| <i class="fas fa-cogs mr-2"></i> Integrations |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> |
| <i class="fas fa-star mr-2 text-yellow-500"></i> Featured MCPs |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg relative"> |
| <div class="absolute top-3 right-3 bg-yellow-600 text-white text-xs px-2 py-1 rounded flex items-center"> |
| <i class="fas fa-crown mr-1"></i> Featured |
| </div> |
| <div class="p-4"> |
| <div class="flex items-start justify-between mb-3"> |
| <div class="flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Zendesk_logo.png" alt="Zendesk" class="product-logo mr-3"> |
| <div> |
| <h4 class="font-medium">Zendesk MCP</h4> |
| <div class="text-xs text-gray-500 mt-1">v2.1.4 by <span class="text-primary">Zendesk</span></div> |
| </div> |
| </div> |
| <span class="bg-gray-700 text-primary text-xs px-2 py-1 rounded">Popular</span> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Full integration with Zendesk Support, Talk, and Guide. Create, update, and search tickets with AI-powered suggestions.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center text-xs text-gray-500"> |
| <i class="fas fa-download mr-1"></i> 1.8K |
| <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.9 |
| </div> |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> |
| Add to Agent |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg relative"> |
| <div class="absolute top-3 right-3 bg-yellow-600 text-white text-xs px-2 py-1 rounded flex items-center"> |
| <i class="fas fa-crown mr-1"></i> Featured |
| </div> |
| <div class="p-4"> |
| <div class="flex items-start justify-between mb-3"> |
| <div class="flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/DuckDuckGo_logo.svg" alt="DuckDuckGo" class="product-logo mr-3"> |
| <div> |
| <h4 class="font-medium">DuckDuckGo MCP</h4> |
| <div class="text-xs text-gray-500 mt-1">v1.5.2 by <span class="text-primary">DuckDuckGo</span></div> |
| </div> |
| </div> |
| <span class="bg-gray-700 text-primary text-xs px-2 py-1 rounded">Verified</span> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Privacy-focused search integration with instant answers, private search results, and zero tracking.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center text-xs text-gray-500"> |
| <i class="fas fa-download mr-1"></i> 1.2K |
| <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.7 |
| </div> |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> |
| Add to Agent |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg relative"> |
| <div class="absolute top-3 right-3 bg-yellow-600 text-white text-xs px-2 py-1 rounded flex items-center"> |
| <i class="fas fa-crown mr-1"></i> Featured |
| </div> |
| <div class="p-4"> |
| <div class="flex items-start justify-between mb-3"> |
| <div class="flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/8/8b/HubSpot_Logo.svg" alt="HubSpot" class="product-logo mr-3"> |
| <div> |
| <h4 class="font-medium">HubSpot MCP</h4> |
| <div class="text-xs text-gray-500 mt-1">v3.0.1 by <span class="text-primary">HubSpot</span></div> |
| </div> |
| </div> |
| <span class="bg-gray-700 text-primary text-xs px-2 py-1 rounded">New</span> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Complete CRM integration with contacts, companies, deals, and marketing automation workflows.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center text-xs text-gray-500"> |
| <i class="fas fa-download mr-1"></i> 923 |
| <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.8 |
| </div> |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> |
| Add to Agent |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-lg font-semibold flex items-center"> |
| <i class="fas fa-boxes mr-2 text-gray-400"></i> All MCPs |
| </h3> |
| <div class="flex items-center text-sm text-gray-500"> |
| <span class="mr-2">Sort by:</span> |
| <select class="bg-gray-800 border border-gray-700 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> |
| <option>Most Popular</option> |
| <option>Highest Rated</option> |
| <option>Newest</option> |
| <option>Recently Updated</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"> |
| <div class="p-4"> |
| <div class="flex items-start justify-between mb-3"> |
| <div class="flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Amazon_AWS_logo.svg" alt="AWS" class="product-logo mr-3"> |
| <div> |
| <h4 class="font-medium">AWS MCP</h4> |
| <div class="text-xs text-gray-500 mt-1">v2.3.0 by <span class="text-primary">Amazon</span></div> |
| </div> |
| </div> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Access AWS services including EC2, S3, Lambda, and more with secure IAM role integration.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center text-xs text-gray-500"> |
| <i class="fas fa-download mr-1"></i> 1.5K |
| <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.6 |
| </div> |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> |
| Add to Agent |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"> |
| <div class="p-4"> |
| <div class="flex items-start justify-between mb-3"> |
| <div class="flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Salesforce.com_logo.svg" alt="Salesforce" class="product-logo mr-3"> |
| <div> |
| <h4 class="font-medium">Salesforce MCP</h4> |
| <div class="text-xs text-gray-500 mt-1">v3.2.1 by <span class="text-primary">Salesforce</span></div> |
| </div> |
| </div> |
| <span class="bg-gray-700 text-primary text-xs px-2 py-1 rounded">New</span> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Full CRM integration with accounts, contacts, opportunities, and custom objects.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center text-xs text-gray-500"> |
| <i class="fas fa-download mr-1"></i> 1.1K |
| <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.7 |
| </div> |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> |
| Add to Agent |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"> |
| <div class="p-4"> |
| <div class="flex items-start justify-between mb-3"> |
| <div class="flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg" alt="Microsoft" class="product-logo mr-3"> |
| <div> |
| <h4 class="font-medium">Microsoft 365 MCP</h4> |
| <div class="text-xs text-gray-500 mt-1">v2.0.5 by <span class="text-primary">Microsoft</span></div> |
| </div> |
| </div> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Integrate with Outlook, Teams, SharePoint, and other Microsoft 365 services.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center text-xs text-gray-500"> |
| <i class="fas fa-download mr-1"></i> 892 |
| <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.5 |
| </div> |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> |
| Add to Agent |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"> |
| <div class="p-4"> |
| <div class="flex items-start justify-between mb-3"> |
| <div class="flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/e/e9/Notion-logo.svg" alt="Notion" class="product-logo mr-3"> |
| <div> |
| <h4 class="font-medium">Notion MCP</h4> |
| <div class="text-xs text-gray-500 mt-1">v1.8.3 by <span class="text-primary">Notion</span></div> |
| </div> |
| </div> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Read and write to Notion databases, pages, and blocks with advanced query capabilities.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center text-xs text-gray-500"> |
| <i class="fas fa-download mr-1"></i> 1.2K |
| <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.8 |
| </div> |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> |
| Add to Agent |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"> |
| <div class="p-4"> |
| <div class="flex items-start justify-between mb-3"> |
| <div class="flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Gmail_icon_%282020%29.svg" alt="Gmail" class="product-logo mr-3"> |
| <div> |
| <h4 class="font-medium">Gmail MCP</h4> |
| <div class="text-xs text-gray-500 mt-1">v1.4.2 by <span class="text-primary">Google</span></div> |
| </div> |
| </div> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Send, receive, and manage emails with Gmail API integration and smart categorization.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center text-xs text-gray-500"> |
| <i class="fas fa-download mr-1"></i> 1.3K |
| <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.7 |
| </div> |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> |
| Add to Agent |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"> |
| <div class="p-4"> |
| <div class="flex items-start justify-between mb-3"> |
| <div class="flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Stripe_logo%2C_revised_2016.svg" alt="Stripe" class="product-logo mr-3"> |
| <div> |
| <h4 class="font-medium">Stripe MCP</h4> |
| <div class="text-xs text-gray-500 mt-1">v2.1.0 by <span class="text-primary">Stripe</span></div> |
| </div> |
| </div> |
| <span class="bg-gray-700 text-primary text-xs px-2 py-1 rounded">Verified</span> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Process payments, manage subscriptions, and handle refunds through Stripe's API.</p> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center text-xs text-gray-500"> |
| <i class="fas fa-download mr-1"></i> 987 |
| <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.9 |
| </div> |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> |
| Add to Agent |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8 flex justify-between items-center"> |
| <div class="text-sm text-gray-500"> |
| Showing 1-9 of 128 MCPs |
| </div> |
| <div class="flex space-x-2"> |
| <button class="px-4 py-2 bg-gray-800 border border-gray-700 rounded text-sm flex items-center disabled:opacity-50" disabled> |
| <i class="fas fa-chevron-left mr-2"></i> Previous |
| </button> |
| <button class="px-4 py-2 bg-gray-800 border border-gray-700 rounded text-sm flex items-center"> |
| Next <i class="fas fa-chevron-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="mcp-detail-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden mcp-detail-modal"> |
| <div class="bg-darker border border-gray-800 rounded-lg w-full max-w-4xl max-h-[90vh] overflow-hidden"> |
| <div class="p-4 border-b border-gray-800 flex items-center justify-between"> |
| <div class="flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Zendesk_logo.png" alt="Zendesk" class="product-logo mr-3"> |
| <h3 class="text-xl font-bold">Zendesk MCP</h3> |
| </div> |
| <button id="close-mcp-detail" class="text-gray-500 hover:text-light"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="overflow-y-auto p-6" style="max-height: calc(90vh - 120px)"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| <div class="lg:col-span-2"> |
| <div class="mb-6"> |
| <h4 class="text-lg font-semibold mb-2">Description</h4> |
| <p class="text-gray-400"> |
| The Zendesk MCP provides complete integration with Zendesk's customer service platform including Support, Talk, and Guide products. |
| It allows your AI agent to create, update, and search tickets with AI-powered suggestions for responses and categorization. |
| The MCP supports attachments, custom fields, and real-time updates. |
| </p> |
| </div> |
| |
| <div class="mb-6"> |
| <h4 class="text-lg font-semibold mb-2">Features</h4> |
| <ul class="list-disc list-inside text-gray-400 space-y-2"> |
| <li>Create and manage support tickets with all field types</li> |
| <li>Search tickets with advanced filtering and sorting</li> |
| <li>AI-powered response suggestions based on ticket content</li> |
| <li>Handle attachments and inline images</li> |
| <li>Support for Zendesk Talk (voice) and Chat</li> |
| <li>Access Help Center articles and community posts</li> |
| <li>Real-time webhook notifications for ticket updates</li> |
| <li>Support for custom ticket forms and fields</li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-2">Configuration</h4> |
| <div class="bg-gray-800 rounded-md p-4 border border-gray-700"> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-400 mb-1">Zendesk Subdomain</label> |
| <div class="flex"> |
| <input type="text" placeholder="yourdomain" class="flex-1 bg-gray-700 border border-gray-600 rounded-l-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> |
| <div class="bg-gray-600 px-3 py-2 text-sm border-t border-r border-b border-gray-600 rounded-r-md">.zendesk.com</div> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-400 mb-1">Authentication Method</label> |
| <select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> |
| <option>API Token</option> |
| <option>OAuth 2.0</option> |
| <option>Basic Auth</option> |
| </select> |
| </div> |
| |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <input type="checkbox" id="enable-voice" class="mr-2" checked> |
| <label for="enable-voice" class="text-sm text-gray-400">Enable Zendesk Talk</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="enable-guide" class="mr-2" checked> |
| <label for="enable-guide" class="text-sm text-gray-400">Enable Help Center</label> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="bg-gray-800 rounded-md p-4 border border-gray-700 mb-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <div class="text-sm text-gray-500">Version</div> |
| <div class="font-medium">v2.1.4</div> |
| </div> |
| <div> |
| <div class="text-sm text-gray-500">Publisher</div> |
| <div class="font-medium text-primary">Zendesk</div> |
| </div> |
| </div> |
| |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <div class="text-sm text-gray-500">Downloads</div> |
| <div class="font-medium">1,845</div> |
| </div> |
| <div> |
| <div class="text-sm text-gray-500">Rating</div> |
| <div class="font-medium flex items-center"> |
| <i class="fas fa-star text-yellow-500 mr-1"></i> 4.9 |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="text-sm text-gray-500 mb-2">Categories</div> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-2 py-1 bg-gray-700 text-xs rounded">Customer Support</span> |
| <span class="px-2 py-1 bg-gray-700 text-xs rounded">Ticketing</span> |
| <span class="px-2 py-1 bg-gray-700 text-xs rounded">CRM</span> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="text-sm text-gray-500 mb-2">Compatibility</div> |
| <div class="flex items-center text-sm"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Works with all major AI providers</span> |
| </div> |
| </div> |
| |
| <button class="w-full bg-primary hover:bg-opacity-90 text-dark font-medium py-2 px-4 rounded-md flex items-center justify-center transition-all mb-3"> |
| <i class="fas fa-plus mr-2"></i> Add to Agent |
| </button> |
| |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-light font-medium py-2 px-4 rounded-md flex items-center justify-center transition-all"> |
| <i class="fas fa-bookmark mr-2"></i> Save for Later |
| </button> |
| </div> |
| |
| <div class="bg-gray-800 rounded-md p-4 border border-gray-700"> |
| <h4 class="text-lg font-semibold mb-3">Recent Updates</h4> |
| <div class="space-y-4"> |
| <div> |
| <div class="text-sm text-primary mb-1">v2.1.4 - June 2023</div> |
| <p class="text-xs text-gray-400">Added support for ticket forms and custom fields. Improved error handling for API limits.</p> |
| </div> |
| <div> |
| <div class="text-sm text-primary mb-1">v2.0.0 - March 2023</div> |
| <p class="text-xs text-gray-400">Complete rewrite with new API and support for Zendesk Talk and Guide integration.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 pt-6"> |
| <h4 class="text-lg font-semibold mb-4">Similar MCPs</h4> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-gray-800 p-3 rounded-md border border-gray-700 hover:border-primary transition-colors cursor-pointer"> |
| <div class="flex items-center mb-2"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Freshworks_logo.svg" alt="Freshdesk" class="product-logo mr-2"> |
| <span class="font-medium">Freshdesk MCP</span> |
| </div> |
| <p class="text-xs text-gray-400">Alternative customer support ticketing system with similar features.</p> |
| </div> |
| <div class="bg-gray-800 p-3 rounded-md border border-gray-700 hover:border-primary transition-colors cursor-pointer"> |
| <div class="flex items-center mb-2"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Salesforce.com_logo.svg" alt="Service Cloud" class="product-logo mr-2"> |
| <span class="font-medium">Service Cloud MCP</span> |
| </div> |
| <p class="text-xs text-gray-400">Enterprise-grade customer service platform from Salesforce.</p> |
| </div> |
| <div class="bg-gray-800 p-3 rounded-md border border-gray-700 hover:border-primary transition-colors cursor-pointer"> |
| <div class="flex items-center mb-2"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Intercom_logo.svg" alt="Intercom" class="product-logo mr-2"> |
| <span class="font-medium">Intercom MCP</span> |
| </div> |
| <p class="text-xs text-gray-400">Conversational support platform with messaging-first approach.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| |
| const categoryChips = document.querySelectorAll('.category-chip'); |
| categoryChips.forEach(chip => { |
| chip.addEventListener('click', function() { |
| categoryChips.forEach(c => c.classList.remove('active')); |
| this.classList.add('active'); |
| }); |
| }); |
| |
| |
| const mcpCards = document.querySelectorAll('.mcp-card'); |
| mcpCards.forEach(card => { |
| card.addEventListener('click', function() { |
| document.getElementById('mcp-detail-modal').classList.remove('hidden'); |
| }); |
| }); |
| |
| document.getElementById('close-mcp-detail').addEventListener('click', function() { |
| document.getElementById('mcp-detail-modal').classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById('mcp-detail-modal').addEventListener('click', function(e) { |
| if (e.target === this) { |
| this.classList.add('hidden'); |
| } |
| }); |
| |
| |
| const sidebarItems = document.querySelectorAll('.sidebar-item'); |
| sidebarItems.forEach(item => { |
| item.addEventListener('click', function() { |
| sidebarItems.forEach(i => i.classList.remove('active')); |
| this.classList.add('active'); |
| }); |
| }); |
| </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=brainable/se2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
