mcp-config-manager 1.0.9 → 1.0.10

package/README.md

@@ -10,7 +10,7 @@ Simple CLI and web UI tool to manage Model Context Protocol (MCP) configurations
 - **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
+- **Remote MCP Support**: Native HTTP and SSE transport support for remote MCP servers
 - **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
@@ -130,10 +130,11 @@ The web UI provides:
 - **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
+- **Remote MCP Support**: Native transport type support for remote MCP servers
+  - Choose between HTTP (Streamable HTTP) or SSE (Server-Sent Events) transport
+  - Simply provide server name, transport type, and remote URL
+  - Generates native `type`/`url` configuration (no proxy required)
+  - Visual transport type badges (HTTP, SSE, STDIO) in server cards
 - **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
@@ -164,7 +165,8 @@ This tool supports auto-detection of any client that follows the Model Context P
 
 ## Configuration Format
 
-Standard MCP server configuration (JSON-based clients like Claude Desktop, Claude Code, Cursor, VS Code, etc.):
+### Local MCP Servers (stdio transport)
+Standard MCP server configuration for local processes (JSON-based clients like Claude Desktop, Claude Code, Cursor, VS Code, etc.):
 ```json
 {
   "mcpServers": {
@@ -179,6 +181,23 @@ Standard MCP server configuration (JSON-based clients like Claude Desktop, Claud
 }
 ```
 
+### Remote MCP Servers (HTTP/SSE transport)
+Native remote server configuration using HTTP (Streamable HTTP) or SSE (Server-Sent Events) transport:
+```json
+{
+  "mcpServers": {
+    "remote-server": {
+      "type": "http",
+      "url": "https://example.com/mcp"
+    },
+    "sse-server": {
+      "type": "sse",
+      "url": "https://example.com/sse"
+    }
+  }
+}
+```
+
 Codex uses a TOML configuration file at `~/.codex/config.toml`, where MCP servers are defined under the `[mcp_servers.<server-name>]` tables. For example:
 
 ```toml

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-config-manager",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Simple CLI and web UI to manage MCP configs across multiple AI clients",
   "main": "src/cli.js",
   "bin": {

package/public/index.html

@@ -241,12 +241,19 @@
                     <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="remoteServerTransport">Transport Type:</label>
+                    <select id="remoteServerTransport" name="remoteServerTransport">
+                        <option value="http">HTTP (Streamable HTTP)</option>
+                        <option value="sse">SSE (Server-Sent Events)</option>
+                    </select>
+                </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>
+                    <small>This creates a native remote MCP server configuration. HTTP is the modern streamable transport, SSE is for legacy server-sent events endpoints.</small>
                 </div>
                 <div class="modal-actions">
                     <button type="submit" class="btn btn-primary">Add Remote Server</button>
@@ -314,12 +321,12 @@
         </div>
     </div>
 
-    <script type="module" src="js/utils.js?v=2"></script>
-    <script type="module" src="js/api.js?v=2"></script>
-    <script type="module" src="js/modals.js?v=2"></script>
-    <script type="module" src="js/clientView.js?v=2"></script>
-    <script type="module" src="js/kanbanView.js?v=2"></script>
-    <script type="module" src="js/serverView.js?v=2"></script>
-    <script type="module" src="js/main.js?v=2"></script>
+    <script type="module" src="js/utils.js?v=3"></script>
+    <script type="module" src="js/api.js?v=3"></script>
+    <script type="module" src="js/modals.js?v=3"></script>
+    <script type="module" src="js/clientView.js?v=3"></script>
+    <script type="module" src="js/kanbanView.js?v=3"></script>
+    <script type="module" src="js/serverView.js?v=3"></script>
+    <script type="module" src="js/main.js?v=3"></script>
 </body>
 </html>

package/public/js/clientView.js

@@ -126,6 +126,16 @@ function renderServerList(servers) {
             envHtml += '</div>';
         }
 
+        // Build transport info for remote servers (type/url)
+        let transportHtml = '';
+        if (server.type) {
+            const transportType = server.type.toUpperCase();
+            transportHtml = `<div class="detail-row"><strong>Type:</strong> <span class="transport-badge transport-${server.type}">${transportType}</span></div>`;
+            if (server.url) {
+                transportHtml += `<div class="detail-row"><strong>URL:</strong> ${server.url}</div>`;
+            }
+        }
+
         card.innerHTML = `
             <div class="server-header">
                 <input type="checkbox" class="server-checkbox" data-server="${name}">
@@ -137,6 +147,7 @@ function renderServerList(servers) {
                 </div>
             </div>
             <div class="server-details">
+                ${transportHtml}
                 ${server.command ? `<div class="detail-row"><strong>Command:</strong> ${server.command}</div>` : ''}
                 ${server.args ? `<div class="detail-row"><strong>Args:</strong> ${server.args.join(' ')}</div>` : ''}
                 ${envHtml}

package/public/js/kanbanView.js

@@ -127,6 +127,11 @@ function createKanbanCard(clientId, serverName, server) {
     card.style.backgroundColor = getServerColor(serverName);
 
     let details = '';
+    // Show transport type for remote servers
+    if (server.type) {
+        details += `type: ${server.type.toUpperCase()}\n`;
+        if (server.url) details += `url: ${server.url}\n`;
+    }
     if (server.command) details += `cmd: ${server.command}\n`;
     if (server.args) details += `args: ${server.args.join(' ')}\n`;
     if (server.env) details += `env: ${Object.keys(server.env).length} var(s)`;

package/public/js/modals.js

@@ -769,6 +769,12 @@ export function showRemoteServerModal(loadClientServers, renderKanbanBoard, clie
     document.getElementById('remoteServerName').value = '';
     document.getElementById('remoteServerUrl').value = '';
 
+    // Set default transport type if selector exists
+    const transportSelect = document.getElementById('remoteServerTransport');
+    if (transportSelect) {
+        transportSelect.value = 'http';
+    }
+
     modal.style.display = 'flex';
     document.getElementById('remoteServerName').focus();
 
@@ -784,16 +790,17 @@ export function showRemoteServerModal(loadClientServers, renderKanbanBoard, clie
 
         const serverName = document.getElementById('remoteServerName').value.trim();
         const serverUrl = document.getElementById('remoteServerUrl').value.trim();
+        const transportType = document.getElementById('remoteServerTransport')?.value || 'http';
 
         if (!serverName || !serverUrl) {
             alert('Please provide both server name and URL.');
             return;
         }
 
-        // Create the configuration for remote MCP server
+        // Create the configuration for remote MCP server using native type/url format
         const serverConfig = {
-            command: "npx",
-            args: ["mcp-remote", serverUrl]
+            type: transportType,
+            url: serverUrl
         };
 
         try {

package/public/js/serverView.js

@@ -45,6 +45,16 @@ export async function renderAllServers() {
                 envHtml += '</div>';
             }
 
+            // Build transport info for remote servers (type/url)
+            let transportHtml = '';
+            if (serverData.config && serverData.config.type) {
+                const transportType = serverData.config.type.toUpperCase();
+                transportHtml = `<div class="detail-row"><strong>Type:</strong> <span class="transport-badge transport-${serverData.config.type}">${transportType}</span></div>`;
+                if (serverData.config.url) {
+                    transportHtml += `<div class="detail-row"><strong>URL:</strong> ${serverData.config.url}</div>`;
+                }
+            }
+
             card.innerHTML = `
                 <div class="server-header-all">
                     <span class="server-name-all">${serverName}</span>
@@ -58,6 +68,7 @@ export async function renderAllServers() {
                     </div>
                 </div>
                 <div class="server-details-all">
+                    ${transportHtml}
                     ${serverData.config && serverData.config.command ? `<div class="detail-row"><strong>Command:</strong> ${serverData.config.command}</div>` : ''}
                     ${serverData.config && serverData.config.args ? `<div class="detail-row"><strong>Args:</strong> ${serverData.config.args.join(' ')}</div>` : ''}
                     ${envHtml}

package/public/style.css

@@ -638,3 +638,29 @@ header p {
     border: 1px solid #e0e0e0;
     font-family: 'Courier New', monospace;
 }
+
+/* Transport type badges for remote servers */
+.transport-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.transport-http {
+    background: #3498db;
+    color: white;
+}
+
+.transport-sse {
+    background: #9b59b6;
+    color: white;
+}
+
+.transport-stdio {
+    background: #27ae60;
+    color: white;
+}