mcp-config-manager 1.0.13 → 2.1.1

package/public/js/popularMcps.js

@@ -0,0 +1,304 @@
+import { addServerToMultipleClientsApi } from './api.js';
+import { loadStaticLogos, getServerLogo, getInitials } from './logoService.js';
+
+let cachedData = null;
+let clients = [];
+let loadClientsCallback = null;
+
+export function initPopularMcps(clientData, loadClientsFn) {
+    clients = clientData;
+    loadClientsCallback = loadClientsFn;
+}
+
+export async function loadPopularMcps() {
+    if (cachedData) return cachedData;
+    try {
+        const response = await fetch('/popular-mcps.json');
+        cachedData = await response.json();
+        return cachedData;
+    } catch (error) {
+        console.error('Failed to load popular MCPs:', error);
+        return null;
+    }
+}
+
+
+export async function showPopularMcpsModal(clientData, loadClientsFn) {
+    clients = clientData;
+    loadClientsCallback = loadClientsFn;
+
+    const modal = document.getElementById('popularMcpsModal');
+    const listContainer = document.getElementById('popularMcpsList');
+    const searchInput = document.getElementById('popularMcpsSearch');
+    const categorySelect = document.getElementById('popularMcpsCategory');
+    const authSelect = document.getElementById('popularMcpsAuth');
+
+    // Show loading state
+    listContainer.innerHTML = '<p class="loading-state">Loading popular MCPs...</p>';
+    modal.style.display = 'flex';
+
+    // Load data and logos in parallel
+    const [data] = await Promise.all([loadPopularMcps(), loadStaticLogos()]);
+    if (!data) {
+        listContainer.innerHTML = '<p class="error-state">Failed to load popular MCPs. Please try again.</p>';
+        return;
+    }
+
+    // Populate category dropdown
+    const categories = [...new Set(data.servers.map(s => s.category))].sort();
+    categorySelect.innerHTML = '<option value="">All Categories</option>' +
+        categories.map(c => `<option value="${c}">${formatCategory(c)}</option>`).join('');
+
+    // Initial render
+    renderServerList(data.servers);
+
+    // Set up event listeners (remove old ones first)
+    const newSearchInput = searchInput.cloneNode(true);
+    const newCategorySelect = categorySelect.cloneNode(true);
+    const newAuthSelect = authSelect.cloneNode(true);
+
+    searchInput.parentNode.replaceChild(newSearchInput, searchInput);
+    categorySelect.parentNode.replaceChild(newCategorySelect, categorySelect);
+    authSelect.parentNode.replaceChild(newAuthSelect, authSelect);
+
+    // Restore category options
+    newCategorySelect.innerHTML = '<option value="">All Categories</option>' +
+        categories.map(c => `<option value="${c}">${formatCategory(c)}</option>`).join('');
+
+    const filterAndRender = () => {
+        const search = newSearchInput.value.toLowerCase();
+        const category = newCategorySelect.value;
+        const auth = newAuthSelect.value;
+
+        const filtered = data.servers.filter(server => {
+            const matchesSearch = !search ||
+                server.name.toLowerCase().includes(search) ||
+                server.description.toLowerCase().includes(search);
+            const matchesCategory = !category || server.category === category;
+            const matchesAuth = !auth || server.authType === auth;
+            return matchesSearch && matchesCategory && matchesAuth;
+        });
+
+        renderServerList(filtered);
+    };
+
+    newSearchInput.addEventListener('input', filterAndRender);
+    newCategorySelect.addEventListener('change', filterAndRender);
+    newAuthSelect.addEventListener('change', filterAndRender);
+}
+
+function renderServerList(servers) {
+    const listContainer = document.getElementById('popularMcpsList');
+
+    if (servers.length === 0) {
+        listContainer.innerHTML = '<p class="empty-state">No servers match your filters.</p>';
+        return;
+    }
+
+    const initials = {};
+    servers.forEach(s => initials[s.id] = getInitials(s.name));
+
+    listContainer.innerHTML = servers.map(server => `
+        <div class="popular-mcp-card" data-server-id="${server.id}">
+            <div class="popular-mcp-logo-container">
+                <img src="" alt="${server.name}" class="popular-mcp-logo" style="display:none" data-server-id="${server.id}" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
+                <div class="popular-mcp-logo-fallback">${initials[server.id]}</div>
+            </div>
+            <div class="popular-mcp-info">
+                <div class="popular-mcp-name">${server.name}</div>
+                <div class="popular-mcp-description">${server.description}</div>
+                <div class="popular-mcp-meta">
+                    <span class="category-badge">${formatCategory(server.category)}</span>
+                    <span class="auth-badge auth-badge-${server.authType}">${formatAuthType(server.authType)}</span>
+                    <span class="transport-badge transport-${server.type}">${server.type.toUpperCase()}</span>
+                </div>
+            </div>
+            <div class="popular-mcp-actions">
+                <button class="btn btn-small btn-primary add-popular-mcp-btn"
+                        data-server='${JSON.stringify(server).replace(/'/g, "&#39;")}'>
+                    Add
+                </button>
+            </div>
+        </div>`).join('');
+
+    // Load logos asynchronously
+    servers.forEach(server => {
+        const imgElement = listContainer.querySelector(`img[data-server-id="${server.id}"]`);
+        if (!imgElement) return;
+
+        // Use server.logo first if available, otherwise use the shared service
+        if (server.logo) {
+            imgElement.src = server.logo;
+            imgElement.style.display = 'block';
+            const fallback = imgElement.nextElementSibling;
+            if (fallback) fallback.style.display = 'none';
+        } else {
+            // Use shared logo service
+            getServerLogo(server.id, { type: server.type, url: server.url }).then(logoUrl => {
+                if (logoUrl && imgElement && imgElement.parentNode) {
+                    imgElement.src = logoUrl;
+                    imgElement.style.display = 'block';
+                    const fallback = imgElement.nextElementSibling;
+                    if (fallback) fallback.style.display = 'none';
+                }
+            });
+        }
+    });
+
+    // Attach event listeners to add buttons
+    listContainer.querySelectorAll('.add-popular-mcp-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const server = JSON.parse(e.target.dataset.server.replace(/&#39;/g, "'"));
+            showAddToClientsDropdown(e.target, server);
+        });
+    });
+}
+
+function showAddToClientsDropdown(button, server) {
+    // Remove any existing dropdown
+    const existingDropdown = document.querySelector('.add-clients-dropdown');
+    if (existingDropdown) {
+        existingDropdown.remove();
+    }
+
+    // Create dropdown
+    const dropdown = document.createElement('div');
+    dropdown.className = 'add-clients-dropdown';
+    dropdown.innerHTML = `
+        <div class="add-clients-dropdown-header">
+            <span>Add to clients:</span>
+            <button class="add-clients-select-all">All</button>
+            <button class="add-clients-select-none">None</button>
+        </div>
+        <div class="add-clients-list">
+            ${clients.map(client => `
+                <label class="add-clients-item">
+                    <input type="checkbox" value="${client.id}" checked>
+                    <span>${client.name}</span>
+                </label>
+            `).join('')}
+        </div>
+        <div class="add-clients-dropdown-actions">
+            <button class="btn btn-small btn-secondary cancel-add-btn">Cancel</button>
+            <button class="btn btn-small btn-primary confirm-add-btn">Add to Selected</button>
+        </div>
+    `;
+
+    // Position dropdown
+    const buttonRect = button.getBoundingClientRect();
+    dropdown.style.position = 'fixed';
+    dropdown.style.top = `${buttonRect.bottom + 4}px`;
+    dropdown.style.right = `${window.innerWidth - buttonRect.right}px`;
+
+    document.body.appendChild(dropdown);
+
+    // Event handlers
+    dropdown.querySelector('.add-clients-select-all').addEventListener('click', () => {
+        dropdown.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = true);
+    });
+
+    dropdown.querySelector('.add-clients-select-none').addEventListener('click', () => {
+        dropdown.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
+    });
+
+    dropdown.querySelector('.cancel-add-btn').addEventListener('click', () => {
+        dropdown.remove();
+    });
+
+    dropdown.querySelector('.confirm-add-btn').addEventListener('click', async () => {
+        const selectedClientIds = Array.from(dropdown.querySelectorAll('input[type="checkbox"]:checked'))
+            .map(cb => cb.value);
+
+        if (selectedClientIds.length === 0) {
+            alert('Please select at least one client.');
+            return;
+        }
+
+        await addServerToClients(server, selectedClientIds, button);
+        dropdown.remove();
+    });
+
+    // Close dropdown when clicking outside
+    const closeOnClickOutside = (e) => {
+        if (!dropdown.contains(e.target) && e.target !== button) {
+            dropdown.remove();
+            document.removeEventListener('click', closeOnClickOutside);
+        }
+    };
+    setTimeout(() => document.addEventListener('click', closeOnClickOutside), 0);
+}
+
+async function addServerToClients(server, clientIds, button) {
+    const originalText = button.textContent;
+    button.textContent = 'Adding...';
+    button.disabled = true;
+
+    try {
+        const config = {
+            type: server.type,
+            url: server.url
+        };
+
+        const response = await addServerToMultipleClientsApi(server.id, config, clientIds);
+
+        if (response.success) {
+            button.textContent = 'Added!';
+            button.classList.add('btn-success');
+
+            // Show auth note if needed
+            if (server.authType !== 'none') {
+                const authNote = server.authType === 'oauth'
+                    ? 'OAuth authentication will be required when you first use this server.'
+                    : 'You\'ll need to configure your API key in the server\'s environment variables.';
+                alert(`${server.name} added successfully!\n\nNote: ${authNote}`);
+            }
+
+            // Refresh clients
+            if (loadClientsCallback) {
+                loadClientsCallback();
+            }
+
+            // Reset button after delay
+            setTimeout(() => {
+                button.textContent = originalText;
+                button.classList.remove('btn-success');
+                button.disabled = false;
+            }, 2000);
+        } else {
+            throw new Error('Failed to add server');
+        }
+    } catch (error) {
+        console.error('Failed to add server:', error);
+        button.textContent = 'Failed';
+        button.classList.add('btn-danger');
+        alert(`Failed to add ${server.name}: ${error.message}`);
+
+        setTimeout(() => {
+            button.textContent = originalText;
+            button.classList.remove('btn-danger');
+            button.disabled = false;
+        }, 2000);
+    }
+}
+
+function formatCategory(category) {
+    return category
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+
+function formatAuthType(authType) {
+    switch (authType) {
+        case 'none': return 'No Auth';
+        case 'api-key': return 'API Key';
+        case 'oauth': return 'OAuth';
+        case 'bearer': return 'Bearer';
+        default: return authType;
+    }
+}
+
+export function closePopularMcpsModal() {
+    const modal = document.getElementById('popularMcpsModal');
+    modal.style.display = 'none';
+}

package/public/js/serverView.js

@@ -1,6 +1,7 @@
 import { getAllServersApi, updateServerEnvApi, addServerToMultipleClientsApi } from './api.js';
 import { addEnvVarRow } from './utils.js';
-import { showServerModal, deleteServer, copyToClipboard, exportServer, removeFromAll } from './modals.js'; // Import from modals.js
+import { showServerModal, deleteServer, copyToClipboard, exportServer, removeFromAll } from './modals.js';
+import { getServerLogo, getInitials } from './logoService.js';
 
 let clients = []; // This will be passed from main.js
 let loadClientsCallback = null; // Callback to main.js to reload all clients
@@ -55,9 +56,14 @@ export async function renderAllServers() {
                 }
             }
 
+            const initials = getInitials(serverName);
             card.innerHTML = `
                 <div class="server-header-all">
                     <div class="server-name-row">
+                        <div class="server-logo-container">
+                            <img src="" class="server-logo" alt="" style="display:none;width:32px;height:32px" data-server="${serverName}" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
+                            <div class="server-logo-fallback" style="width:32px;height:32px;font-size:12px">${initials}</div>
+                        </div>
                         <span class="server-name-all">${serverName}</span>
                         ${serverData.global ? '<span class="global-tag">Global</span>' : ''}
                     </div>
@@ -78,6 +84,17 @@ export async function renderAllServers() {
                 </div>
             `;
             allServersList.appendChild(card);
+
+            // Load logo asynchronously
+            const imgElement = card.querySelector('.server-logo');
+            getServerLogo(serverName, serverData.config).then(logoUrl => {
+                if (logoUrl && imgElement) {
+                    imgElement.src = logoUrl;
+                    imgElement.style.display = 'block';
+                    const fallback = imgElement.nextElementSibling;
+                    if (fallback) fallback.style.display = 'none';
+                }
+            });
         }
         attachServerViewEventListeners();
     } catch (error) {
@@ -99,30 +116,30 @@ function attachServerViewEventListeners() {
 
     document.querySelectorAll('.add-to-clients-btn').forEach(button => {
         button.addEventListener('click', (e) => {
-            const serverName = e.target.dataset.serverName;
-            const serverConfig = JSON.parse(e.target.dataset.serverConfig);
+            const serverName = e.currentTarget.dataset.serverName;
+            const serverConfig = JSON.parse(e.currentTarget.dataset.serverConfig);
             showAddServerToClientsModal(serverName, serverConfig);
         });
     });
 
     document.querySelectorAll('.copy-to-clipboard-server-view-btn').forEach(button => {
         button.addEventListener('click', (e) => {
-            const serverName = e.target.dataset.serverName;
-            const serverConfig = JSON.parse(e.target.dataset.serverConfig);
+            const serverName = e.currentTarget.dataset.serverName;
+            const serverConfig = JSON.parse(e.currentTarget.dataset.serverConfig);
             copyToClipboard(serverName, e, serverConfig); // Pass serverConfig
         });
     });
 
     document.querySelectorAll('.export-server-view-btn').forEach(button => {
         button.addEventListener('click', (e) => {
-            const serverName = e.target.dataset.serverName;
+            const serverName = e.currentTarget.dataset.serverName;
             exportServer(serverName);
         });
     });
 
     document.querySelectorAll('.delete-server-view-btn').forEach(button => {
         button.addEventListener('click', (e) => {
-            const serverName = e.target.dataset.serverName;
+            const serverName = e.currentTarget.dataset.serverName;
             if (!confirm(`Are you sure you want to delete the server "${serverName}" from ALL clients?`)) {
                 return;
             }

package/public/mcp-logos.json

@@ -1,6 +1,32 @@
 {
   "filesystem": "https://raw.githubusercontent.com/modelcontextprotocol/servers/main/src/filesystem/icon.png",
   "github": "https://github.githubassets.com/favicons/favicon.svg",
+  "atlassian": "https://wac-cdn.atlassian.com/assets/img/favicons/atlassian/favicon.png",
+  "paypal": "https://www.paypal.com/favicon.ico",
+  "square": "https://squareup.com/favicon.ico",
+  "neon": "https://neon.tech/favicon.ico",
+  "prisma": "https://www.prisma.io/images/favicon-32x32.png",
+  "webflow": "https://webflow.com/favicon.ico",
+  "wix": "https://www.wix.com/favicon.ico",
+  "canva": "https://www.canva.com/favicon.ico",
+  "zapier": "https://zapier.com/favicon.ico",
+  "huggingface": "https://huggingface.co/favicon.ico",
+  "exa": "https://exa.ai/favicon.ico",
+  "semgrep": "https://semgrep.dev/favicon.ico",
+  "buildkite": "https://buildkite.com/favicon.ico",
+  "egnyte": "https://www.egnyte.com/favicon.ico",
+  "plaid": "https://plaid.com/favicon.ico",
+  "ramp": "https://ramp.com/favicon.ico",
+  "stackoverflow": "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico",
+  "thoughtspot": "https://www.thoughtspot.com/favicon.ico",
+  "needle": "https://needle-ai.com/favicon.ico",
+  "dappier": "https://dappier.com/favicon.ico",
+  "cloudinary": "https://cloudinary.com/favicon.ico",
+  "instant": "https://instantdb.com/favicon.ico",
+  "grafbase": "https://grafbase.com/favicon.ico",
+  "telnyx": "https://telnyx.com/favicon.ico",
+  "apify": "https://apify.com/favicon.ico",
+  "monday": "https://monday.com/favicon.ico",
   "gitlab": "https://about.gitlab.com/images/press/press-kit-icon.svg",
   "slack": "https://a.slack-edge.com/80588/marketing/img/meta/favicon-32.png",
   "postgres": "https://www.postgresql.org/media/img/about/press/elephant.png",