@softtechai/quickmcp 1.0.16 → 1.1.1

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 (418) hide show
  1. package/README.md +3 -3
  2. package/dist/auth/auth-utils.d.ts +130 -0
  3. package/dist/auth/auth-utils.d.ts.map +1 -0
  4. package/dist/auth/auth-utils.js +600 -0
  5. package/dist/auth/auth-utils.js.map +1 -0
  6. package/dist/auth/jwks-provider.d.ts +9 -0
  7. package/dist/auth/jwks-provider.d.ts.map +1 -0
  8. package/dist/auth/jwks-provider.js +56 -0
  9. package/dist/auth/jwks-provider.js.map +1 -0
  10. package/dist/auth/token-utils.d.ts +40 -0
  11. package/dist/auth/token-utils.d.ts.map +1 -0
  12. package/dist/auth/token-utils.js +162 -0
  13. package/dist/auth/token-utils.js.map +1 -0
  14. package/dist/client/MCPClient.js +5 -4
  15. package/dist/client/MCPClient.js.map +1 -1
  16. package/dist/config/auth-config.d.ts +16 -0
  17. package/dist/config/auth-config.d.ts.map +1 -0
  18. package/dist/config/auth-config.js +107 -0
  19. package/dist/config/auth-config.js.map +1 -0
  20. package/dist/constant/constant.d.ts +20 -0
  21. package/dist/constant/constant.d.ts.map +1 -0
  22. package/dist/constant/constant.js +24 -0
  23. package/dist/constant/constant.js.map +1 -0
  24. package/dist/database/async-datastore.d.ts +6 -0
  25. package/dist/database/async-datastore.d.ts.map +1 -0
  26. package/dist/database/async-datastore.js +15 -0
  27. package/dist/database/async-datastore.js.map +1 -0
  28. package/dist/database/database-utils.d.ts +6 -0
  29. package/dist/database/database-utils.d.ts.map +1 -0
  30. package/dist/database/database-utils.js +29 -0
  31. package/dist/database/database-utils.js.map +1 -0
  32. package/dist/database/datastore.d.ts +164 -0
  33. package/dist/database/datastore.d.ts.map +1 -0
  34. package/dist/{parsers/types/index.js → database/datastore.js} +1 -0
  35. package/dist/database/datastore.js.map +1 -0
  36. package/dist/database/factory.d.ts +4 -0
  37. package/dist/database/factory.d.ts.map +1 -0
  38. package/dist/database/factory.js +32 -0
  39. package/dist/database/factory.js.map +1 -0
  40. package/dist/database/jdbc-manager.d.ts +49 -0
  41. package/dist/database/jdbc-manager.d.ts.map +1 -0
  42. package/dist/database/jdbc-manager.js +50 -0
  43. package/dist/database/jdbc-manager.js.map +1 -0
  44. package/dist/database/sqlite-manager.d.ts +46 -44
  45. package/dist/database/sqlite-manager.d.ts.map +1 -1
  46. package/dist/database/sqlite-manager.js +492 -42
  47. package/dist/database/sqlite-manager.js.map +1 -1
  48. package/dist/database/supabase-manager.d.ts +58 -0
  49. package/dist/database/supabase-manager.d.ts.map +1 -0
  50. package/dist/database/supabase-manager.js +432 -0
  51. package/dist/database/supabase-manager.js.map +1 -0
  52. package/dist/generators/MCPServerGenerator.d.ts +103 -20
  53. package/dist/generators/MCPServerGenerator.d.ts.map +1 -1
  54. package/dist/generators/MCPServerGenerator.js +6930 -128
  55. package/dist/generators/MCPServerGenerator.js.map +1 -1
  56. package/dist/index.d.ts +0 -1
  57. package/dist/index.d.ts.map +1 -1
  58. package/dist/index.js +8 -1
  59. package/dist/index.js.map +1 -1
  60. package/dist/integrated-mcp-server-new.d.ts +14 -2
  61. package/dist/integrated-mcp-server-new.d.ts.map +1 -1
  62. package/dist/integrated-mcp-server-new.js +270 -180
  63. package/dist/integrated-mcp-server-new.js.map +1 -1
  64. package/dist/mcp-core/McpCoreService.d.ts +63 -0
  65. package/dist/mcp-core/McpCoreService.d.ts.map +1 -0
  66. package/dist/mcp-core/McpCoreService.js +492 -0
  67. package/dist/mcp-core/McpCoreService.js.map +1 -0
  68. package/dist/parsers/CsvParser.d.ts +1 -1
  69. package/dist/parsers/CsvParser.d.ts.map +1 -1
  70. package/dist/parsers/CsvParser.js +3 -2
  71. package/dist/parsers/CsvParser.js.map +1 -1
  72. package/dist/parsers/DatabaseParser.d.ts.map +1 -1
  73. package/dist/parsers/DatabaseParser.js +9 -8
  74. package/dist/parsers/DatabaseParser.js.map +1 -1
  75. package/dist/parsers/ExcelParser.d.ts +15 -0
  76. package/dist/parsers/ExcelParser.d.ts.map +1 -1
  77. package/dist/parsers/ExcelParser.js +287 -21
  78. package/dist/parsers/ExcelParser.js.map +1 -1
  79. package/dist/parsers/WebPageParser.d.ts +5 -0
  80. package/dist/parsers/WebPageParser.d.ts.map +1 -0
  81. package/dist/parsers/WebPageParser.js +35 -0
  82. package/dist/parsers/WebPageParser.js.map +1 -0
  83. package/dist/parsers/index.d.ts +3 -2
  84. package/dist/parsers/index.d.ts.map +1 -1
  85. package/dist/parsers/index.js +19 -16
  86. package/dist/parsers/index.js.map +1 -1
  87. package/dist/server/api/askApi.d.ts +41 -0
  88. package/dist/server/api/askApi.d.ts.map +1 -0
  89. package/dist/server/api/askApi.js +479 -0
  90. package/dist/server/api/askApi.js.map +1 -0
  91. package/dist/server/api/authApi.d.ts +101 -0
  92. package/dist/server/api/authApi.d.ts.map +1 -0
  93. package/dist/server/api/authApi.js +1472 -0
  94. package/dist/server/api/authApi.js.map +1 -0
  95. package/dist/server/api/authProperty.d.ts +18 -0
  96. package/dist/server/api/authProperty.d.ts.map +1 -0
  97. package/dist/server/api/authProperty.js +41 -0
  98. package/dist/server/api/authProperty.js.map +1 -0
  99. package/dist/server/api/configApi.d.ts +15 -0
  100. package/dist/server/api/configApi.d.ts.map +1 -0
  101. package/dist/server/api/configApi.js +42 -0
  102. package/dist/server/api/configApi.js.map +1 -0
  103. package/dist/server/api/databaseApi.d.ts +14 -0
  104. package/dist/server/api/databaseApi.d.ts.map +1 -0
  105. package/dist/server/api/databaseApi.js +111 -0
  106. package/dist/server/api/databaseApi.js.map +1 -0
  107. package/dist/server/api/directoryApi.d.ts +9 -0
  108. package/dist/server/api/directoryApi.d.ts.map +1 -0
  109. package/dist/server/api/directoryApi.js +103 -0
  110. package/dist/server/api/directoryApi.js.map +1 -0
  111. package/dist/server/api/generateApi.d.ts +24 -0
  112. package/dist/server/api/generateApi.d.ts.map +1 -0
  113. package/dist/server/api/generateApi.js +457 -0
  114. package/dist/server/api/generateApi.js.map +1 -0
  115. package/dist/server/api/healthApi.d.ts +9 -0
  116. package/dist/server/api/healthApi.d.ts.map +1 -0
  117. package/dist/server/api/healthApi.js +15 -0
  118. package/dist/server/api/healthApi.js.map +1 -0
  119. package/dist/server/api/indexApi.d.ts +21 -0
  120. package/dist/server/api/indexApi.d.ts.map +1 -0
  121. package/dist/server/api/indexApi.js +61 -0
  122. package/dist/server/api/indexApi.js.map +1 -0
  123. package/dist/server/api/logsApi.d.ts +12 -0
  124. package/dist/server/api/logsApi.d.ts.map +1 -0
  125. package/dist/server/api/logsApi.js +37 -0
  126. package/dist/server/api/logsApi.js.map +1 -0
  127. package/dist/server/api/mcpApi.d.ts +20 -0
  128. package/dist/server/api/mcpApi.d.ts.map +1 -0
  129. package/dist/server/api/mcpApi.js +120 -0
  130. package/dist/server/api/mcpApi.js.map +1 -0
  131. package/dist/server/api/nameApi.d.ts +21 -0
  132. package/dist/server/api/nameApi.d.ts.map +1 -0
  133. package/dist/server/api/nameApi.js +42 -0
  134. package/dist/server/api/nameApi.js.map +1 -0
  135. package/dist/server/api/parseApi.d.ts +9 -0
  136. package/dist/server/api/parseApi.d.ts.map +1 -0
  137. package/dist/server/api/parseApi.js +3245 -0
  138. package/dist/server/api/parseApi.js.map +1 -0
  139. package/dist/server/api/serverApi.d.ts +44 -0
  140. package/dist/server/api/serverApi.d.ts.map +1 -0
  141. package/dist/server/api/serverApi.js +417 -0
  142. package/dist/server/api/serverApi.js.map +1 -0
  143. package/dist/{dynamic-mcp-executor.d.ts → server/dynamic-mcp-executor.d.ts} +4 -5
  144. package/dist/server/dynamic-mcp-executor.d.ts.map +1 -0
  145. package/dist/server/dynamic-mcp-executor.js +62 -0
  146. package/dist/server/dynamic-mcp-executor.js.map +1 -0
  147. package/dist/server/port-utils.d.ts +14 -0
  148. package/dist/server/port-utils.d.ts.map +1 -0
  149. package/dist/server/port-utils.js +31 -0
  150. package/dist/server/port-utils.js.map +1 -0
  151. package/dist/server/server-utils.d.ts +13 -0
  152. package/dist/server/server-utils.d.ts.map +1 -0
  153. package/dist/server/server-utils.js +72 -0
  154. package/dist/server/server-utils.js.map +1 -0
  155. package/dist/{web → server}/server.d.ts +1 -0
  156. package/dist/server/server.d.ts.map +1 -0
  157. package/dist/server/server.js +535 -0
  158. package/dist/server/server.js.map +1 -0
  159. package/dist/server/tool-executer.d.ts +101 -0
  160. package/dist/server/tool-executer.d.ts.map +1 -0
  161. package/dist/server/tool-executer.js +6198 -0
  162. package/dist/server/tool-executer.js.map +1 -0
  163. package/dist/types/index.d.ts +1197 -4
  164. package/dist/types/index.d.ts.map +1 -1
  165. package/dist/types/index.js +1028 -0
  166. package/dist/types/index.js.map +1 -1
  167. package/dist/upload/upload-utils.d.ts +4 -0
  168. package/dist/upload/upload-utils.d.ts.map +1 -0
  169. package/dist/upload/upload-utils.js +29 -0
  170. package/dist/upload/upload-utils.js.map +1 -0
  171. package/dist/utils/deployment-util.d.ts +14 -0
  172. package/dist/utils/deployment-util.d.ts.map +1 -0
  173. package/dist/utils/deployment-util.js +46 -0
  174. package/dist/utils/deployment-util.js.map +1 -0
  175. package/dist/utils/logger.d.ts +15 -0
  176. package/dist/utils/logger.d.ts.map +1 -0
  177. package/dist/utils/logger.js +56 -0
  178. package/dist/utils/logger.js.map +1 -0
  179. package/package.json +18 -6
  180. package/quickmcp-direct-stdio.js +183 -187
  181. package/src/web/public/app.js +15370 -1471
  182. package/src/web/public/authorization.html +868 -0
  183. package/src/web/public/database-tables.html +283 -547
  184. package/src/web/public/how-to-use.html +446 -462
  185. package/src/web/public/how-to-use.js +4 -4
  186. package/src/web/public/images/app/activepieces.png +0 -0
  187. package/src/web/public/images/app/airtable.png +0 -0
  188. package/src/web/public/images/app/androidstudio.png +0 -0
  189. package/src/web/public/images/app/antigravity.png +0 -0
  190. package/src/web/public/images/app/applenotes.png +0 -0
  191. package/src/web/public/images/app/applereminders.png +0 -0
  192. package/src/web/public/images/app/asana.png +0 -0
  193. package/src/web/public/images/app/azureai.png +0 -0
  194. package/src/web/public/images/app/bash.png +0 -0
  195. package/src/web/public/images/app/bearnotes.png +0 -0
  196. package/src/web/public/images/app/bitbucket.png +0 -0
  197. package/src/web/public/images/app/claude.png +0 -0
  198. package/src/web/public/images/app/cli.png +0 -0
  199. package/src/web/public/images/app/clickup.png +0 -0
  200. package/src/web/public/images/app/cohere.png +0 -0
  201. package/src/web/public/images/app/confluence.png +0 -0
  202. package/src/web/public/images/app/confluence2.png +0 -0
  203. package/src/web/public/images/app/curl.png +0 -0
  204. package/src/web/public/images/app/curl_mini.png +0 -0
  205. package/src/web/public/images/app/cursor.png +0 -0
  206. package/src/web/public/images/app/db2.png +0 -0
  207. package/src/web/public/images/app/deepseek.png +0 -0
  208. package/src/web/public/images/app/discord.png +0 -0
  209. package/src/web/public/images/app/docker.png +0 -0
  210. package/src/web/public/images/app/dockerhub.png +0 -0
  211. package/src/web/public/images/app/dropbox.png +0 -0
  212. package/src/web/public/images/app/elasticsearch.png +0 -0
  213. package/src/web/public/images/app/facebook.png +0 -0
  214. package/src/web/public/images/app/falai.png +0 -0
  215. package/src/web/public/images/app/fireworks.png +0 -0
  216. package/src/web/public/images/app/gdrive.png +0 -0
  217. package/src/web/public/images/app/gemini.png +0 -0
  218. package/src/web/public/images/app/github.png +0 -0
  219. package/src/web/public/images/app/githubcopilot.png +0 -0
  220. package/src/web/public/images/app/gitlab.png +0 -0
  221. package/src/web/public/images/app/gmail.png +0 -0
  222. package/src/web/public/images/app/googlecalender.png +0 -0
  223. package/src/web/public/images/app/googledocs.png +0 -0
  224. package/src/web/public/images/app/googlesheets.png +0 -0
  225. package/src/web/public/images/app/gradle.png +0 -0
  226. package/src/web/public/images/app/grafana.png +0 -0
  227. package/src/web/public/images/app/graphql.png +0 -0
  228. package/src/web/public/images/app/grok.png +0 -0
  229. package/src/web/public/images/app/groq.png +0 -0
  230. package/src/web/public/images/app/hazelcast.png +0 -0
  231. package/src/web/public/images/app/huggingface.png +0 -0
  232. package/src/web/public/images/app/imessage.png +0 -0
  233. package/src/web/public/images/app/instagram.png +0 -0
  234. package/src/web/public/images/app/intellij.png +0 -0
  235. package/src/web/public/images/app/jenkins.png +0 -0
  236. package/src/web/public/images/app/jira.png +0 -0
  237. package/src/web/public/images/app/kafka.png +0 -0
  238. package/src/web/public/images/app/kubernetes.png +0 -0
  239. package/src/web/public/images/app/linear.png +0 -0
  240. package/src/web/public/images/app/linkedin.png +0 -0
  241. package/src/web/public/images/app/llama.png +0 -0
  242. package/src/web/public/images/app/make.png +0 -0
  243. package/src/web/public/images/app/maven.png +0 -0
  244. package/src/web/public/images/app/mcp.png +0 -0
  245. package/src/web/public/images/app/microsoftteams.png +0 -0
  246. package/src/web/public/images/app/mistral.png +0 -0
  247. package/src/web/public/images/app/monday.png +0 -0
  248. package/src/web/public/images/app/mongodb.png +0 -0
  249. package/src/web/public/images/app/mssql.png +0 -0
  250. package/src/web/public/images/app/mysql.png +0 -0
  251. package/src/web/public/images/app/n8n.png +0 -0
  252. package/src/web/public/images/app/notion.png +0 -0
  253. package/src/web/public/images/app/npm.png +0 -0
  254. package/src/web/public/images/app/nuget.png +0 -0
  255. package/src/web/public/images/app/obsidian.png +0 -0
  256. package/src/web/public/images/app/openai.png +0 -0
  257. package/src/web/public/images/app/openrouter.png +0 -0
  258. package/src/web/public/images/app/opensearch.png +0 -0
  259. package/src/web/public/images/app/openshift.png +0 -0
  260. package/src/web/public/images/app/oracle.png +0 -0
  261. package/src/web/public/images/app/perplexity.png +0 -0
  262. package/src/web/public/images/app/pipedream.png +0 -0
  263. package/src/web/public/images/app/postgresql.png +0 -0
  264. package/src/web/public/images/app/powershell.png +0 -0
  265. package/src/web/public/images/app/prometheus.png +0 -0
  266. package/src/web/public/images/app/reddit.png +0 -0
  267. package/src/web/public/images/app/redis.png +0 -0
  268. package/src/web/public/images/app/rss.png +0 -0
  269. package/src/web/public/images/app/signal.png +0 -0
  270. package/src/web/public/images/app/slack.png +0 -0
  271. package/src/web/public/images/app/soap.png +0 -0
  272. package/src/web/public/images/app/sqlite.png +0 -0
  273. package/src/web/public/images/app/supabase.png +0 -0
  274. package/src/web/public/images/app/telegram.png +0 -0
  275. package/src/web/public/images/app/things3.png +0 -0
  276. package/src/web/public/images/app/threads.png +0 -0
  277. package/src/web/public/images/app/tiktok.png +0 -0
  278. package/src/web/public/images/app/together.png +0 -0
  279. package/src/web/public/images/app/trello.png +0 -0
  280. package/src/web/public/images/app/vscode.png +0 -0
  281. package/src/web/public/images/app/webhook.png +0 -0
  282. package/src/web/public/images/app/webpage.png +0 -0
  283. package/src/web/public/images/app/whatsappbusiness.png +0 -0
  284. package/src/web/public/images/app/windsorf.png +0 -0
  285. package/src/web/public/images/app/x.png +0 -0
  286. package/src/web/public/images/app/youtube.png +0 -0
  287. package/src/web/public/images/app/zapier.png +0 -0
  288. package/src/web/public/images/app/zededitor.png +0 -0
  289. package/src/web/public/images/app/zoom.png +0 -0
  290. package/src/web/public/images/avatar-anon.svg +4 -0
  291. package/src/web/public/images/favicon.png +0 -0
  292. package/src/web/public/images/install/chatgpt-web/step0.png +0 -0
  293. package/src/web/public/images/install/chatgpt-web/step1.png +0 -0
  294. package/src/web/public/images/install/chatgpt-web/step2.png +0 -0
  295. package/src/web/public/images/install/chatgpt-web/step3.png +0 -0
  296. package/src/web/public/images/install/chatgpt-web/step4.png +0 -0
  297. package/src/web/public/images/install/chatgpt-web/step5.png +0 -0
  298. package/src/web/public/images/readme/1-generate-servers.png +0 -0
  299. package/src/web/public/images/readme/2-database-connection.png +0 -0
  300. package/src/web/public/images/readme/2-file-upload.png +0 -0
  301. package/src/web/public/images/readme/3-data-preview.png +0 -0
  302. package/src/web/public/images/readme/4-data-preview2.png +0 -0
  303. package/src/web/public/images/readme/5-server-configuration.png +0 -0
  304. package/src/web/public/images/readme/6-server-generated-modal.png +0 -0
  305. package/src/web/public/images/readme/7-generated-servers.png +0 -0
  306. package/src/web/public/images/readme/8-generated-servers-view-details.png +0 -0
  307. package/src/web/public/images/readme/Screenshot 2025-10-09 at 20.23.51.png +0 -0
  308. package/src/web/public/images/readme/Screenshot 2025-10-09 at 20.24.59.png +0 -0
  309. package/src/web/public/images/readme/Screenshot 2025-10-09 at 20.25.05.png +0 -0
  310. package/src/web/public/images/readme/Screenshot 2025-10-09 at 20.25.14.png +0 -0
  311. package/src/web/public/images/readme/Screenshot 2025-10-09 at 20.25.21.png +0 -0
  312. package/src/web/public/images/readme/Screenshot 2025-10-09 at 20.25.36.png +0 -0
  313. package/src/web/public/index.html +4685 -488
  314. package/src/web/public/landing.html +1638 -0
  315. package/src/web/public/logger.js +31 -0
  316. package/src/web/public/login.html +372 -0
  317. package/src/web/public/manage-servers.html +121 -188
  318. package/src/web/public/pricing.html +537 -0
  319. package/src/web/public/quick-ask.html +133 -0
  320. package/src/web/public/quickmcp-styles.css +708 -0
  321. package/src/web/public/roles.html +177 -0
  322. package/src/web/public/shared.js +736 -3
  323. package/src/web/public/sidebar.js +414 -0
  324. package/src/web/public/test-servers.html +605 -221
  325. package/src/web/public/users.html +191 -0
  326. package/dist/client/MCPClientUnified.d.ts +0 -31
  327. package/dist/client/MCPClientUnified.d.ts.map +0 -1
  328. package/dist/client/MCPClientUnified.js +0 -275
  329. package/dist/client/MCPClientUnified.js.map +0 -1
  330. package/dist/client/MCPTestRunnerUnified.d.ts +0 -48
  331. package/dist/client/MCPTestRunnerUnified.d.ts.map +0 -1
  332. package/dist/client/MCPTestRunnerUnified.js +0 -183
  333. package/dist/client/MCPTestRunnerUnified.js.map +0 -1
  334. package/dist/database/json-manager.d.ts +0 -55
  335. package/dist/database/json-manager.d.ts.map +0 -1
  336. package/dist/database/json-manager.js +0 -128
  337. package/dist/database/json-manager.js.map +0 -1
  338. package/dist/dynamic-mcp-executor.d.ts.map +0 -1
  339. package/dist/dynamic-mcp-executor.js +0 -274
  340. package/dist/dynamic-mcp-executor.js.map +0 -1
  341. package/dist/generators/MCPServerGenerator-new.d.ts +0 -37
  342. package/dist/generators/MCPServerGenerator-new.d.ts.map +0 -1
  343. package/dist/generators/MCPServerGenerator-new.js +0 -287
  344. package/dist/generators/MCPServerGenerator-new.js.map +0 -1
  345. package/dist/generators/database/sqlite-manager.d.ts +0 -52
  346. package/dist/generators/database/sqlite-manager.js +0 -143
  347. package/dist/generators/generators/MCPServerGenerator.d.ts +0 -37
  348. package/dist/generators/generators/MCPServerGenerator.js +0 -396
  349. package/dist/integrated-mcp-server.d.ts +0 -25
  350. package/dist/integrated-mcp-server.d.ts.map +0 -1
  351. package/dist/integrated-mcp-server.js +0 -541
  352. package/dist/integrated-mcp-server.js.map +0 -1
  353. package/dist/mcp-inspector-server.d.ts +0 -3
  354. package/dist/mcp-inspector-server.d.ts.map +0 -1
  355. package/dist/mcp-inspector-server.js +0 -119
  356. package/dist/mcp-inspector-server.js.map +0 -1
  357. package/dist/mcp-sdk-server.d.ts +0 -3
  358. package/dist/mcp-sdk-server.d.ts.map +0 -1
  359. package/dist/mcp-sdk-server.js +0 -90
  360. package/dist/mcp-sdk-server.js.map +0 -1
  361. package/dist/mcp-server.d.ts +0 -3
  362. package/dist/mcp-server.d.ts.map +0 -1
  363. package/dist/mcp-server.js +0 -300
  364. package/dist/mcp-server.js.map +0 -1
  365. package/dist/parsers/parsers/ExcelParser.js +0 -118
  366. package/dist/quickmcp-unified-bridge.d.ts +0 -13
  367. package/dist/quickmcp-unified-bridge.d.ts.map +0 -1
  368. package/dist/quickmcp-unified-bridge.js +0 -176
  369. package/dist/quickmcp-unified-bridge.js.map +0 -1
  370. package/dist/sqlite-manager.js +0 -145
  371. package/dist/test-app.d.ts +0 -2
  372. package/dist/test-app.d.ts.map +0 -1
  373. package/dist/test-app.js +0 -119
  374. package/dist/test-app.js.map +0 -1
  375. package/dist/transport/base-transport.d.ts +0 -21
  376. package/dist/transport/base-transport.d.ts.map +0 -1
  377. package/dist/transport/base-transport.js +0 -16
  378. package/dist/transport/base-transport.js.map +0 -1
  379. package/dist/transport/index.d.ts +0 -10
  380. package/dist/transport/index.d.ts.map +0 -1
  381. package/dist/transport/index.js +0 -12
  382. package/dist/transport/index.js.map +0 -1
  383. package/dist/transport/sse-transport.d.ts +0 -13
  384. package/dist/transport/sse-transport.d.ts.map +0 -1
  385. package/dist/transport/sse-transport.js +0 -106
  386. package/dist/transport/sse-transport.js.map +0 -1
  387. package/dist/transport/stdio-transport.d.ts +0 -8
  388. package/dist/transport/stdio-transport.d.ts.map +0 -1
  389. package/dist/transport/stdio-transport.js +0 -53
  390. package/dist/transport/stdio-transport.js.map +0 -1
  391. package/dist/transport/streamable-http-transport.d.ts +0 -15
  392. package/dist/transport/streamable-http-transport.d.ts.map +0 -1
  393. package/dist/transport/streamable-http-transport.js +0 -151
  394. package/dist/transport/streamable-http-transport.js.map +0 -1
  395. package/dist/web/client/MCPClient.js +0 -348
  396. package/dist/web/client/MCPTestRunner.js +0 -317
  397. package/dist/web/database/json-manager.js +0 -124
  398. package/dist/web/database/sqlite-manager.js +0 -146
  399. package/dist/web/dynamic-mcp-executor.js +0 -443
  400. package/dist/web/generators/MCPServerGenerator-new.js +0 -284
  401. package/dist/web/generators/MCPServerGenerator.js +0 -566
  402. package/dist/web/integrated-mcp-server-new.js +0 -394
  403. package/dist/web/parsers/CsvParser.js +0 -144
  404. package/dist/web/parsers/DatabaseParser.js +0 -637
  405. package/dist/web/parsers/ExcelParser.js +0 -180
  406. package/dist/web/parsers/index.js +0 -152
  407. package/dist/web/server.d.ts.map +0 -1
  408. package/dist/web/server.js +0 -790
  409. package/dist/web/server.js.map +0 -1
  410. package/dist/web/types/index.js +0 -2
  411. package/dist/web/web/server.js +0 -860
  412. package/src/web/public/modern-styles.css +0 -946
  413. package/src/web/public/shared-styles.css +0 -2091
  414. /package/src/web/public/images/{1-claude-quickmcp-stdio.png → readme/1-claude-quickmcp-stdio.png} +0 -0
  415. /package/src/web/public/images/{2-claude-tools.png → readme/2-claude-tools.png} +0 -0
  416. /package/src/web/public/images/{3-claude-developer-settings.png → readme/3-claude-developer-settings.png} +0 -0
  417. /package/src/web/public/images/{4-claude-config.png → readme/4-claude-config.png} +0 -0
  418. /package/src/web/public/images/{5-claude-config-edit.png → readme/5-claude-config-edit.png} +0 -0
package/src/web/public/how-to-use.html CHANGED
@@ -1,571 +1,555 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" class="h-full bg-gray-50">
2
+ <html lang="en" class="h-full">
3
+
3
4
  <head>
4
5
  <meta charset="UTF-8">
5
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>How to Use - MCP Server Generator</title>
7
+ <title>How to Use - QuickMCP</title>
8
+
9
+ <link rel="icon" type="image/png" href="/images/favicon.png">
7
10
 
8
11
  <!-- Tailwind CSS -->
9
12
  <script src="https://cdn.tailwindcss.com"></script>
10
13
 
11
- <!-- Font Awesome for icons -->
14
+ <!-- Font Awesome -->
12
15
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
13
16
 
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>
17
+ <!-- Custom Archdraw Styles -->
18
+ <link rel="stylesheet" href="quickmcp-styles.css">
55
19
 
56
- <!-- Tailwind Config -->
57
20
  <script>
58
21
  tailwind.config = {
22
+ darkMode: 'class',
59
23
  theme: {
60
24
  extend: {
61
25
  colors: {
62
- primary: {
63
- 50: '#f0f9ff',
64
- 500: '#0ea5e9',
65
- 600: '#0284c7',
66
- 700: '#0369a1',
67
- 900: '#0c4a6e'
26
+ slate: {
27
+ 50: '#f8fafc',
28
+ 100: '#f1f5f9',
29
+ 200: '#e2e8f0',
30
+ 300: '#cbd5e1',
31
+ 400: '#94a3b8',
32
+ 500: '#64748b',
33
+ 600: '#475569',
34
+ 700: '#334155',
35
+ 800: '#1e293b',
36
+ 900: '#0f172a',
68
37
  }
69
- },
70
- animation: {
71
- 'bounce-slow': 'bounce 2s infinite',
72
- 'pulse-slow': 'pulse 3s infinite'
73
38
  }
74
39
  }
75
40
  }
76
41
  }
77
42
  </script>
78
43
  </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
44
 
102
- <!-- Navigation -->
103
- <nav class="flex-1 px-4 py-6 space-y-2">
104
- <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">
105
- <i class="fas fa-magic mr-3 text-gray-400"></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 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">
117
- <i class="fas fa-book mr-3 text-blue-500"></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 guide you</p>
132
- </div>
133
- </div>
134
- </div>
45
+ <body class="h-screen flex flex-col bg-gradient-to-br from-slate-50 to-slate-100 overflow-hidden text-slate-900">
46
+
47
+ <!-- Header -->
48
+ <header
49
+ class="backdrop-blur-sm bg-white/80 border-b border-slate-200/60 shadow-sm relative z-50 h-16 flex-shrink-0 flex items-center justify-between px-6 py-3">
50
+ <!-- Brand -->
51
+ <div class="flex items-center gap-6">
52
+ <div class="flex items-center gap-3">
53
+ <div
54
+ class="w-9 h-9 rounded-lg bg-blue-600 text-white flex items-center justify-center shadow-lg shadow-blue-500/25">
55
+ <i class="fas fa-rocket text-lg"></i>
56
+ </div>
57
+ <div>
58
+ <h1 class="text-xl font-bold gradient-text leading-tight">QuickMCP</h1>
59
+ <p class="text-xs text-slate-500 font-medium">Server Generator</p>
135
60
  </div>
136
61
  </div>
62
+ <!-- Divider -->
63
+ <div class="h-8 w-px bg-gradient-to-b from-transparent via-slate-300 to-transparent"></div>
64
+
65
+ <!-- Header Action: New Server (left, common) -->
66
+ <div class="hidden md:flex items-center gap-2 text-sm font-medium text-slate-600">
67
+ <button id="headerNewServerBtn" onclick="window.location.href='/generate'"
68
+ class="md:inline-flex items-center gap-2 bg-white border border-slate-200 hover:border-blue-400 text-slate-700 hover:text-blue-600 px-4 py-2 rounded-lg font-medium transition-colors shadow-sm">
69
+ <i class="fas fa-plus"></i>
70
+ <span>New Server</span>
71
+ </button>
72
+ </div>
137
73
  </div>
138
74
 
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 class="text-2xl font-bold text-gray-900">How to Use</h2>
154
- <p class="text-sm text-gray-500">Learn how to use your MCP servers with Claude Desktop</p>
155
- </div>
156
- </div>
75
+ <!-- Actions -->
76
+ <div class="flex items-center gap-3">
77
+ <div
78
+ class="hidden sm:flex items-center gap-2 bg-green-50 text-green-700 px-3 py-1.5 rounded-lg text-sm font-medium border border-green-200/50">
79
+ <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
80
+ <span>System Online</span>
81
+ </div>
82
+ <button
83
+ class="p-2 rounded-lg hover:bg-slate-100 transition-colors relative text-slate-500 hover:text-slate-700">
84
+ <i class="fas fa-bell"></i>
85
+ <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
86
+ </button>
87
+ <div
88
+ class="w-8 h-8 rounded-full bg-gradient-to-tr from-blue-500 to-purple-500 text-white flex items-center justify-center text-sm font-bold shadow-md" data-user-avatar>
89
+ G
90
+ </div>
91
+ <button id="openSidebar" class="lg:hidden p-2 rounded-lg hover:bg-slate-100 transition-colors text-slate-500">
92
+ <i class="fas fa-bars"></i>
93
+ </button>
94
+ </div>
95
+ </header>
157
96
 
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>
97
+ <!-- Main Body -->
98
+ <div class="app-main-layout flex flex-1 overflow-x-hidden">
99
+
100
+ <!-- Left Sidebar (shared) -->
101
+ <div id="sidebar"
102
+ class="w-72 bg-white/95 backdrop-blur-sm border-r border-slate-200/60 flex flex-col flex-shrink-0 z-[60] fixed inset-y-0 left-0 transform -translate-x-full lg:translate-x-0 lg:top-0 lg:h-screen transition-transform duration-300 ease-in-out h-full pt-16 lg:pt-0"></div>
103
+
104
+ <!-- Sidebar Overlay -->
105
+ <div id="sidebarOverlay" class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-30 lg:hidden opacity-0 invisible transition-all duration-300"></div>
106
+
107
+ <!-- Main Content Area -->
108
+ <div class="flex-1 relative bg-slate-50/50 overflow-hidden flex flex-col min-w-0">
109
+ <!-- Inner Shadow -->
110
+ <div class="absolute inset-0 shadow-inner shadow-slate-200/30 pointer-events-none z-10"></div>
111
+
112
+ <!-- Scrollable Content -->
113
+ <div class="flex-1 overflow-y-auto scrollbar-modern p-8 relative z-0">
114
+ <div class="max-w-5xl mx-auto space-y-8 pb-20">
171
115
 
172
- <!-- Main Content -->
173
- <main class="p-4 sm:p-6 lg:p-8">
174
- <div class="max-w-7xl mx-auto space-y-8">
175
116
  <!-- Hero Section -->
176
- <div class="text-center">
177
- <h1 class="text-3xl font-bold text-gray-900 mb-4">MCP Server Integration Guide</h1>
178
- <p class="text-gray-600">Learn how to integrate your generated MCP servers with Claude Desktop and other platforms</p>
117
+ <div class="text-center mb-10">
118
+ <h2 class="text-3xl font-bold text-slate-900 mb-3">MCP Server Integration Guide</h2>
119
+ <p class="text-slate-600 max-w-2xl mx-auto">Learn how to integrate your generated MCP servers
120
+ with Claude Desktop and other platforms using our streamlined workflow.</p>
179
121
  </div>
180
122
 
181
- <!-- Method Selection -->
182
- <div class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden">
183
- <div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-6 border-b border-gray-200/50">
184
- <div class="flex items-center space-x-3">
185
- <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center">
186
- <i class="fas fa-route text-white"></i>
187
- </div>
188
- <div>
189
- <h3 class="text-lg font-semibold text-gray-900">Choose Your Integration Method</h3>
190
- <p class="text-sm text-gray-600">Select how you want to use your MCP servers</p>
191
- </div>
192
- </div>
123
+ <!-- Tabs Navigation -->
124
+ <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden mb-6">
125
+ <div class="flex border-b border-slate-200">
126
+ <button id="tabBtnInstallation"
127
+ class="flex-1 px-6 py-4 text-sm font-semibold text-blue-600 bg-blue-50/50 border-r border-slate-200 border-b-2 border-b-blue-500 transition-all"
128
+ onclick="switchTab('installation')">
129
+ <i class="fas fa-download mr-2"></i>Installation
130
+ </button>
131
+ <button id="tabBtnData"
132
+ class="flex-1 px-6 py-4 text-sm font-medium text-slate-600 hover:bg-slate-50 border-r border-slate-200 border-b-2 border-b-transparent transition-all"
133
+ onclick="switchTab('data')">
134
+ <i class="fas fa-database mr-2"></i>Data Configuration
135
+ </button>
136
+ <button id="tabBtnSetup"
137
+ class="flex-1 px-6 py-4 text-sm font-medium text-slate-600 hover:bg-slate-50 border-b-2 border-b-transparent transition-all"
138
+ onclick="switchTab('setup')">
139
+ <i class="fas fa-cog mr-2"></i>Claude Desktop Setup
140
+ </button>
193
141
  </div>
142
+ </div>
194
143
 
195
- <div class="p-6">
196
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
197
- <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">
198
- <div class="flex items-center space-x-4">
199
- <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center">
200
- <i class="fas fa-link text-white text-xl"></i>
144
+ <!-- Tab Content: Installation -->
145
+ <div id="tab-installation" class="space-y-6 animate-fade-in">
146
+ <div class="card p-6">
147
+ <h3 class="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
148
+ <span
149
+ class="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center text-sm"><i
150
+ class="fas fa-terminal"></i></span>
151
+ Installation & Running
152
+ </h3>
153
+ <div class="space-y-6">
154
+ <div>
155
+ <h4 class="text-sm font-semibold text-slate-700 mb-2">Option 1: Global Installation
156
+ (Recommended)</h4>
157
+ <div class="bg-slate-900 rounded-xl p-4 shadow-inner">
158
+ <div class="flex items-center justify-between mb-2">
159
+ <span class="text-xs text-slate-400">Terminal</span>
160
+ <button class="text-xs text-slate-400 hover:text-white"><i
161
+ class="fas fa-copy"></i></button>
201
162
  </div>
202
- <div>
203
- <h3 class="text-lg font-semibold text-gray-900">Integrated Server</h3>
204
- <p class="text-sm text-gray-600">Use all servers through one configuration</p>
163
+ <code
164
+ class="text-sm text-green-400 font-mono">npm i -g @softtechai/quickmcp</code>
165
+ <div class="mt-2 border-t border-slate-700 pt-2">
166
+ <code class="text-sm text-blue-400 font-mono">quickmcp</code>
205
167
  </div>
206
168
  </div>
207
- </button>
208
-
209
- <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">
210
- <div class="flex items-center space-x-4">
211
- <div class="w-12 h-12 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-xl flex items-center justify-center">
212
- <i class="fas fa-box text-white text-xl"></i>
213
- </div>
214
- <div>
215
- <h3 class="text-lg font-semibold text-gray-900">Individual Export</h3>
216
- <p class="text-sm text-gray-600">Export and use servers separately</p>
217
- </div>
169
+ </div>
170
+ <div>
171
+ <h4 class="text-sm font-semibold text-slate-700 mb-2">Option 2: Run with npx</h4>
172
+ <div class="bg-slate-900 rounded-xl p-4 shadow-inner">
173
+ <code
174
+ class="text-sm text-yellow-400 font-mono">npx -y @softtechai/quickmcp</code>
218
175
  </div>
219
- </button>
176
+ </div>
220
177
  </div>
221
178
  </div>
222
- </div>
223
179
 
224
- <!-- Integrated Method -->
225
- <div id="integratedMethod" class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden">
226
- <div class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 border-b border-gray-200/50">
227
- <div class="flex items-center space-x-3">
228
- <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-emerald-500 rounded-xl flex items-center justify-center">
229
- <i class="fas fa-link text-white"></i>
230
- </div>
180
+ <div class="card p-6 border-l-4 border-l-blue-500">
181
+ <div class="flex gap-4">
182
+ <div class="text-blue-500 text-xl"><i class="fas fa-info-circle"></i></div>
231
183
  <div>
232
- <h3 class="text-lg font-semibold text-gray-900">Integrated Server Method</h3>
233
- <p class="text-sm text-gray-600">Access all your MCP servers through a single configuration</p>
184
+ <h4 class="font-semibold text-slate-900">Default Ports</h4>
185
+ <ul class="mt-2 space-y-1 text-sm text-slate-600">
186
+ <li><span
187
+ class="font-mono bg-slate-100 px-1.5 py-0.5 rounded text-slate-800">http://localhost:3000</span>
188
+ - Web Interface (This Page)</li>
189
+ <li><span
190
+ class="font-mono bg-slate-100 px-1.5 py-0.5 rounded text-slate-800">http://localhost:3001</span>
191
+ - MCP Server (Claude Connection)</li>
192
+ </ul>
234
193
  </div>
235
194
  </div>
236
195
  </div>
196
+ </div>
237
197
 
238
- <div class="p-6 space-y-6">
239
- <!-- Advantages -->
240
- <div class="bg-green-50 border border-green-200 rounded-xl p-4">
241
- <h4 class="font-semibold text-green-900 mb-3">✅ Advantages</h4>
242
- <ul class="space-y-2 text-green-800">
243
- <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Single configuration for all servers</li>
244
- <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Automatic updates when you create new servers</li>
245
- <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Unified tool naming with server prefixes</li>
246
- <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>No need to restart Claude Desktop when adding servers</li>
247
- </ul>
198
+ <!-- Tab Content: Data Configuration -->
199
+ <div id="tab-data" class="hidden space-y-6 animate-fade-in">
200
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
201
+ <!-- Step 1 -->
202
+ <div class="card p-5 hover:shadow-md transition-shadow">
203
+ <div class="flex items-center gap-3 mb-3">
204
+ <div
205
+ class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center font-bold text-sm">
206
+ 1</div>
207
+ <h4 class="font-semibold text-slate-900">Start Generation</h4>
208
+ </div>
209
+ <p class="text-sm text-slate-600 mb-4">Begin by navigating to the Generate Server page.
210
+ </p>
211
+ <img src="/images/readme/1-generate-servers.png" alt="Generate"
212
+ class="rounded-lg border border-slate-200 shadow-sm w-full">
248
213
  </div>
249
214
 
250
- <!-- Setup Steps -->
251
- <div class="space-y-6">
252
- <h4 class="text-lg font-semibold text-gray-900">🚀 Quick Setup for Claude Desktop</h4>
253
-
254
- <div class="space-y-4">
255
- <!-- Step 1 -->
256
- <div class="flex space-x-4">
257
- <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>
258
- <div class="flex-1">
259
- <h5 class="font-semibold text-gray-900">Make sure QuickMCP is running</h5>
260
- <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>
261
- <div class="flex items-center space-x-2 text-sm">
262
- <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
263
- <span class="text-green-700">Server is running</span>
264
- </div>
265
- </div>
266
- </div>
267
-
268
- <!-- Step 2 -->
269
- <div class="flex space-x-4">
270
- <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>
271
- <div class="flex-1">
272
- <h5 class="font-semibold text-gray-900">Add to Claude Desktop Config</h5>
273
- <p class="text-gray-600 mb-3">Copy this configuration to your Claude Desktop config file:</p>
274
-
275
- <div class="mb-3">
276
- <h6 class="font-medium text-gray-700 mb-2">📁 Config file locations:</h6>
277
- <ul class="text-sm text-gray-600 space-y-1">
278
- <li><strong>macOS:</strong> <code class="bg-gray-100 px-1 rounded">~/Library/Application Support/Claude/claude_desktop_config.json</code></li>
279
- <li><strong>Windows:</strong> <code class="bg-gray-100 px-1 rounded">%APPDATA%\\Claude\\claude_desktop_config.json</code></li>
280
- <li><strong>Linux:</strong> <code class="bg-gray-100 px-1 rounded">~/.config/Claude/claude_desktop_config.json</code></li>
281
- </ul>
282
- </div>
283
-
284
- <div class="relative bg-gray-50 border border-gray-200 rounded-lg">
285
- <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')">
286
- <i class="fas fa-copy mr-1"></i>Copy
287
- </button>
288
- <pre class="p-4 text-sm overflow-x-auto"><code>{
289
- "mcpServers": {
290
- "quickmcp-stdio": {
291
- "command": "/opt/homebrew/bin/node",
292
- "args": ["/Users/berkaybasoz/Documents/apps/quickmcp/quickmcp-direct-stdio.js"]
293
- }
294
- }
295
- }</code></pre>
296
- </div>
297
-
298
- <!-- Configuration Process Screenshots -->
299
- <div class="space-y-4 mt-4">
300
- <h6 class="font-medium text-gray-700">📸 Step-by-step configuration:</h6>
301
-
302
- <!-- Image 3: Developer Settings -->
303
- <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
304
- <h6 class="text-sm font-medium text-gray-700 mb-2">2a. Open Developer Settings in Claude Desktop:</h6>
305
- <img src="images/3-claude-developer-settings.png" alt="Claude Desktop Developer Settings" class="w-full rounded border border-gray-200 shadow-sm">
306
- </div>
307
-
308
- <!-- Image 4: Config File -->
309
- <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
310
- <h6 class="text-sm font-medium text-gray-700 mb-2">2b. View/Edit Configuration File:</h6>
311
- <img src="images/4-claude-config.png" alt="Claude Desktop Configuration File" class="w-full rounded border border-gray-200 shadow-sm">
312
- </div>
313
-
314
- <!-- Image 5: Config Edit -->
315
- <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
316
- <h6 class="text-sm font-medium text-gray-700 mb-2">2c. Add QuickMCP Configuration:</h6>
317
- <img src="images/5-claude-config-edit.png" alt="Editing Claude Desktop Configuration" class="w-full rounded border border-gray-200 shadow-sm">
318
- </div>
319
- </div>
320
- </div>
321
- </div>
322
-
323
- <!-- Step 3 -->
324
- <div class="flex space-x-4">
325
- <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>
326
- <div class="flex-1">
327
- <h5 class="font-semibold text-gray-900">Restart Claude Desktop</h5>
328
- <p class="text-gray-600">Close and reopen Claude Desktop for the changes to take effect.</p>
329
- </div>
330
- </div>
215
+ <!-- Step 2 -->
216
+ <div class="card p-5 hover:shadow-md transition-shadow">
217
+ <div class="flex items-center gap-3 mb-3">
218
+ <div
219
+ class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center font-bold text-sm">
220
+ 2</div>
221
+ <h4 class="font-semibold text-slate-900">Connect Data Source</h4>
331
222
  </div>
223
+ <p class="text-sm text-slate-600 mb-4">Connect to a database or upload files.</p>
224
+ <img src="/images/readme/2-database-connection.png" alt="Connect"
225
+ class="rounded-lg border border-slate-200 shadow-sm w-full">
332
226
  </div>
333
227
 
334
- <!-- Tool Naming -->
335
- <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
336
- <h4 class="font-semibold text-blue-900 mb-3">🛠️ Using Your Tools</h4>
337
- <p class="text-blue-800 mb-3">In Claude Desktop, your tools will be available with this naming pattern:</p>
338
- <div class="bg-white border border-blue-200 rounded-lg p-3">
339
- <code class="text-lg font-mono text-blue-700">serverName__toolName</code>
228
+ <!-- Step 3 -->
229
+ <div class="card p-5 hover:shadow-md transition-shadow">
230
+ <div class="flex items-center gap-3 mb-3">
231
+ <div
232
+ class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center font-bold text-sm">
233
+ 3</div>
234
+ <h4 class="font-semibold text-slate-900">Configure Tools</h4>
340
235
  </div>
341
- <p class="text-blue-700 text-sm mt-2 mb-4">
342
- Example: If you have a server called "sales-data" with a tool called "search_customers",
343
- it will appear as <code class="bg-white px-1 rounded">sales-data__search_customers</code>
344
- </p>
345
-
346
- <!-- Screenshots -->
347
- <div class="space-y-4">
348
- <h5 class="font-semibold text-blue-900">📸 See it in action:</h5>
349
-
350
- <!-- Image 1: Configuration -->
351
- <div class="bg-white border border-blue-200 rounded-lg p-3">
352
- <h6 class="text-sm font-medium text-blue-800 mb-2">1. QuickMCP configured in Claude Desktop:</h6>
353
- <img src="images/1-claude-quickmcp-stdio.png" alt="QuickMCP configuration in Claude Desktop" class="w-full rounded border border-gray-200 shadow-sm">
354
- </div>
236
+ <p class="text-sm text-slate-600 mb-4">Select tables and operations to expose.</p>
237
+ <img src="/images/readme/5-server-configuration.png" alt="Configure"
238
+ class="rounded-lg border border-slate-200 shadow-sm w-full">
239
+ </div>
355
240
 
356
- <!-- Image 2: Tools Available -->
357
- <div class="bg-white border border-blue-200 rounded-lg p-3">
358
- <h6 class="text-sm font-medium text-blue-800 mb-2">2. Your tools available in Claude Desktop:</h6>
359
- <img src="images/2-claude-tools.png" alt="QuickMCP tools available in Claude Desktop" class="w-full rounded border border-gray-200 shadow-sm">
360
- </div>
241
+ <!-- Step 4 -->
242
+ <div class="card p-5 hover:shadow-md transition-shadow">
243
+ <div class="flex items-center gap-3 mb-3">
244
+ <div
245
+ class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center font-bold text-sm">
246
+ 4</div>
247
+ <h4 class="font-semibold text-slate-900">Generate & Manage</h4>
361
248
  </div>
249
+ <p class="text-sm text-slate-600 mb-4">Create your server and manage it.</p>
250
+ <img src="/images/readme/7-generated-servers.png" alt="Manage"
251
+ class="rounded-lg border border-slate-200 shadow-sm w-full">
362
252
  </div>
363
253
  </div>
364
254
  </div>
365
255
 
366
- <!-- Individual Method -->
367
- <div id="individualMethod" class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden" style="display: none;">
368
- <div class="bg-gradient-to-r from-orange-50 to-yellow-50 p-6 border-b border-gray-200/50">
369
- <div class="flex items-center space-x-3">
370
- <div class="w-10 h-10 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-xl flex items-center justify-center">
371
- <i class="fas fa-box text-white"></i>
256
+ <!-- Tab Content: Setup -->
257
+ <div id="tab-setup" class="hidden space-y-8 animate-fade-in">
258
+
259
+ <!-- Method Selection -->
260
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
261
+ <button onclick="showMethod('integrated')" id="integratedBtn"
262
+ class="card p-6 text-left border-2 border-blue-500 bg-blue-50/30 relative overflow-hidden group transition-all">
263
+ <div
264
+ class="absolute top-0 right-0 p-2 bg-blue-500 text-white rounded-bl-xl text-xs font-bold">
265
+ RECOMMENDED</div>
266
+ <div class="flex items-center gap-4 mb-3">
267
+ <div
268
+ class="p-3 bg-blue-100 text-blue-600 rounded-xl group-hover:scale-110 transition-transform">
269
+ <i class="fas fa-link text-xl"></i>
270
+ </div>
271
+ <div>
272
+ <h3 class="text-lg font-bold text-slate-900">Integrated Server</h3>
273
+ <p class="text-sm text-slate-500">One config for all servers</p>
274
+ </div>
372
275
  </div>
373
- <div>
374
- <h3 class="text-lg font-semibold text-gray-900">Individual Export Method</h3>
375
- <p class="text-sm text-gray-600">Export and configure each server separately</p>
276
+ <p class="text-sm text-slate-600">Automatically updates as you create new servers. No
277
+ restarts required.</p>
278
+ </button>
279
+
280
+ <button onclick="showMethod('individual')" id="individualBtn"
281
+ class="card p-6 text-left border-2 border-transparent hover:border-slate-300 transition-all group">
282
+ <div class="flex items-center gap-4 mb-3">
283
+ <div
284
+ class="p-3 bg-orange-100 text-orange-600 rounded-xl group-hover:scale-110 transition-transform">
285
+ <i class="fas fa-box text-xl"></i>
286
+ </div>
287
+ <div>
288
+ <h3 class="text-lg font-bold text-slate-900">Individual Export</h3>
289
+ <p class="text-sm text-slate-500">Standalone packages</p>
290
+ </div>
376
291
  </div>
377
- </div>
292
+ <p class="text-sm text-slate-600">Export servers as separate folders. Good for
293
+ distribution.</p>
294
+ </button>
378
295
  </div>
379
296
 
380
- <div class="p-6 space-y-6">
381
- <!-- Advantages -->
382
- <div class="bg-orange-50 border border-orange-200 rounded-xl p-4">
383
- <h4 class="font-semibold text-orange-900 mb-3">✅ Advantages</h4>
384
- <ul class="space-y-2 text-orange-800">
385
- <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Independent server management</li>
386
- <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Clean tool naming without prefixes</li>
387
- <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Better performance for individual servers</li>
388
- <li class="flex items-center"><i class="fas fa-check-circle mr-2"></i>Portable server packages</li>
389
- </ul>
390
- </div>
297
+ <!-- Integrated Method Details -->
298
+ <div id="integratedMethod" class="space-y-6">
299
+ <div class="card p-6 bg-white">
300
+ <h3 class="text-lg font-bold text-slate-900 mb-4">Configuration for Claude Desktop</h3>
301
+ <p class="text-slate-600 mb-4 text-sm">Add this to your <code
302
+ class="bg-slate-100 px-1.5 py-0.5 rounded text-slate-800 font-mono">claude_desktop_config.json</code>
303
+ file:</p>
304
+
305
+ <div class="relative bg-slate-900 rounded-xl overflow-hidden group">
306
+ <button onclick="copyConfig('integrated')"
307
+ class="absolute top-3 right-3 bg-slate-700 hover:bg-slate-600 text-white px-3 py-1.5 rounded-lg text-xs font-medium transition-colors opacity-0 group-hover:opacity-100">
308
+ <i class="fas fa-copy mr-1"></i>Copy
309
+ </button>
310
+ <pre class="p-5 text-sm text-blue-300 font-mono overflow-x-auto"><code>{
311
+ "mcpServers": {
312
+ "quickmcp": {
313
+ "command": "npx",
314
+ "args": ["-y", "@softtechai/quickmcp"]
315
+ }
316
+ }
317
+ }</code></pre>
318
+ </div>
391
319
 
392
- <!-- Export Process -->
393
- <div class="space-y-6">
394
- <h4 class="text-lg font-semibold text-gray-900">🚀 Export Process for Claude Desktop</h4>
395
-
396
- <div class="space-y-4">
397
- <!-- Step 1 -->
398
- <div class="flex space-x-4">
399
- <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>
400
- <div class="flex-1">
401
- <h5 class="font-semibold text-gray-900">Go to Manage Servers</h5>
402
- <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>
403
- </div>
320
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
321
+ <div class="bg-slate-50 p-3 rounded-lg border border-slate-200 text-center">
322
+ <div class="text-xs font-semibold text-slate-500 uppercase mb-1">MacOS Config
323
+ Path</div>
324
+ <code
325
+ class="text-xs text-slate-700 break-all">~/Library/Application Support/Claude/</code>
404
326
  </div>
405
-
406
- <!-- Step 2 -->
407
- <div class="flex space-x-4">
408
- <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>
409
- <div class="flex-1">
410
- <h5 class="font-semibold text-gray-900">Export Your Server</h5>
411
- <p class="text-gray-600">Click the "Export" button for the server you want to use.</p>
412
- </div>
327
+ <div class="bg-slate-50 p-3 rounded-lg border border-slate-200 text-center">
328
+ <div class="text-xs font-semibold text-slate-500 uppercase mb-1">Windows Config
329
+ Path</div>
330
+ <code class="text-xs text-slate-700 break-all">%APPDATA%\Claude\</code>
413
331
  </div>
414
-
415
- <!-- Step 3 -->
416
- <div class="flex space-x-4">
417
- <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>
418
- <div class="flex-1">
419
- <h5 class="font-semibold text-gray-900">Extract and Install</h5>
420
- <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>
421
- </div>
332
+ <div class="bg-slate-50 p-3 rounded-lg border border-slate-200 text-center">
333
+ <div class="text-xs font-semibold text-slate-500 uppercase mb-1">Linux Config
334
+ Path</div>
335
+ <code class="text-xs text-slate-700 break-all">~/.config/Claude/</code>
422
336
  </div>
337
+ </div>
338
+ </div>
339
+ </div>
423
340
 
424
- <!-- Step 4 -->
425
- <div class="flex space-x-4">
426
- <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>
427
- <div class="flex-1">
428
- <h5 class="font-semibold text-gray-900">Configure Claude Desktop</h5>
429
- <p class="text-gray-600 mb-3">Add the server to your Claude Desktop config:</p>
430
-
431
- <div class="relative bg-gray-50 border border-gray-200 rounded-lg">
432
- <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')">
433
- <i class="fas fa-copy mr-1"></i>Copy
434
- </button>
435
- <pre class="p-4 text-sm overflow-x-auto"><code>{
341
+ <!-- Individual Method Details -->
342
+ <div id="individualMethod" class="hidden space-y-6">
343
+ <div class="card p-6 bg-white">
344
+ <h3 class="text-lg font-bold text-slate-900 mb-4">Individual Server Configuration</h3>
345
+ <ol class="list-decimal list-inside space-y-3 text-sm text-slate-600 mb-6">
346
+ <li>Go to <strong>Manage Servers</strong> and click <strong>Export</strong>.</li>
347
+ <li>Extract the zip file and run <code
348
+ class="bg-slate-100 px-1 rounded">npm install</code> in the folder.</li>
349
+ <li>Add the following to your Claude config:</li>
350
+ </ol>
351
+ <div class="relative bg-slate-900 rounded-xl overflow-hidden group">
352
+ <button onclick="copyConfig('claude-individual')"
353
+ class="absolute top-3 right-3 bg-slate-700 hover:bg-slate-600 text-white px-3 py-1.5 rounded-lg text-xs font-medium transition-colors opacity-0 group-hover:opacity-100">
354
+ <i class="fas fa-copy mr-1"></i>Copy
355
+ </button>
356
+ <pre class="p-5 text-sm text-orange-300 font-mono overflow-x-auto"><code>{
436
357
  "mcpServers": {
437
- "your-server-name": {
358
+ "my-server": {
438
359
  "command": "node",
439
- "args": ["path/to/your/server/index.js"]
360
+ "args": ["/path/to/exported/server/index.js"]
440
361
  }
441
362
  }
442
363
  }</code></pre>
443
- </div>
444
- </div>
445
- </div>
446
364
  </div>
447
365
  </div>
448
366
  </div>
367
+
449
368
  </div>
450
369
 
451
- <!-- Troubleshooting -->
452
- <div class="bg-white rounded-2xl shadow-lg border border-gray-200/50 overflow-hidden">
453
- <div class="bg-gradient-to-r from-red-50 to-pink-50 p-6 border-b border-gray-200/50">
454
- <div class="flex items-center space-x-3">
455
- <div class="w-10 h-10 bg-gradient-to-r from-red-500 to-pink-500 rounded-xl flex items-center justify-center">
456
- <i class="fas fa-wrench text-white"></i>
457
- </div>
458
- <div>
459
- <h3 class="text-lg font-semibold text-gray-900">Troubleshooting</h3>
460
- <p class="text-sm text-gray-600">Common issues and solutions</p>
461
- </div>
462
- </div>
463
- </div>
370
+ </div>
371
+ </div>
372
+ </div>
464
373
 
465
- <div class="p-6 space-y-6">
466
- <div class="space-y-4">
467
- <!-- Issue 1 -->
468
- <div class="border border-gray-200 rounded-lg p-4">
469
- <h4 class="font-semibold text-gray-900 mb-2">❌ Tools not showing up in Claude Desktop</h4>
470
- <ul class="space-y-1 text-gray-600 text-sm">
471
- <li>• Make sure QuickMCP is running (check server status above)</li>
472
- <li>• Verify the configuration is correct in Claude Desktop</li>
473
- <li>• Restart Claude Desktop completely</li>
474
- <li>• Check that port 3001 is not blocked by firewall</li>
475
- </ul>
476
- </div>
374
+ <!-- Right Sidebar (Info/Troubleshooting) -->
375
+ <div class="w-80 bg-white border-l border-slate-200/60 flex flex-col flex-shrink-0 z-30 hidden lg:flex">
376
+ <!-- Header -->
377
+ <div class="p-6 border-b border-slate-200/60 bg-white">
378
+ <div class="flex items-center gap-3">
379
+ <div
380
+ class="w-8 h-8 flex items-center justify-center bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg shadow-lg shadow-purple-500/25">
381
+ <i class="fas fa-wrench text-white"></i>
382
+ </div>
383
+ <div>
384
+ <h2 class="text-slate-900 font-bold tracking-tight text-lg">Troubleshooting</h2>
385
+ <p class="text-slate-500 text-xs leading-none font-medium">Common Issues</p>
386
+ </div>
387
+ </div>
388
+ </div>
477
389
 
478
- <!-- Issue 2 -->
479
- <div class="border border-gray-200 rounded-lg p-4">
480
- <h4 class="font-semibold text-gray-900 mb-2">🔄 Server status shows offline</h4>
481
- <ul class="space-y-1 text-gray-600 text-sm">
482
- <li>• Run <code class="bg-gray-100 px-1 rounded">npm run dev</code> in your QuickMCP directory</li>
483
- <li>• Check if port 3001 is already in use</li>
484
- <li>• Look at the console for error messages</li>
485
- </ul>
486
- </div>
390
+ <!-- Content -->
391
+ <div class="flex-1 overflow-y-auto scrollbar-modern p-6 space-y-6">
392
+
393
+ <div class="space-y-4">
394
+ <!-- Issue 1 -->
395
+ <div class="space-y-2">
396
+ <label class="block text-slate-700 font-semibold text-sm">Tools not showing up?</label>
397
+ <div class="card p-3 bg-red-50 border-red-100">
398
+ <ul class="space-y-2 text-xs text-slate-600">
399
+ <li class="flex gap-2">
400
+ <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
401
+ <span>Ensure QuickMCP is running at localhost:3000</span>
402
+ </li>
403
+ <li class="flex gap-2">
404
+ <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
405
+ <span>Restart Claude Desktop after config changes</span>
406
+ </li>
407
+ <li class="flex gap-2">
408
+ <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
409
+ <span>Check if port 3001 is blocked by firewall</span>
410
+ </li>
411
+ </ul>
412
+ </div>
413
+ </div>
487
414
 
488
- <!-- Issue 3 -->
489
- <div class="border border-gray-200 rounded-lg p-4">
490
- <h4 class="font-semibold text-gray-900 mb-2">⚠️ Individual exported servers not working</h4>
491
- <ul class="space-y-1 text-gray-600 text-sm">
492
- <li>• Make sure you ran <code class="bg-gray-100 px-1 rounded">npm install</code> in the exported folder</li>
493
- <li>• Check that the path in Claude Desktop config is correct</li>
494
- <li>• Ensure Node.js is installed and accessible</li>
495
- </ul>
496
- </div>
497
- </div>
415
+ <!-- Issue 2 -->
416
+ <div class="space-y-2">
417
+ <label class="block text-slate-700 font-semibold text-sm">Server Offline?</label>
418
+ <div class="card p-3 bg-orange-50 border-orange-100">
419
+ <p class="text-xs text-slate-600 mb-2">If the status indicator is red:</p>
420
+ <ul class="space-y-2 text-xs text-slate-600">
421
+ <li class="flex gap-2">
422
+ <i class="fas fa-exclamation-triangle text-orange-500 mt-0.5"></i>
423
+ <span>Check console logs for errors</span>
424
+ </li>
425
+ <li class="flex gap-2">
426
+ <i class="fas fa-exclamation-triangle text-orange-500 mt-0.5"></i>
427
+ <span>Verify database connection strings</span>
428
+ </li>
429
+ </ul>
498
430
  </div>
499
431
  </div>
432
+
433
+ <!-- Helpful Links -->
434
+ <div class="pt-4 border-t border-slate-200">
435
+ <label class="block text-slate-700 font-semibold text-sm mb-3">Resources</label>
436
+ <a href="https://modelcontextprotocol.io" target="_blank"
437
+ class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-50 transition-colors group">
438
+ <div
439
+ class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center group-hover:bg-blue-100 group-hover:text-blue-600 transition-colors">
440
+ <i class="fas fa-external-link-alt text-xs"></i>
441
+ </div>
442
+ <div>
443
+ <div class="text-sm font-medium text-slate-900">MCP Documentation</div>
444
+ <div class="text-xs text-slate-500">Official Docs</div>
445
+ </div>
446
+ </a>
447
+ </div>
448
+
500
449
  </div>
501
- </main>
450
+
451
+ </div>
502
452
  </div>
453
+
503
454
  </div>
504
455
 
505
456
  <!-- Scripts -->
506
- <script src="shared.js"></script>
457
+ <script src="logger.js"></script>
458
+ <script src="shared.js"></script>
459
+ <script src="sidebar.js"></script>
507
460
  <script src="app.js"></script>
508
461
  <script>
509
- // Method switching functionality
462
+ function switchTab(which) {
463
+ const tabs = ['installation', 'data', 'setup'];
464
+ const buttons = {
465
+ installation: document.getElementById('tabBtnInstallation'),
466
+ data: document.getElementById('tabBtnData'),
467
+ setup: document.getElementById('tabBtnSetup')
468
+ };
469
+
470
+ tabs.forEach(tab => {
471
+ const el = document.getElementById('tab-' + tab);
472
+ const btn = buttons[tab];
473
+
474
+ if (tab === which) {
475
+ el.classList.remove('hidden');
476
+ btn.classList.add('text-blue-600', 'bg-blue-50/50', 'border-b-blue-500');
477
+ btn.classList.remove('text-slate-600', 'border-b-transparent', 'hover:bg-slate-50');
478
+ } else {
479
+ el.classList.add('hidden');
480
+ btn.classList.remove('text-blue-600', 'bg-blue-50/50', 'border-b-blue-500');
481
+ btn.classList.add('text-slate-600', 'border-b-transparent', 'hover:bg-slate-50');
482
+ }
483
+ });
484
+ }
485
+
510
486
  function showMethod(method) {
511
- const integratedMethod = document.getElementById('integratedMethod');
512
- const individualMethod = document.getElementById('individualMethod');
487
+ const integrated = document.getElementById('integratedMethod');
488
+ const individual = document.getElementById('individualMethod');
513
489
  const integratedBtn = document.getElementById('integratedBtn');
514
490
  const individualBtn = document.getElementById('individualBtn');
515
491
 
516
492
  if (method === 'integrated') {
517
- integratedMethod.style.display = 'block';
518
- individualMethod.style.display = 'none';
519
- 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';
520
- 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';
493
+ integrated.classList.remove('hidden');
494
+ individual.classList.add('hidden');
495
+
496
+ integratedBtn.classList.add('border-blue-500', 'bg-blue-50/30');
497
+ integratedBtn.classList.remove('border-transparent');
498
+
499
+ individualBtn.classList.remove('border-orange-500', 'bg-orange-50/30');
500
+ individualBtn.classList.add('border-transparent');
521
501
  } else {
522
- integratedMethod.style.display = 'none';
523
- individualMethod.style.display = 'block';
524
- 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';
525
- 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';
502
+ integrated.classList.add('hidden');
503
+ individual.classList.remove('hidden');
504
+
505
+ integratedBtn.classList.remove('border-blue-500', 'bg-blue-50/30');
506
+ integratedBtn.classList.add('border-transparent');
507
+
508
+ individualBtn.classList.add('border-orange-500', 'bg-orange-50/30');
509
+ individualBtn.classList.remove('border-transparent');
526
510
  }
527
511
  }
528
512
 
529
- // Copy configuration function
530
513
  function copyConfig(type) {
531
514
  let configText = '';
532
-
533
- switch(type) {
534
- case 'integrated':
535
- configText = `{
536
- "mcpServers": {
537
- "quickmcp-stdio": {
538
- "command": "/opt/homebrew/bin/node",
539
- "args": ["/Users/berkaybasoz/Documents/apps/quickmcp/quickmcp-direct-stdio.js"]
540
- }
541
- }
542
- }`;
543
- break;
544
- case 'claude-individual':
545
- configText = `{
546
- "mcpServers": {
547
- "your-server-name": {
548
- "command": "node",
549
- "args": ["path/to/your/server/index.js"]
550
- }
551
- }
552
- }`;
553
- break;
515
+ if (type === 'integrated') {
516
+ configText = JSON.stringify({
517
+ "mcpServers": {
518
+ "quickmcp": {
519
+ "command": "npx",
520
+ "args": ["-y", "@softtechai/quickmcp"]
521
+ }
522
+ }
523
+ }, null, 2);
524
+ } else {
525
+ configText = JSON.stringify({
526
+ "mcpServers": {
527
+ "my-server": {
528
+ "command": "node",
529
+ "args": ["/path/to/exported/server/index.js"]
530
+ }
531
+ }
532
+ }, null, 2);
554
533
  }
555
-
534
+
556
535
  navigator.clipboard.writeText(configText).then(() => {
557
- // Show feedback
558
- const button = event.target;
559
- const originalText = button.innerHTML;
560
- button.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!';
561
- 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');
562
-
536
+ const btn = event.currentTarget;
537
+ const originalHtml = btn.innerHTML;
538
+ btn.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!';
539
+ btn.classList.remove('bg-slate-700', 'hover:bg-slate-600');
540
+ btn.classList.add('bg-green-600', 'hover:bg-green-500');
541
+
563
542
  setTimeout(() => {
564
- button.innerHTML = originalText;
565
- button.className = button.className.replace('bg-green-500', type === 'integrated' ? 'bg-blue-500 hover:bg-blue-600' : 'bg-orange-500 hover:bg-orange-600');
543
+ btn.innerHTML = originalHtml;
544
+ btn.classList.add('bg-slate-700', 'hover:bg-slate-600');
545
+ btn.classList.remove('bg-green-600', 'hover:bg-green-500');
566
546
  }, 2000);
567
547
  });
568
548
  }
549
+
550
+ // Initialize
551
+ switchTab('installation');
569
552
  </script>
570
553
  </body>
571
- </html>
554
+
555
+ </html>