Download index.html from brainable/se: direct link, hf CLI and curl.
- Browser
- Download file 41.2 kB
-
https://huggingface.co/spaces/brainable/se/resolve/main/index.html
- Command line
-
hf download hf://spaces/brainable/se/index.html
-
curl -L -o index.html https://huggingface.co/spaces/brainable/se/resolve/main/index.html
41.2 kB
| <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"> | |
| <!-- Sidebar --> | |
| <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> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Bar --> | |
| <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> | |
| <!-- Content Area --> | |
| <div class="flex-1 overflow-auto p-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Agent Name and Description --> | |
| <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> | |
| <!-- Configuration Tabs --> | |
| <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> | |
| <!-- Configuration Sections --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Provider Section --> | |
| <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> | |
| <!-- Model Section --> | |
| <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> | |
| <!-- Prompt Section --> | |
| <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> | |
| <!-- Tools/MCPs Section --> | |
| <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> | |
| <!-- MCP Store Modal (Hidden by default) --> | |
| <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"> | |
| <!-- MCP Card --> | |
| <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> | |
| <!-- MCP Card --> | |
| <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> | |
| <!-- MCP Card --> | |
| <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> | |
| <!-- MCP Card --> | |
| <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> | |
| <!-- MCP Card --> | |
| <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> | |
| <!-- MCP Card --> | |
| <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> | |
| // Toggle MCP Store modal | |
| 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'); | |
| }); | |
| // Close modal when clicking outside | |
| document.getElementById('mcp-store-modal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| this.classList.add('hidden'); | |
| } | |
| }); | |
| // Tab switching functionality | |
| 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'); | |
| }); | |
| }); | |
| // Sidebar navigation | |
| 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> |