| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Agent Builder | AI Configuration Platform</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; |
| } |
| </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 active flex items-center py-2 px-3 rounded-md mb-1 transition-all"> |
| <i class="fas fa-sliders-h mr-3 text-primary"></i> |
| <span>Agent Builder</span> |
| </a> |
| <a href="#" class="sidebar-item 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"> |
| <span class="text-primary">Agent</span> Configuration |
| </h2> |
| <div class="ml-4 text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded font-mono"> |
| ID: AGT-<span class="text-primary">7B3K9P</span> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="relative mr-4"> |
| <input type="text" placeholder="Search agents..." 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-save mr-2"></i> Save |
| </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-play mr-2"></i> Run Agent |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-auto p-6"> |
| <div class="max-w-7xl mx-auto"> |
| |
| <div class="mb-8"> |
| <div class="flex items-center mb-2"> |
| <input type="text" placeholder="Agent Name" class="text-2xl font-bold bg-transparent border-none focus:outline-none focus:ring-0 w-full" value="Customer Support Bot"> |
| <button class="ml-2 text-gray-500 hover:text-primary transition-colors"> |
| <i class="fas fa-pencil-alt"></i> |
| </button> |
| </div> |
| <div class="flex items-center"> |
| <textarea placeholder="Agent description..." class="text-sm bg-transparent border-none focus:outline-none focus:ring-0 w-full resize-none text-gray-400">A specialized agent for handling customer inquiries and support tickets.</textarea> |
| <button class="ml-2 text-gray-500 hover:text-primary transition-colors"> |
| <i class="fas fa-pencil-alt"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="mb-6 border-b border-gray-800"> |
| <div class="flex space-x-8"> |
| <button class="tab-item active pb-3 text-sm font-medium transition-all"> |
| <i class="fas fa-cog mr-2"></i> Configuration |
| </button> |
| <button class="tab-item pb-3 text-sm font-medium text-gray-500 hover:text-light transition-all"> |
| <i class="fas fa-terminal mr-2"></i> Testing |
| </button> |
| <button class="tab-item pb-3 text-sm font-medium text-gray-500 hover:text-light transition-all"> |
| <i class="fas fa-chart-line mr-2"></i> Analytics |
| </button> |
| <button class="tab-item pb-3 text-sm font-medium text-gray-500 hover:text-light transition-all"> |
| <i class="fas fa-history mr-2"></i> Version History |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> |
| |
| <div class="config-section p-4"> |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> |
| <i class="fas fa-server mr-2 text-primary"></i> Provider |
| </h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-1">AI Provider</label> |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> |
| <option>OpenAI</option> |
| <option selected>Anthropic</option> |
| <option>Google</option> |
| <option>Meta</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-1">API Key</label> |
| <div class="relative"> |
| <input type="password" value="sk-...XyZ" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent font-mono"> |
| <button class="absolute right-3 top-2 text-gray-500 hover:text-primary"> |
| <i class="fas fa-eye"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-1">Endpoint</label> |
| <input type="text" value="https://api.anthropic.com/v1" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent font-mono"> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="config-section p-4"> |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> |
| <i class="fas fa-brain mr-2 text-primary"></i> Model |
| </h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-1">Model</label> |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> |
| <option>Claude 3 Opus</option> |
| <option selected>Claude 3 Sonnet</option> |
| <option>Claude 3 Haiku</option> |
| <option>Claude 2.1</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-1">Temperature</label> |
| <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full"> |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> |
| <span>Precise</span> |
| <span>Balanced</span> |
| <span>Creative</span> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-1">Max Tokens</label> |
| <input type="number" value="4096" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-1">Stop Sequences</label> |
| <input type="text" placeholder="Enter sequences separated by commas" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="config-section p-4"> |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> |
| <i class="fas fa-comment-dots mr-2 text-primary"></i> Prompt |
| </h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-1">System Prompt</label> |
| <textarea class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent h-32">You are a customer support agent specialized in resolving technical issues for our SaaS platform. Be polite, professional, and solution-oriented. Always ask clarifying questions if needed, but don't make assumptions. If you don't know the answer, offer to escalate the ticket.</textarea> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-400 mb-1">Prompt Template</label> |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> |
| <option selected>Custom</option> |
| <option>Customer Support</option> |
| <option>Technical Support</option> |
| <option>Billing Inquiry</option> |
| </select> |
| </div> |
| |
| <div class="flex items-center justify-between"> |
| <button class="text-sm text-primary hover:text-opacity-80 flex items-center"> |
| <i class="fas fa-magic mr-1"></i> Optimize Prompt |
| </button> |
| <button class="text-sm text-secondary hover:text-opacity-80 flex items-center"> |
| <i class="fas fa-history mr-1"></i> Version History |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="config-section p-4"> |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> |
| <i class="fas fa-tools mr-2 text-primary"></i> Tools |
| </h3> |
| |
| <div class="space-y-4"> |
| <div class="bg-gray-800 rounded-md p-3 border border-gray-700"> |
| <div class="flex items-center justify-between mb-2"> |
| <div class="flex items-center"> |
| <i class="fas fa-search text-secondary mr-2"></i> |
| <span class="font-medium">Knowledge Base Search</span> |
| </div> |
| <div class="flex items-center"> |
| <button class="text-gray-500 hover:text-primary mr-2"> |
| <i class="fas fa-cog"></i> |
| </button> |
| <button class="text-gray-500 hover:text-red-500"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-xs text-gray-400">Searches the company knowledge base for relevant articles</p> |
| </div> |
| |
| <div class="bg-gray-800 rounded-md p-3 border border-gray-700"> |
| <div class="flex items-center justify-between mb-2"> |
| <div class="flex items-center"> |
| <i class="fas fa-ticket-alt text-secondary mr-2"></i> |
| <span class="font-medium">Ticket Creation</span> |
| </div> |
| <div class="flex items-center"> |
| <button class="text-gray-500 hover:text-primary mr-2"> |
| <i class="fas fa-cog"></i> |
| </button> |
| <button class="text-gray-500 hover:text-red-500"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-xs text-gray-400">Creates support tickets in Zendesk when needed</p> |
| </div> |
| |
| <button class="w-full bg-gray-800 hover:bg-gray-700 border border-gray-700 border-dashed text-gray-400 py-3 rounded-md flex items-center justify-center transition-all"> |
| <i class="fas fa-plus mr-2"></i> Add MCP |
| </button> |
| |
| <div class="mt-6"> |
| <h4 class="text-sm font-medium text-gray-400 mb-2 flex items-center"> |
| <i class="fas fa-store mr-2"></i> Suggested MCPs |
| </h4> |
| <div class="space-y-2"> |
| <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-md cursor-pointer"> |
| <div class="flex items-center"> |
| <i class="fas fa-calendar-check text-gray-500 mr-2"></i> |
| <span class="text-sm">Appointment Scheduler</span> |
| </div> |
| <button class="text-xs text-primary hover:text-opacity-80"> |
| Add |
| </button> |
| </div> |
| <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-md cursor-pointer"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-invoice-dollar text-gray-500 mr-2"></i> |
| <span class="text-sm">Billing Lookup</span> |
| </div> |
| <button class="text-xs text-primary hover:text-opacity-80"> |
| Add |
| </button> |
| </div> |
| <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-md cursor-pointer"> |
| <div class="flex items-center"> |
| <i class="fas fa-chart-pie text-gray-500 mr-2"></i> |
| <span class="text-sm">Usage Analytics</span> |
| </div> |
| <button class="text-xs text-primary hover:text-opacity-80"> |
| Add |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="mcp-store-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden"> |
| <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"> |
| <h3 class="text-xl font-bold"> |
| <i class="fas fa-store mr-2 text-secondary"></i> MCP Store |
| </h3> |
| <button id="close-mcp-modal" class="text-gray-500 hover:text-light"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="p-4 border-b border-gray-800"> |
| <div class="flex items-center"> |
| <div class="relative flex-1 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-full"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i> |
| </div> |
| <select class="bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> |
| <option>All Categories</option> |
| <option>Customer Support</option> |
| <option>Data Processing</option> |
| <option>Productivity</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="overflow-y-auto p-4" style="max-height: calc(90vh - 150px)"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
| |
| <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> |
| <h4 class="font-medium flex items-center"> |
| <i class="fas fa-calendar-check text-secondary mr-2"></i> |
| Appointment Scheduler |
| </h4> |
| <div class="text-xs text-gray-500 mt-1">v2.1.4</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">Schedule, reschedule, and manage customer appointments with calendar 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.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> |
| <h4 class="font-medium flex items-center"> |
| <i class="fas fa-file-invoice-dollar text-secondary mr-2"></i> |
| Billing Lookup |
| </h4> |
| <div class="text-xs text-gray-500 mt-1">v1.5.2</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">Retrieve customer billing information, invoices, and payment history.</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> 845 |
| <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> |
| <h4 class="font-medium flex items-center"> |
| <i class="fas fa-chart-pie text-secondary mr-2"></i> |
| Usage Analytics |
| </h4> |
| <div class="text-xs text-gray-500 mt-1">v3.0.1</div> |
| </div> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Track and report on product usage metrics for customer accounts.</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> 723 |
| <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> |
| <h4 class="font-medium flex items-center"> |
| <i class="fas fa-users text-secondary mr-2"></i> |
| Team Escalation |
| </h4> |
| <div class="text-xs text-gray-500 mt-1">v1.2.0</div> |
| </div> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Escalate issues to appropriate team members based on expertise.</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> 512 |
| <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> |
| <h4 class="font-medium flex items-center"> |
| <i class="fas fa-language text-secondary mr-2"></i> |
| Multilingual Support |
| </h4> |
| <div class="text-xs text-gray-500 mt-1">v2.3.0</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">Automatically detect and respond in customer's preferred language.</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> 327 |
| <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"> |
| <div class="p-4"> |
| <div class="flex items-start justify-between mb-3"> |
| <div> |
| <h4 class="font-medium flex items-center"> |
| <i class="fas fa-sync-alt text-secondary mr-2"></i> |
| Workflow Automation |
| </h4> |
| <div class="text-xs text-gray-500 mt-1">v3.2.1</div> |
| </div> |
| </div> |
| <p class="text-sm text-gray-400 mb-4">Automate repetitive support workflows with customizable triggers.</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.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 class="p-4 border-t border-gray-800 flex justify-between items-center"> |
| <div class="text-sm text-gray-500"> |
| Showing 6 of 128 MCPs |
| </div> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 bg-gray-800 border border-gray-700 rounded text-sm"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| <button class="px-3 py-1 bg-gray-800 border border-gray-700 rounded text-sm"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| |
| document.querySelector('button:contains("Add MCP")').addEventListener('click', function() { |
| document.getElementById('mcp-store-modal').classList.remove('hidden'); |
| }); |
| |
| document.getElementById('close-mcp-modal').addEventListener('click', function() { |
| document.getElementById('mcp-store-modal').classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById('mcp-store-modal').addEventListener('click', function(e) { |
| if (e.target === this) { |
| this.classList.add('hidden'); |
| } |
| }); |
| |
| |
| const tabs = document.querySelectorAll('.tab-item'); |
| tabs.forEach(tab => { |
| tab.addEventListener('click', function() { |
| tabs.forEach(t => t.classList.remove('active', 'text-light')); |
| tabs.forEach(t => t.classList.add('text-gray-500')); |
| this.classList.add('active', 'text-light'); |
| this.classList.remove('text-gray-500'); |
| }); |
| }); |
| |
| |
| 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/se" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
