Download index.html from brainable/se5: direct link, hf CLI and curl.
- Browser
- Download file 43 kB
-
https://huggingface.co/spaces/brainable/se5/resolve/main/index.html
- Command line
-
hf download hf://spaces/brainable/se5/index.html
-
curl -L -o index.html https://huggingface.co/spaces/brainable/se5/resolve/main/index.html
43 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MCP Server Builder | AI-Powered Integration</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: '#8b5cf6', | |
| secondary: '#6366f1', | |
| dark: '#0f172a', | |
| darker: '#020617', | |
| light: '#f8fafc', | |
| gray: { | |
| 800: '#1e293b', | |
| 700: '#334155', | |
| 600: '#475569', | |
| } | |
| }, | |
| 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', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| blink: { | |
| '0%, 100%': { opacity: '1' }, | |
| '50%': { opacity: '0' }, | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .terminal-input::before { | |
| content: '> '; | |
| color: #8b5cf6; | |
| } | |
| .code-block { | |
| position: relative; | |
| } | |
| .code-block::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background: linear-gradient(to bottom, #8b5cf6, #6366f1); | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 10px rgba(139, 92, 246, 0.3); | |
| } | |
| .glow-effect:hover { | |
| box-shadow: 0 0 15px rgba(139, 92, 246, 0.5); | |
| } | |
| .sidebar-item:hover { | |
| background: linear-gradient(90deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0) 100%); | |
| border-left: 2px solid #8b5cf6; | |
| } | |
| .sidebar-item.active { | |
| background: linear-gradient(90deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0) 100%); | |
| border-left: 2px solid #8b5cf6; | |
| } | |
| .tab-item { | |
| position: relative; | |
| } | |
| .tab-item.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background-color: #8b5cf6; | |
| } | |
| .component-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(139, 92, 246, 0.2); | |
| } | |
| .status-active { | |
| background-color: rgba(74, 222, 128, 0.1); | |
| color: #4ade80; | |
| } | |
| .status-draft { | |
| background-color: rgba(96, 165, 250, 0.1); | |
| color: #60a5fa; | |
| } | |
| .status-paused { | |
| background-color: rgba(251, 191, 36, 0.1); | |
| color: #fbbf24; | |
| } | |
| .status-error { | |
| background-color: rgba(248, 113, 113, 0.1); | |
| color: #f87171; | |
| } | |
| .grid-stack { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .dropdown-content { | |
| display: none; | |
| position: absolute; | |
| right: 0; | |
| background-color: #1e293b; | |
| min-width: 160px; | |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| z-index: 1; | |
| border: 1px solid #334155; | |
| border-radius: 6px; | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .dropdown-content a { | |
| color: #f8fafc; | |
| padding: 10px 16px; | |
| text-decoration: none; | |
| display: block; | |
| font-size: 14px; | |
| } | |
| .dropdown-content a:hover { | |
| background-color: #334155; | |
| } | |
| .ai-assistant-chat { | |
| height: calc(100vh - 200px); | |
| } | |
| .step-indicator { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| } | |
| .step-complete { | |
| background-color: #4ade80; | |
| color: white; | |
| } | |
| .step-current { | |
| background-color: #8b5cf6; | |
| color: white; | |
| } | |
| .step-pending { | |
| background-color: #334155; | |
| color: #94a3b8; | |
| border: 2px solid #475569; | |
| } | |
| .connector-line { | |
| height: 2px; | |
| background-color: #334155; | |
| flex-grow: 1; | |
| margin: 0 8px; | |
| } | |
| .connector-line.complete { | |
| background-color: #4ade80; | |
| } | |
| .connector-line.partial { | |
| background: linear-gradient(to right, #4ade80, #334155); | |
| } | |
| .code-editor { | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| tab-size: 2; | |
| } | |
| .response-bubble { | |
| max-width: 80%; | |
| border-radius: 18px; | |
| padding: 12px 16px; | |
| margin-bottom: 8px; | |
| } | |
| .user-bubble { | |
| background-color: #334155; | |
| align-self: flex-end; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .ai-bubble { | |
| background-color: #1e293b; | |
| align-self: flex-start; | |
| border-bottom-left-radius: 4px; | |
| } | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| background-color: #94a3b8; | |
| border-radius: 50%; | |
| margin-right: 4px; | |
| animation: bounce 1.5s infinite ease-in-out; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| </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-server text-dark"></i> | |
| </div> | |
| <h1 class="text-xl font-bold"> | |
| <span class="text-primary">MCP</span> Builder | |
| </h1> | |
| </div> | |
| <div class="p-4 border-b border-gray-800"> | |
| <button id="newServerBtn" 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 Server | |
| </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-home mr-3 text-gray-400"></i> | |
| <span>Dashboard</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-server mr-3 text-primary"></i> | |
| <span>My Servers</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-plug mr-3 text-gray-400"></i> | |
| <span>Integrations</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-cog mr-3 text-gray-400"></i> | |
| <span>Settings</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 Servers</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 API</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 Processor</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-green-500 mr-3"></div> | |
| <span>Chat Service</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">Create</span> New MCP Server | |
| </h2> | |
| <div class="ml-4 text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded font-mono"> | |
| <span class="text-primary">AI-Assisted</span> configuration | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button id="saveDraftBtn" class="bg-gray-800 hover:bg-gray-700 border border-gray-700 text-sm px-4 py-2 rounded-md mr-3 transition-all"> | |
| <i class="fas fa-save mr-2"></i> Save Draft | |
| </button> | |
| <button id="deployBtn" class="bg-primary hover:bg-opacity-90 text-dark font-semibold text-sm px-4 py-2 rounded-md transition-all"> | |
| <i class="fas fa-rocket mr-2"></i> Deploy Server | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Content Area --> | |
| <div class="flex-1 overflow-auto p-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Creation Steps --> | |
| <div class="flex items-center justify-between mb-8"> | |
| <div class="flex items-center"> | |
| <div class="step-indicator step-complete"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div class="connector-line complete"></div> | |
| <div class="step-indicator step-complete"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div class="connector-line complete"></div> | |
| <div class="step-indicator step-current">3</div> | |
| <div class="connector-line"></div> | |
| <div class="step-indicator step-pending">4</div> | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| Step 3 of 4: Configure Components | |
| </div> | |
| </div> | |
| <!-- Component Tabs --> | |
| <div class="mb-6 border-b border-gray-800"> | |
| <div class="flex space-x-8"> | |
| <button class="tab-item pb-3 font-medium text-sm active"> | |
| <i class="fas fa-tools mr-2"></i> Tools | |
| </button> | |
| <button class="tab-item pb-3 font-medium text-sm text-gray-400 hover:text-light"> | |
| <i class="fas fa-database mr-2"></i> Resources | |
| </button> | |
| <button class="tab-item pb-3 font-medium text-sm text-gray-400 hover:text-light"> | |
| <i class="fas fa-comment-alt mr-2"></i> Prompts | |
| </button> | |
| <button class="tab-item pb-3 font-medium text-sm text-gray-400 hover:text-light"> | |
| <i class="fas fa-network-wired mr-2"></i> Transports | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Panel - Component List --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-medium">Available Tools</h3> | |
| <button id="addToolBtn" class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> | |
| <i class="fas fa-plus mr-1"></i> New Tool | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Tool 1 --> | |
| <div class="component-card bg-gray-900 border border-gray-700 rounded-lg p-3 cursor-pointer transition-all"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-cloud text-purple-500"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium text-sm">API Fetcher</div> | |
| <div class="text-xs text-gray-500">GET/POST requests</div> | |
| </div> | |
| </div> | |
| <div class="text-xs status-active px-2 py-1 rounded-full">Active</div> | |
| </div> | |
| </div> | |
| <!-- Tool 2 --> | |
| <div class="component-card bg-gray-900 border border-gray-700 rounded-lg p-3 cursor-pointer transition-all"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-calculator text-blue-500"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium text-sm">Data Transformer</div> | |
| <div class="text-xs text-gray-500">JSON manipulation</div> | |
| </div> | |
| </div> | |
| <div class="text-xs status-active px-2 py-1 rounded-full">Active</div> | |
| </div> | |
| </div> | |
| <!-- Tool 3 --> | |
| <div class="component-card bg-gray-900 border border-gray-700 rounded-lg p-3 cursor-pointer transition-all"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium text-sm">Validator</div> | |
| <div class="text-xs text-gray-500">Input validation</div> | |
| </div> | |
| </div> | |
| <div class="text-xs status-draft px-2 py-1 rounded-full">Draft</div> | |
| </div> | |
| </div> | |
| <!-- New Tool Card --> | |
| <div id="newToolCard" class="component-card bg-gray-900 border-2 border-dashed border-gray-700 rounded-lg p-4 flex flex-col items-center justify-center cursor-pointer transition-all hover:border-primary hover:bg-gray-800 hover:bg-opacity-50"> | |
| <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center mb-2"> | |
| <i class="fas fa-plus text-primary"></i> | |
| </div> | |
| <div class="text-sm font-medium">Add New Tool</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 border border-gray-700 rounded-xl p-4"> | |
| <h3 class="font-medium mb-3">AI Assistant</h3> | |
| <p class="text-sm text-gray-400 mb-4">Describe what you need and our AI will help configure your components.</p> | |
| <button id="aiHelpBtn" class="w-full bg-secondary hover:bg-opacity-90 text-dark font-medium py-2 px-4 rounded-md flex items-center justify-center transition-all"> | |
| <i class="fas fa-robot mr-2"></i> Get AI Assistance | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Middle Panel - Component Editor --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 h-full"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-medium">Tool Configuration</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-500 hover:text-light p-1 rounded"> | |
| <i class="fas fa-code text-sm"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-light p-1 rounded"> | |
| <i class="fas fa-copy text-sm"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-light p-1 rounded"> | |
| <i class="fas fa-trash text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Tool Name</label> | |
| <input type="text" class="w-full bg-gray-900 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="API Fetcher"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Description</label> | |
| <textarea class="w-full bg-gray-900 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-20">Makes HTTP requests to external APIs and returns the response data.</textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Function Code</label> | |
| <div class="code-editor bg-gray-900 border border-gray-700 rounded-md p-3 text-sm font-mono h-48 overflow-auto"> | |
| <div class="text-gray-500">// JavaScript function that will be invoked by the AI</div> | |
| <div class="text-purple-400">async</div> <div class="text-blue-400">function</div> <div class="text-white">fetchAPI</div><div class="text-gray-400">(</div><div class="text-yellow-300">url</div><div class="text-gray-400">, </div><div class="text-yellow-300">method</div><div class="text-gray-400"> = </div><div class="text-green-400">'GET'</div><div class="text-gray-400">, </div><div class="text-yellow-300">body</div><div class="text-gray-400"> = </div><div class="text-blue-400">null</div><div class="text-gray-400">) {</div> | |
| <div class="text-gray-400 ml-4"> </div><div class="text-purple-400">const</div> <div class="text-white">options</div> <div class="text-gray-400">= {</div> | |
| <div class="text-gray-400 ml-8"> </div><div class="text-blue-400">method</div><div class="text-gray-400">,</div> | |
| <div class="text-gray-400 ml-8"> </div><div class="text-blue-400">headers</div><div class="text-gray-400">: {</div> | |
| <div class="text-gray-400 ml-12"> </div><div class="text-green-400">'Content-Type'</div><div class="text-gray-400">: </div><div class="text-green-400">'application/json'</div> | |
| <div class="text-gray-400 ml-8"> },</div> | |
| <div class="text-gray-400 ml-4"> };</div> | |
| <div class="text-gray-400 ml-4"> </div><div class="text-purple-400">if</div> <div class="text-gray-400">(</div><div class="text-yellow-300">body</div><div class="text-gray-400">) {</div> | |
| <div class="text-gray-400 ml-8"> </div><div class="text-white">options</div><div class="text-gray-400">.</div><div class="text-blue-400">body</div> <div class="text-gray-400">= </div><div class="text-white">JSON</div><div class="text-gray-400">.</div><div class="text-white">stringify</div><div class="text-gray-400">(</div><div class="text-yellow-300">body</div><div class="text-gray-400">);</div> | |
| <div class="text-gray-400 ml-4"> }</div> | |
| <div class="text-gray-400 ml-4"> </div><div class="text-purple-400">const</div> <div class="text-white">response</div> <div class="text-gray-400">= </div><div class="text-purple-400">await</div> <div class="text-white">fetch</div><div class="text-gray-400">(</div><div class="text-yellow-300">url</div><div class="text-gray-400">, </div><div class="text-white">options</div><div class="text-gray-400">);</div> | |
| <div class="text-gray-400 ml-4"> </div><div class="text-purple-400">return</div> <div class="text-purple-400">await</div> <div class="text-white">response</div><div class="text-gray-400">.</div><div class="text-white">json</div><div class="text-gray-400">();</div> | |
| <div class="text-gray-400">}</div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Parameters</label> | |
| <div class="space-y-2"> | |
| <div class="flex items-center bg-gray-900 border border-gray-700 rounded-md p-2"> | |
| <div class="flex-1"> | |
| <div class="text-sm font-mono">url: string</div> | |
| <div class="text-xs text-gray-500">The API endpoint URL</div> | |
| </div> | |
| <button class="text-gray-500 hover:text-light p-1"> | |
| <i class="fas fa-edit text-sm"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center bg-gray-900 border border-gray-700 rounded-md p-2"> | |
| <div class="flex-1"> | |
| <div class="text-sm font-mono">method?: 'GET' | 'POST' | 'PUT' | 'DELETE'</div> | |
| <div class="text-xs text-gray-500">HTTP method (default: GET)</div> | |
| </div> | |
| <button class="text-gray-500 hover:text-light p-1"> | |
| <i class="fas fa-edit text-sm"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center bg-gray-900 border border-gray-700 rounded-md p-2"> | |
| <div class="flex-1"> | |
| <div class="text-sm font-mono">body?: any</div> | |
| <div class="text-xs text-gray-500">Request payload</div> | |
| </div> | |
| <button class="text-gray-500 hover:text-light p-1"> | |
| <i class="fas fa-edit text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="mt-2 text-xs bg-gray-800 hover:bg-gray-700 border border-gray-700 px-3 py-1 rounded transition-all"> | |
| <i class="fas fa-plus mr-1"></i> Add Parameter | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel - AI Assistant --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden h-full flex flex-col"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-robot text-primary mr-2"></i> AI Assistant | |
| </h3> | |
| </div> | |
| <div class="ai-assistant-chat overflow-y-auto p-4 space-y-4 flex-1"> | |
| <!-- AI Message --> | |
| <div class="flex flex-col space-y-2"> | |
| <div class="response-bubble ai-bubble"> | |
| <div class="font-medium text-primary mb-1">MCP Assistant</div> | |
| <p>I see you're configuring an API Fetcher tool. Would you like me to help optimize this function or suggest additional features?</p> | |
| </div> | |
| </div> | |
| <!-- User Message --> | |
| <div class="flex flex-col space-y-2"> | |
| <div class="response-bubble user-bubble"> | |
| <p>Can you add error handling to this function?</p> | |
| </div> | |
| </div> | |
| <!-- AI Typing Indicator --> | |
| <div class="flex flex-col space-y-2"> | |
| <div class="response-bubble ai-bubble"> | |
| <div class="typing-indicator flex items-center"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-700"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Ask the AI for help..." class="w-full bg-gray-900 border border-gray-700 rounded-full px-4 py-2 pr-10 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent"> | |
| <button class="absolute right-3 top-2 text-gray-500 hover:text-primary"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Server Modal --> | |
| <div id="newServerModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-gray-800 border border-gray-700 rounded-xl w-full max-w-2xl overflow-hidden"> | |
| <div class="p-6 border-b border-gray-700 flex justify-between items-center"> | |
| <h3 class="text-xl font-bold"> | |
| <span class="text-primary">Create</span> New MCP Server | |
| </h3> | |
| <button id="closeModalBtn" class="text-gray-500 hover:text-light"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Server Name</label> | |
| <input type="text" class="w-full bg-gray-900 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" placeholder="e.g. Customer Support API"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Description</label> | |
| <textarea class="w-full bg-gray-900 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-20" placeholder="Brief description of your server's purpose"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Template</label> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <div class="bg-gray-900 border border-gray-700 rounded-lg p-4 cursor-pointer hover:border-primary transition-all"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mb-2 mx-auto"> | |
| <i class="fas fa-comments text-blue-500"></i> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-sm font-medium">Chat Agent</div> | |
| <div class="text-xs text-gray-500 mt-1">Conversational AI</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 border border-gray-700 rounded-lg p-4 cursor-pointer hover:border-primary transition-all"> | |
| <div class="w-10 h-10 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mb-2 mx-auto"> | |
| <i class="fas fa-database text-purple-500"></i> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-sm font-medium">Data Processor</div> | |
| <div class="text-xs text-gray-500 mt-1">ETL pipelines</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 border border-gray-700 rounded-lg p-4 cursor-pointer hover:border-primary transition-all"> | |
| <div class="w-10 h-10 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mb-2 mx-auto"> | |
| <i class="fas fa-cog text-green-500"></i> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-sm font-medium">Custom</div> | |
| <div class="text-xs text-gray-500 mt-1">Start from scratch</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded bg-gray-900 border-gray-700 text-primary focus:ring-primary"> | |
| <span class="ml-2 text-sm">Use AI-assisted configuration</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-900 border-t border-gray-700 flex justify-end"> | |
| <button class="bg-gray-800 hover:bg-gray-700 border border-gray-700 text-sm px-4 py-2 rounded-md mr-3 transition-all"> | |
| Cancel | |
| </button> | |
| <button class="bg-primary hover:bg-opacity-90 text-dark font-semibold text-sm px-4 py-2 rounded-md transition-all"> | |
| <i class="fas fa-plus mr-2"></i> Create Server | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| </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/se5" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |