npm - @softtechai/quickmcp - Versions diffs - 1.0.8 - Mend

@softtechai/quickmcp 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/README.md +553 -0
package/dist/client/MCPClient.d.ts +24 -0
package/dist/client/MCPClient.d.ts.map +1 -0
package/dist/client/MCPClient.js +211 -0
package/dist/client/MCPClient.js.map +1 -0
package/dist/client/MCPClientUnified.d.ts +31 -0
package/dist/client/MCPClientUnified.d.ts.map +1 -0
package/dist/client/MCPClientUnified.js +275 -0
package/dist/client/MCPClientUnified.js.map +1 -0
package/dist/client/MCPTestRunner.d.ts +44 -0
package/dist/client/MCPTestRunner.d.ts.map +1 -0
package/dist/client/MCPTestRunner.js +220 -0
package/dist/client/MCPTestRunner.js.map +1 -0
package/dist/client/MCPTestRunnerUnified.d.ts +48 -0
package/dist/client/MCPTestRunnerUnified.d.ts.map +1 -0
package/dist/client/MCPTestRunnerUnified.js +183 -0
package/dist/client/MCPTestRunnerUnified.js.map +1 -0
package/dist/database/json-manager.d.ts +55 -0
package/dist/database/json-manager.d.ts.map +1 -0
package/dist/database/json-manager.js +128 -0
package/dist/database/json-manager.js.map +1 -0
package/dist/database/sqlite-manager.d.ts +53 -0
package/dist/database/sqlite-manager.d.ts.map +1 -0
package/dist/database/sqlite-manager.js +193 -0
package/dist/database/sqlite-manager.js.map +1 -0
package/dist/dynamic-mcp-executor.d.ts +14 -0
package/dist/dynamic-mcp-executor.d.ts.map +1 -0
package/dist/dynamic-mcp-executor.js +274 -0
package/dist/dynamic-mcp-executor.js.map +1 -0
package/dist/generators/MCPServerGenerator-new.d.ts +37 -0
package/dist/generators/MCPServerGenerator-new.d.ts.map +1 -0
package/dist/generators/MCPServerGenerator-new.js +287 -0
package/dist/generators/MCPServerGenerator-new.js.map +1 -0
package/dist/generators/MCPServerGenerator.d.ts +42 -0
package/dist/generators/MCPServerGenerator.d.ts.map +1 -0
package/dist/generators/MCPServerGenerator.js +494 -0
package/dist/generators/MCPServerGenerator.js.map +1 -0
package/dist/generators/database/sqlite-manager.d.ts +52 -0
package/dist/generators/database/sqlite-manager.js +143 -0
package/dist/generators/generators/MCPServerGenerator.d.ts +37 -0
package/dist/generators/generators/MCPServerGenerator.js +396 -0
package/dist/index.d.ts +7 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +23 -0
package/dist/index.js.map +1 -0
package/dist/integrated-mcp-server-new.d.ts +12 -0
package/dist/integrated-mcp-server-new.d.ts.map +1 -0
package/dist/integrated-mcp-server-new.js +253 -0
package/dist/integrated-mcp-server-new.js.map +1 -0
package/dist/integrated-mcp-server.d.ts +25 -0
package/dist/integrated-mcp-server.d.ts.map +1 -0
package/dist/integrated-mcp-server.js +541 -0
package/dist/integrated-mcp-server.js.map +1 -0
package/dist/mcp-inspector-server.d.ts +3 -0
package/dist/mcp-inspector-server.d.ts.map +1 -0
package/dist/mcp-inspector-server.js +119 -0
package/dist/mcp-inspector-server.js.map +1 -0
package/dist/mcp-sdk-server.d.ts +3 -0
package/dist/mcp-sdk-server.d.ts.map +1 -0
package/dist/mcp-sdk-server.js +90 -0
package/dist/mcp-sdk-server.js.map +1 -0
package/dist/mcp-server.d.ts +3 -0
package/dist/mcp-server.d.ts.map +1 -0
package/dist/mcp-server.js +300 -0
package/dist/mcp-server.js.map +1 -0
package/dist/parsers/CsvParser.d.ts +7 -0
package/dist/parsers/CsvParser.d.ts.map +1 -0
package/dist/parsers/CsvParser.js +98 -0
package/dist/parsers/CsvParser.js.map +1 -0
package/dist/parsers/DatabaseParser.d.ts +18 -0
package/dist/parsers/DatabaseParser.d.ts.map +1 -0
package/dist/parsers/DatabaseParser.js +372 -0
package/dist/parsers/DatabaseParser.js.map +1 -0
package/dist/parsers/ExcelParser.d.ts +8 -0
package/dist/parsers/ExcelParser.d.ts.map +1 -0
package/dist/parsers/ExcelParser.js +119 -0
package/dist/parsers/ExcelParser.js.map +1 -0
package/dist/parsers/index.d.ts +13 -0
package/dist/parsers/index.d.ts.map +1 -0
package/dist/parsers/index.js +88 -0
package/dist/parsers/index.js.map +1 -0
package/dist/parsers/parsers/ExcelParser.js +118 -0
package/dist/parsers/types/index.js +2 -0
package/dist/quickmcp-unified-bridge.d.ts +13 -0
package/dist/quickmcp-unified-bridge.d.ts.map +1 -0
package/dist/quickmcp-unified-bridge.js +176 -0
package/dist/quickmcp-unified-bridge.js.map +1 -0
package/dist/server/ServerManager.d.ts +37 -0
package/dist/server/ServerManager.d.ts.map +1 -0
package/dist/server/ServerManager.js +376 -0
package/dist/server/ServerManager.js.map +1 -0
package/dist/sqlite-manager.js +145 -0
package/dist/start-new-server.d.ts +3 -0
package/dist/start-new-server.d.ts.map +1 -0
package/dist/start-new-server.js +10 -0
package/dist/start-new-server.js.map +1 -0
package/dist/test-app.d.ts +2 -0
package/dist/test-app.d.ts.map +1 -0
package/dist/test-app.js +119 -0
package/dist/test-app.js.map +1 -0
package/dist/test-new-architecture.d.ts +3 -0
package/dist/test-new-architecture.d.ts.map +1 -0
package/dist/test-new-architecture.js +72 -0
package/dist/test-new-architecture.js.map +1 -0
package/dist/transport/base-transport.d.ts +21 -0
package/dist/transport/base-transport.d.ts.map +1 -0
package/dist/transport/base-transport.js +16 -0
package/dist/transport/base-transport.js.map +1 -0
package/dist/transport/index.d.ts +10 -0
package/dist/transport/index.d.ts.map +1 -0
package/dist/transport/index.js +12 -0
package/dist/transport/index.js.map +1 -0
package/dist/transport/sse-transport.d.ts +13 -0
package/dist/transport/sse-transport.d.ts.map +1 -0
package/dist/transport/sse-transport.js +106 -0
package/dist/transport/sse-transport.js.map +1 -0
package/dist/transport/stdio-transport.d.ts +8 -0
package/dist/transport/stdio-transport.d.ts.map +1 -0
package/dist/transport/stdio-transport.js +53 -0
package/dist/transport/stdio-transport.js.map +1 -0
package/dist/transport/streamable-http-transport.d.ts +15 -0
package/dist/transport/streamable-http-transport.d.ts.map +1 -0
package/dist/transport/streamable-http-transport.js +151 -0
package/dist/transport/streamable-http-transport.js.map +1 -0
package/dist/types/index.d.ts +64 -0
package/dist/types/index.d.ts.map +1 -0
package/dist/types/index.js +3 -0
package/dist/types/index.js.map +1 -0
package/dist/web/client/MCPClient.js +348 -0
package/dist/web/client/MCPTestRunner.js +317 -0
package/dist/web/database/json-manager.js +124 -0
package/dist/web/database/sqlite-manager.js +146 -0
package/dist/web/dynamic-mcp-executor.js +443 -0
package/dist/web/generators/MCPServerGenerator-new.js +284 -0
package/dist/web/generators/MCPServerGenerator.js +566 -0
package/dist/web/integrated-mcp-server-new.js +394 -0
package/dist/web/parsers/CsvParser.js +144 -0
package/dist/web/parsers/DatabaseParser.js +637 -0
package/dist/web/parsers/ExcelParser.js +180 -0
package/dist/web/parsers/index.js +152 -0
package/dist/web/server.d.ts +3 -0
package/dist/web/server.d.ts.map +1 -0
package/dist/web/server.js +790 -0
package/dist/web/server.js.map +1 -0
package/dist/web/types/index.js +2 -0
package/dist/web/web/server.js +860 -0
package/package.json +68 -0
package/quickmcp-direct-stdio.js +328 -0
package/src/web/public/app.js +1795 -0
package/src/web/public/database-tables.html +711 -0
package/src/web/public/how-to-use.html +571 -0
package/src/web/public/how-to-use.js +255 -0
package/src/web/public/images/1-claude-quickmcp-stdio.png +0 -0
package/src/web/public/images/2-claude-tools.png +0 -0
package/src/web/public/images/3-claude-developer-settings.png +0 -0
package/src/web/public/images/4-claude-config.png +0 -0
package/src/web/public/images/5-claude-config-edit.png +0 -0
package/src/web/public/index.html +626 -0
package/src/web/public/manage-servers.html +198 -0
package/src/web/public/modern-styles.css +946 -0
package/src/web/public/shared-styles.css +2091 -0
package/src/web/public/shared.js +93 -0
package/src/web/public/test-servers.html +302 -0

package/src/web/public/how-to-use.html ADDED Viewed

@@ -0,0 +1,571 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full bg-gray-50">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>How to Use - MCP Server Generator</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Custom animations */
+        @keyframes slideIn {
+            from { transform: translateX(-100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .slide-in { animation: slideIn 0.3s ease-out; }
+        .fade-in { animation: fadeIn 0.5s ease-out; }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: #f1f5f9; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+        /* Glassmorphism effect */
+        .glass {
+            backdrop-filter: blur(20px);
+            background: rgba(255, 255, 255, 0.8);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .glass-dark {
+            backdrop-filter: blur(20px);
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+    </style>
+    <!-- Tailwind Config -->
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            900: '#0c4a6e'
+                        }
+                    },
+                    animation: {
+                        'bounce-slow': 'bounce 2s infinite',
+                        'pulse-slow': 'pulse 3s infinite'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="h-full bg-gradient-to-br from-blue-50 via-white to-cyan-50">
+    <!-- Main App Container -->
+    <div id="app" class="flex h-full">
+        <!-- Sidebar -->
+        <div id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-white/90 backdrop-blur-xl border-r border-gray-200/50 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out">
+            <div class="flex flex-col h-full">
+                <!-- Sidebar Header -->
+                <div class="flex items-center justify-between p-6 border-b border-gray-200/50">
+                    <div class="flex items-center space-x-3">
+                        <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center">
+                            <i class="fas fa-rocket text-white text-lg"></i>
+                        </div>
+                        <div>
+                            <h1 class="text-xl font-bold text-gray-900">QuickMCP</h1>
+                            <p class="text-xs text-gray-500">Server Generator</p>
+                        </div>
+                    </div>
+                    <button id="closeSidebar" class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors">
+                        <i class="fas fa-times text-gray-500"></i>
+                    </button>
+                </div>
+                <!-- Navigation -->
+                <nav class="flex-1 px-4 py-6 space-y-2">
+                    <a href="/" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-xl hover:bg-gray-50 transition-all duration-200">
+                        <i class="fas fa-magic mr-3 text-gray-400"></i>
+                        Generate Server
+                    </a>
+                    <a href="/manage-servers" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-xl hover:bg-gray-50 transition-all duration-200">
+                        <i class="fas fa-server mr-3 text-gray-400"></i>
+                        Manage Servers
+                    </a>
+                    <a href="/test-servers" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-xl hover:bg-gray-50 transition-all duration-200">
+                        <i class="fas fa-vial mr-3 text-gray-400"></i>
+                        Test Servers
+                    </a>
+                    <a href="/how-to-use" class="nav-item active flex items-center px-4 py-3 text-sm font-medium rounded-xl bg-gradient-to-r from-blue-50 to-cyan-50 text-blue-700 border border-blue-200">
+                        <i class="fas fa-book mr-3 text-blue-500"></i>
+                        How to Use
+                    </a>
+                </nav>
+                <!-- Sidebar Footer -->
+                <div class="p-4 border-t border-gray-200/50">
+                    <div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-xl border border-blue-100">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-8 h-8 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center">
+                                <i class="fas fa-check text-white text-xs"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm font-medium text-gray-900">All systems online</p>
+                                <p class="text-xs text-gray-500">Ready to guide you</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Sidebar Overlay for mobile -->
+        <div id="sidebarOverlay" class="fixed inset-0 bg-gray-900/50 backdrop-blur-sm z-40 lg:hidden opacity-0 invisible transition-all duration-300"></div>
+        <!-- Main Content -->
+        <div class="flex-1 lg:pl-64">
+            <!-- Top Navigation -->
+            <header class="bg-white/80 backdrop-blur-xl border-b border-gray-200/50 sticky top-0 z-30">
+                <div class="px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between items-center h-16">
+                        <div class="flex items-center space-x-4">
+                            <button id="openSidebar" class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors">
+                                <i class="fas fa-bars text-gray-600"></i>
+                            </button>
+                            <div>
+                                <h2 class="text-2xl font-bold text-gray-900">How to Use</h2>
+                                <p class="text-sm text-gray-500">Learn how to use your MCP servers with Claude Desktop</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-4">
+                            <div class="hidden sm:flex items-center space-x-2 bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm font-medium">
+                                <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                                <span>Online</span>
+                            </div>
+                            <button class="p-2 rounded-lg hover:bg-gray-100 transition-colors relative">
+                                <i class="fas fa-bell text-gray-600"></i>
+                                <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </header>
+            <!-- Main Content -->
+            <main class="p-4 sm:p-6 lg:p-8">
+                <div class="max-w-7xl mx-auto space-y-8">
+                    <!-- Hero Section -->
+                    <div class="text-center">
+                        <h1 class="text-3xl font-bold text-gray-900 mb-4">MCP Server Integration Guide</h1>
+                        <p class="text-gray-600">Learn how to integrate your generated MCP servers with Claude Desktop and other platforms</p>
+                    </div>
+                    <!-- Method Selection -->
+                    <div class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden">
+                        <div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-6 border-b border-gray-200/50">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center">
+                                    <i class="fas fa-route text-white"></i>
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900">Choose Your Integration Method</h3>
+                                    <p class="text-sm text-gray-600">Select how you want to use your MCP servers</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-6">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <button class="method-btn text-left p-6 border-2 border-blue-200 bg-blue-50 rounded-xl hover:border-blue-300 transition-all duration-200" onclick="showMethod('integrated')" id="integratedBtn">
+                                    <div class="flex items-center space-x-4">
+                                        <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center">
+                                            <i class="fas fa-link text-white text-xl"></i>
+                                        </div>
+                                        <div>
+                                            <h3 class="text-lg font-semibold text-gray-900">Integrated Server</h3>
+                                            <p class="text-sm text-gray-600">Use all servers through one configuration</p>
+                                        </div>
+                                    </div>
+                                </button>
+                                <button class="method-btn text-left p-6 border-2 border-gray-200 bg-gray-50 rounded-xl hover:border-gray-300 transition-all duration-200" onclick="showMethod('individual')" id="individualBtn">
+                                    <div class="flex items-center space-x-4">
+                                        <div class="w-12 h-12 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-xl flex items-center justify-center">
+                                            <i class="fas fa-box text-white text-xl"></i>
+                                        </div>
+                                        <div>
+                                            <h3 class="text-lg font-semibold text-gray-900">Individual Export</h3>
+                                            <p class="text-sm text-gray-600">Export and use servers separately</p>
+                                        </div>
+                                    </div>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Integrated Method -->
+                    <div id="integratedMethod" class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden">
+                        <div class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 border-b border-gray-200/50">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-emerald-500 rounded-xl flex items-center justify-center">
+                                    <i class="fas fa-link text-white"></i>
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900">Integrated Server Method</h3>
+                                    <p class="text-sm text-gray-600">Access all your MCP servers through a single configuration</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-6 space-y-6">
+                            <!-- Advantages -->
+                            <div class="bg-green-50 border border-green-200 rounded-xl p-4">
+                                <h4 class="font-semibold text-green-900 mb-3">✅ Advantages</h4>
+                                <ul class="space-y-2 text-green-800">
+                                    <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Single configuration for all servers</li>
+                                    <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Automatic updates when you create new servers</li>
+                                    <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Unified tool naming with server prefixes</li>
+                                    <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>No need to restart Claude Desktop when adding servers</li>
+                                </ul>
+                            </div>
+                            <!-- Setup Steps -->
+                            <div class="space-y-6">
+                                <h4 class="text-lg font-semibold text-gray-900">🚀 Quick Setup for Claude Desktop</h4>
+                                <div class="space-y-4">
+                                    <!-- Step 1 -->
+                                    <div class="flex space-x-4">
+                                        <div class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center font-semibold">1</div>
+                                        <div class="flex-1">
+                                            <h5 class="font-semibold text-gray-900">Make sure QuickMCP is running</h5>
+                                            <p class="text-gray-600 mb-2">Keep this application running with <code class="bg-gray-100 px-2 py-1 rounded">npm run dev</code></p>
+                                            <div class="flex items-center space-x-2 text-sm">
+                                                <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                                                <span class="text-green-700">Server is running</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!-- Step 2 -->
+                                    <div class="flex space-x-4">
+                                        <div class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center font-semibold">2</div>
+                                        <div class="flex-1">
+                                            <h5 class="font-semibold text-gray-900">Add to Claude Desktop Config</h5>
+                                            <p class="text-gray-600 mb-3">Copy this configuration to your Claude Desktop config file:</p>
+                                            <div class="mb-3">
+                                                <h6 class="font-medium text-gray-700 mb-2">📁 Config file locations:</h6>
+                                                <ul class="text-sm text-gray-600 space-y-1">
+                                                    <li><strong>macOS:</strong> <code class="bg-gray-100 px-1 rounded">~/Library/Application Support/Claude/claude_desktop_config.json</code></li>
+                                                    <li><strong>Windows:</strong> <code class="bg-gray-100 px-1 rounded">%APPDATA%\\Claude\\claude_desktop_config.json</code></li>
+                                                    <li><strong>Linux:</strong> <code class="bg-gray-100 px-1 rounded">~/.config/Claude/claude_desktop_config.json</code></li>
+                                                </ul>
+                                            </div>
+                                            <div class="relative bg-gray-50 border border-gray-200 rounded-lg">
+                                                <button class="absolute top-3 right-3 bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600 transition-colors" onclick="copyConfig('integrated')">
+                                                    <i class="fas fa-copy mr-1"></i>Copy
+                                                </button>
+                                                <pre class="p-4 text-sm overflow-x-auto"><code>{
+  "mcpServers": {
+    "quickmcp-stdio": {
+      "command": "/opt/homebrew/bin/node",
+      "args": ["/Users/berkaybasoz/Documents/apps/quickmcp/quickmcp-direct-stdio.js"]
+    }
+  }
+}</code></pre>
+                                            </div>
+                                            <!-- Configuration Process Screenshots -->
+                                            <div class="space-y-4 mt-4">
+                                                <h6 class="font-medium text-gray-700">📸 Step-by-step configuration:</h6>
+                                                <!-- Image 3: Developer Settings -->
+                                                <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
+                                                    <h6 class="text-sm font-medium text-gray-700 mb-2">2a. Open Developer Settings in Claude Desktop:</h6>
+                                                    <img src="images/3-claude-developer-settings.png" alt="Claude Desktop Developer Settings" class="w-full rounded border border-gray-200 shadow-sm">
+                                                </div>
+                                                <!-- Image 4: Config File -->
+                                                <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
+                                                    <h6 class="text-sm font-medium text-gray-700 mb-2">2b. View/Edit Configuration File:</h6>
+                                                    <img src="images/4-claude-config.png" alt="Claude Desktop Configuration File" class="w-full rounded border border-gray-200 shadow-sm">
+                                                </div>
+                                                <!-- Image 5: Config Edit -->
+                                                <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
+                                                    <h6 class="text-sm font-medium text-gray-700 mb-2">2c. Add QuickMCP Configuration:</h6>
+                                                    <img src="images/5-claude-config-edit.png" alt="Editing Claude Desktop Configuration" class="w-full rounded border border-gray-200 shadow-sm">
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!-- Step 3 -->
+                                    <div class="flex space-x-4">
+                                        <div class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center font-semibold">3</div>
+                                        <div class="flex-1">
+                                            <h5 class="font-semibold text-gray-900">Restart Claude Desktop</h5>
+                                            <p class="text-gray-600">Close and reopen Claude Desktop for the changes to take effect.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Tool Naming -->
+                            <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
+                                <h4 class="font-semibold text-blue-900 mb-3">🛠️ Using Your Tools</h4>
+                                <p class="text-blue-800 mb-3">In Claude Desktop, your tools will be available with this naming pattern:</p>
+                                <div class="bg-white border border-blue-200 rounded-lg p-3">
+                                    <code class="text-lg font-mono text-blue-700">serverName__toolName</code>
+                                </div>
+                                <p class="text-blue-700 text-sm mt-2 mb-4">
+                                    Example: If you have a server called "sales-data" with a tool called "search_customers",
+                                    it will appear as <code class="bg-white px-1 rounded">sales-data__search_customers</code>
+                                </p>
+                                <!-- Screenshots -->
+                                <div class="space-y-4">
+                                    <h5 class="font-semibold text-blue-900">📸 See it in action:</h5>
+                                    <!-- Image 1: Configuration -->
+                                    <div class="bg-white border border-blue-200 rounded-lg p-3">
+                                        <h6 class="text-sm font-medium text-blue-800 mb-2">1. QuickMCP configured in Claude Desktop:</h6>
+                                        <img src="images/1-claude-quickmcp-stdio.png" alt="QuickMCP configuration in Claude Desktop" class="w-full rounded border border-gray-200 shadow-sm">
+                                    </div>
+                                    <!-- Image 2: Tools Available -->
+                                    <div class="bg-white border border-blue-200 rounded-lg p-3">
+                                        <h6 class="text-sm font-medium text-blue-800 mb-2">2. Your tools available in Claude Desktop:</h6>
+                                        <img src="images/2-claude-tools.png" alt="QuickMCP tools available in Claude Desktop" class="w-full rounded border border-gray-200 shadow-sm">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Individual Method -->
+                    <div id="individualMethod" class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden" style="display: none;">
+                        <div class="bg-gradient-to-r from-orange-50 to-yellow-50 p-6 border-b border-gray-200/50">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-10 h-10 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-xl flex items-center justify-center">
+                                    <i class="fas fa-box text-white"></i>
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900">Individual Export Method</h3>
+                                    <p class="text-sm text-gray-600">Export and configure each server separately</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-6 space-y-6">
+                            <!-- Advantages -->
+                            <div class="bg-orange-50 border border-orange-200 rounded-xl p-4">
+                                <h4 class="font-semibold text-orange-900 mb-3">✅ Advantages</h4>
+                                <ul class="space-y-2 text-orange-800">
+                                    <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Independent server management</li>
+                                    <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Clean tool naming without prefixes</li>
+                                    <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Better performance for individual servers</li>
+                                    <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Portable server packages</li>
+                                </ul>
+                            </div>
+                            <!-- Export Process -->
+                            <div class="space-y-6">
+                                <h4 class="text-lg font-semibold text-gray-900">🚀 Export Process for Claude Desktop</h4>
+                                <div class="space-y-4">
+                                    <!-- Step 1 -->
+                                    <div class="flex space-x-4">
+                                        <div class="flex-shrink-0 w-8 h-8 bg-orange-500 text-white rounded-full flex items-center justify-center font-semibold">1</div>
+                                        <div class="flex-1">
+                                            <h5 class="font-semibold text-gray-900">Go to Manage Servers</h5>
+                                            <p class="text-gray-600">Navigate to the <a href="/manage-servers" class="text-blue-600 hover:text-blue-700">Manage Servers</a> page.</p>
+                                        </div>
+                                    </div>
+                                    <!-- Step 2 -->
+                                    <div class="flex space-x-4">
+                                        <div class="flex-shrink-0 w-8 h-8 bg-orange-500 text-white rounded-full flex items-center justify-center font-semibold">2</div>
+                                        <div class="flex-1">
+                                            <h5 class="font-semibold text-gray-900">Export Your Server</h5>
+                                            <p class="text-gray-600">Click the "Export" button for the server you want to use.</p>
+                                        </div>
+                                    </div>
+                                    <!-- Step 3 -->
+                                    <div class="flex space-x-4">
+                                        <div class="flex-shrink-0 w-8 h-8 bg-orange-500 text-white rounded-full flex items-center justify-center font-semibold">3</div>
+                                        <div class="flex-1">
+                                            <h5 class="font-semibold text-gray-900">Extract and Install</h5>
+                                            <p class="text-gray-600">Extract the downloaded package and run <code class="bg-gray-100 px-2 py-1 rounded">npm install</code> in the extracted folder.</p>
+                                        </div>
+                                    </div>
+                                    <!-- Step 4 -->
+                                    <div class="flex space-x-4">
+                                        <div class="flex-shrink-0 w-8 h-8 bg-orange-500 text-white rounded-full flex items-center justify-center font-semibold">4</div>
+                                        <div class="flex-1">
+                                            <h5 class="font-semibold text-gray-900">Configure Claude Desktop</h5>
+                                            <p class="text-gray-600 mb-3">Add the server to your Claude Desktop config:</p>
+                                            <div class="relative bg-gray-50 border border-gray-200 rounded-lg">
+                                                <button class="absolute top-3 right-3 bg-orange-500 text-white px-3 py-1 rounded text-sm hover:bg-orange-600 transition-colors" onclick="copyConfig('claude-individual')">
+                                                    <i class="fas fa-copy mr-1"></i>Copy
+                                                </button>
+                                                <pre class="p-4 text-sm overflow-x-auto"><code>{
+  "mcpServers": {
+    "your-server-name": {
+      "command": "node",
+      "args": ["path/to/your/server/index.js"]
+    }
+  }
+}</code></pre>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Troubleshooting -->
+                    <div class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden">
+                        <div class="bg-gradient-to-r from-red-50 to-pink-50 p-6 border-b border-gray-200/50">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-10 h-10 bg-gradient-to-r from-red-500 to-pink-500 rounded-xl flex items-center justify-center">
+                                    <i class="fas fa-wrench text-white"></i>
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900">Troubleshooting</h3>
+                                    <p class="text-sm text-gray-600">Common issues and solutions</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-6 space-y-6">
+                            <div class="space-y-4">
+                                <!-- Issue 1 -->
+                                <div class="border border-gray-200 rounded-lg p-4">
+                                    <h4 class="font-semibold text-gray-900 mb-2">❌ Tools not showing up in Claude Desktop</h4>
+                                    <ul class="space-y-1 text-gray-600 text-sm">
+                                        <li>• Make sure QuickMCP is running (check server status above)</li>
+                                        <li>• Verify the configuration is correct in Claude Desktop</li>
+                                        <li>• Restart Claude Desktop completely</li>
+                                        <li>• Check that port 3001 is not blocked by firewall</li>
+                                    </ul>
+                                </div>
+                                <!-- Issue 2 -->
+                                <div class="border border-gray-200 rounded-lg p-4">
+                                    <h4 class="font-semibold text-gray-900 mb-2">🔄 Server status shows offline</h4>
+                                    <ul class="space-y-1 text-gray-600 text-sm">
+                                        <li>• Run <code class="bg-gray-100 px-1 rounded">npm run dev</code> in your QuickMCP directory</li>
+                                        <li>• Check if port 3001 is already in use</li>
+                                        <li>• Look at the console for error messages</li>
+                                    </ul>
+                                </div>
+                                <!-- Issue 3 -->
+                                <div class="border border-gray-200 rounded-lg p-4">
+                                    <h4 class="font-semibold text-gray-900 mb-2">⚠️ Individual exported servers not working</h4>
+                                    <ul class="space-y-1 text-gray-600 text-sm">
+                                        <li>• Make sure you ran <code class="bg-gray-100 px-1 rounded">npm install</code> in the exported folder</li>
+                                        <li>• Check that the path in Claude Desktop config is correct</li>
+                                        <li>• Ensure Node.js is installed and accessible</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+    <!-- Scripts -->
+    <script src="shared.js"></script>
+    <script src="app.js"></script>
+    <script>
+        // Method switching functionality
+        function showMethod(method) {
+            const integratedMethod = document.getElementById('integratedMethod');
+            const individualMethod = document.getElementById('individualMethod');
+            const integratedBtn = document.getElementById('integratedBtn');
+            const individualBtn = document.getElementById('individualBtn');
+            if (method === 'integrated') {
+                integratedMethod.style.display = 'block';
+                individualMethod.style.display = 'none';
+                integratedBtn.className = 'method-btn text-left p-6 border-2 border-blue-200 bg-blue-50 rounded-xl hover:border-blue-300 transition-all duration-200';
+                individualBtn.className = 'method-btn text-left p-6 border-2 border-gray-200 bg-gray-50 rounded-xl hover:border-gray-300 transition-all duration-200';
+            } else {
+                integratedMethod.style.display = 'none';
+                individualMethod.style.display = 'block';
+                integratedBtn.className = 'method-btn text-left p-6 border-2 border-gray-200 bg-gray-50 rounded-xl hover:border-gray-300 transition-all duration-200';
+                individualBtn.className = 'method-btn text-left p-6 border-2 border-orange-200 bg-orange-50 rounded-xl hover:border-orange-300 transition-all duration-200';
+            }
+        }
+        // Copy configuration function
+        function copyConfig(type) {
+            let configText = '';
+            switch(type) {
+                case 'integrated':
+                    configText = `{
+  "mcpServers": {
+    "quickmcp-stdio": {
+      "command": "/opt/homebrew/bin/node",
+      "args": ["/Users/berkaybasoz/Documents/apps/quickmcp/quickmcp-direct-stdio.js"]
+    }
+  }
+}`;
+                    break;
+                case 'claude-individual':
+                    configText = `{
+  "mcpServers": {
+    "your-server-name": {
+      "command": "node",
+      "args": ["path/to/your/server/index.js"]
+    }
+  }
+}`;
+                    break;
+            }
+            navigator.clipboard.writeText(configText).then(() => {
+                // Show feedback
+                const button = event.target;
+                const originalText = button.innerHTML;
+                button.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!';
+                button.className = button.className.replace('bg-blue-500 hover:bg-blue-600', 'bg-green-500').replace('bg-orange-500 hover:bg-orange-600', 'bg-green-500');
+                setTimeout(() => {
+                    button.innerHTML = originalText;
+                    button.className = button.className.replace('bg-green-500', type === 'integrated' ? 'bg-blue-500 hover:bg-blue-600' : 'bg-orange-500 hover:bg-orange-600');
+                }, 2000);
+            });
+        }
+    </script>
+</body>
+</html>