mcp-config-manager 1.0.2

package/README.md

@@ -0,0 +1,235 @@
+# MCP Config Manager
+
+[![npm version](https://badge.fury.io/js/mcp-config-manager.svg)](https://badge.fury.io/js/mcp-config-manager)
+
+Simple CLI and web UI tool to manage Model Context Protocol (MCP) configurations across multiple AI clients.
+
+## Features
+
+- **Auto-detection**: Automatically discovers supported clients with existing MCP configuration files.
+- **Multi-client support**: Manage configs for a growing list of clients, including Claude, VS Code, Cursor, Windsurf, Gemini, and more. The tool can detect any client that follows the MCP specification.
+- **Simple CLI**: Command-line interface for quick operations
+- **Web UI**: Clean web interface with List and Kanban views
+- **Remote MCP Support**: Easy setup for remote MCP servers with just a name and URL
+- **Kanban Board**: Drag-and-drop servers between clients
+- **JSON Editor**: Edit server configs as raw JSON or using forms
+- **Bulk Operations**: Copy servers to multiple clients at once
+- **Clipboard Support**: Quick copy server configs to clipboard
+- **Cross-platform**: Works on macOS, Windows, and Linux
+- **Import/Export**: Share configurations between clients and users
+- **Environment variables**: Easily manage API keys and settings
+
+## Screenshots
+
+### List View
+![List View](docs/images/list-view.png)
+*Traditional interface with detailed server management, showing individual client configurations with checkboxes for bulk operations.*
+
+### Kanban View
+![Kanban View](docs/images/kanban-view.png)
+*Drag-and-drop interface displaying servers as cards organized by client, with visual icons for quick actions.*
+
+### Server View
+![Server View](docs/images/server-view.png)
+*Consolidated view of all servers showing which clients each server is configured for, with bulk management options.*
+
+### Remote MCP Setup
+![Remote MCP Modal](docs/images/remote-mcp-modal.png)
+*Simple interface for adding remote MCP servers - just provide a name and URL to automatically generate the correct configuration.*
+
+## Installation
+
+```bash
+# Install globally from npm
+npm install -g mcp-config-manager
+```
+
+Alternatively, you can clone the project and run it locally:
+
+```bash
+# Clone or download the project
+cd mcp-config-manager
+
+# Install dependencies
+npm install
+
+# Make CLI globally available (optional)
+npm link
+```
+
+## Usage
+
+### CLI Commands
+
+```bash
+# List all clients and their status
+mcp-manager list
+
+# Show servers for a specific client
+mcp-manager show claude
+
+# Add a new server
+mcp-manager add claude my-server -c npx -a "-y" "@example/server" -e API_KEY=abc123
+
+# Remove a server from one client
+mcp-manager remove claude my-server
+
+# Remove a server from ALL clients
+mcp-manager remove all my-server
+
+# Copy server between clients
+mcp-manager copy claude my-server cursor
+
+# Copy server to ALL other clients
+mcp-manager copy claude my-server all
+
+# Manage environment variables
+mcp-manager env claude my-server set API_KEY new-value
+mcp-manager env claude my-server unset API_KEY
+mcp-manager env claude my-server list
+
+# Export/Import configurations
+mcp-manager export claude config.json
+mcp-manager export claude --server my-server server-config.json
+mcp-manager import cursor config.json
+
+# Start web UI
+mcp-manager web
+# or
+npm run web
+```
+
+### Web UI
+
+Start the web server:
+```bash
+npm run web
+# or
+mcp-manager web --port 3456
+```
+
+Then open http://localhost:3456 in your browser.
+
+The web UI provides:
+- **Client auto-discovery**: Automatically detects clients with existing configurations on startup, with a refresh button to scan for more.
+- **List View**: Traditional interface with detailed server management
+  - Multi-select checkboxes for bulk delete operations
+  - Remove from all clients button for each server
+  - Bulk action toolbar with select all/none options
+- **Kanban View**: Drag-and-drop servers between clients
+  - Full functionality on cards (edit, copy, export, delete)
+  - Visual icons for quick actions
+  - Drag to copy servers between clients
+- **Server View**: Consolidated view of all servers across clients
+  - Shows which clients each server is configured for
+  - Bulk operations to add servers to multiple clients
+- **Remote MCP Support**: Dedicated "Add Remote MCP" button for easy setup
+  - Simply provide server name and remote URL
+  - Automatically generates `npx mcp-remote [URL]` configuration
+  - Perfect for connecting to hosted MCP services
+- **JSON Editor**: Toggle between form and raw JSON editing
+- **Multi-select Copy**: Copy servers to multiple clients at once
+- **Clipboard Support**: Quick copy server configs with one click
+- **Config Path Display**: See where each client's config file is located
+- Visual overview of all clients
+- Add/edit/delete servers
+- Import/export configurations
+- Environment variable management
+
+## Supported Clients
+
+This tool supports auto-detection of any client that follows the Model Context Protocol specification. The following is a non-exhaustive list of clients that have been tested and are known to work:
+
+- **Amazon Q Developer**: `~/.aws/amazonq/mcp.json`
+- **Claude Desktop**: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- **Claude Code**: `.mcp.json` in project root
+- **Cline**: `~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json`
+- **Cursor**: `.cursor/mcp.json` (project-specific) or `~/.cursor/mcp.json` (global)
+- **Factory Bridge**: `~/Library/Application Support/Factory Bridge/mcp.json`
+- **Gemini**: `~/.gemini/settings.json`
+- **Roo Code**: `~/Library/Application Support/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json`
+- **VS Code**: `.vscode/mcp.json`
+- **Windsurf**: `~/.codeium/windsurf/mcp_config.json` or `~/AppData/Roaming/WindSurf/mcp_settings.json` (Windows)
+
+*Note: Paths may vary based on your operating system. The tool will attempt to find the correct path automatically.*
+
+## Configuration Format
+
+Standard MCP server configuration:
+```json
+{
+  "mcpServers": {
+    "server-name": {
+      "command": "npx",
+      "args": ["-y", "@example/mcp-server"],
+      "env": {
+        "API_KEY": "your-key-here"
+      }
+    }
+  }
+}
+```
+
+## Security Note
+
+Environment variables may contain sensitive data like API keys. The tool masks values containing "KEY" or "SECRET" in the display but stores them in plain text in config files.
+
+## Development & Testing
+
+### Running Tests
+
+The project includes comprehensive test coverage:
+
+```bash
+# Run all tests (CLI + UI)
+npm test
+
+# Run CLI tests only (17 tests)
+npm run test:cli
+
+# Run UI tests only (2 tests) - requires Playwright
+npm run test:ui
+
+# Run specific test file
+npx mocha test/ui-simple.test.js --timeout 30000
+```
+
+### Test Coverage
+
+- **CLI Tests**: 17/17 ✅ - Comprehensive command-line functionality testing
+- **UI Tests**: 2/2 ✅ - Frontend integration and API communication testing
+- **Integration Tests**: End-to-end dual-mode form/JSON editing validation
+
+### Development Setup
+
+```bash
+# Install dependencies (includes Playwright for UI testing)
+npm install
+
+# Install Playwright browsers (for UI tests)
+npx playwright install chromium
+
+# Start development server with mock data
+MCP_USE_MOCK_CLIENTS=true npm run web
+
+# Run server on custom port
+PORT=3457 npm run web
+```
+
+### Testing with Mock Clients
+
+For development and testing, you can use mock clients:
+
+```bash
+# Enable mock client mode
+export MCP_USE_MOCK_CLIENTS=true
+
+# Start server (will use test clients instead of real ones)
+npm run web
+```
+
+This allows testing functionality without affecting real MCP client configurations.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "mcp-config-manager",
+  "version": "1.0.2",
+  "description": "Simple CLI and web UI to manage MCP configs across multiple AI clients",
+  "main": "src/cli.js",
+  "bin": {
+    "mcp-manager": "src/cli.js"
+  },
+  "scripts": {
+    "start": "node src/cli.js",
+    "web": "node src/server.js",
+    "test": "mocha test/**/*.test.js --timeout 30000",
+    "test:cli": "mocha test/cli.test.js --timeout 10000",
+    "test:ui": "mocha test/ui.test.js --timeout 60000",
+    "test:integration": "mocha test/integration.test.js --timeout 60000"
+  },
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "ai",
+    "claude",
+    "vscode",
+    "cursor",
+    "gemini",
+    "windsurf",
+    "amazonq"
+  ],
+  "author": "Lev Volkovich <lev.volkovich@seon.io>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lev-volkovich-seon/mcp-config-manager.git"
+  },
+  "files": [
+    "src",
+    "public",
+    "docs",
+    "README.md"
+  ],
+  "type": "module",
+  "dependencies": {
+    "commander": "^14.0.1",
+    "cors": "^2.8.5",
+    "express": "^5.1.0"
+  },
+  "devDependencies": {
+    "chai": "^6.0.1",
+    "mocha": "^11.7.2",
+    "playwright": "^1.55.1",
+    "puppeteer": "^24.22.2"
+  }
+}

package/public/index.html

@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MCP Config Manager</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>MCP Config Manager</h1>
+            <p>Manage Model Context Protocol configurations across AI clients</p>
+            <div class="view-switcher">
+                <button id="listViewBtn" class="view-btn active">List View</button>
+                <button id="kanbanViewBtn" class="view-btn">Kanban View</button>
+                <button id="serverViewBtn" class="view-btn">Server View</button>
+            </div>
+        </header>
+
+        <div id="listViewContainer">
+            <div class="main-grid">
+                <aside class="sidebar">
+                    <h2>Clients</h2>
+                    <div class="sort-options">
+                        <label for="clientSort">Sort by:</label>
+                        <select id="clientSort">
+                            <option value="name-asc">Name (A-Z)</option>
+                            <option value="name-desc">Name (Z-A)</option>
+                            <option value="servers-asc">Servers (Low to High)</option>
+                            <option value="servers-desc">Servers (High to Low)</option>
+                        </select>
+                    </div>
+                    <div id="clientList" class="client-list"></div>
+                    <button id="refreshBtn" class="btn btn-secondary">Refresh</button>
+                </aside>
+
+                <main class="content">
+                    <div id="welcomeView" class="view">
+                        <h2>Welcome</h2>
+                        <p>Select a client from the sidebar to view and manage its MCP servers.</p>
+                    </div>
+
+                    <div id="clientView" class="view" style="display: none;">
+                        <div class="client-header">
+                            <div>
+                                <h2 id="clientName"></h2>
+                                <p class="config-path" id="configPath"></p>
+                            </div>
+                            <div class="action-buttons">
+                                <button id="addServerBtn" class="btn btn-primary">Add Server</button>
+                                <button id="addRemoteServerBtn" class="btn btn-primary">Add Remote MCP</button>
+                                <button id="exportConfigBtn" class="btn btn-secondary">Export</button>
+                                <button id="importConfigBtn" class="btn btn-secondary">Import</button>
+                            </div>
+                        </div>
+
+                        <div id="serverList" class="server-list"></div>
+                    </div>
+                </main>
+            </div>
+        </div>
+
+        <div id="kanbanViewContainer" style="display: none;">
+            <div class="sort-options">
+                <label for="kanbanSort">Sort by:</label>
+                <select id="kanbanSort">
+                    <option value="name-asc">Name (A-Z)</option>
+                    <option value="name-desc">Name (Z-A)</option>
+                    <option value="servers-asc">Servers (Low to High)</option>
+                    <option value="servers-desc">Servers (High to Low)</option>
+                </select>
+            </div>
+            <div class="kanban-board" id="kanbanBoard"></div>
+        </div>
+
+        <div id="serverViewContainer" style="display: none;">
+            <h2>All Servers</h2>
+            <div class="server-list-all" id="allServersList"></div>
+        </div>
+    </div>
+
+    <!-- Add/Edit Server Modal -->
+    <div id="serverModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h3 id="modalTitle">Add Server</h3>
+            <div class="editor-tabs">
+                <button type="button" class="tab-btn active" data-tab="form">Form Editor</button>
+                <button type="button" class="tab-btn" data-tab="json">JSON Editor</button>
+            </div>
+
+            <form id="serverForm">
+                <div id="formTab" class="tab-content active">
+                    <div class="form-group">
+                        <label for="serverName">Server Name</label>
+                        <input type="text" id="serverName" name="serverName" required>
+                    </div>
+
+
+
+                    <div class="form-group">
+                        <label for="serverCommand">Command</label>
+                        <input type="text" id="serverCommand" name="serverCommand" placeholder="e.g., npx">
+                    </div>
+
+                    <div class="form-group">
+                        <label for="serverArgs">Arguments (one per line)</label>
+                        <textarea id="serverArgs" name="serverArgs" rows="3" placeholder="e.g., -y&#10;@example/mcp-server"></textarea>
+                    </div>
+
+                    <div class="form-group">
+                        <label>Environment Variables</label>
+                        <div id="envVars"></div>
+                        <button type="button" id="addEnvVar" class="icon-btn no-bg add-env-var">+</button>
+                    </div>
+
+
+                </div>
+
+                <div id="jsonTab" class="tab-content" style="display: none;">
+                    <div class="form-group">
+                        <label for="jsonEditor">Server Configuration (JSON)</label>
+                        <textarea id="jsonEditor" name="jsonEditor" rows="15" placeholder='{"command": "npx", "args": ["-y", "@example/server"]}'></textarea>
+                    </div>
+                </div>
+
+                <div class="modal-actions">
+                    <button type="submit" class="btn btn-primary">Save</button>
+                    <button type="button" id="cancelModal" class="btn btn-secondary">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Copy Server Modal -->
+    <div id="copyModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h3>Copy Server</h3>
+            <form id="copyForm">
+                <div class="form-group">
+                    <label>Target Clients</label>
+                    <div class="copy-options">
+                        <button type="button" id="selectAllBtn" class="btn btn-small">Select All</button>
+                        <button type="button" id="selectNoneBtn" class="btn btn-small">Select None</button>
+                    </div>
+                    <div id="targetClients" class="checkbox-list"></div>
+                </div>
+
+                <div class="form-group">
+                    <label for="targetServerName">New Server Name (optional)</label>
+                    <input type="text" id="targetServerName" placeholder="Leave empty to keep the same name">
+                </div>
+
+                <div class="modal-actions">
+                    <button type="submit" class="btn btn-primary">Copy</button>
+                    <button type="button" id="cancelCopy" class="btn btn-secondary">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Import Modal -->
+    <div id="importModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h3>Import Configuration</h3>
+            <form id="importForm">
+                <div class="form-group">
+                    <label for="importData">Paste JSON Configuration</label>
+                    <textarea id="importData" rows="10" required placeholder="Paste exported JSON here..."></textarea>
+                </div>
+
+                <div class="modal-actions">
+                    <button type="submit" class="btn btn-primary">Import</button>
+                    <button type="button" id="cancelImport" class="btn btn-secondary">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Edit Server Env Modal -->
+    <div id="editServerEnvModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h3 id="editServerEnvTitle">Edit Environment Variables for Server</h3>
+            <form id="editServerEnvForm">
+                <div class="form-group">
+                    <label>Server Name:</label>
+                    <span id="editServerEnvName"></span>
+                </div>
+                <div class="form-group">
+                    <label>Environment Variables</label>
+                    <div id="editEnvVars"></div>
+                    <button type="button" id="addEditEnvVar" class="btn btn-small">Add Variable</button>
+                </div>
+                <div class="form-group">
+                    <label>Apply to Clients:</label>
+                    <div id="editEnvClients" class="checkbox-list"></div>
+                    <button type="button" id="selectAllEditEnvClients" class="btn btn-small">Select All</button>
+                    <button type="button" id="selectNoneEditEnvClients" class="btn btn-small">Select None</button>
+                </div>
+                <div class="modal-actions">
+                    <button type="submit" class="btn btn-primary">Save Changes</button>
+                    <button type="button" id="cancelEditServerEnv" class="btn btn-secondary">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Add Server to Clients Modal -->
+    <div id="addServerToClientsModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h3 id="addServerToClientsTitle">Add Server to Clients</h3>
+            <form id="addServerToClientsForm">
+                <div class="form-group">
+                    <label>Server Name:</label>
+                    <span id="addServerToClientsName"></span>
+                </div>
+                <div class="form-group">
+                    <label>Server Configuration (JSON)</label>
+                    <textarea id="addServerToClientsConfig" rows="10" readonly></textarea>
+                </div>
+                <div class="form-group">
+                    <label>Select Clients:</label>
+                    <div id="addServerToClientsList" class="checkbox-list"></div>
+                    <button type="button" id="selectAllAddServerClients" class="btn btn-small">Select All</button>
+                    <button type="button" id="selectNoneAddServerClients" class="btn btn-small">Select None</button>
+                </div>
+                <div class="modal-actions">
+                    <button type="submit" class="btn btn-primary">Add Server</button>
+                    <button type="button" id="cancelAddServerToClients" class="btn btn-secondary">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Add Remote MCP Server Modal -->
+    <div id="remoteServerModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h3>Add Remote MCP Server</h3>
+            <form id="remoteServerForm">
+                <div class="form-group">
+                    <label for="remoteServerName">Server Name:</label>
+                    <input type="text" id="remoteServerName" name="remoteServerName" placeholder="e.g., my-remote-server" required>
+                </div>
+                <div class="form-group">
+                    <label for="remoteServerUrl">Remote URL:</label>
+                    <input type="url" id="remoteServerUrl" name="remoteServerUrl" placeholder="https://example.com/mcp" required>
+                </div>
+                <div class="form-group">
+                    <small>This will create a configuration using npx mcp-remote with your specified URL.</small>
+                </div>
+                <div class="modal-actions">
+                    <button type="submit" class="btn btn-primary">Add Remote Server</button>
+                    <button type="button" id="cancelRemoteServer" class="btn btn-secondary">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Copy Env Vars Modal -->
+    <div id="copyEnvVarsModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h3 id="copyEnvVarsTitle">Copy Environment Variables</h3>
+            <form id="copyEnvVarsForm">
+                <div class="form-group">
+                    <label>Source Server:</label>
+                    <span id="copyEnvVarsSourceServer"></span>
+                </div>
+                <div class="form-group">
+                    <label>Source Client:</label>
+                    <span id="copyEnvVarsSourceClient"></span>
+                </div>
+                <div class="form-group">
+                    <label>Environment Variable:</label>
+                    <select id="copyEnvVarSelect"></select>
+                </div>
+                <div class="form-group">
+                    <label>Target Clients:</label>
+                    <div id="copyEnvVarsTargetClients" class="checkbox-list"></div>
+                    <button type="button" id="selectAllCopyEnvVarsClients" class="btn btn-small">Select All</button>
+                    <button type="button" id="selectNoneCopyEnvVarsClients" class="btn btn-small">Select None</button>
+                </div>
+                <div class="modal-actions">
+                    <button type="submit" class="btn btn-primary">Copy Variables</button>
+                    <button type="button" id="cancelCopyEnvVars" class="btn btn-secondary">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Copy Single Env Var Modal -->
+    <div id="copySingleEnvVarModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h3 id="copySingleEnvVarTitle">Copy Environment Variable</h3>
+            <form id="copySingleEnvVarForm">
+                <div class="form-group">
+                    <label>Variable Name:</label>
+                    <span id="copySingleEnvVarKey"></span>
+                </div>
+                <div class="form-group">
+                    <label>Variable Value:</label>
+                    <span id="copySingleEnvVarValue"></span>
+                </div>
+                <div class="form-group">
+                    <label>Target Clients:</label>
+                    <div id="copySingleEnvVarTargetClients" class="checkbox-list"></div>
+                    <button type="button" id="selectAllCopySingleEnvVarClients" class="btn btn-small">Select All</button>
+                    <button type="button" id="selectNoneCopySingleEnvVarClients" class="btn btn-small">Select None</button>
+                </div>
+                <div class="modal-actions">
+                    <button type="submit" class="btn btn-primary">Copy</button>
+                    <button type="button" id="cancelCopySingleEnvVar" class="btn btn-secondary">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script type="module" src="js/utils.js"></script>
+    <script type="module" src="js/api.js"></script>
+    <script type="module" src="js/modals.js"></script>
+    <script type="module" src="js/clientView.js"></script>
+    <script type="module" src="js/kanbanView.js"></script>
+    <script type="module" src="js/serverView.js"></script>
+    <script type="module" src="js/main.js"></script>
+</body>
+</html>