se5 / index.html
brainable's picture
Add 2 files
bff778f verified
Raw History Blame Contribute Delete
43 kB
<!DOCTYPE html>
<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>
// Modal handling
const newServerBtn = document.getElementById('newServerBtn');
const newServerModal = document.getElementById('newServerModal');
const closeModalBtn = document.getElementById('closeModalBtn');
newServerBtn.addEventListener('click', () => {
newServerModal.classList.remove('hidden');
});
closeModalBtn.addEventListener('click', () => {
newServerModal.classList.add('hidden');
});
// Tab switching
const tabs = document.querySelectorAll('.tab-item');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active', 'text-light'));
tabs.forEach(t => t.classList.add('text-gray-400'));
tab.classList.add('active', 'text-light');
tab.classList.remove('text-gray-400');
});
});
// Component card hover effects
document.querySelectorAll('.component-card').forEach(card => {
card.addEventListener('mouseenter', () => {
card.classList.add('shadow-lg');
});
card.addEventListener('mouseleave', () => {
card.classList.remove('shadow-lg');
});
});
// New tool card
const newToolCard = document.getElementById('newToolCard');
newToolCard.addEventListener('click', () => {
alert('New tool creation flow would open here');
});
// AI assistant button
const aiHelpBtn = document.getElementById('aiHelpBtn');
aiHelpBtn.addEventListener('click', () => {
alert('AI assistant would provide guidance here');
});
// Simulate AI response after 2 seconds
setTimeout(() => {
const chatContainer = document.querySelector('.ai-assistant-chat');
const typingIndicator = document.querySelector('.typing-indicator').parentElement;
// Remove typing indicator
typingIndicator.remove();
// Add AI response
const aiResponse = document.createElement('div');
aiResponse.className = 'flex flex-col space-y-2';
aiResponse.innerHTML = `
<div class="response-bubble ai-bubble">
<div class="font-medium text-primary mb-1">MCP Assistant</div>
<p>Here's an enhanced version with error handling:</p>
<div class="bg-gray-900 rounded p-3 mt-2 font-mono text-xs overflow-x-auto">
<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-gray-400 ml-4"> </div><div class="text-purple-400">try</div> <div class="text-gray-400">{</div>
<div class="text-gray-400 ml-8"> </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-blue-400">method</div><div class="text-gray-400"> });</div>
<div class="text-gray-400 ml-8"> </div><div class="text-purple-400">if</div> <div class="text-gray-400">(!</div><div class="text-white">response</div><div class="text-gray-400">.</div><div class="text-white">ok</div><div class="text-gray-400">) {</div>
<div class="text-gray-400 ml-12"> </div><div class="text-purple-400">throw</div> <div class="text-purple-400">new</div> <div class="text-white">Error</div><div class="text-gray-400">(</div><div class="text-green-400">`API request failed: ${response.status}`</div><div class="text-gray-400">);</div>
<div class="text-gray-400 ml-8"> }</div>
<div class="text-gray-400 ml-8"> </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 ml-4"> } </div><div class="text-purple-400">catch</div> <div class="text-gray-400">(</div><div class="text-yellow-300">error</div><div class="text-gray-400">) {</div>
<div class="text-gray-400 ml-8"> </div><div class="text-purple-400">throw</div> <div class="text-purple-400">new</div> <div class="text-white">Error</div><div class="text-gray-400">(</div><div class="text-green-400">`API fetch error: ${error.message}`</div><div class="text-gray-400">);</div>
<div class="text-gray-400 ml-4"> }</div>
<div class="text-gray-400">}</div>
</div>
<p class="mt-2">Would you like me to implement this for you?</p>
</div>
`;
chatContainer.appendChild(aiResponse);
chatContainer.scrollTop = chatContainer.scrollHeight;
}, 2000);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=brainable/se5" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>