@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
  1. package/README.md +553 -0
  2. package/dist/client/MCPClient.d.ts +24 -0
  3. package/dist/client/MCPClient.d.ts.map +1 -0
  4. package/dist/client/MCPClient.js +211 -0
  5. package/dist/client/MCPClient.js.map +1 -0
  6. package/dist/client/MCPClientUnified.d.ts +31 -0
  7. package/dist/client/MCPClientUnified.d.ts.map +1 -0
  8. package/dist/client/MCPClientUnified.js +275 -0
  9. package/dist/client/MCPClientUnified.js.map +1 -0
  10. package/dist/client/MCPTestRunner.d.ts +44 -0
  11. package/dist/client/MCPTestRunner.d.ts.map +1 -0
  12. package/dist/client/MCPTestRunner.js +220 -0
  13. package/dist/client/MCPTestRunner.js.map +1 -0
  14. package/dist/client/MCPTestRunnerUnified.d.ts +48 -0
  15. package/dist/client/MCPTestRunnerUnified.d.ts.map +1 -0
  16. package/dist/client/MCPTestRunnerUnified.js +183 -0
  17. package/dist/client/MCPTestRunnerUnified.js.map +1 -0
  18. package/dist/database/json-manager.d.ts +55 -0
  19. package/dist/database/json-manager.d.ts.map +1 -0
  20. package/dist/database/json-manager.js +128 -0
  21. package/dist/database/json-manager.js.map +1 -0
  22. package/dist/database/sqlite-manager.d.ts +53 -0
  23. package/dist/database/sqlite-manager.d.ts.map +1 -0
  24. package/dist/database/sqlite-manager.js +193 -0
  25. package/dist/database/sqlite-manager.js.map +1 -0
  26. package/dist/dynamic-mcp-executor.d.ts +14 -0
  27. package/dist/dynamic-mcp-executor.d.ts.map +1 -0
  28. package/dist/dynamic-mcp-executor.js +274 -0
  29. package/dist/dynamic-mcp-executor.js.map +1 -0
  30. package/dist/generators/MCPServerGenerator-new.d.ts +37 -0
  31. package/dist/generators/MCPServerGenerator-new.d.ts.map +1 -0
  32. package/dist/generators/MCPServerGenerator-new.js +287 -0
  33. package/dist/generators/MCPServerGenerator-new.js.map +1 -0
  34. package/dist/generators/MCPServerGenerator.d.ts +42 -0
  35. package/dist/generators/MCPServerGenerator.d.ts.map +1 -0
  36. package/dist/generators/MCPServerGenerator.js +494 -0
  37. package/dist/generators/MCPServerGenerator.js.map +1 -0
  38. package/dist/generators/database/sqlite-manager.d.ts +52 -0
  39. package/dist/generators/database/sqlite-manager.js +143 -0
  40. package/dist/generators/generators/MCPServerGenerator.d.ts +37 -0
  41. package/dist/generators/generators/MCPServerGenerator.js +396 -0
  42. package/dist/index.d.ts +7 -0
  43. package/dist/index.d.ts.map +1 -0
  44. package/dist/index.js +23 -0
  45. package/dist/index.js.map +1 -0
  46. package/dist/integrated-mcp-server-new.d.ts +12 -0
  47. package/dist/integrated-mcp-server-new.d.ts.map +1 -0
  48. package/dist/integrated-mcp-server-new.js +253 -0
  49. package/dist/integrated-mcp-server-new.js.map +1 -0
  50. package/dist/integrated-mcp-server.d.ts +25 -0
  51. package/dist/integrated-mcp-server.d.ts.map +1 -0
  52. package/dist/integrated-mcp-server.js +541 -0
  53. package/dist/integrated-mcp-server.js.map +1 -0
  54. package/dist/mcp-inspector-server.d.ts +3 -0
  55. package/dist/mcp-inspector-server.d.ts.map +1 -0
  56. package/dist/mcp-inspector-server.js +119 -0
  57. package/dist/mcp-inspector-server.js.map +1 -0
  58. package/dist/mcp-sdk-server.d.ts +3 -0
  59. package/dist/mcp-sdk-server.d.ts.map +1 -0
  60. package/dist/mcp-sdk-server.js +90 -0
  61. package/dist/mcp-sdk-server.js.map +1 -0
  62. package/dist/mcp-server.d.ts +3 -0
  63. package/dist/mcp-server.d.ts.map +1 -0
  64. package/dist/mcp-server.js +300 -0
  65. package/dist/mcp-server.js.map +1 -0
  66. package/dist/parsers/CsvParser.d.ts +7 -0
  67. package/dist/parsers/CsvParser.d.ts.map +1 -0
  68. package/dist/parsers/CsvParser.js +98 -0
  69. package/dist/parsers/CsvParser.js.map +1 -0
  70. package/dist/parsers/DatabaseParser.d.ts +18 -0
  71. package/dist/parsers/DatabaseParser.d.ts.map +1 -0
  72. package/dist/parsers/DatabaseParser.js +372 -0
  73. package/dist/parsers/DatabaseParser.js.map +1 -0
  74. package/dist/parsers/ExcelParser.d.ts +8 -0
  75. package/dist/parsers/ExcelParser.d.ts.map +1 -0
  76. package/dist/parsers/ExcelParser.js +119 -0
  77. package/dist/parsers/ExcelParser.js.map +1 -0
  78. package/dist/parsers/index.d.ts +13 -0
  79. package/dist/parsers/index.d.ts.map +1 -0
  80. package/dist/parsers/index.js +88 -0
  81. package/dist/parsers/index.js.map +1 -0
  82. package/dist/parsers/parsers/ExcelParser.js +118 -0
  83. package/dist/parsers/types/index.js +2 -0
  84. package/dist/quickmcp-unified-bridge.d.ts +13 -0
  85. package/dist/quickmcp-unified-bridge.d.ts.map +1 -0
  86. package/dist/quickmcp-unified-bridge.js +176 -0
  87. package/dist/quickmcp-unified-bridge.js.map +1 -0
  88. package/dist/server/ServerManager.d.ts +37 -0
  89. package/dist/server/ServerManager.d.ts.map +1 -0
  90. package/dist/server/ServerManager.js +376 -0
  91. package/dist/server/ServerManager.js.map +1 -0
  92. package/dist/sqlite-manager.js +145 -0
  93. package/dist/start-new-server.d.ts +3 -0
  94. package/dist/start-new-server.d.ts.map +1 -0
  95. package/dist/start-new-server.js +10 -0
  96. package/dist/start-new-server.js.map +1 -0
  97. package/dist/test-app.d.ts +2 -0
  98. package/dist/test-app.d.ts.map +1 -0
  99. package/dist/test-app.js +119 -0
  100. package/dist/test-app.js.map +1 -0
  101. package/dist/test-new-architecture.d.ts +3 -0
  102. package/dist/test-new-architecture.d.ts.map +1 -0
  103. package/dist/test-new-architecture.js +72 -0
  104. package/dist/test-new-architecture.js.map +1 -0
  105. package/dist/transport/base-transport.d.ts +21 -0
  106. package/dist/transport/base-transport.d.ts.map +1 -0
  107. package/dist/transport/base-transport.js +16 -0
  108. package/dist/transport/base-transport.js.map +1 -0
  109. package/dist/transport/index.d.ts +10 -0
  110. package/dist/transport/index.d.ts.map +1 -0
  111. package/dist/transport/index.js +12 -0
  112. package/dist/transport/index.js.map +1 -0
  113. package/dist/transport/sse-transport.d.ts +13 -0
  114. package/dist/transport/sse-transport.d.ts.map +1 -0
  115. package/dist/transport/sse-transport.js +106 -0
  116. package/dist/transport/sse-transport.js.map +1 -0
  117. package/dist/transport/stdio-transport.d.ts +8 -0
  118. package/dist/transport/stdio-transport.d.ts.map +1 -0
  119. package/dist/transport/stdio-transport.js +53 -0
  120. package/dist/transport/stdio-transport.js.map +1 -0
  121. package/dist/transport/streamable-http-transport.d.ts +15 -0
  122. package/dist/transport/streamable-http-transport.d.ts.map +1 -0
  123. package/dist/transport/streamable-http-transport.js +151 -0
  124. package/dist/transport/streamable-http-transport.js.map +1 -0
  125. package/dist/types/index.d.ts +64 -0
  126. package/dist/types/index.d.ts.map +1 -0
  127. package/dist/types/index.js +3 -0
  128. package/dist/types/index.js.map +1 -0
  129. package/dist/web/client/MCPClient.js +348 -0
  130. package/dist/web/client/MCPTestRunner.js +317 -0
  131. package/dist/web/database/json-manager.js +124 -0
  132. package/dist/web/database/sqlite-manager.js +146 -0
  133. package/dist/web/dynamic-mcp-executor.js +443 -0
  134. package/dist/web/generators/MCPServerGenerator-new.js +284 -0
  135. package/dist/web/generators/MCPServerGenerator.js +566 -0
  136. package/dist/web/integrated-mcp-server-new.js +394 -0
  137. package/dist/web/parsers/CsvParser.js +144 -0
  138. package/dist/web/parsers/DatabaseParser.js +637 -0
  139. package/dist/web/parsers/ExcelParser.js +180 -0
  140. package/dist/web/parsers/index.js +152 -0
  141. package/dist/web/server.d.ts +3 -0
  142. package/dist/web/server.d.ts.map +1 -0
  143. package/dist/web/server.js +790 -0
  144. package/dist/web/server.js.map +1 -0
  145. package/dist/web/types/index.js +2 -0
  146. package/dist/web/web/server.js +860 -0
  147. package/package.json +68 -0
  148. package/quickmcp-direct-stdio.js +328 -0
  149. package/src/web/public/app.js +1795 -0
  150. package/src/web/public/database-tables.html +711 -0
  151. package/src/web/public/how-to-use.html +571 -0
  152. package/src/web/public/how-to-use.js +255 -0
  153. package/src/web/public/images/1-claude-quickmcp-stdio.png +0 -0
  154. package/src/web/public/images/2-claude-tools.png +0 -0
  155. package/src/web/public/images/3-claude-developer-settings.png +0 -0
  156. package/src/web/public/images/4-claude-config.png +0 -0
  157. package/src/web/public/images/5-claude-config-edit.png +0 -0
  158. package/src/web/public/index.html +626 -0
  159. package/src/web/public/manage-servers.html +198 -0
  160. package/src/web/public/modern-styles.css +946 -0
  161. package/src/web/public/shared-styles.css +2091 -0
  162. package/src/web/public/shared.js +93 -0
  163. package/src/web/public/test-servers.html +302 -0
package/src/web/public/index.html ADDED
@@ -0,0 +1,626 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="h-full bg-gray-50">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>QuickMCP - Modern MCP Server Generator</title>
7
+
8
+ <!-- Tailwind CSS -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- Font Awesome for icons -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
13
+
14
+ <!-- Google Fonts -->
15
+ <link rel="preconnect" href="https://fonts.googleapis.com">
16
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
18
+
19
+ <style>
20
+ body { font-family: 'Inter', sans-serif; }
21
+
22
+ /* Custom animations */
23
+ @keyframes slideIn {
24
+ from { transform: translateX(-100%); opacity: 0; }
25
+ to { transform: translateX(0); opacity: 1; }
26
+ }
27
+
28
+ @keyframes fadeIn {
29
+ from { opacity: 0; transform: translateY(20px); }
30
+ to { opacity: 1; transform: translateY(0); }
31
+ }
32
+
33
+ .slide-in { animation: slideIn 0.3s ease-out; }
34
+ .fade-in { animation: fadeIn 0.5s ease-out; }
35
+
36
+ /* Custom scrollbar */
37
+ ::-webkit-scrollbar { width: 6px; }
38
+ ::-webkit-scrollbar-track { background: #f1f5f9; }
39
+ ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
40
+ ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
41
+
42
+ /* Glassmorphism effect */
43
+ .glass {
44
+ backdrop-filter: blur(20px);
45
+ background: rgba(255, 255, 255, 0.8);
46
+ border: 1px solid rgba(255, 255, 255, 0.2);
47
+ }
48
+
49
+ .glass-dark {
50
+ backdrop-filter: blur(20px);
51
+ background: rgba(15, 23, 42, 0.8);
52
+ border: 1px solid rgba(255, 255, 255, 0.1);
53
+ }
54
+ </style>
55
+
56
+ <!-- Tailwind Config -->
57
+ <script>
58
+ tailwind.config = {
59
+ theme: {
60
+ extend: {
61
+ colors: {
62
+ primary: {
63
+ 50: '#f0f9ff',
64
+ 500: '#0ea5e9',
65
+ 600: '#0284c7',
66
+ 700: '#0369a1',
67
+ 900: '#0c4a6e'
68
+ }
69
+ },
70
+ animation: {
71
+ 'bounce-slow': 'bounce 2s infinite',
72
+ 'pulse-slow': 'pulse 3s infinite'
73
+ }
74
+ }
75
+ }
76
+ }
77
+ </script>
78
+ </head>
79
+ <body class="h-full bg-gradient-to-br from-blue-50 via-white to-cyan-50">
80
+ <!-- Main App Container -->
81
+ <div id="app" class="flex h-full">
82
+
83
+ <!-- Sidebar -->
84
+ <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">
85
+ <div class="flex flex-col h-full">
86
+ <!-- Sidebar Header -->
87
+ <div class="flex items-center justify-between p-6 border-b border-gray-200/50">
88
+ <div class="flex items-center space-x-3">
89
+ <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center">
90
+ <i class="fas fa-rocket text-white text-lg"></i>
91
+ </div>
92
+ <div>
93
+ <h1 class="text-xl font-bold text-gray-900">QuickMCP</h1>
94
+ <p class="text-xs text-gray-500">Server Generator</p>
95
+ </div>
96
+ </div>
97
+ <button id="closeSidebar" class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors">
98
+ <i class="fas fa-times text-gray-500"></i>
99
+ </button>
100
+ </div>
101
+
102
+ <!-- Navigation -->
103
+ <nav class="flex-1 px-4 py-6 space-y-2">
104
+ <a href="/" 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">
105
+ <i class="fas fa-magic mr-3 text-blue-500"></i>
106
+ Generate Server
107
+ </a>
108
+ <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">
109
+ <i class="fas fa-server mr-3 text-gray-400"></i>
110
+ Manage Servers
111
+ </a>
112
+ <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">
113
+ <i class="fas fa-vial mr-3 text-gray-400"></i>
114
+ Test Servers
115
+ </a>
116
+ <a href="/how-to-use" 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">
117
+ <i class="fas fa-book mr-3 text-gray-400"></i>
118
+ How to Use
119
+ </a>
120
+ </nav>
121
+
122
+ <!-- Sidebar Footer -->
123
+ <div class="p-4 border-t border-gray-200/50">
124
+ <div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-xl border border-blue-100">
125
+ <div class="flex items-center space-x-3">
126
+ <div class="w-8 h-8 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center">
127
+ <i class="fas fa-check text-white text-xs"></i>
128
+ </div>
129
+ <div>
130
+ <p class="text-sm font-medium text-gray-900">All systems online</p>
131
+ <p class="text-xs text-gray-500">Ready to generate servers</p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Sidebar Overlay for mobile -->
140
+ <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>
141
+
142
+ <!-- Main Content -->
143
+ <div class="flex-1 lg:pl-64">
144
+ <!-- Top Navigation -->
145
+ <header class="bg-white/80 backdrop-blur-xl border-b border-gray-200/50 sticky top-0 z-30">
146
+ <div class="px-4 sm:px-6 lg:px-8">
147
+ <div class="flex justify-between items-center h-16">
148
+ <div class="flex items-center space-x-4">
149
+ <button id="openSidebar" class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors">
150
+ <i class="fas fa-bars text-gray-600"></i>
151
+ </button>
152
+ <div>
153
+ <h2 id="pageTitle" class="text-2xl font-bold text-gray-900">Generate Server</h2>
154
+ <p class="text-sm text-gray-500">Create powerful MCP servers from your data</p>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="flex items-center space-x-4">
159
+ <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">
160
+ <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
161
+ <span>Online</span>
162
+ </div>
163
+ <button class="p-2 rounded-lg hover:bg-gray-100 transition-colors relative">
164
+ <i class="fas fa-bell text-gray-600"></i>
165
+ <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
166
+ </button>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </header>
171
+
172
+ <!-- Tab Content -->
173
+ <main class="p-4 sm:p-6 lg:p-8">
174
+
175
+ <!-- Generate Server Tab -->
176
+ <div id="generate-tab" class="tab-content fade-in">
177
+ <div class="max-w-7xl mx-auto space-y-8">
178
+
179
+ <!-- Hero Section -->
180
+ <div class="text-center py-8">
181
+ <div class="inline-flex items-center space-x-2 bg-blue-50 text-blue-700 px-4 py-2 rounded-full text-sm font-medium mb-4">
182
+ <i class="fas fa-sparkles"></i>
183
+ <span>AI-Powered Server Generation</span>
184
+ </div>
185
+ <h1 class="text-4xl font-bold text-gray-900 mb-4">Generate Your MCP Server</h1>
186
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Transform your data into powerful MCP servers in minutes. Follow our step-by-step wizard.</p>
187
+ </div>
188
+
189
+ <!-- Wizard Progress Steps -->
190
+ <div class="bg-white rounded-2xl shadow-lg border border-gray-200/50 p-6">
191
+ <div class="flex items-center justify-between mb-8">
192
+ <div class="flex-1">
193
+ <div class="flex items-center">
194
+ <div id="step-1-indicator" class="flex items-center justify-center w-10 h-10 bg-blue-500 text-white rounded-full font-semibold">
195
+ 1
196
+ </div>
197
+ <div class="flex-1 h-1 bg-gray-200 mx-4">
198
+ <div id="progress-1-2" class="h-full bg-gray-200 transition-colors duration-300"></div>
199
+ </div>
200
+ </div>
201
+ <div class="mt-2">
202
+ <p class="text-sm font-medium text-blue-600">Data Source</p>
203
+ <p class="text-xs text-gray-500">Choose your data source</p>
204
+ </div>
205
+ </div>
206
+ <div class="flex-1">
207
+ <div class="flex items-center">
208
+ <div id="step-2-indicator" class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-600 rounded-full font-semibold">
209
+ 2
210
+ </div>
211
+ <div class="flex-1 h-1 bg-gray-200 mx-4">
212
+ <div id="progress-2-3" class="h-full bg-gray-200 transition-colors duration-300"></div>
213
+ </div>
214
+ </div>
215
+ <div class="mt-2">
216
+ <p class="text-sm font-medium text-gray-500">Data Preview</p>
217
+ <p class="text-xs text-gray-500">Review your data</p>
218
+ </div>
219
+ </div>
220
+ <div class="flex-1">
221
+ <div class="flex items-center">
222
+ <div id="step-3-indicator" class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-600 rounded-full font-semibold">
223
+ 3
224
+ </div>
225
+ </div>
226
+ <div class="mt-2">
227
+ <p class="text-sm font-medium text-gray-500">Server Configuration</p>
228
+ <p class="text-xs text-gray-500">Configure and generate</p>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Wizard Content -->
235
+ <div class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden">
236
+
237
+ <!-- Step 1: Data Source Configuration -->
238
+ <div id="wizard-step-1" class="wizard-step">
239
+ <div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-6 border-b border-gray-200/50">
240
+ <div class="flex items-center space-x-3">
241
+ <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center">
242
+ <i class="fas fa-database text-white"></i>
243
+ </div>
244
+ <div>
245
+ <h3 class="text-lg font-semibold text-gray-900">Step 1: Data Source</h3>
246
+ <p class="text-sm text-gray-600">Choose and configure your data source</p>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="p-6 space-y-6">
252
+ <!-- Data Source Type -->
253
+ <div>
254
+ <label class="block text-sm font-medium text-gray-700 mb-3">Data Source Type</label>
255
+ <div class="grid grid-cols-1 gap-3">
256
+ <label class="relative">
257
+ <input type="radio" name="dataSourceType" value="csv" class="sr-only peer">
258
+ <div class="p-4 border-2 border-gray-200 rounded-xl cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 transition-all duration-200 hover:border-gray-300">
259
+ <div class="flex items-center space-x-3">
260
+ <i class="fas fa-file-csv text-2xl text-gray-400 peer-checked:text-blue-500"></i>
261
+ <div>
262
+ <p class="font-medium text-gray-900">CSV File</p>
263
+ <p class="text-sm text-gray-500">Upload comma-separated values file</p>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </label>
268
+
269
+ <label class="relative">
270
+ <input type="radio" name="dataSourceType" value="excel" class="sr-only peer">
271
+ <div class="p-4 border-2 border-gray-200 rounded-xl cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 transition-all duration-200 hover:border-gray-300">
272
+ <div class="flex items-center space-x-3">
273
+ <i class="fas fa-file-excel text-2xl text-gray-400 peer-checked:text-blue-500"></i>
274
+ <div>
275
+ <p class="font-medium text-gray-900">Excel File</p>
276
+ <p class="text-sm text-gray-500">Upload Excel spreadsheet file</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </label>
281
+
282
+ <label class="relative">
283
+ <input type="radio" name="dataSourceType" value="database" class="sr-only peer">
284
+ <div class="p-4 border-2 border-gray-200 rounded-xl cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 transition-all duration-200 hover:border-gray-300">
285
+ <div class="flex items-center space-x-3">
286
+ <i class="fas fa-database text-2xl text-gray-400 peer-checked:text-blue-500"></i>
287
+ <div>
288
+ <p class="font-medium text-gray-900">Database Connection</p>
289
+ <p class="text-sm text-gray-500">Connect to existing database</p>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </label>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- File Upload Area -->
298
+ <div id="file-upload-section" class="hidden">
299
+ <div id="fileUpload" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-blue-400 transition-colors cursor-pointer group">
300
+ <div class="space-y-4">
301
+ <div class="w-16 h-16 mx-auto bg-blue-50 rounded-xl flex items-center justify-center group-hover:bg-blue-100 transition-colors">
302
+ <i class="fas fa-cloud-upload-alt text-2xl text-blue-500"></i>
303
+ </div>
304
+ <div>
305
+ <p class="text-lg font-medium text-gray-900">Drop your file here</p>
306
+ <p class="text-sm text-gray-500">or click to browse files</p>
307
+ </div>
308
+ <p class="text-xs text-gray-400">Supports CSV, Excel files up to 10MB</p>
309
+ </div>
310
+ <input type="file" id="fileInput" accept=".csv,.xlsx,.xls" class="hidden">
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Database Configuration -->
315
+ <div id="database-section" class="hidden space-y-4">
316
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
317
+ <div>
318
+ <label class="block text-sm font-medium text-gray-700 mb-2">Database Type</label>
319
+ <select id="dbType" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
320
+ <option value="mssql" selected>SQL Server</option>
321
+ <option value="mysql">MySQL</option>
322
+ <option value="postgresql">PostgreSQL</option>
323
+ <option value="sqlite">SQLite</option>
324
+ </select>
325
+ </div>
326
+ <div>
327
+ <label class="block text-sm font-medium text-gray-700 mb-2">Host</label>
328
+ <input type="text" id="dbHost" placeholder="localhost" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
329
+ </div>
330
+ <div>
331
+ <label class="block text-sm font-medium text-gray-700 mb-2">Port</label>
332
+ <input type="number" id="dbPort" placeholder="3306" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
333
+ </div>
334
+ <div>
335
+ <label class="block text-sm font-medium text-gray-700 mb-2">Database Name</label>
336
+ <input type="text" id="dbName" placeholder="my_database" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
337
+ </div>
338
+ <div>
339
+ <label class="block text-sm font-medium text-gray-700 mb-2">Username</label>
340
+ <input type="text" id="dbUser" placeholder="username" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
341
+ </div>
342
+ <div>
343
+ <label class="block text-sm font-medium text-gray-700 mb-2">Password</label>
344
+ <input type="password" id="dbPassword" placeholder="password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Loading and Error States -->
350
+ <div id="parse-loading" class="hidden text-center py-4">
351
+ <div class="inline-flex items-center space-x-2 text-blue-600">
352
+ <div class="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
353
+ <span>Parsing data source...</span>
354
+ </div>
355
+ </div>
356
+
357
+ <div id="parse-error" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg"></div>
358
+
359
+ <!-- Step Navigation -->
360
+ <div class="flex justify-between pt-6">
361
+ <div></div>
362
+ <button id="next-to-step-2" class="bg-gradient-to-r from-blue-500 to-cyan-500 text-white px-6 py-3 rounded-xl font-medium hover:from-blue-600 hover:to-cyan-600 transition-all duration-200 transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed" disabled>
363
+ <span>Next: Data Preview</span>
364
+ <i class="fas fa-arrow-right ml-2"></i>
365
+ </button>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Step 2: Data Preview -->
371
+ <div id="wizard-step-2" class="wizard-step hidden">
372
+ <div class="bg-gradient-to-r from-green-50 to-blue-50 p-6 border-b border-gray-200/50">
373
+ <div class="flex items-center space-x-3">
374
+ <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-blue-500 rounded-xl flex items-center justify-center">
375
+ <i class="fas fa-eye text-white"></i>
376
+ </div>
377
+ <div>
378
+ <h3 class="text-lg font-semibold text-gray-900">Step 2: Data Preview</h3>
379
+ <p class="text-sm text-gray-600">Review and validate your parsed data</p>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ <div class="p-6 space-y-6">
384
+ <div id="data-preview"></div>
385
+
386
+ <!-- Step Navigation -->
387
+ <div class="flex justify-between pt-6">
388
+ <button id="back-to-step-1" class="bg-gray-100 text-gray-700 px-6 py-3 rounded-xl font-medium hover:bg-gray-200 transition-all duration-200">
389
+ <i class="fas fa-arrow-left mr-2"></i>
390
+ <span>Back: Data Source</span>
391
+ </button>
392
+ <button id="next-to-step-3" class="bg-gradient-to-r from-green-500 to-blue-500 text-white px-6 py-3 rounded-xl font-medium hover:from-green-600 hover:to-blue-600 transition-all duration-200 transform hover:scale-[1.02]">
393
+ <span>Next: Server Config</span>
394
+ <i class="fas fa-arrow-right ml-2"></i>
395
+ </button>
396
+ </div>
397
+ </div>
398
+ </div>
399
+
400
+ <!-- Step 3: Server Configuration -->
401
+ <div id="wizard-step-3" class="wizard-step hidden">
402
+ <div class="bg-gradient-to-r from-purple-50 to-pink-50 p-6 border-b border-gray-200/50">
403
+ <div class="flex items-center space-x-3">
404
+ <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">
405
+ <i class="fas fa-cog text-white"></i>
406
+ </div>
407
+ <div>
408
+ <h3 class="text-lg font-semibold text-gray-900">Step 3: Server Configuration</h3>
409
+ <p class="text-sm text-gray-600">Configure and generate your MCP server</p>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="p-6 space-y-6">
415
+ <div>
416
+ <label class="block text-sm font-medium text-gray-700 mb-2">Server Name</label>
417
+ <input type="text" id="serverName" placeholder="my-awesome-server" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
418
+ <div id="name-validation" class="mt-2 text-sm"></div>
419
+ </div>
420
+
421
+ <div>
422
+ <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
423
+ <textarea id="serverDescription" rows="3" placeholder="Describe your MCP server..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"></textarea>
424
+ </div>
425
+
426
+ <div>
427
+ <label class="block text-sm font-medium text-gray-700 mb-2">Version</label>
428
+ <input type="text" id="serverVersion" value="1.0.0" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
429
+ </div>
430
+
431
+ <!-- Loading and Status -->
432
+ <div id="generate-loading" class="hidden text-center py-4">
433
+ <div class="inline-flex items-center space-x-2 text-purple-600">
434
+ <div class="w-4 h-4 border-2 border-purple-600 border-t-transparent rounded-full animate-spin"></div>
435
+ <span>Generating MCP server...</span>
436
+ </div>
437
+ </div>
438
+
439
+ <div id="generate-success" class="hidden bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg"></div>
440
+ <div id="generate-error" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg"></div>
441
+
442
+ <!-- Step Navigation -->
443
+ <div class="flex justify-between pt-6">
444
+ <button id="back-to-step-2" class="bg-gray-100 text-gray-700 px-6 py-3 rounded-xl font-medium hover:bg-gray-200 transition-all duration-200">
445
+ <i class="fas fa-arrow-left mr-2"></i>
446
+ <span>Back: Data Preview</span>
447
+ </button>
448
+ <button id="generateBtn" class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-xl font-medium hover:from-purple-600 hover:to-pink-600 transition-all duration-200 transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed">
449
+ <i class="fas fa-rocket mr-2"></i>
450
+ Generate MCP Server
451
+ </button>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <!-- Manage Servers Tab -->
460
+ <div id="manage-tab" class="tab-content hidden">
461
+ <div class="max-w-7xl mx-auto">
462
+ <div class="flex justify-between items-center mb-8">
463
+ <div class="flex-1 text-center">
464
+ <h1 class="text-3xl font-bold text-gray-900">Generated Servers</h1>
465
+ <p class="text-gray-600 mt-2">Manage and deploy your created MCP servers</p>
466
+ </div>
467
+ <button class="bg-gradient-to-r from-blue-500 to-cyan-500 text-white px-6 py-3 rounded-xl font-medium hover:from-blue-600 hover:to-cyan-600 transition-all duration-200 transform hover:scale-[1.02]" onclick="window.location.href='/'">
468
+ <i class="fas fa-plus mr-2"></i>
469
+ Generate New Server
470
+ </button>
471
+ </div>
472
+
473
+ <div id="server-list" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
474
+ <!-- Server cards will be populated here -->
475
+ </div>
476
+ </div>
477
+ </div>
478
+
479
+ <!-- Test Servers Tab -->
480
+ <div id="test-tab" class="tab-content hidden">
481
+ <div class="max-w-7xl mx-auto space-y-8">
482
+ <div class="text-center">
483
+ <h1 class="text-3xl font-bold text-gray-900 mb-4">Test Your Servers</h1>
484
+ <p class="text-gray-600">Run automated tests or create custom test scenarios for your MCP servers</p>
485
+ </div>
486
+
487
+ <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
488
+ <!-- Auto Test -->
489
+ <div class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden">
490
+ <div class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 border-b border-gray-200/50">
491
+ <div class="flex items-center space-x-3">
492
+ <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-emerald-500 rounded-xl flex items-center justify-center">
493
+ <i class="fas fa-play text-white"></i>
494
+ </div>
495
+ <div>
496
+ <h3 class="text-lg font-semibold text-gray-900">Auto Test</h3>
497
+ <p class="text-sm text-gray-600">Automated testing suite</p>
498
+ </div>
499
+ </div>
500
+ </div>
501
+
502
+ <div class="p-6 space-y-6">
503
+ <div>
504
+ <label class="block text-sm font-medium text-gray-700 mb-2">Select Server</label>
505
+ <select id="testServerSelect" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
506
+ <option value="">Loading servers...</option>
507
+ </select>
508
+ </div>
509
+
510
+ <button id="runAutoTestsBtn" class="w-full bg-gradient-to-r from-green-500 to-emerald-500 text-white px-6 py-3 rounded-xl font-medium hover:from-green-600 hover:to-emerald-600 transition-all duration-200 transform hover:scale-[1.02]">
511
+ <i class="fas fa-play mr-2"></i>
512
+ Run Auto Tests
513
+ </button>
514
+
515
+ <div id="test-loading" class="hidden text-center py-4">
516
+ <div class="inline-flex items-center space-x-2 text-green-600">
517
+ <div class="w-4 h-4 border-2 border-green-600 border-t-transparent rounded-full animate-spin"></div>
518
+ <span>Running tests...</span>
519
+ </div>
520
+ </div>
521
+
522
+ <div id="test-error" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg"></div>
523
+ </div>
524
+ </div>
525
+
526
+ <!-- Custom Test -->
527
+ <div class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden">
528
+ <div class="bg-gradient-to-r from-orange-50 to-yellow-50 p-6 border-b border-gray-200/50">
529
+ <div class="flex items-center space-x-3">
530
+ <div class="w-10 h-10 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-xl flex items-center justify-center">
531
+ <i class="fas fa-code text-white"></i>
532
+ </div>
533
+ <div>
534
+ <h3 class="text-lg font-semibold text-gray-900">Custom Test</h3>
535
+ <p class="text-sm text-gray-600">Create custom test scenarios</p>
536
+ </div>
537
+ </div>
538
+ </div>
539
+
540
+ <div class="p-6 space-y-6">
541
+ <div>
542
+ <label class="block text-sm font-medium text-gray-700 mb-2">Test Type</label>
543
+ <select id="testType" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
544
+ <option value="tools/call">Tool Call</option>
545
+ <option value="resources/list">Resource List</option>
546
+ <option value="resources/read">Resource Read</option>
547
+ <option value="prompts/list">Prompt List</option>
548
+ <option value="prompts/get">Prompt Get</option>
549
+ </select>
550
+ </div>
551
+
552
+ <div>
553
+ <label class="block text-sm font-medium text-gray-700 mb-2">Test Name</label>
554
+ <input type="text" id="testName" placeholder="my-test-tool" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
555
+ </div>
556
+
557
+ <div>
558
+ <label class="block text-sm font-medium text-gray-700 mb-2">Parameters (JSON)</label>
559
+ <textarea id="testParams" rows="4" placeholder='{"param1": "value1"}' class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent font-mono text-sm resize-none"></textarea>
560
+ </div>
561
+
562
+ <button id="runCustomTestBtn" class="w-full bg-gradient-to-r from-orange-500 to-yellow-500 text-white px-6 py-3 rounded-xl font-medium hover:from-orange-600 hover:to-yellow-600 transition-all duration-200 transform hover:scale-[1.02]">
563
+ <i class="fas fa-flask mr-2"></i>
564
+ Run Custom Test
565
+ </button>
566
+ </div>
567
+ </div>
568
+ </div>
569
+
570
+ <!-- Test Results -->
571
+ <div class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden">
572
+ <div class="bg-gradient-to-r from-gray-50 to-slate-50 p-6 border-b border-gray-200/50">
573
+ <div class="flex items-center space-x-3">
574
+ <div class="w-10 h-10 bg-gradient-to-r from-gray-500 to-slate-500 rounded-xl flex items-center justify-center">
575
+ <i class="fas fa-chart-line text-white"></i>
576
+ </div>
577
+ <div>
578
+ <h3 class="text-lg font-semibold text-gray-900">Test Results</h3>
579
+ <p class="text-sm text-gray-600">View test execution results</p>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ <div class="p-6">
584
+ <pre id="test-results" class="hidden bg-gray-50 p-4 rounded-xl text-sm overflow-auto max-h-96 font-mono border border-gray-200"></pre>
585
+ <div id="no-results" class="text-center py-12 text-gray-500">
586
+ <i class="fas fa-chart-line text-4xl mb-4 opacity-50"></i>
587
+ <p>No test results yet. Run a test to see results here.</p>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </main>
594
+ </div>
595
+ </div>
596
+
597
+ <!-- Success Modal -->
598
+ <div id="success-modal" class="fixed inset-0 bg-gray-900/50 backdrop-blur-sm z-50 opacity-0 invisible transition-all duration-300">
599
+ <div class="flex items-center justify-center min-h-screen p-4">
600
+ <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full transform scale-95 transition-transform duration-300">
601
+ <div class="p-6 text-center">
602
+ <div class="w-16 h-16 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
603
+ <i class="fas fa-check text-white text-2xl"></i>
604
+ </div>
605
+ <h3 class="text-2xl font-bold text-gray-900 mb-2">Server Generated!</h3>
606
+ <p id="success-message" class="text-gray-600 mb-6"></p>
607
+ <div class="flex space-x-3">
608
+ <button class="flex-1 bg-gradient-to-r from-blue-500 to-cyan-500 text-white px-4 py-2 rounded-xl font-medium hover:from-blue-600 hover:to-cyan-600 transition-all duration-200" onclick="goToManageServers()">
609
+ <i class="fas fa-server mr-2"></i>
610
+ Manage Servers
611
+ </button>
612
+ <button class="flex-1 bg-gray-100 text-gray-700 px-4 py-2 rounded-xl font-medium hover:bg-gray-200 transition-all duration-200" onclick="closeSuccessModal()">
613
+ <i class="fas fa-plus mr-2"></i>
614
+ Create Another
615
+ </button>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </div>
621
+
622
+ <!-- Scripts -->
623
+ <script src="shared.js"></script>
624
+ <script src="app.js"></script>
625
+ </body>
626
+ </html>