@nestr/mcp 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/web/index.html ADDED
@@ -0,0 +1,595 @@
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>Nestr MCP Server - Connect AI to Your Workspace</title>
7
+ <meta name="description" content="Connect Claude, Cursor, Raycast, and other AI assistants to your Nestr workspace using the Model Context Protocol (MCP).">
8
+ <link rel="stylesheet" href="styles.css">
9
+ <link rel="icon" href="https://app.nestr.io/favicon.ico">
10
+ </head>
11
+ <body>
12
+ <header>
13
+ <div class="container">
14
+ <div class="logo">
15
+ <svg width="32" height="32" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
16
+ <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="6"/>
17
+ <circle cx="50" cy="50" r="25" fill="currentColor"/>
18
+ </svg>
19
+ <span>Nestr MCP</span>
20
+ </div>
21
+ <nav>
22
+ <a href="https://app.nestr.io" target="_blank">Open Nestr</a>
23
+ <a href="https://help.nestr.io" target="_blank">Help</a>
24
+ <a href="https://github.com/nestr-dev/nestr-mcp" target="_blank">GitHub</a>
25
+ </nav>
26
+ </div>
27
+ </header>
28
+
29
+ <main>
30
+ <section class="hero">
31
+ <div class="container">
32
+ <h1>Connect AI to Your Nestr Workspace</h1>
33
+ <p class="subtitle">
34
+ Use the Model Context Protocol (MCP) to let Claude, Cursor, Raycast, and other AI assistants
35
+ interact with your tasks, projects, circles, and roles.
36
+ </p>
37
+ <div class="cta-buttons">
38
+ <a href="#setup" class="btn primary">Get Started</a>
39
+ <a href="#examples" class="btn secondary">See Examples</a>
40
+ </div>
41
+ </div>
42
+ </section>
43
+
44
+ <section class="features">
45
+ <div class="container">
46
+ <div class="feature-grid">
47
+ <div class="feature">
48
+ <div class="feature-icon">&#128269;</div>
49
+ <h3>Search & Navigate</h3>
50
+ <p>Find tasks, projects, and roles using natural language queries across your workspace.</p>
51
+ </div>
52
+ <div class="feature">
53
+ <div class="feature-icon">&#10003;</div>
54
+ <h3>Manage Tasks</h3>
55
+ <p>Create, update, and organize nests without leaving your AI assistant.</p>
56
+ </div>
57
+ <div class="feature">
58
+ <div class="feature-icon">&#128101;</div>
59
+ <h3>Understand Structure</h3>
60
+ <p>Explore circles, roles, and accountabilities to know who's responsible for what.</p>
61
+ </div>
62
+ <div class="feature">
63
+ <div class="feature-icon">&#128200;</div>
64
+ <h3>Track Metrics</h3>
65
+ <p>Get insights on workspace activity, completion rates, and team performance.</p>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </section>
70
+
71
+ <section id="setup" class="setup">
72
+ <div class="container">
73
+ <h2>Setup Guide</h2>
74
+
75
+ <div class="step">
76
+ <div class="step-number">1</div>
77
+ <div class="step-content">
78
+ <h3>Choose Your Authentication Method</h3>
79
+
80
+ <div class="auth-options">
81
+ <button class="auth-option active" data-auth="oauth">
82
+ <div class="option-header">
83
+ <h4>OAuth</h4>
84
+ <span class="option-badge">Recommended</span>
85
+ </div>
86
+ <p>Respects your user-specific permissions. You'll only access nests you have permission to.</p>
87
+ <ul class="option-pros">
88
+ <li>Per-user permissions</li>
89
+ <li>Secure token-based auth</li>
90
+ <li>MCP clients auto-discover endpoints</li>
91
+ </ul>
92
+ </button>
93
+
94
+ <button class="auth-option" data-auth="apikey">
95
+ <div class="option-header">
96
+ <h4>API Key</h4>
97
+ </div>
98
+ <p>Full workspace access, useful for automation or when OAuth isn't supported.</p>
99
+ <ul class="option-pros">
100
+ <li>Simple to set up</li>
101
+ <li>Works everywhere</li>
102
+ <li>Good for automation</li>
103
+ </ul>
104
+ </button>
105
+ </div>
106
+
107
+ <div class="auth-details">
108
+ <div class="auth-detail active" id="auth-detail-oauth">
109
+ <div class="oauth-login-section">
110
+ <a href="/oauth/authorize" class="btn primary oauth-btn">Login with Nestr</a>
111
+ <p class="oauth-hint">Click to authenticate and get your OAuth token</p>
112
+ </div>
113
+ <p>MCP clients that support OAuth will automatically discover the authorization endpoints and guide you through the login flow.</p>
114
+ </div>
115
+
116
+ <div class="auth-detail" id="auth-detail-apikey">
117
+ <p>To get an API key:</p>
118
+ <ol>
119
+ <li>Go to your <a href="https://app.nestr.io" target="_blank">Nestr workspace</a></li>
120
+ <li>Click the <strong>Settings</strong> icon (gear) in the top right</li>
121
+ <li>Navigate to the <strong>Integrations</strong> tab</li>
122
+ <li>Find <strong>"Workspace API access"</strong> and click <strong>Configure</strong></li>
123
+ <li>Click <strong>"New API key"</strong> and copy the generated key</li>
124
+ </ol>
125
+ <div class="warning">
126
+ <strong>Note:</strong> API keys have full workspace access regardless of user permissions.
127
+ Store securely and never commit to version control.
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="step">
135
+ <div class="step-number">2</div>
136
+ <div class="step-content">
137
+ <h3>Choose Your Setup Method</h3>
138
+
139
+ <div class="setup-options">
140
+ <button class="setup-option active" data-method="hosted">
141
+ <div class="option-header">
142
+ <h4>Cloud</h4>
143
+ </div>
144
+ <p>Connect directly to Nestr's MCP server. No installation required. Just add your API key.</p>
145
+ <ul class="option-pros">
146
+ <li>Zero setup, works immediately</li>
147
+ <li>Always up to date</li>
148
+ <li>No Node.js required</li>
149
+ </ul>
150
+ </button>
151
+
152
+ <button class="setup-option" data-method="local">
153
+ <div class="option-header">
154
+ <h4>Local</h4>
155
+ </div>
156
+ <p>Run the MCP server on your machine via npm. Best for developers or offline use.</p>
157
+ <ul class="option-pros">
158
+ <li>Works offline</li>
159
+ <li>Full control over the server</li>
160
+ <li>Can pin to specific versions</li>
161
+ </ul>
162
+ </button>
163
+ </div>
164
+
165
+ </div>
166
+ </div>
167
+
168
+ <div class="step">
169
+ <div class="step-number">3</div>
170
+ <div class="step-content">
171
+ <h3>Configure Your AI Client</h3>
172
+
173
+ <div class="tabs">
174
+ <button class="tab active" data-tab="claude-desktop">Claude Desktop</button>
175
+ <button class="tab" data-tab="claude-code">Claude Code</button>
176
+ <button class="tab" data-tab="cursor">Cursor</button>
177
+ <button class="tab" data-tab="raycast">Raycast</button>
178
+ </div>
179
+
180
+ <div class="tab-content active" id="claude-desktop">
181
+ <p>Edit your Claude Desktop configuration file:</p>
182
+ <ul>
183
+ <li><strong>macOS:</strong> <code>~/Library/Application Support/Claude/claude_desktop_config.json</code></li>
184
+ <li><strong>Windows:</strong> <code>%APPDATA%\Claude\claude_desktop_config.json</code></li>
185
+ </ul>
186
+ <p>Add the following configuration:</p>
187
+
188
+ <pre class="config-block hosted oauth active"><code>{
189
+ "mcpServers": {
190
+ "nestr": {
191
+ "url": "https://mcp.nestr.io/mcp",
192
+ "headers": {
193
+ "Authorization": "Bearer your-oauth-token-here"
194
+ }
195
+ }
196
+ }
197
+ }</code></pre>
198
+
199
+ <pre class="config-block hosted apikey"><code>{
200
+ "mcpServers": {
201
+ "nestr": {
202
+ "url": "https://mcp.nestr.io/mcp",
203
+ "headers": {
204
+ "X-Nestr-API-Key": "your-api-key-here"
205
+ }
206
+ }
207
+ }
208
+ }</code></pre>
209
+
210
+ <pre class="config-block local oauth"><code>{
211
+ "mcpServers": {
212
+ "nestr": {
213
+ "command": "npx",
214
+ "args": ["-y", "@nestr/mcp"],
215
+ "env": {
216
+ "NESTR_OAUTH_TOKEN": "your-oauth-token-here"
217
+ }
218
+ }
219
+ }
220
+ }</code></pre>
221
+
222
+ <pre class="config-block local apikey"><code>{
223
+ "mcpServers": {
224
+ "nestr": {
225
+ "command": "npx",
226
+ "args": ["-y", "@nestr/mcp"],
227
+ "env": {
228
+ "NESTR_API_KEY": "your-api-key-here"
229
+ }
230
+ }
231
+ }
232
+ }</code></pre>
233
+ <p>Restart Claude Desktop after saving.</p>
234
+ </div>
235
+
236
+ <div class="tab-content" id="claude-code">
237
+ <div class="config-block hosted oauth active">
238
+ <div class="quickstart-box">
239
+ <h4>Quickstart (Recommended)</h4>
240
+ <p>Claude Code supports automatic OAuth authentication. Just run:</p>
241
+ <pre><code>claude mcp add nestr --transport http https://mcp.nestr.io/mcp</code></pre>
242
+ <p class="quickstart-note">Claude Code will automatically open your browser to authenticate with Nestr. No token setup required!</p>
243
+ </div>
244
+ <p>Or, if you already have a token, add it manually:</p>
245
+ <pre><code>claude mcp add nestr --transport http https://mcp.nestr.io/mcp \
246
+ --header "Authorization: Bearer your-oauth-token-here"</code></pre>
247
+ </div>
248
+
249
+ <div class="config-block hosted apikey">
250
+ <p>Run this command in your terminal:</p>
251
+ <pre><code>claude mcp add nestr --transport http https://mcp.nestr.io/mcp \
252
+ --header "X-Nestr-API-Key: your-api-key-here"</code></pre>
253
+ </div>
254
+
255
+ <div class="config-block local oauth">
256
+ <p>Run this command in your terminal:</p>
257
+ <pre><code>claude mcp add nestr -- npx -y @nestr/mcp \
258
+ --env NESTR_OAUTH_TOKEN=your-oauth-token-here</code></pre>
259
+ </div>
260
+
261
+ <div class="config-block local apikey">
262
+ <p>Run this command in your terminal:</p>
263
+ <pre><code>claude mcp add nestr -- npx -y @nestr/mcp \
264
+ --env NESTR_API_KEY=your-api-key-here</code></pre>
265
+ </div>
266
+
267
+ <p>After adding, run <code>/mcp</code> in Claude Code to verify the connection.</p>
268
+ </div>
269
+
270
+ <div class="tab-content" id="cursor">
271
+ <p>In Cursor, go to <strong>Settings &rarr; Cursor Settings &rarr; MCP Servers</strong>, or edit the config file:</p>
272
+ <ul>
273
+ <li><strong>macOS/Linux:</strong> <code>~/.cursor/mcp.json</code></li>
274
+ <li><strong>Windows:</strong> <code>%USERPROFILE%\.cursor\mcp.json</code></li>
275
+ </ul>
276
+ <p>Add the following configuration:</p>
277
+
278
+ <pre class="config-block hosted oauth active"><code>{
279
+ "mcpServers": {
280
+ "nestr": {
281
+ "url": "https://mcp.nestr.io/mcp",
282
+ "headers": {
283
+ "Authorization": "Bearer your-oauth-token-here"
284
+ }
285
+ }
286
+ }
287
+ }</code></pre>
288
+
289
+ <pre class="config-block hosted apikey"><code>{
290
+ "mcpServers": {
291
+ "nestr": {
292
+ "url": "https://mcp.nestr.io/mcp",
293
+ "headers": {
294
+ "X-Nestr-API-Key": "your-api-key-here"
295
+ }
296
+ }
297
+ }
298
+ }</code></pre>
299
+
300
+ <pre class="config-block local oauth"><code>{
301
+ "mcpServers": {
302
+ "nestr": {
303
+ "command": "npx",
304
+ "args": ["-y", "@nestr/mcp"],
305
+ "env": {
306
+ "NESTR_OAUTH_TOKEN": "your-oauth-token-here"
307
+ }
308
+ }
309
+ }
310
+ }</code></pre>
311
+
312
+ <pre class="config-block local apikey"><code>{
313
+ "mcpServers": {
314
+ "nestr": {
315
+ "command": "npx",
316
+ "args": ["-y", "@nestr/mcp"],
317
+ "env": {
318
+ "NESTR_API_KEY": "your-api-key-here"
319
+ }
320
+ }
321
+ }
322
+ }</code></pre>
323
+ <p>Restart Cursor after saving.</p>
324
+ </div>
325
+
326
+ <div class="tab-content" id="raycast">
327
+ <p>In Raycast, go to <strong>Settings &rarr; Extensions &rarr; AI &rarr; MCP Servers</strong>, then press <kbd>&#8984;N</kbd> to add a new server.</p>
328
+
329
+ <div class="config-block hosted oauth active">
330
+ <p>Fill in the following fields:</p>
331
+ <table class="field-table">
332
+ <tr><td><strong>Name</strong></td><td><code>Nestr</code></td></tr>
333
+ <tr><td><strong>Transport</strong></td><td>HTTP</td></tr>
334
+ <tr><td><strong>URL</strong></td><td><code>https://mcp.nestr.io/mcp</code></td></tr>
335
+ <tr><td><strong>HTTP Headers</strong></td><td>Click "Add Item" and add:<br><code>Authorization</code> = <code>Bearer your-oauth-token</code></td></tr>
336
+ </table>
337
+ </div>
338
+
339
+ <div class="config-block hosted apikey">
340
+ <p>Fill in the following fields:</p>
341
+ <table class="field-table">
342
+ <tr><td><strong>Name</strong></td><td><code>Nestr</code></td></tr>
343
+ <tr><td><strong>Transport</strong></td><td>HTTP</td></tr>
344
+ <tr><td><strong>URL</strong></td><td><code>https://mcp.nestr.io/mcp</code></td></tr>
345
+ <tr><td><strong>HTTP Headers</strong></td><td>Click "Add Item" and add:<br><code>X-Nestr-API-Key</code> = <code>your-api-key</code></td></tr>
346
+ </table>
347
+ </div>
348
+
349
+ <div class="config-block local oauth">
350
+ <p>Fill in the following fields:</p>
351
+ <table class="field-table">
352
+ <tr><td><strong>Name</strong></td><td><code>Nestr</code></td></tr>
353
+ <tr><td><strong>Transport</strong></td><td>Standard Input/Output</td></tr>
354
+ <tr><td><strong>Command</strong></td><td><code>npx</code></td></tr>
355
+ <tr><td><strong>Arguments</strong></td><td><code>-y @nestr/mcp</code></td></tr>
356
+ <tr><td><strong>Environment</strong></td><td>Click "Add Item" and add:<br><code>NESTR_OAUTH_TOKEN</code> = <code>your-oauth-token</code></td></tr>
357
+ </table>
358
+ </div>
359
+
360
+ <div class="config-block local apikey">
361
+ <p>Fill in the following fields:</p>
362
+ <table class="field-table">
363
+ <tr><td><strong>Name</strong></td><td><code>Nestr</code></td></tr>
364
+ <tr><td><strong>Transport</strong></td><td>Standard Input/Output</td></tr>
365
+ <tr><td><strong>Command</strong></td><td><code>npx</code></td></tr>
366
+ <tr><td><strong>Arguments</strong></td><td><code>-y @nestr/mcp</code></td></tr>
367
+ <tr><td><strong>Environment</strong></td><td>Click "Add Item" and add:<br><code>NESTR_API_KEY</code> = <code>your-api-key</code></td></tr>
368
+ </table>
369
+ </div>
370
+
371
+ <p>Save the server and it will be available in Raycast AI.</p>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="step">
377
+ <div class="step-number">4</div>
378
+ <div class="step-content">
379
+ <h3>Start Using It</h3>
380
+ <p>Once configured, the Nestr tools are automatically available to your AI assistant. No special syntax or @ mentions needed &mdash; just ask naturally:</p>
381
+ <ul class="example-queries">
382
+ <li>"What workspaces do I have access to?"</li>
383
+ <li>"Search for tasks related to marketing"</li>
384
+ <li>"Create a new project called 'Q1 Planning' in the Strategy circle"</li>
385
+ <li>"What are my current projects and their status?"</li>
386
+ <li>"Who is responsible for customer support?"</li>
387
+ </ul>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </section>
392
+
393
+ <section id="examples" class="examples">
394
+ <div class="container">
395
+ <h2>Example Conversations</h2>
396
+
397
+ <div class="example">
398
+ <div class="user-message">
399
+ <strong>You:</strong> What's the status of our Marketing projects?
400
+ </div>
401
+ <div class="ai-message">
402
+ <strong>Claude:</strong> I'll check your Marketing circle projects.
403
+ <br><br>
404
+ Found 4 projects in Marketing:
405
+ <ul>
406
+ <li><strong>Website Redesign</strong> - Status: Current, Due: Jan 30</li>
407
+ <li><strong>Q1 Campaign</strong> - Status: Current, Due: Feb 15</li>
408
+ <li><strong>Brand Guidelines Update</strong> - Status: Waiting (blocked on design review)</li>
409
+ <li><strong>Social Media Strategy</strong> - Status: Future</li>
410
+ </ul>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="example">
415
+ <div class="user-message">
416
+ <strong>You:</strong> Create a task to "Review analytics dashboard" under the Product Owner role
417
+ </div>
418
+ <div class="ai-message">
419
+ <strong>Claude:</strong> I've created the task "Review analytics dashboard" under the Product Owner role.
420
+ <br><br>
421
+ <strong>Details:</strong>
422
+ <ul>
423
+ <li>ID: abc123</li>
424
+ <li>Parent: Product Owner</li>
425
+ <li>Status: Current (default)</li>
426
+ </ul>
427
+ Would you like me to add a due date or any additional details?
428
+ </div>
429
+ </div>
430
+
431
+ <div class="example">
432
+ <div class="user-message">
433
+ <strong>You:</strong> Who should I talk to about the API integration?
434
+ </div>
435
+ <div class="ai-message">
436
+ <strong>Claude:</strong> Based on your workspace structure, the <strong>Developer</strong> role in the <strong>Tech</strong> circle is responsible for API integrations.
437
+ <br><br>
438
+ <strong>Currently assigned to:</strong> Jane Smith
439
+ <br>
440
+ <strong>Accountabilities include:</strong>
441
+ <ul>
442
+ <li>Building and maintaining API integrations</li>
443
+ <li>Documenting technical implementations</li>
444
+ </ul>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </section>
449
+
450
+ <section class="tools">
451
+ <div class="container">
452
+ <h2>Available Tools</h2>
453
+ <div class="tool-grid">
454
+ <div class="tool">
455
+ <code>nestr_list_workspaces</code>
456
+ <p>List accessible workspaces</p>
457
+ </div>
458
+ <div class="tool">
459
+ <code>nestr_search</code>
460
+ <p>Search for tasks, projects, roles</p>
461
+ </div>
462
+ <div class="tool">
463
+ <code>nestr_create_nest</code>
464
+ <p>Create new tasks or projects</p>
465
+ </div>
466
+ <div class="tool">
467
+ <code>nestr_update_nest</code>
468
+ <p>Update nest properties</p>
469
+ </div>
470
+ <div class="tool">
471
+ <code>nestr_list_circles</code>
472
+ <p>List organizational circles</p>
473
+ </div>
474
+ <div class="tool">
475
+ <code>nestr_get_circle_roles</code>
476
+ <p>Get roles in a circle</p>
477
+ </div>
478
+ <div class="tool">
479
+ <code>nestr_get_insights</code>
480
+ <p>Get workspace metrics</p>
481
+ </div>
482
+ <div class="tool">
483
+ <code>nestr_add_comment</code>
484
+ <p>Add comments to nests</p>
485
+ </div>
486
+ </div>
487
+ <p class="tool-note">
488
+ <a href="https://github.com/nestr-dev/nestr-mcp#available-tools" target="_blank">
489
+ View full tool documentation &rarr;
490
+ </a>
491
+ </p>
492
+ </div>
493
+ </section>
494
+
495
+ <section class="support">
496
+ <div class="container">
497
+ <h2>Need Help?</h2>
498
+ <div class="support-links">
499
+ <a href="https://help.nestr.io" target="_blank" class="support-link">
500
+ <div class="support-icon">&#128218;</div>
501
+ <div>
502
+ <strong>Documentation</strong>
503
+ <p>Learn more about Nestr</p>
504
+ </div>
505
+ </a>
506
+ <a href="https://github.com/nestr-dev/nestr-mcp/issues" target="_blank" class="support-link">
507
+ <div class="support-icon">&#128030;</div>
508
+ <div>
509
+ <strong>Report Issues</strong>
510
+ <p>Found a bug? Let us know</p>
511
+ </div>
512
+ </a>
513
+ <a href="https://modelcontextprotocol.io" target="_blank" class="support-link">
514
+ <div class="support-icon">&#128279;</div>
515
+ <div>
516
+ <strong>MCP Specification</strong>
517
+ <p>Learn about the protocol</p>
518
+ </div>
519
+ </a>
520
+ </div>
521
+ </div>
522
+ </section>
523
+ </main>
524
+
525
+ <footer>
526
+ <div class="container">
527
+ <p>&copy; 2025 Nestr. Built with the <a href="https://modelcontextprotocol.io" target="_blank">Model Context Protocol</a>.</p>
528
+ </div>
529
+ </footer>
530
+
531
+ <script>
532
+ // Track current selections
533
+ let currentAuth = 'oauth';
534
+ let currentSetup = 'hosted';
535
+
536
+ // Function to update config blocks based on current selections
537
+ function updateConfigBlocks() {
538
+ document.querySelectorAll('.config-block').forEach(block => {
539
+ block.classList.remove('active');
540
+ if (block.classList.contains(currentSetup) && block.classList.contains(currentAuth)) {
541
+ block.classList.add('active');
542
+ }
543
+ });
544
+ }
545
+
546
+ // Tab switching (Claude Desktop / Claude Code / Cursor)
547
+ document.querySelectorAll('.tab').forEach(tab => {
548
+ tab.addEventListener('click', () => {
549
+ const tabId = tab.dataset.tab;
550
+
551
+ // Update active tab
552
+ document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
553
+ tab.classList.add('active');
554
+
555
+ // Update active content
556
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
557
+ document.getElementById(tabId).classList.add('active');
558
+ });
559
+ });
560
+
561
+ // Auth method selection (oauth vs apikey)
562
+ document.querySelectorAll('.auth-option').forEach(option => {
563
+ option.addEventListener('click', () => {
564
+ currentAuth = option.dataset.auth;
565
+
566
+ // Update active option
567
+ document.querySelectorAll('.auth-option').forEach(o => o.classList.remove('active'));
568
+ option.classList.add('active');
569
+
570
+ // Update auth details section
571
+ document.querySelectorAll('.auth-detail').forEach(d => d.classList.remove('active'));
572
+ document.getElementById('auth-detail-' + currentAuth).classList.add('active');
573
+
574
+ // Update config blocks
575
+ updateConfigBlocks();
576
+ });
577
+ });
578
+
579
+ // Setup method selection (hosted vs local)
580
+ document.querySelectorAll('.setup-option').forEach(option => {
581
+ option.addEventListener('click', () => {
582
+ currentSetup = option.dataset.method;
583
+
584
+ // Update active option
585
+ document.querySelectorAll('.setup-option').forEach(o => o.classList.remove('active'));
586
+ option.classList.add('active');
587
+
588
+ // Update config blocks
589
+ updateConfigBlocks();
590
+ });
591
+ });
592
+
593
+ </script>
594
+ </body>
595
+ </html>