modality-mcp-kit 1.4.0 → 1.4.2

package/dist/util_mcp_connection_demo.js

@@ -11,7 +11,7 @@ const connectAIShowcase = (serverName, serverUrl, mcpPath = "/mcp") => ({
     claudeCode: {
         name: "Claude Code",
         description: "Official Claude IDE tool for seamless development workflow",
-        connectionCode: `claude mcp add -s user --transport http ${serverName} ${serverUrl}${mcpPath}`,
+        connectionCode: `claude mcp add -s user --transport http ${serverName} {serverUrl}${mcpPath}`,
         type: "editor",
     },
     githubCli: {
@@ -23,7 +23,7 @@ const connectAIShowcase = (serverName, serverUrl, mcpPath = "/mcp") => ({
   "mcpServers": {
     "${serverName}": {
       "type": "http",
-      "url": "${serverUrl}${mcpPath}",
+      "url": "{serverUrl}${mcpPath}",
       "headers": {},
       "tools": ["*"]
     }
@@ -34,7 +34,7 @@ const connectAIShowcase = (serverName, serverUrl, mcpPath = "/mcp") => ({
     vscode: {
         name: "VS Code",
         description: "Popular code editor with MCP extension support",
-        connectionCode: `code --add-mcp '{"name":"${serverName}", "url": "${serverUrl}${mcpPath}", "type": "http"}'`,
+        connectionCode: `code --add-mcp '{"name":"${serverName}", "url": "{serverUrl}${mcpPath}", "type": "http"}'`,
         type: "editor",
     },
     mytyAi: {
@@ -46,7 +46,7 @@ const connectAIShowcase = (serverName, serverUrl, mcpPath = "/mcp") => ({
       "command": "npx",
       "args": [
         "mcp-remote",
-        "${serverUrl}${mcpPath}"
+        "{serverUrl}${mcpPath}"
       ]
     }
   }
@@ -58,7 +58,7 @@ const connectAIShowcase = (serverName, serverUrl, mcpPath = "/mcp") => ({
 // DEMO CONTENT - MARKDOWN-BASED
 // ============================================
 const generateDemoDocumentation = (serverName, serverUrl, mcpPath = "/mcp", helloWorld) => {
-    const tools = connectAIShowcase(serverName, serverUrl, mcpPath);
+    const tools = connectAIShowcase(serverName, "{serverUrl}", mcpPath);
     return `# MCP Connection Guide
 
 ${helloWorld ? `## Hello Prompt\n\n${helloWorld}\n` : ""}## How to Connect
@@ -101,20 +101,8 @@ export const mcpConnectionDemoHandler = async (c, config) => {
     const format = c.req.query("format") || config?.defaultFormat || defaultOutputFormat;
     const serverName = config?.serverName || "mcp-server";
     const mcpPath = config?.mcpPath || "/mcp";
-    // Get server URL: from config first, then extract from request
-    let serverUrl = "";
-    if (!config?.serverUrl && c.req.url) {
-        try {
-            const url = new URL(c.req.url);
-            serverUrl = `${url.protocol}//${url.host}`;
-        }
-        catch {
-            // Fallback to default if URL parsing fails
-        }
-    }
-    else if (config?.serverUrl) {
-        serverUrl = config?.serverUrl;
-    }
+    // Get server URL: from config only (client-side will detect actual protocol)
+    let serverUrl = config?.serverUrl || "";
     const tools = connectAIShowcase(serverName, serverUrl, mcpPath);
     const documentation = generateDemoDocumentation(serverName, serverUrl, mcpPath, config?.helloWorld);
     // Handle different format requests
@@ -428,16 +416,14 @@ function generateHtmlPage(serverUrl, config, tools, mcpPath = "/mcp") {
     <header>
       <h1>🌐 ${config?.serverName || "MCP Connection Demo"}</h1>
       <p>Interactive guide for connecting AI tools and development utilities</p>
-      ${config
-        ? `<p style="font-size: 0.95rem; margin-top: 1rem; opacity: 0.8;">Server: <strong>${config.serverName}</strong> v${config.serverVersion || "unknown"}</p>`
-        : ""}
+      <p style="font-size: 0.95rem; margin-top: 1rem; opacity: 0.9;">Server URL: <strong id="server-url-display" style="color: #ffd700; background: rgba(255, 215, 0, 0.2); padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: 700;">${serverUrl ? serverUrl + mcpPath : "Detecting..."}</strong></p>
     </header>
 
     <div class="content">
       ${config?.helloWorld
         ? `<div class="intro-section">
         <h2>Hello Prompt</h2>
-        <p>${config.helloWorld}</p>
+        <code>${config.helloWorld}</code>
       </div>`
         : `<div class="intro-section">
         <h2>Welcome to MCP</h2>
@@ -462,12 +448,33 @@ function generateHtmlPage(serverUrl, config, tools, mcpPath = "/mcp") {
     <footer>
       <p>${config?.serverName || "MCP Connection Demo"} &copy; 2026 | Last updated: ${new Date().toLocaleDateString()}</p>
       ${config
-        ? `<p>Server: <strong>${config.serverName}</strong> | URL: <code>${serverUrl}</code></p>`
+        ? `<p>Server: <strong>${config.serverName} ${config.serverVersion ? `v${config.serverVersion}` : ""}</strong></p>`
         : ""}
     </footer>
   </div>
 
   <script>
+    // Detect client-side protocol and replace placeholders
+    function initializeServerUrl() {
+      const protocol = window.location.protocol.replace(':', '');
+      const host = window.location.host;
+      const serverUrl = protocol + '://' + host;
+      const mcpPath = '${mcpPath}';
+
+      // Update server URL display
+      const displayElement = document.getElementById('server-url-display');
+      if (displayElement) {
+        displayElement.textContent = serverUrl + mcpPath;
+      }
+
+      // Replace {serverUrl} placeholders in all code blocks
+      document.querySelectorAll('pre code').forEach(codeBlock => {
+        let code = codeBlock.textContent;
+        code = code.replace(/{serverUrl}/g, serverUrl);
+        codeBlock.textContent = code;
+      });
+    }
+
     function copyToClipboard(text) {
       navigator.clipboard.writeText(text).then(() => {
         const btn = event.target;
@@ -482,6 +489,13 @@ function generateHtmlPage(serverUrl, config, tools, mcpPath = "/mcp") {
       });
     }
 
+    // Initialize on DOM ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initializeServerUrl);
+    } else {
+      initializeServerUrl();
+    }
+
     // Log page load performance
     window.addEventListener('load', () => {
       const perfData = performance.getEntriesByType('navigation')[0];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0",
+  "version": "1.4.2",
   "name": "modality-mcp-kit",
   "repository": {
     "type": "git",