mcp-probe-kit 3.0.16 → 3.0.18

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 (74) hide show
  1. package/README.md +603 -399
  2. package/build/index.js +13 -1
  3. package/build/lib/__tests__/memory-client.unit.test.d.ts +1 -0
  4. package/build/lib/__tests__/memory-client.unit.test.js +83 -0
  5. package/build/lib/__tests__/memory-config.unit.test.d.ts +1 -0
  6. package/build/lib/__tests__/memory-config.unit.test.js +33 -0
  7. package/build/lib/cursor-history-client.d.ts +54 -0
  8. package/build/lib/cursor-history-client.js +240 -0
  9. package/build/lib/gitnexus-bridge.js +6 -8
  10. package/build/lib/memory-client.d.ts +61 -0
  11. package/build/lib/memory-client.js +293 -0
  12. package/build/lib/memory-config.d.ts +14 -0
  13. package/build/lib/memory-config.js +31 -0
  14. package/build/lib/memory-orchestration.d.ts +26 -0
  15. package/build/lib/memory-orchestration.js +65 -0
  16. package/build/lib/project-detector.js +6 -4
  17. package/build/lib/workspace-root.d.ts +12 -0
  18. package/build/lib/workspace-root.js +153 -0
  19. package/build/resources/ui-ux-data/metadata.json +1 -1
  20. package/build/schemas/code-analysis-tools.d.ts +1 -1
  21. package/build/schemas/code-analysis-tools.js +1 -1
  22. package/build/schemas/index.d.ts +198 -4
  23. package/build/schemas/index.js +2 -0
  24. package/build/schemas/memory-tools.d.ts +191 -0
  25. package/build/schemas/memory-tools.js +106 -0
  26. package/build/schemas/orchestration-tools.d.ts +3 -3
  27. package/build/schemas/orchestration-tools.js +3 -3
  28. package/build/schemas/ui-ux-schemas.d.ts +8 -0
  29. package/build/schemas/ui-ux-schemas.js +4 -0
  30. package/build/tools/__tests__/cursor-history.unit.test.d.ts +1 -0
  31. package/build/tools/__tests__/cursor-history.unit.test.js +87 -0
  32. package/build/tools/__tests__/memorize_asset.unit.test.d.ts +1 -0
  33. package/build/tools/__tests__/memorize_asset.unit.test.js +68 -0
  34. package/build/tools/code_insight.d.ts +20 -0
  35. package/build/tools/code_insight.js +15 -0
  36. package/build/tools/cursor_list_conversations.d.ts +7 -0
  37. package/build/tools/cursor_list_conversations.js +35 -0
  38. package/build/tools/cursor_read_conversation.d.ts +7 -0
  39. package/build/tools/cursor_read_conversation.js +36 -0
  40. package/build/tools/cursor_search_conversations.d.ts +7 -0
  41. package/build/tools/cursor_search_conversations.js +36 -0
  42. package/build/tools/index.d.ts +6 -0
  43. package/build/tools/index.js +7 -0
  44. package/build/tools/init_project_context.d.ts +20 -1
  45. package/build/tools/init_project_context.js +114 -99
  46. package/build/tools/memorize_asset.d.ts +7 -0
  47. package/build/tools/memorize_asset.js +66 -0
  48. package/build/tools/read_memory_asset.d.ts +7 -0
  49. package/build/tools/read_memory_asset.js +26 -0
  50. package/build/tools/scan_and_extract_patterns.d.ts +27 -0
  51. package/build/tools/scan_and_extract_patterns.js +346 -0
  52. package/build/tools/start_bugfix.d.ts +20 -0
  53. package/build/tools/start_bugfix.js +97 -69
  54. package/build/tools/start_feature.d.ts +20 -0
  55. package/build/tools/start_feature.js +61 -31
  56. package/build/tools/start_onboard.d.ts +20 -0
  57. package/build/tools/start_onboard.js +15 -0
  58. package/build/tools/start_ui.d.ts +20 -0
  59. package/build/tools/start_ui.js +66 -32
  60. package/docs/data/tools.js +472 -373
  61. package/docs/i18n/all-tools/en.json +38 -5
  62. package/docs/i18n/all-tools/ja.json +14 -4
  63. package/docs/i18n/all-tools/ko.json +13 -3
  64. package/docs/i18n/all-tools/zh-CN.json +38 -5
  65. package/docs/i18n/en.json +48 -10
  66. package/docs/i18n/ja.json +47 -9
  67. package/docs/i18n/ko.json +47 -9
  68. package/docs/i18n/zh-CN.json +48 -10
  69. package/docs/pages/all-tools.html +515 -515
  70. package/docs/pages/examples.html +661 -661
  71. package/docs/pages/getting-started.html +673 -582
  72. package/docs/pages/migration.html +291 -291
  73. package/package.json +83 -82
  74. package/docs/debug-i18n.html +0 -163
package/docs/pages/getting-started.html CHANGED
@@ -1,313 +1,403 @@
1
- <!DOCTYPE html>
2
- <html lang="zh-CN">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>快速开始 - 安装配置指南 | MCP Probe Kit</title>
7
-
8
- <!-- SEO Meta Tags -->
9
- <meta name="description" content="MCP Probe Kit 快速开始指南：支持 Cursor、Cline、Claude Desktop 三大平台，5分钟完成安装配置。">
10
- <meta name="keywords" content="MCP Probe Kit 安装, Cursor 配置, Cline 配置, Claude Desktop 配置">
11
- <meta name="author" content="小墨 (Kyle) - ByteZoneX">
12
-
13
- <script src="../assets/js/tailwind.js" data-cfasync="false"></script>
14
- <script>
15
- tailwind.config = {
16
- theme: {
17
- extend: {
18
- colors: {
19
- primary: {
20
- DEFAULT: '#2563EB',
21
- hover: '#1D4ED8',
22
- },
23
- text: {
24
- primary: '#0F172A',
25
- secondary: '#475569',
26
- tertiary: '#64748B',
27
- },
28
- bg: {
29
- page: '#F8FAFC',
30
- card: '#FFFFFF',
31
- },
32
- border: '#E2E8F0',
33
- },
34
- }
35
- }
36
- }
37
- </script>
38
- <style>
39
- html { scroll-behavior: smooth; }
40
- .code-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
41
- /* 移动端抽屉效果 */
42
- .sidebar-drawer { transition: transform 0.3s ease; }
43
- @media (max-width: 767px) {
44
- .sidebar-drawer { transform: translateX(-100%); }
45
- .sidebar-drawer.open { transform: translateX(0); }
46
- }
47
- .backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
48
- .backdrop.active { opacity: 1; pointer-events: auto; }
49
-
50
- /* i18n 加载优化：防止内容闪烁 */
51
- body:not(.i18n-ready) [data-i18n] {
52
- visibility: hidden;
53
- }
54
- body.i18n-ready [data-i18n] {
55
- visibility: visible;
56
- }
57
- </style>
58
- </head>
59
- <body class="font-sans bg-bg-page text-text-primary leading-relaxed min-h-screen flex flex-col">
60
- <!-- A. 顶部导航栏 -->
61
- <nav class="fixed top-0 left-0 right-0 h-14 bg-white/95 backdrop-blur-md border-b border-border z-50">
62
- <div class="h-full px-4 flex items-center justify-between">
63
- <a href="../index.html" class="flex items-center gap-2 text-base font-semibold text-text-primary no-underline">
64
- <span>🚀</span>
65
- <span class="sm:inline hidden">MCP Probe Kit</span>
66
- </a>
67
- <div class="flex items-center gap-3">
68
- <div id="lang-switcher-container"></div>
69
- <button onclick="toggleSidebar()" class="md:hidden p-2 text-text-secondary hover:text-primary transition-colors">
70
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
71
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
72
- </svg>
73
- </button>
74
- </div>
75
- </div>
76
- </nav>
77
-
78
- <!-- 侧边栏遮罩 -->
79
- <div class="fixed inset-0 bg-black/50 z-40 backdrop opacity-0 pointer-events-none transition-opacity duration-300 md:opacity-100 md:pointer-events-auto md:hidden" onclick="toggleSidebar()" id="backdrop"></div>
80
-
81
- <!-- B. 侧边栏 -->
82
- <aside class="fixed left-0 top-14 bottom-0 w-64 bg-white border-r border-border z-50 sidebar-drawer overflow-y-auto md:translate-x-0 md:block" id="sidebar">
83
- <div class="p-4">
84
- <div class="mb-4">
85
- <div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.quickStart">快速开始</div>
86
- <a href="../index.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
87
- <span>🏠</span>
88
- <span data-i18n="sidebar.home">文档首页</span>
89
- </a>
90
- <a href="./getting-started.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium bg-blue-50 text-primary no-underline border-l-3 border-primary">
91
- <span>📖</span>
92
- <span data-i18n="sidebar.installation">安装配置</span>
93
- </a>
94
- </div>
95
-
96
- <div class="mb-4">
97
- <div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.toolsDocs">工具文档</div>
98
- <a href="./all-tools.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
99
- <span>🛠️</span>
100
- <span data-i18n="sidebar.allTools">所有工具</span>
101
- <span class="ml-auto bg-bg-page text-xs px-2 py-0.5 rounded-full">22</span>
102
- </a>
103
- </div>
104
-
105
- <div class="mb-4">
106
- <div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.guides">指南</div>
107
- <a href="./migration.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
108
- <span>🚀</span>
109
- <span data-i18n="sidebar.migration">迁移指南</span>
110
- </a>
111
- <a href="./examples.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
112
- <span>💡</span>
113
- <span data-i18n="sidebar.examples">最佳实践</span>
114
- </a>
115
- </div>
116
-
117
- <div class="pt-4 border-t border-border">
118
- <a href="https://github.com/mybolide/mcp-probe-kit" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
119
- <span>💻</span>
120
- <span>GitHub</span>
121
- <span class="ml-auto text-xs">↗</span>
122
- </a>
123
- <a href="https://npmjs.com/package/mcp-probe-kit" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
124
- <span>📦</span>
125
- <span>npm</span>
126
- <span class="ml-auto text-xs">↗</span>
127
- </a>
128
- </div>
129
-
130
- <!-- QR Code -->
131
- <div class="mt-4 pt-4 border-t border-border">
132
- <div class="text-center">
133
- <div class="text-xs font-semibold text-text-tertiary mb-2" data-i18n="sidebar.followUs">关注公众号</div>
134
- <img src="https://oss.bolzjb.com/wx_qrcode.jpg" alt="微信公众号" class="w-[100px] h-[100px] mx-auto rounded-lg border border-border" />
135
- <div class="text-xs text-text-tertiary mt-2" data-i18n="sidebar.getTechSharing">获取更多技术分享</div>
136
- </div>
137
- </div>
138
- </div>
139
- </aside>
140
-
141
- <!-- C. 主内容区 -->
142
- <main class="flex-1 mt-14 min-h-screen md:ml-64">
143
- <div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">
144
-
145
- <!-- 面包屑 -->
146
- <nav class="flex items-center gap-1 text-sm text-text-secondary mb-4 overflow-x-auto whitespace-nowrap">
147
- <a href="../index.html" class="hover:text-primary transition-colors no-underline flex-shrink-0" data-i18n="gettingStarted.breadcrumb.home">文档首页</a>
148
- <span class="text-text-tertiary">/</span>
149
- <span class="text-text-primary flex-shrink-0" data-i18n="gettingStarted.breadcrumb.quickStart">快速开始</span>
150
- <span class="text-text-tertiary">/</span>
151
- <span class="text-text-primary flex-shrink-0" data-i18n="gettingStarted.breadcrumb.installation">安装配置</span>
152
- </nav>
153
-
154
- <!-- 页面标题 -->
155
- <div class="mb-6">
156
- <h1 class="text-2xl sm:text-3xl font-bold text-text-primary mb-2" data-i18n="gettingStarted.title">安装配置</h1>
157
- <p class="text-sm sm:text-base text-text-secondary" data-i18n="gettingStarted.subtitle">5 分钟快速上手 MCP Probe Kit v3.0.10，支持 Cursor、Cline 和 Claude Desktop</p>
158
- <div class="flex flex-wrap items-center gap-2 mt-3 text-xs text-text-tertiary">
159
- <span class="bg-blue-100 text-blue-700 px-2 py-0.5 rounded">v3.0.10</span>
160
- <span>MCP 2025-11-25</span>
161
- <span>SDK 1.27.1</span>
162
- </div>
163
- </div>
164
-
165
- <!-- Step 1: 选择安装方式 -->
166
- <section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
167
- <div class="flex items-start gap-3 mb-4">
168
- <div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">1</div>
169
- <h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step1.title">选择安装方式</h2>
170
- </div>
171
-
172
- <!-- 安装方式 Tab -->
173
- <div class="space-y-4">
174
- <!-- npx 方式 -->
175
- <div class="border border-border rounded-lg overflow-hidden">
176
- <button onclick="toggleInstall('npx')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
177
- <div class="flex items-center gap-2">
178
- <span class="text-lg">⚡</span>
179
- <span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.npx.title">npx 直接使用</span>
180
- <span class="bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded font-medium" data-i18n="gettingStarted.step1.npx.recommended">推荐</span>
181
- </div>
182
- <svg class="w-5 h-5 text-text-tertiary transition-transform" id="npx-icon" style="transform: rotate(180deg);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
183
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
184
- </svg>
185
- </button>
186
- <div id="npx-content" class="p-4 border-t border-border">
187
- <p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.npx.description">无需安装，直接使用最新版本：</p>
188
- <div class="bg-slate-900 rounded-lg overflow-hidden">
189
- <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
190
- <span class="text-xs text-slate-300 font-medium">JSON</span>
191
- <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
192
- </div>
193
- <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
194
- "mcpServers": {
195
- "mcp-probe-kit": {
196
- "command": "npx",
197
- "args": ["-y", "mcp-probe-kit@latest"]
198
- }
199
- }
200
- }</code></pre>
201
- </div>
202
- <div class="mt-3 p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm text-text-primary">
203
- <strong data-i18n="gettingStarted.step1.npx.advantage">优势：</strong><span data-i18n="gettingStarted.step1.npx.advantageText">无需手动更新，每次启动自动使用最新版本</span>
204
- </div>
205
- </div>
206
- </div>
207
-
208
- <!-- 全局安装 -->
209
- <div class="border border-border rounded-lg overflow-hidden">
210
- <button onclick="toggleInstall('global')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
211
- <div class="flex items-center gap-2">
212
- <span class="text-lg">📦</span>
213
- <span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.global.title">全局安装</span>
214
- </div>
215
- <svg class="w-5 h-5 text-text-tertiary transition-transform" id="global-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
216
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
217
- </svg>
218
- </button>
219
- <div id="global-content" class="hidden p-4 border-t border-border">
220
- <p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.global.description">全局安装到系统：</p>
221
- <div class="bg-slate-900 rounded-lg overflow-hidden">
222
- <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
223
- <span class="text-xs text-slate-300 font-medium">Bash</span>
224
- <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
225
- </div>
226
- <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>npm install -g mcp-probe-kit</code></pre>
227
- </div>
228
- <p class="text-text-secondary mt-3 mb-2 text-sm" data-i18n="gettingStarted.step1.global.configFile">配置文件：</p>
229
- <div class="bg-slate-900 rounded-lg overflow-hidden">
230
- <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
231
- <span class="text-xs text-slate-300 font-medium">JSON</span>
232
- <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
233
- </div>
234
- <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
235
- "mcpServers": {
236
- "mcp-probe-kit": {
237
- "command": "mcp-probe-kit"
238
- }
239
- }
240
- }</code></pre>
241
- </div>
242
- <div class="mt-3 p-3 bg-amber-50 border-l-3 border-amber-500 rounded-r text-sm text-text-primary">
243
- <strong data-i18n="gettingStarted.step1.global.note">注意：</strong><span data-i18n="gettingStarted.step1.global.noteText">需要手动运行</span> <code class="bg-gray-200 px-1 rounded text-xs">npm update -g mcp-probe-kit</code> <span data-i18n="gettingStarted.step1.global.updateText">更新版本</span>
244
- </div>
245
- </div>
246
- </div>
247
-
248
- <!-- 源码编译 -->
249
- <div class="border border-border rounded-lg overflow-hidden">
250
- <button onclick="toggleInstall('source')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
251
- <div class="flex items-center gap-2">
252
- <span class="text-lg">🔧</span>
253
- <span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.source.title">源码编译</span>
254
- </div>
255
- <svg class="w-5 h-5 text-text-tertiary transition-transform" id="source-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
256
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
257
- </svg>
258
- </button>
259
- <div id="source-content" class="hidden p-4 border-t border-border">
260
- <p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.source.description">从源码编译安装，适合开发者：</p>
261
-
262
- <div class="mb-4">
263
- <p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step1">1. 克隆仓库</p>
264
- <div class="bg-slate-900 rounded-lg overflow-hidden">
265
- <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
266
- <span class="text-xs text-slate-300 font-medium">Bash</span>
267
- <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
268
- </div>
269
- <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>git clone https://github.com/mybolide/mcp-probe-kit.git
270
- cd mcp-probe-kit</code></pre>
271
- </div>
272
- </div>
273
-
274
- <div class="mb-4">
275
- <p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step2">2. 安装依赖并编译</p>
276
- <div class="bg-slate-900 rounded-lg overflow-hidden">
277
- <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
278
- <span class="text-xs text-slate-300 font-medium">Bash</span>
279
- <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
280
- </div>
281
- <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>npm install
282
- npm run build</code></pre>
283
- </div>
284
- </div>
285
-
286
- <div class="mb-4">
287
- <p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step3">3. 配置文件</p>
288
- <div class="bg-slate-900 rounded-lg overflow-hidden">
289
- <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
290
- <span class="text-xs text-slate-300 font-medium">JSON</span>
291
- <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
292
- </div>
293
- <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
294
- "mcpServers": {
295
- "mcp-probe-kit": {
296
- "command": "node",
297
- "args": ["/path/to/mcp-probe-kit/build/index.js"]
298
- }
299
- }
300
- }</code></pre>
301
- </div>
302
- </div>
303
-
304
- <div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm text-text-primary mb-2">
305
- <strong data-i18n="gettingStarted.step1.source.tip">提示：</strong><span data-i18n="gettingStarted.step1.source.tipText">Windows 用户使用完整路径，如</span> <code class="bg-gray-200 px-1 rounded text-xs">D:/workspace/mcp-probe-kit/build/index.js</code>
306
- </div>
307
- <div class="p-3 bg-amber-50 border-l-3 border-amber-500 rounded-r text-sm text-text-primary">
308
- <strong data-i18n="gettingStarted.step1.source.note">注意：</strong><span data-i18n="gettingStarted.step1.source.noteText">修改代码后需要重新运行</span> <code class="bg-gray-200 px-1 rounded text-xs">npm run build</code> <span data-i18n="gettingStarted.step1.source.compileText">编译</span>
309
- </div>
310
- </div>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MCP Probe Kit - AI-Powered Complete Development Toolkit | 28 Tools Covering Entire Development Lifecycle</title>
7
+ <meta name="i18n-title" content="meta.title">
8
+
9
+ <!-- SEO Meta Tags -->
10
+ <meta name="description" content="MCP Probe Kit quick start guide for Cursor, Cline, and Claude Desktop. Finish installation and configuration in 5 minutes.">
11
+ <meta name="keywords" content="MCP Probe Kit installation, Cursor configuration, Cline configuration, Claude Desktop configuration">
12
+ <meta name="author" content="Kyle - ByteZoneX">
13
+
14
+ <script src="../assets/js/tailwind.js" data-cfasync="false"></script>
15
+ <script>
16
+ tailwind.config = {
17
+ theme: {
18
+ extend: {
19
+ colors: {
20
+ primary: {
21
+ DEFAULT: '#2563EB',
22
+ hover: '#1D4ED8',
23
+ },
24
+ text: {
25
+ primary: '#0F172A',
26
+ secondary: '#475569',
27
+ tertiary: '#64748B',
28
+ },
29
+ bg: {
30
+ page: '#F8FAFC',
31
+ card: '#FFFFFF',
32
+ },
33
+ border: '#E2E8F0',
34
+ },
35
+ }
36
+ }
37
+ }
38
+ </script>
39
+ <style>
40
+ html { scroll-behavior: smooth; }
41
+ .code-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
42
+ /* Mobile drawer */
43
+ .sidebar-drawer { transition: transform 0.3s ease; }
44
+ @media (max-width: 767px) {
45
+ .sidebar-drawer { transform: translateX(-100%); }
46
+ .sidebar-drawer.open { transform: translateX(0); }
47
+ }
48
+ .backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
49
+ .backdrop.active { opacity: 1; pointer-events: auto; }
50
+
51
+ /* i18n loading optimization to avoid flashing */
52
+ body:not(.i18n-ready) [data-i18n] {
53
+ visibility: hidden;
54
+ }
55
+ body.i18n-ready [data-i18n] {
56
+ visibility: visible;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="font-sans bg-bg-page text-text-primary leading-relaxed min-h-screen flex flex-col">
61
+ <!-- A. Top navigation -->
62
+ <nav class="fixed top-0 left-0 right-0 h-14 bg-white/95 backdrop-blur-md border-b border-border z-50">
63
+ <div class="h-full px-4 flex items-center justify-between">
64
+ <a href="../index.html" class="flex items-center gap-2 text-base font-semibold text-text-primary no-underline">
65
+ <span>🚀</span>
66
+ <span class="sm:inline hidden">MCP Probe Kit</span>
67
+ </a>
68
+ <div class="flex items-center gap-3">
69
+ <div id="lang-switcher-container"></div>
70
+ <button onclick="toggleSidebar()" class="md:hidden p-2 text-text-secondary hover:text-primary transition-colors">
71
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
72
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
73
+ </svg>
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </nav>
78
+
79
+ <!-- Sidebar backdrop -->
80
+ <div class="fixed inset-0 bg-black/50 z-40 backdrop opacity-0 pointer-events-none transition-opacity duration-300 md:opacity-100 md:pointer-events-auto md:hidden" onclick="toggleSidebar()" id="backdrop"></div>
81
+
82
+ <!-- B. Sidebar -->
83
+ <aside class="fixed left-0 top-14 bottom-0 w-64 bg-white border-r border-border z-50 sidebar-drawer overflow-y-auto md:translate-x-0 md:block" id="sidebar">
84
+ <div class="p-4">
85
+ <div class="mb-4">
86
+ <div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.quickStart">Quick Start</div>
87
+ <a href="../index.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
88
+ <span>🏠</span>
89
+ <span data-i18n="sidebar.home">Documentation Home</span>
90
+ </a>
91
+ <a href="./getting-started.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium bg-blue-50 text-primary no-underline border-l-3 border-primary">
92
+ <span>📖</span>
93
+ <span data-i18n="sidebar.installation">Installation & Configuration</span>
94
+ </a>
95
+ </div>
96
+
97
+ <div class="mb-4">
98
+ <div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.toolsDocs">Tools Documentation</div>
99
+ <a href="./all-tools.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
100
+ <span>🛠️</span>
101
+ <span data-i18n="sidebar.allTools">All Tools</span>
102
+ <span class="ml-auto bg-bg-page text-xs px-2 py-0.5 rounded-full">28</span>
103
+ </a>
104
+ </div>
105
+
106
+ <div class="mb-4">
107
+ <div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.guides">Guides</div>
108
+ <a href="./migration.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
109
+ <span>🚀</span>
110
+ <span data-i18n="sidebar.migration">Migration Guide</span>
111
+ </a>
112
+ <a href="./examples.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
113
+ <span>💡</span>
114
+ <span data-i18n="sidebar.examples">Best Practices</span>
115
+ </a>
116
+ </div>
117
+
118
+ <div class="pt-4 border-t border-border">
119
+ <a href="https://github.com/mybolide/mcp-probe-kit" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
120
+ <span>💻</span>
121
+ <span>GitHub</span>
122
+ <span class="ml-auto text-xs">↗</span>
123
+ </a>
124
+ <a href="https://npmjs.com/package/mcp-probe-kit" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
125
+ <span>📦</span>
126
+ <span>npm</span>
127
+ <span class="ml-auto text-xs">↗</span>
128
+ </a>
129
+ </div>
130
+
131
+ <!-- QR Code -->
132
+ <div class="mt-4 pt-4 border-t border-border">
133
+ <div class="text-center">
134
+ <div class="text-xs font-semibold text-text-tertiary mb-2" data-i18n="sidebar.followUs">Follow Us</div>
135
+ <img src="https://oss.bolzjb.com/wx_qrcode.jpg" alt="WeChat official account QR code" class="w-[100px] h-[100px] mx-auto rounded-lg border border-border" />
136
+ <div class="text-xs text-text-tertiary mt-2" data-i18n="sidebar.getTechSharing">Get More Tech Insights</div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </aside>
141
+
142
+ <!-- C. Main content -->
143
+ <main class="flex-1 mt-14 min-h-screen md:ml-64">
144
+ <div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">
145
+
146
+ <!-- Breadcrumb -->
147
+ <nav class="flex items-center gap-1 text-sm text-text-secondary mb-4 overflow-x-auto whitespace-nowrap">
148
+ <a href="../index.html" class="hover:text-primary transition-colors no-underline flex-shrink-0" data-i18n="gettingStarted.breadcrumb.home">Documentation</a>
149
+ <span class="text-text-tertiary">/</span>
150
+ <span class="text-text-primary flex-shrink-0" data-i18n="gettingStarted.breadcrumb.quickStart">Quick Start</span>
151
+ <span class="text-text-tertiary">/</span>
152
+ <span class="text-text-primary flex-shrink-0" data-i18n="gettingStarted.breadcrumb.installation">Installation</span>
153
+ </nav>
154
+
155
+ <!-- Page title -->
156
+ <div class="mb-6">
157
+ <h1 class="text-2xl sm:text-3xl font-bold text-text-primary mb-2" data-i18n="gettingStarted.title">Installation & Configuration</h1>
158
+ <p class="text-sm sm:text-base text-text-secondary" data-i18n="gettingStarted.subtitle">Get started with MCP Probe Kit v3.0.16 in 5 minutes. Supports Cursor, Cline, and Claude Desktop</p>
159
+ <div class="flex flex-wrap items-center gap-2 mt-3 text-xs text-text-tertiary">
160
+ <span class="bg-blue-100 text-blue-700 px-2 py-0.5 rounded">v3.0.16</span>
161
+ <span>MCP 2025-11-25</span>
162
+ <span>SDK 1.27.1</span>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Step 1: Choose installation method -->
167
+ <section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
168
+ <div class="flex items-start gap-3 mb-4">
169
+ <div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">1</div>
170
+ <h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step1.title">Choose Installation Method</h2>
171
+ </div>
172
+
173
+ <!-- Installation method tabs -->
174
+ <div class="space-y-4">
175
+ <!-- npx method -->
176
+ <div class="border border-border rounded-lg overflow-hidden">
177
+ <button onclick="toggleInstall('npx')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
178
+ <div class="flex items-center gap-2">
179
+ <span class="text-lg">⚡</span>
180
+ <span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.npx.title">Use npx Directly</span>
181
+ <span class="bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded font-medium" data-i18n="gettingStarted.step1.npx.recommended">Recommended</span>
182
+ </div>
183
+ <svg class="w-5 h-5 text-text-tertiary transition-transform" id="npx-icon" style="transform: rotate(180deg);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
184
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
185
+ </svg>
186
+ </button>
187
+ <div id="npx-content" class="p-4 border-t border-border">
188
+ <p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.npx.description">No installation required, use the latest version directly:</p>
189
+ <div class="bg-slate-900 rounded-lg overflow-hidden">
190
+ <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
191
+ <span class="text-xs text-slate-300 font-medium">JSON</span>
192
+ <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors" data-i18n="gettingStarted.common.copy">Copy</button>
193
+ </div>
194
+ <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
195
+ "mcpServers": {
196
+ "mcp-probe-kit": {
197
+ "command": "npx",
198
+ "args": ["-y", "mcp-probe-kit@latest"]
199
+ }
200
+ }
201
+ }</code></pre>
202
+ </div>
203
+ <div class="mt-3 p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm text-text-primary">
204
+ <strong data-i18n="gettingStarted.step1.npx.advantage">Advantage:</strong><span data-i18n="gettingStarted.step1.npx.advantageText">No manual updates needed, automatically uses the latest version on each startup</span>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Global installation -->
210
+ <div class="border border-border rounded-lg overflow-hidden">
211
+ <button onclick="toggleInstall('global')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
212
+ <div class="flex items-center gap-2">
213
+ <span class="text-lg">📦</span>
214
+ <span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.global.title">Global Installation</span>
215
+ </div>
216
+ <svg class="w-5 h-5 text-text-tertiary transition-transform" id="global-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
217
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
218
+ </svg>
219
+ </button>
220
+ <div id="global-content" class="hidden p-4 border-t border-border">
221
+ <p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.global.description">Install globally to system:</p>
222
+ <div class="bg-slate-900 rounded-lg overflow-hidden">
223
+ <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
224
+ <span class="text-xs text-slate-300 font-medium">Bash</span>
225
+ <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors" data-i18n="gettingStarted.common.copy">Copy</button>
226
+ </div>
227
+ <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>npm install -g mcp-probe-kit</code></pre>
228
+ </div>
229
+ <p class="text-text-secondary mt-3 mb-2 text-sm" data-i18n="gettingStarted.step1.global.configFile">Configuration file:</p>
230
+ <div class="bg-slate-900 rounded-lg overflow-hidden">
231
+ <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
232
+ <span class="text-xs text-slate-300 font-medium">JSON</span>
233
+ <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors" data-i18n="gettingStarted.common.copy">Copy</button>
234
+ </div>
235
+ <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
236
+ "mcpServers": {
237
+ "mcp-probe-kit": {
238
+ "command": "mcp-probe-kit"
239
+ }
240
+ }
241
+ }</code></pre>
242
+ </div>
243
+ <div class="mt-3 p-3 bg-amber-50 border-l-3 border-amber-500 rounded-r text-sm text-text-primary">
244
+ <strong data-i18n="gettingStarted.step1.global.note">Note:</strong><span data-i18n="gettingStarted.step1.global.noteText">Need to manually run</span> <code class="bg-gray-200 px-1 rounded text-xs">npm update -g mcp-probe-kit</code> <span data-i18n="gettingStarted.step1.global.updateText">to update version</span>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="mt-5 p-4 bg-emerald-50 border-l-4 border-emerald-500 rounded-r text-sm text-text-primary">
250
+ <h3 class="font-semibold mb-2" data-i18n="gettingStarted.step1.memory.title">Memory System Setup (Qdrant + Embedding)</h3>
251
+ <p class="mb-3 text-text-secondary">
252
+ <span data-i18n="gettingStarted.step1.memory.descriptionPrefix">If you want to use</span>
253
+ <code class="bg-gray-200 px-1 rounded text-xs">memorize_asset</code>、
254
+ <code class="bg-gray-200 px-1 rounded text-xs">read_memory_asset</code>、
255
+ <code class="bg-gray-200 px-1 rounded text-xs">scan_and_extract_patterns</code>
256
+ <span data-i18n="gettingStarted.step1.memory.descriptionSuffix">, you need to configure both a vector database and an embedding service.</span>
257
+ </p>
258
+ <div class="space-y-3">
259
+ <div>
260
+ <p class="font-medium mb-2" data-i18n="gettingStarted.step1.memory.optionA.title">Option A: Qdrant + Ollama (recommended)</p>
261
+ <pre class="code-block mb-2 p-3 text-sm text-slate-200 bg-slate-900 rounded overflow-x-auto"><code>docker run -d --name mcp-qdrant -p 6333:6333 qdrant/qdrant
262
+ ollama pull nomic-embed-text</code></pre>
263
+ <pre class="code-block p-3 text-sm text-slate-200 bg-slate-900 rounded overflow-x-auto"><code>{
264
+ "mcpServers": {
265
+ "mcp-probe-kit": {
266
+ "command": "npx",
267
+ "args": ["-y", "mcp-probe-kit@latest"],
268
+ "env": {
269
+ "MEMORY_QDRANT_URL": "http://127.0.0.1:6333",
270
+ "MEMORY_QDRANT_COLLECTION": "mcp_probe_memory",
271
+ "MEMORY_EMBEDDING_PROVIDER": "ollama",
272
+ "MEMORY_EMBEDDING_URL": "http://127.0.0.1:11434/api/embeddings",
273
+ "MEMORY_EMBEDDING_MODEL": "nomic-embed-text",
274
+ "MEMORY_SEARCH_LIMIT": "3",
275
+ "MEMORY_SUMMARY_MAX_CHARS": "280"
276
+ }
277
+ }
278
+ }
279
+ }</code></pre>
280
+ </div>
281
+ <div>
282
+ <p class="font-medium mb-2" data-i18n="gettingStarted.step1.memory.optionB.title">Option B: Qdrant + OpenAI-Compatible Embedding API</p>
283
+ <pre class="code-block mb-2 p-3 text-sm text-slate-200 bg-slate-900 rounded overflow-x-auto"><code>docker run -d --name mcp-qdrant -p 6333:6333 qdrant/qdrant</code></pre>
284
+ <pre class="code-block p-3 text-sm text-slate-200 bg-slate-900 rounded overflow-x-auto"><code>{
285
+ "mcpServers": {
286
+ "mcp-probe-kit": {
287
+ "command": "npx",
288
+ "args": ["-y", "mcp-probe-kit@latest"],
289
+ "env": {
290
+ "MEMORY_QDRANT_URL": "http://127.0.0.1:6333",
291
+ "MEMORY_QDRANT_COLLECTION": "mcp_probe_memory",
292
+ "MEMORY_QDRANT_API_KEY": "",
293
+ "MEMORY_EMBEDDING_PROVIDER": "openai-compatible",
294
+ "MEMORY_EMBEDDING_URL": "https://your-embedding-endpoint/v1/embeddings",
295
+ "MEMORY_EMBEDDING_API_KEY": "your-api-key",
296
+ "MEMORY_EMBEDDING_MODEL": "text-embedding-3-small",
297
+ "MEMORY_SEARCH_LIMIT": "3",
298
+ "MEMORY_SUMMARY_MAX_CHARS": "280"
299
+ }
300
+ }
301
+ }
302
+ }</code></pre>
303
+ </div>
304
+ </div>
305
+ <div class="mt-3">
306
+ <p class="font-medium mb-1" data-i18n="gettingStarted.step1.memory.env.title">Environment Variables</p>
307
+ <ul class="list-disc list-inside space-y-1">
308
+ <li><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_QDRANT_URL</code><span data-i18n="gettingStarted.step1.memory.env.item1">: Qdrant endpoint, required by all memory features</span></li>
309
+ <li><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_QDRANT_API_KEY</code><span data-i18n="gettingStarted.step1.memory.env.item2">: Optional Qdrant API key</span></li>
310
+ <li><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_QDRANT_COLLECTION</code><span data-i18n="gettingStarted.step1.memory.env.item3">: Collection name, default </span><code class="bg-gray-200 px-1 rounded text-xs">mcp_probe_memory</code></li>
311
+ <li><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_EMBEDDING_PROVIDER</code><span data-i18n="gettingStarted.step1.memory.env.item4Prefix">: </span><code class="bg-gray-200 px-1 rounded text-xs">ollama</code><span data-i18n="gettingStarted.step1.memory.env.item4Middle"> or </span><code class="bg-gray-200 px-1 rounded text-xs">openai-compatible</code></li>
312
+ <li><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_EMBEDDING_URL</code><span data-i18n="gettingStarted.step1.memory.env.item5">: Embedding API endpoint</span></li>
313
+ <li><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_EMBEDDING_API_KEY</code><span data-i18n="gettingStarted.step1.memory.env.item6">: Embedding API key, usually empty for Ollama</span></li>
314
+ <li><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_EMBEDDING_MODEL</code><span data-i18n="gettingStarted.step1.memory.env.item7Prefix">: Embedding model name, default </span><code class="bg-gray-200 px-1 rounded text-xs">nomic-embed-text</code></li>
315
+ <li><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_SEARCH_LIMIT</code><span data-i18n="gettingStarted.step1.memory.env.item8Prefix">: Default search result limit, default </span><code class="bg-gray-200 px-1 rounded text-xs">3</code></li>
316
+ <li><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_SUMMARY_MAX_CHARS</code><span data-i18n="gettingStarted.step1.memory.env.item9Prefix">: Summary max characters, default </span><code class="bg-gray-200 px-1 rounded text-xs">280</code></li>
317
+ </ul>
318
+ </div>
319
+ <div class="mt-3">
320
+ <p class="font-medium mb-1" data-i18n="gettingStarted.step1.memory.behavior.title">Behavior Notes</p>
321
+ <ul class="list-disc list-inside space-y-1">
322
+ <li><span data-i18n="gettingStarted.step1.memory.behavior.item1Prefix">Memory writes require </span><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_QDRANT_URL</code>, <code class="bg-gray-200 px-1 rounded text-xs">MEMORY_EMBEDDING_URL</code><span data-i18n="gettingStarted.step1.memory.behavior.item1Middle"> and </span><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_EMBEDDING_MODEL</code></li>
323
+ <li><span data-i18n="gettingStarted.step1.memory.behavior.item2Prefix">Read-only memory access (such as read by ID) only requires </span><code class="bg-gray-200 px-1 rounded text-xs">MEMORY_QDRANT_URL</code></li>
324
+ <li><span data-i18n="gettingStarted.step1.memory.behavior.item3Prefix">The first write auto-creates the Qdrant collection and uses </span><code class="bg-gray-200 px-1 rounded text-xs">Cosine</code></li>
325
+ <li data-i18n="gettingStarted.step1.memory.behavior.item4">Vector dimension is inferred automatically from the first embedding response</li>
326
+ </ul>
327
+ </div>
328
+ <div class="mt-3">
329
+ <p class="font-medium mb-1" data-i18n="gettingStarted.step1.memory.cursor.title">Cursor History Tools</p>
330
+ <ul class="list-disc list-inside space-y-1">
331
+ <li><code class="bg-gray-200 px-1 rounded text-xs">cursor_list_conversations</code>, <code class="bg-gray-200 px-1 rounded text-xs">cursor_search_conversations</code>, <code class="bg-gray-200 px-1 rounded text-xs">cursor_read_conversation</code><span data-i18n="gettingStarted.step1.memory.cursor.item1"> do not depend on Qdrant or embeddings</span></li>
332
+ <li data-i18n="gettingStarted.step1.memory.cursor.item2">Supports local Cursor installations on Windows / macOS / Linux</li>
333
+ <li><span data-i18n="gettingStarted.step1.memory.cursor.item3Prefix">Reads the local Cursor database from </span><code class="bg-gray-200 px-1 rounded text-xs">User/globalStorage/state.vscdb</code></li>
334
+ </ul>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Source build -->
339
+ <div class="border border-border rounded-lg overflow-hidden">
340
+ <button onclick="toggleInstall('source')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
341
+ <div class="flex items-center gap-2">
342
+ <span class="text-lg">🔧</span>
343
+ <span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.source.title">Build from Source</span>
344
+ </div>
345
+ <svg class="w-5 h-5 text-text-tertiary transition-transform" id="source-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
346
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
347
+ </svg>
348
+ </button>
349
+ <div id="source-content" class="hidden p-4 border-t border-border">
350
+ <p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.source.description">Build from source code, suitable for developers:</p>
351
+
352
+ <div class="mb-4">
353
+ <p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step1">1. Clone repository</p>
354
+ <div class="bg-slate-900 rounded-lg overflow-hidden">
355
+ <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
356
+ <span class="text-xs text-slate-300 font-medium">Bash</span>
357
+ <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors" data-i18n="gettingStarted.common.copy">Copy</button>
358
+ </div>
359
+ <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>git clone https://github.com/mybolide/mcp-probe-kit.git
360
+ cd mcp-probe-kit</code></pre>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="mb-4">
365
+ <p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step2">2. Install dependencies and build</p>
366
+ <div class="bg-slate-900 rounded-lg overflow-hidden">
367
+ <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
368
+ <span class="text-xs text-slate-300 font-medium">Bash</span>
369
+ <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors" data-i18n="gettingStarted.common.copy">Copy</button>
370
+ </div>
371
+ <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>npm install
372
+ npm run build</code></pre>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="mb-4">
377
+ <p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step3">3. Configuration file</p>
378
+ <div class="bg-slate-900 rounded-lg overflow-hidden">
379
+ <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
380
+ <span class="text-xs text-slate-300 font-medium">JSON</span>
381
+ <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors" data-i18n="gettingStarted.common.copy">Copy</button>
382
+ </div>
383
+ <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
384
+ "mcpServers": {
385
+ "mcp-probe-kit": {
386
+ "command": "node",
387
+ "args": ["/path/to/mcp-probe-kit/build/index.js"]
388
+ }
389
+ }
390
+ }</code></pre>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm text-text-primary mb-2">
395
+ <strong data-i18n="gettingStarted.step1.source.tip">Tip:</strong><span data-i18n="gettingStarted.step1.source.tipText">Windows users should use full path, e.g.</span> <code class="bg-gray-200 px-1 rounded text-xs">D:/workspace/mcp-probe-kit/build/index.js</code>
396
+ </div>
397
+ <div class="p-3 bg-amber-50 border-l-3 border-amber-500 rounded-r text-sm text-text-primary">
398
+ <strong data-i18n="gettingStarted.step1.source.note">Note:</strong><span data-i18n="gettingStarted.step1.source.noteText">After modifying code, need to re-run</span> <code class="bg-gray-200 px-1 rounded text-xs">npm run build</code> <span data-i18n="gettingStarted.step1.source.compileText">to compile</span>
399
+ </div>
400
+ </div>
311
401
  </div>
312
402
 
313
403
  <div class="mt-5 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-r text-sm text-text-primary">
@@ -344,225 +434,225 @@ npm run build</code></pre>
344
434
  </div>
345
435
  </div>
346
436
  </section>
347
-
348
- <!-- Step 2: 配置文件位置 -->
349
- <section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
350
- <div class="flex items-start gap-3 mb-4">
351
- <div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">2</div>
352
- <h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step2.title">找到配置文件</h2>
353
- </div>
354
-
355
- <p class="text-text-secondary mb-4 text-sm" data-i18n="gettingStarted.step2.description">根据你使用的 MCP 客户端，找到对应的配置文件：</p>
356
-
357
- <!-- 客户端选择 -->
358
- <div class="space-y-3">
359
- <!-- Cursor / Cline -->
360
- <div class="border border-border rounded-lg overflow-hidden">
361
- <button onclick="toggleClient('cursor')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
362
- <div class="flex items-center gap-2">
363
- <span class="text-lg">📝</span>
364
- <span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.cursor.title">Cursor / Cline</span>
365
- </div>
366
- <svg class="w-5 h-5 text-text-tertiary transition-transform" id="cursor-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
367
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
368
- </svg>
369
- </button>
370
- <div id="cursor-content" class="hidden p-4 border-t border-border">
371
- <p class="text-text-secondary text-sm mb-3"><span data-i18n="gettingStarted.step2.cursor.description">在项目根目录创建或编辑</span> <code class="bg-gray-200 px-1 rounded text-xs">.cursor/mcp.json</code> 或 <code class="bg-gray-200 px-1 rounded text-xs">.cline/mcp.json</code></p>
372
- <div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm">
373
- <strong>💡 <span data-i18n="gettingStarted.step2.cursor.tip">提示：</span></strong><span data-i18n="gettingStarted.step2.cursor.tipText">Cursor 和 Cline 使用项目级配置，每个项目可以有独立的 MCP 服务器配置。</span>
374
- </div>
375
- </div>
376
- </div>
377
-
378
- <!-- Claude Desktop Windows -->
379
- <div class="border border-border rounded-lg overflow-hidden">
380
- <button onclick="toggleClient('claude-win')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
381
- <div class="flex items-center gap-2">
382
- <span class="text-lg">🪟</span>
383
- <span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.claudeWin.title">Claude Desktop (Windows)</span>
384
- </div>
385
- <svg class="w-5 h-5 text-text-tertiary transition-transform" id="claude-win-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
386
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
387
- </svg>
388
- </button>
389
- <div id="claude-win-content" class="hidden p-4 border-t border-border">
390
- <p class="text-text-secondary text-sm mb-2" data-i18n="gettingStarted.step2.claudeWin.path">配置文件路径：</p>
391
- <div class="bg-slate-900 rounded-lg overflow-hidden">
392
- <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
393
- <span class="text-xs text-slate-300 font-medium">Path</span>
394
- <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
395
- </div>
396
- <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>%APPDATA%\Claude\claude_desktop_config.json</code></pre>
397
- </div>
398
- <p class="text-text-secondary text-sm mt-2"><span data-i18n="gettingStarted.step2.claudeWin.example">示例：</span><code class="bg-gray-200 px-1 rounded text-xs">C:\Users\YourName\AppData\Roaming\Claude\claude_desktop_config.json</code></p>
399
- </div>
400
- </div>
401
-
402
- <!-- Claude Desktop macOS -->
403
- <div class="border border-border rounded-lg overflow-hidden">
404
- <button onclick="toggleClient('claude-mac')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
405
- <div class="flex items-center gap-2">
406
- <span class="text-lg">🍎</span>
407
- <span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.claudeMac.title">Claude Desktop (macOS)</span>
408
- </div>
409
- <svg class="w-5 h-5 text-text-tertiary transition-transform" id="claude-mac-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
410
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
411
- </svg>
412
- </button>
413
- <div id="claude-mac-content" class="hidden p-4 border-t border-border">
414
- <p class="text-text-secondary text-sm mb-2" data-i18n="gettingStarted.step2.claudeMac.path">配置文件路径：</p>
415
- <div class="bg-slate-900 rounded-lg overflow-hidden">
416
- <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
417
- <span class="text-xs text-slate-300 font-medium">Path</span>
418
- <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
419
- </div>
420
- <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>~/Library/Application Support/Claude/claude_desktop_config.json</code></pre>
421
- </div>
422
- </div>
423
- </div>
424
- </div>
425
- </section>
426
-
427
- <!-- Step 3: 验证安装 -->
428
- <section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
429
- <div class="flex items-start gap-3 mb-4">
430
- <div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">3</div>
431
- <h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step3.title">验证安装</h2>
432
- </div>
433
-
434
- <div class="pl-0 sm:pl-0">
435
- <p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step3.description">完成配置后，按以下步骤验证：</p>
436
- <ol class="list-decimal list-inside space-y-2 text-sm text-text-primary mb-4">
437
- <li data-i18n="gettingStarted.step3.step1">重启 MCP 客户端（Cursor / Cline / Claude Desktop）</li>
438
- <li data-i18n="gettingStarted.step3.step2">在聊天窗口中输入：<code class="bg-gray-200 px-1 rounded text-xs">请使用 gencommit 工具生成一个测试提交消息</code></li>
439
- <li data-i18n="gettingStarted.step3.step3">如果返回符合 Conventional Commits 规范的提交消息，说明安装成功！</li>
440
- </ol>
441
-
442
- <div class="p-3 bg-green-50 border-l-3 border-green-500 rounded-r text-sm text-text-primary mb-2">
443
- <strong>✅ <span data-i18n="gettingStarted.step3.success">成功示例：</span></strong><span data-i18n="gettingStarted.step3.successText">AI 返回类似</span> <code class="bg-gray-200 px-1 rounded text-xs" data-i18n="gettingStarted.step3.successCode">feat: 添加用户认证功能</code> <span data-i18n="gettingStarted.step3.successExample">的消息</span>
444
- </div>
445
- <div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm">
446
- <strong>❌ <span data-i18n="gettingStarted.step3.issues">常见问题：</span></strong>
447
- <ul class="list-disc list-inside mt-1 text-text-primary">
448
- <li data-i18n="gettingStarted.step3.issue1">提示找不到工具 → 检查配置文件格式</li>
449
- <li data-i18n="gettingStarted.step3.issue2">提示命令不存在 → 确认 Node.js 已安装</li>
450
- <li data-i18n="gettingStarted.step3.issue3">Windows 用户 → 确保使用 npx 方式</li>
451
- </ul>
452
- </div>
453
- </div>
454
- </section>
455
-
456
- <!-- Step 4: 委托式编排 -->
457
- <section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
458
- <div class="flex items-start gap-3 mb-4">
459
- <div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">4</div>
460
- <h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step4.title">委托式编排协议</h2>
461
- </div>
462
-
463
- <div class="pl-0 sm:pl-0 text-sm text-text-primary space-y-3">
464
- <p><code class="bg-gray-200 px-1 rounded text-xs">start_*</code> <span data-i18n="gettingStarted.step4.description">编排工具不会直接执行操作，而是返回一个可执行计划。</span></p>
465
- <p><strong data-i18n="gettingStarted.step4.keyFields">关键字段：</strong><code class="bg-gray-200 px-1 rounded text-xs">mode: "delegated"</code>、<code class="bg-gray-200 px-1 rounded text-xs">steps[]</code>、<code class="bg-gray-200 px-1 rounded text-xs">outputs[]</code></p>
466
-
467
- <div class="bg-slate-900 rounded-lg overflow-hidden">
468
- <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
469
- <span class="text-xs text-slate-300 font-medium" data-i18n="gettingStarted.step4.planExample">Plan 示例</span>
470
- </div>
471
- <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
472
- "mode": "delegated",
473
- "steps": [
474
- {
475
- "id": "spec",
476
- "tool": "add_feature",
477
- "args": { "feature_name": "user-auth" },
478
- "outputs": ["docs/specs/user-auth/requirements.md"]
479
- }
480
- ]
481
- }</code></pre>
482
- </div>
483
-
484
- <div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm">
485
- <strong>💡 <span data-i18n="gettingStarted.step4.tip">要点：</span></strong><span data-i18n="gettingStarted.step4.tipText">按顺序执行</span> <code class="bg-gray-200 px-1 rounded text-xs">steps</code><span data-i18n="gettingStarted.step4.tipText2">，并确保</span> <code class="bg-gray-200 px-1 rounded text-xs">outputs</code> <span data-i18n="gettingStarted.step4.tipText3">文件真实落盘</span>
486
- </div>
487
- </div>
488
- </section>
489
-
490
- <!-- 常见问题 -->
491
- <section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
492
- <h2 class="text-lg sm:text-xl font-semibold text-text-primary mb-4" data-i18n="gettingStarted.faq.title">⚠️ 常见问题</h2>
493
-
494
- <!-- 问题 1 -->
495
- <div class="border border-border rounded-lg overflow-hidden mb-4">
496
- <button onclick="toggleFaq('faq1')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
497
- <span class="font-medium text-text-primary" data-i18n="gettingStarted.faq.q1.title">问题 1：npx 缓存导致的模块解析错误</span>
498
- <svg class="w-5 h-5 text-text-tertiary transition-transform" id="faq1-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
499
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
500
- </svg>
501
- </button>
502
- <div id="faq1-content" class="hidden p-4 border-t border-border">
503
- <div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm text-text-primary mb-3">
504
- <strong data-i18n="gettingStarted.faq.q1.error">错误信息：</strong>
505
- <pre class="code-block mt-2 text-xs text-slate-200 bg-slate-900 p-2 rounded overflow-x-auto"><code>Error: Cannot find package 'yallist'</code></pre>
506
- </div>
507
- <p class="text-sm text-text-primary mb-2"><strong data-i18n="gettingStarted.faq.q1.solution">解决方案：</strong><span data-i18n="gettingStarted.faq.q1.solutionText">清理 npx 缓存</span></p>
508
- <div class="space-y-2">
509
- <div class="bg-slate-900 rounded-lg overflow-hidden">
510
- <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
511
- <span class="text-xs text-slate-300 font-medium">Windows CMD</span>
512
- <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋</button>
513
- </div>
514
- <pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>rmdir /s /q %LOCALAPPDATA%\npm-cache\_npx</code></pre>
515
- </div>
516
- <div class="bg-slate-900 rounded-lg overflow-hidden">
517
- <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
518
- <span class="text-xs text-slate-300 font-medium">macOS/Linux</span>
519
- <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋</button>
520
- </div>
521
- <pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>rm -rf ~/.npm/_npx</code></pre>
522
- </div>
523
- </div>
524
- <p class="text-sm text-text-secondary mt-2" data-i18n="gettingStarted.faq.q1.restart">然后重启 MCP 客户端</p>
525
- </div>
526
- </div>
527
-
528
- <!-- 问题 2 -->
437
+
438
+ <!-- Step 2: Configuration file locations -->
439
+ <section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
440
+ <div class="flex items-start gap-3 mb-4">
441
+ <div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">2</div>
442
+ <h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step2.title">Locate Configuration File</h2>
443
+ </div>
444
+
445
+ <p class="text-text-secondary mb-4 text-sm" data-i18n="gettingStarted.step2.description">Find the corresponding configuration file based on your MCP client:</p>
446
+
447
+ <!-- Client selection -->
448
+ <div class="space-y-3">
449
+ <!-- Cursor / Cline -->
450
+ <div class="border border-border rounded-lg overflow-hidden">
451
+ <button onclick="toggleClient('cursor')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
452
+ <div class="flex items-center gap-2">
453
+ <span class="text-lg">📝</span>
454
+ <span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.cursor.title">Cursor / Cline</span>
455
+ </div>
456
+ <svg class="w-5 h-5 text-text-tertiary transition-transform" id="cursor-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
457
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
458
+ </svg>
459
+ </button>
460
+ <div id="cursor-content" class="hidden p-4 border-t border-border">
461
+ <p class="text-text-secondary text-sm mb-3"><span data-i18n="gettingStarted.step2.cursor.description">Create or edit in project root directory</span> <code class="bg-gray-200 px-1 rounded text-xs">.cursor/mcp.json</code> or <code class="bg-gray-200 px-1 rounded text-xs">.cline/mcp.json</code></p>
462
+ <div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm">
463
+ <strong>💡 <span data-i18n="gettingStarted.step2.cursor.tip">Tip:</span></strong><span data-i18n="gettingStarted.step2.cursor.tipText">Cursor and Cline use project-level configuration, each project can have independent MCP server configuration.</span>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- Claude Desktop Windows -->
469
+ <div class="border border-border rounded-lg overflow-hidden">
470
+ <button onclick="toggleClient('claude-win')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
471
+ <div class="flex items-center gap-2">
472
+ <span class="text-lg">🪟</span>
473
+ <span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.claudeWin.title">Claude Desktop (Windows)</span>
474
+ </div>
475
+ <svg class="w-5 h-5 text-text-tertiary transition-transform" id="claude-win-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
476
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
477
+ </svg>
478
+ </button>
479
+ <div id="claude-win-content" class="hidden p-4 border-t border-border">
480
+ <p class="text-text-secondary text-sm mb-2" data-i18n="gettingStarted.step2.claudeWin.path">Configuration file path:</p>
481
+ <div class="bg-slate-900 rounded-lg overflow-hidden">
482
+ <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
483
+ <span class="text-xs text-slate-300 font-medium">Path</span>
484
+ <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors" data-i18n="gettingStarted.common.copy">Copy</button>
485
+ </div>
486
+ <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>%APPDATA%\Claude\claude_desktop_config.json</code></pre>
487
+ </div>
488
+ <p class="text-text-secondary text-sm mt-2"><span data-i18n="gettingStarted.step2.claudeWin.example">Example:</span><code class="bg-gray-200 px-1 rounded text-xs">C:\Users\YourName\AppData\Roaming\Claude\claude_desktop_config.json</code></p>
489
+ </div>
490
+ </div>
491
+
492
+ <!-- Claude Desktop macOS -->
493
+ <div class="border border-border rounded-lg overflow-hidden">
494
+ <button onclick="toggleClient('claude-mac')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
495
+ <div class="flex items-center gap-2">
496
+ <span class="text-lg">🍎</span>
497
+ <span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.claudeMac.title">Claude Desktop (macOS)</span>
498
+ </div>
499
+ <svg class="w-5 h-5 text-text-tertiary transition-transform" id="claude-mac-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
500
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
501
+ </svg>
502
+ </button>
503
+ <div id="claude-mac-content" class="hidden p-4 border-t border-border">
504
+ <p class="text-text-secondary text-sm mb-2" data-i18n="gettingStarted.step2.claudeMac.path">Configuration file path:</p>
505
+ <div class="bg-slate-900 rounded-lg overflow-hidden">
506
+ <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
507
+ <span class="text-xs text-slate-300 font-medium">Path</span>
508
+ <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors" data-i18n="gettingStarted.common.copy">Copy</button>
509
+ </div>
510
+ <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>~/Library/Application Support/Claude/claude_desktop_config.json</code></pre>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </section>
516
+
517
+ <!-- Step 3: Verify installation -->
518
+ <section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
519
+ <div class="flex items-start gap-3 mb-4">
520
+ <div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">3</div>
521
+ <h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step3.title">Verify Installation</h2>
522
+ </div>
523
+
524
+ <div class="pl-0 sm:pl-0">
525
+ <p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step3.description">After completing configuration, verify with the following steps:</p>
526
+ <ol class="list-decimal list-inside space-y-2 text-sm text-text-primary mb-4">
527
+ <li data-i18n="gettingStarted.step3.step1">Restart MCP client (Cursor / Cline / Claude Desktop)</li>
528
+ <li><span data-i18n="gettingStarted.step3.step2">Type in chat window:</span><code class="bg-gray-200 px-1 rounded text-xs" data-i18n="gettingStarted.step3.step2Command">Please use gencommit tool to generate a test commit message</code></li>
529
+ <li data-i18n="gettingStarted.step3.step3">If it returns a commit message following Conventional Commits specification, installation is successful!</li>
530
+ </ol>
531
+
532
+ <div class="p-3 bg-green-50 border-l-3 border-green-500 rounded-r text-sm text-text-primary mb-2">
533
+ <strong>✅ <span data-i18n="gettingStarted.step3.success">Success example:</span></strong><span data-i18n="gettingStarted.step3.successText">AI returns something like</span> <code class="bg-gray-200 px-1 rounded text-xs" data-i18n="gettingStarted.step3.successCode">feat: add user authentication</code> <span data-i18n="gettingStarted.step3.successExample">message</span>
534
+ </div>
535
+ <div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm">
536
+ <strong>❌ <span data-i18n="gettingStarted.step3.issues">Common issues:</span></strong>
537
+ <ul class="list-disc list-inside mt-1 text-text-primary">
538
+ <li data-i18n="gettingStarted.step3.issue1">"Tool not found" → Check configuration file format</li>
539
+ <li data-i18n="gettingStarted.step3.issue2">"Command not found" → Confirm Node.js is installed</li>
540
+ <li data-i18n="gettingStarted.step3.issue3">Windows users → Ensure using npx method</li>
541
+ </ul>
542
+ </div>
543
+ </div>
544
+ </section>
545
+
546
+ <!-- Step 4: Delegated orchestration -->
547
+ <section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
548
+ <div class="flex items-start gap-3 mb-4">
549
+ <div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">4</div>
550
+ <h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step4.title">Delegated Orchestration Protocol</h2>
551
+ </div>
552
+
553
+ <div class="pl-0 sm:pl-0 text-sm text-text-primary space-y-3">
554
+ <p><code class="bg-gray-200 px-1 rounded text-xs">start_*</code> <span data-i18n="gettingStarted.step4.description">orchestration tools do not execute operations directly, but return an executable plan.</span></p>
555
+ <p><strong data-i18n="gettingStarted.step4.keyFields">Key fields:</strong><code class="bg-gray-200 px-1 rounded text-xs">mode: "delegated"</code>, <code class="bg-gray-200 px-1 rounded text-xs">steps[]</code>, <code class="bg-gray-200 px-1 rounded text-xs">outputs[]</code></p>
556
+
557
+ <div class="bg-slate-900 rounded-lg overflow-hidden">
558
+ <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
559
+ <span class="text-xs text-slate-300 font-medium" data-i18n="gettingStarted.step4.planExample">Plan Example</span>
560
+ </div>
561
+ <pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
562
+ "mode": "delegated",
563
+ "steps": [
564
+ {
565
+ "id": "spec",
566
+ "tool": "add_feature",
567
+ "args": { "feature_name": "user-auth" },
568
+ "outputs": ["docs/specs/user-auth/requirements.md"]
569
+ }
570
+ ]
571
+ }</code></pre>
572
+ </div>
573
+
574
+ <div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm">
575
+ <strong>💡 <span data-i18n="gettingStarted.step4.tip">Key point:</span></strong><span data-i18n="gettingStarted.step4.tipText">Execute</span> <code class="bg-gray-200 px-1 rounded text-xs">steps</code><span data-i18n="gettingStarted.step4.tipText2">in order, and ensure</span> <code class="bg-gray-200 px-1 rounded text-xs">outputs</code> <span data-i18n="gettingStarted.step4.tipText3">files are actually written to disk</span>
576
+ </div>
577
+ </div>
578
+ </section>
579
+
580
+ <!-- Common issues -->
581
+ <section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
582
+ <h2 class="text-lg sm:text-xl font-semibold text-text-primary mb-4" data-i18n="gettingStarted.faq.title">⚠️ Common Issues</h2>
583
+
584
+ <!-- Issue 1 -->
585
+ <div class="border border-border rounded-lg overflow-hidden mb-4">
586
+ <button onclick="toggleFaq('faq1')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
587
+ <span class="font-medium text-text-primary" data-i18n="gettingStarted.faq.q1.title">Issue 1: Module resolution error caused by npx cache</span>
588
+ <svg class="w-5 h-5 text-text-tertiary transition-transform" id="faq1-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
589
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
590
+ </svg>
591
+ </button>
592
+ <div id="faq1-content" class="hidden p-4 border-t border-border">
593
+ <div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm text-text-primary mb-3">
594
+ <strong data-i18n="gettingStarted.faq.q1.error">Error message:</strong>
595
+ <pre class="code-block mt-2 text-xs text-slate-200 bg-slate-900 p-2 rounded overflow-x-auto"><code>Error: Cannot find package 'yallist'</code></pre>
596
+ </div>
597
+ <p class="text-sm text-text-primary mb-2"><strong data-i18n="gettingStarted.faq.q1.solution">Solution:</strong><span data-i18n="gettingStarted.faq.q1.solutionText">Clear npx cache</span></p>
598
+ <div class="space-y-2">
599
+ <div class="bg-slate-900 rounded-lg overflow-hidden">
600
+ <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
601
+ <span class="text-xs text-slate-300 font-medium">Windows CMD</span>
602
+ <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋</button>
603
+ </div>
604
+ <pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>rmdir /s /q %LOCALAPPDATA%\npm-cache\_npx</code></pre>
605
+ </div>
606
+ <div class="bg-slate-900 rounded-lg overflow-hidden">
607
+ <div class="flex items-center justify-between px-3 py-2 bg-slate-800">
608
+ <span class="text-xs text-slate-300 font-medium">macOS/Linux</span>
609
+ <button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋</button>
610
+ </div>
611
+ <pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>rm -rf ~/.npm/_npx</code></pre>
612
+ </div>
613
+ </div>
614
+ <p class="text-sm text-text-secondary mt-2" data-i18n="gettingStarted.faq.q1.restart">Then restart MCP client</p>
615
+ </div>
616
+ </div>
617
+
618
+ <!-- Issue 2 -->
529
619
  <div class="border border-border rounded-lg overflow-hidden">
530
620
  <button onclick="toggleFaq('faq2')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
531
- <span class="font-medium text-text-primary" data-i18n="gettingStarted.faq.q2.title">问题 2：MCP 服务器连接失败</span>
532
- <svg class="w-5 h-5 text-text-tertiary transition-transform" id="faq2-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
533
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
534
- </svg>
535
- </button>
536
- <div id="faq2-content" class="hidden p-4 border-t border-border">
537
- <div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm text-text-primary mb-3">
538
- <strong data-i18n="gettingStarted.faq.q2.possibleReasons">可能原因：</strong>
539
- <ul class="list-disc list-inside mt-1">
540
- <li data-i18n="gettingStarted.faq.q2.reason1">Node.js 版本过低（需要 >= 16.0.0）</li>
541
- <li data-i18n="gettingStarted.faq.q2.reason2">依赖未安装或损坏</li>
542
- <li data-i18n="gettingStarted.faq.q2.reason3">配置文件格式错误</li>
543
- </ul>
544
- </div>
545
- <p class="text-sm text-text-primary mb-2"><strong data-i18n="gettingStarted.faq.q2.solution">解决方案：</strong></p>
546
- <ol class="list-decimal list-inside space-y-2 text-sm text-text-primary">
547
- <li><span data-i18n="gettingStarted.faq.q2.step1">检查 Node.js 版本：</span>
548
- <div class="bg-slate-900 rounded-lg overflow-hidden mt-1">
549
- <pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>node --version</code></pre>
550
- </div>
551
- </li>
552
- <li data-i18n="gettingStarted.faq.q2.step2">如果低于 v16，请升级 Node.js</li>
553
- <li><span data-i18n="gettingStarted.faq.q2.step3">清理缓存并重新安装：</span>
554
- <div class="bg-slate-900 rounded-lg overflow-hidden mt-1">
555
- <pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>npm cache clean --force</code></pre>
556
- </div>
557
- </li>
558
- <li data-i18n="gettingStarted.faq.q2.step4">检查配置文件 JSON 格式是否正确</li>
621
+ <span class="font-medium text-text-primary" data-i18n="gettingStarted.faq.q2.title">Issue 2: MCP server connection failed</span>
622
+ <svg class="w-5 h-5 text-text-tertiary transition-transform" id="faq2-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
623
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
624
+ </svg>
625
+ </button>
626
+ <div id="faq2-content" class="hidden p-4 border-t border-border">
627
+ <div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm text-text-primary mb-3">
628
+ <strong data-i18n="gettingStarted.faq.q2.possibleReasons">Possible reasons:</strong>
629
+ <ul class="list-disc list-inside mt-1">
630
+ <li data-i18n="gettingStarted.faq.q2.reason1">Node.js version too low (requires >= 16.0.0)</li>
631
+ <li data-i18n="gettingStarted.faq.q2.reason2">Dependencies not installed or corrupted</li>
632
+ <li data-i18n="gettingStarted.faq.q2.reason3">Configuration file format error</li>
633
+ </ul>
634
+ </div>
635
+ <p class="text-sm text-text-primary mb-2"><strong data-i18n="gettingStarted.faq.q2.solution">Solution:</strong></p>
636
+ <ol class="list-decimal list-inside space-y-2 text-sm text-text-primary">
637
+ <li><span data-i18n="gettingStarted.faq.q2.step1">Check Node.js version:</span>
638
+ <div class="bg-slate-900 rounded-lg overflow-hidden mt-1">
639
+ <pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>node --version</code></pre>
640
+ </div>
641
+ </li>
642
+ <li data-i18n="gettingStarted.faq.q2.step2">If below v16, please upgrade Node.js</li>
643
+ <li><span data-i18n="gettingStarted.faq.q2.step3">Clear cache and reinstall:</span>
644
+ <div class="bg-slate-900 rounded-lg overflow-hidden mt-1">
645
+ <pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>npm cache clean --force</code></pre>
646
+ </div>
647
+ </li>
648
+ <li data-i18n="gettingStarted.faq.q2.step4">Check if configuration file JSON format is correct</li>
559
649
  </ol>
560
650
  </div>
561
651
  </div>
562
652
 
563
653
  <div class="border border-border rounded-lg overflow-hidden mt-4">
564
654
  <button onclick="toggleFaq('faq3')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
565
- <span class="font-medium text-text-primary" data-i18n="gettingStarted.faq.q3.title">问题 3：Windows 下图谱工具首次启动很慢或超时</span>
655
+ <span class="font-medium text-text-primary" data-i18n="gettingStarted.faq.q3.title">Issue 3: Graph-aware tools are slow or time out on first run on Windows</span>
566
656
  <svg class="w-5 h-5 text-text-tertiary transition-transform" id="faq3-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
567
657
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
568
658
  </svg>
@@ -591,64 +681,65 @@ gyp ERR! find VS - missing any VC++ toolset</code></pre>
591
681
  </div>
592
682
  </div>
593
683
  </section>
594
-
595
- <!-- Footer -->
596
- <footer class="text-center text-sm text-text-tertiary py-4 border-t border-border">
597
- <p>Made with ❤️ by <a href="https://www.bytezonex.com/" target="_blank" rel="noopener" class="text-primary hover:underline">小墨 (Kyle)</a></p>
598
- <p class="mt-1">© 2024-2026 MCP Probe Kit · <a href="https://github.com/mybolide/mcp-probe-kit" target="_blank" rel="noopener" class="text-primary hover:underline">GitHub ↗</a></p>
599
- </footer>
600
- </div>
601
- </main>
602
-
603
- <script>
604
- // 侧边栏切换
605
- function toggleSidebar() {
606
- const sidebar = document.getElementById('sidebar');
607
- const backdrop = document.getElementById('backdrop');
608
- const isOpen = sidebar.classList.contains('open');
609
- if (isOpen) {
610
- sidebar.classList.remove('open');
611
- backdrop.classList.remove('active');
612
- } else {
613
- sidebar.classList.add('open');
614
- backdrop.classList.add('active');
615
- }
616
- }
617
-
618
- // 安装方式折叠
619
- function toggleInstall(type) {
620
- const content = document.getElementById(type + '-content');
621
- const icon = document.getElementById(type + '-icon');
622
- content.classList.toggle('hidden');
623
- icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
624
- }
625
-
626
- // 客户端折叠
627
- function toggleClient(type) {
628
- const content = document.getElementById(type + '-content');
629
- const icon = document.getElementById(type + '-icon');
630
- content.classList.toggle('hidden');
631
- icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
632
- }
633
-
634
- // FAQ 折叠
635
- function toggleFaq(id) {
636
- const content = document.getElementById(id + '-content');
637
- const icon = document.getElementById(id + '-icon');
638
- content.classList.toggle('hidden');
639
- icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
640
- }
641
-
642
- // 复制代码
643
- function copyCode(btn) {
644
- const code = btn.closest('.bg-slate-900').querySelector('code');
645
- navigator.clipboard.writeText(code.textContent).then(() => {
646
- const originalText = btn.textContent;
647
- btn.textContent = '✅ 已复制';
648
- setTimeout(() => btn.textContent = originalText, 2000);
649
- });
650
- }
651
- </script>
652
- <script src="../assets/js/i18n.js"></script>
653
- </body>
654
- </html>
684
+
685
+ <!-- Footer -->
686
+ <footer class="text-center text-sm text-text-tertiary py-4 border-t border-border">
687
+ <p>Made with ❤️ by <a href="https://www.bytezonex.com/" target="_blank" rel="noopener" class="text-primary hover:underline">Kyle</a></p>
688
+ <p class="mt-1">© 2024-2026 MCP Probe Kit · <a href="https://github.com/mybolide/mcp-probe-kit" target="_blank" rel="noopener" class="text-primary hover:underline">GitHub ↗</a></p>
689
+ </footer>
690
+ </div>
691
+ </main>
692
+
693
+ <script>
694
+ // Sidebar toggle
695
+ function toggleSidebar() {
696
+ const sidebar = document.getElementById('sidebar');
697
+ const backdrop = document.getElementById('backdrop');
698
+ const isOpen = sidebar.classList.contains('open');
699
+ if (isOpen) {
700
+ sidebar.classList.remove('open');
701
+ backdrop.classList.remove('active');
702
+ } else {
703
+ sidebar.classList.add('open');
704
+ backdrop.classList.add('active');
705
+ }
706
+ }
707
+
708
+ // Installation accordion
709
+ function toggleInstall(type) {
710
+ const content = document.getElementById(type + '-content');
711
+ const icon = document.getElementById(type + '-icon');
712
+ content.classList.toggle('hidden');
713
+ icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
714
+ }
715
+
716
+ // Client accordion
717
+ function toggleClient(type) {
718
+ const content = document.getElementById(type + '-content');
719
+ const icon = document.getElementById(type + '-icon');
720
+ content.classList.toggle('hidden');
721
+ icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
722
+ }
723
+
724
+ // FAQ accordion
725
+ function toggleFaq(id) {
726
+ const content = document.getElementById(id + '-content');
727
+ const icon = document.getElementById(id + '-icon');
728
+ content.classList.toggle('hidden');
729
+ icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
730
+ }
731
+
732
+ // Copy code block
733
+ function copyCode(btn) {
734
+ const code = btn.closest('.bg-slate-900').querySelector('code');
735
+ navigator.clipboard.writeText(code.textContent).then(() => {
736
+ const originalText = btn.textContent;
737
+ const copiedText = typeof t === 'function' ? t('gettingStarted.common.copied') : 'Copied';
738
+ btn.textContent = copiedText;
739
+ setTimeout(() => btn.textContent = originalText, 2000);
740
+ });
741
+ }
742
+ </script>
743
+ <script src="../assets/js/i18n.js"></script>
744
+ </body>
745
+ </html>