modality-mcp-kit 1.4.2 → 1.4.3

package/dist/FastHonoMcp.js

@@ -53,6 +53,7 @@ export class FastHonoMcp extends ModalityFastMCP {
             serverVersion: version,
             mcpPath,
             helloWorld,
+            middleware: this,
         }));
         return this;
     }

package/dist/types/util_mcp_connection_demo.d.ts

@@ -6,6 +6,15 @@
  *
  * Usage: /mcp-demo - returns MCP connection demo documentation and tool showcase
  */
+import type { FastMCPCompatible } from "./util_mcp_tools_converter.js";
+interface GroupedItem {
+    name: string;
+    description?: string;
+}
+interface ItemGroup {
+    groupName: string;
+    groupItems: GroupedItem[];
+}
 interface MCPConnectionConfig {
     serverName: string;
     serverVersion?: string;
@@ -13,6 +22,8 @@ interface MCPConnectionConfig {
     mcpPath?: string;
     defaultFormat?: "json" | "markdown" | "html";
     helloWorld?: string;
+    middleware?: FastMCPCompatible;
+    customGroups?: ItemGroup[];
 }
 /**
  * Create MCP connection demo handler with server configuration

package/dist/util_mcp_connection_demo.js

@@ -7,7 +7,7 @@
  * Usage: /mcp-demo - returns MCP connection demo documentation and tool showcase
  */
 const defaultOutputFormat = "html";
-const connectAIShowcase = (serverName, serverUrl, mcpPath = "/mcp") => ({
+const connectAIShowcase = (serverName, mcpPath = "/mcp") => ({
     claudeCode: {
         name: "Claude Code",
         description: "Official Claude IDE tool for seamless development workflow",
@@ -55,10 +55,24 @@ const connectAIShowcase = (serverName, serverUrl, mcpPath = "/mcp") => ({
     },
 });
 // ============================================
+// SERVER TOOLS EXTRACTION
+// ============================================
+const getServerTools = (middleware) => {
+    if (!middleware || !middleware.getTools) {
+        return [];
+    }
+    return middleware.getTools().map((tool) => ({
+        name: tool.name,
+        description: tool.description,
+        inputSchema: tool.inputSchema,
+        annotations: tool.annotations,
+    }));
+};
+// ============================================
 // DEMO CONTENT - MARKDOWN-BASED
 // ============================================
-const generateDemoDocumentation = (serverName, serverUrl, mcpPath = "/mcp", helloWorld) => {
-    const tools = connectAIShowcase(serverName, "{serverUrl}", mcpPath);
+const generateDemoDocumentation = (serverName, mcpPath = "/mcp", helloWorld) => {
+    const mcpClients = connectAIShowcase(serverName, mcpPath);
     return `# MCP Connection Guide
 
 ${helloWorld ? `## Hello Prompt\n\n${helloWorld}\n` : ""}## How to Connect
@@ -69,10 +83,10 @@ ${helloWorld ? `## Hello Prompt\n\n${helloWorld}\n` : ""}## How to Connect
 
 ## Connection Codes
 
-${Object.entries(tools)
-        .map(([, tool]) => `### ${tool.name}
+${Object.entries(mcpClients)
+        .map(([, mcpClient]) => `### ${mcpClient.name}
 \`\`\`
-${tool.connectionCode}
+${mcpClient.connectionCode}
 \`\`\``)
         .join("\n\n")}
 `;
@@ -103,8 +117,8 @@ export const mcpConnectionDemoHandler = async (c, config) => {
     const mcpPath = config?.mcpPath || "/mcp";
     // 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);
+    const mcpClients = connectAIShowcase(serverName, mcpPath);
+    const documentation = generateDemoDocumentation(serverName, mcpPath, config?.helloWorld);
     // Handle different format requests
     if (format === "markdown" || format === "md") {
         return new Response(documentation, {
@@ -117,7 +131,7 @@ export const mcpConnectionDemoHandler = async (c, config) => {
         });
     }
     if (format === "html") {
-        const htmlContent = generateHtmlPage(serverUrl, config, tools, mcpPath);
+        const htmlContent = generateHtmlPage(serverUrl, config, mcpClients, mcpPath);
         return new Response(htmlContent, {
             status: 200,
             headers: {
@@ -128,11 +142,16 @@ export const mcpConnectionDemoHandler = async (c, config) => {
         });
     }
     // Default: JSON format with complete data
+    const serverTools = getServerTools(config?.middleware);
     const demoData = {
         documentation,
-        tools: Object.entries(tools).map(([key, tool]) => ({
+        mcpClients: Object.entries(mcpClients).map(([key, mcpClient]) => ({
             id: key,
-            ...tool,
+            ...mcpClient,
+        })),
+        serverTools: serverTools.map((tool) => ({
+            name: tool.name,
+            description: tool.description,
         })),
         server: {
             name: serverName,
@@ -141,7 +160,8 @@ export const mcpConnectionDemoHandler = async (c, config) => {
             mcpPath: mcpPath,
         },
         metadata: {
-            toolCount: Object.keys(tools).length,
+            clientCount: Object.keys(mcpClients).length,
+            toolCount: serverTools.length,
             lastUpdated: new Date().toISOString(),
             format: "json",
             availableFormats: ["json", "markdown", "html"],
@@ -170,24 +190,55 @@ function escapeHtml(text) {
 function escapeForJs(text) {
     return text.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
 }
-function generateHtmlPage(serverUrl, config, tools, mcpPath = "/mcp") {
-    const toolsToDisplay = tools || connectAIShowcase(config?.serverName || "mcp-server", serverUrl, mcpPath);
-    const toolsHtml = Object.entries(toolsToDisplay)
-        .map(([, tool]) => `
-    <div class="tool-card">
-      <h3>${tool.name}</h3>
-      <p class="tool-type">${tool.type}</p>
-      <p class="tool-description">${tool.description}</p>
+function markdownToHtml(markdown) {
+    if (!markdown)
+        return "";
+    let html = escapeHtml(markdown);
+    // Headers: # Title → <h3>Title</h3>
+    html = html.replace(/^### (.*?)$/gm, "<h3>$1</h3>");
+    html = html.replace(/^## (.*?)$/gm, "<h2>$1</h2>");
+    html = html.replace(/^# (.*?)$/gm, "<h1>$1</h1>");
+    // Bold: **text** → <strong>text</strong> (only properly paired)
+    html = html.replace(/\*\*([^\*]+)\*\*/g, "<strong>$1</strong>");
+    // Italic: *text* → <em>text</em> (require whitespace/boundaries around asterisks to avoid false matches)
+    html = html.replace(/(^|\s|\()\*([^\*\n]+)\*(?=\s|$|\.|\,|\)|:)/gm, "$1<em>$2</em>");
+    // Inline code: `code` → <code>code</code>
+    html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+    // Links: [text](url) → <a href="url">text</a>
+    html = html.replace(/\[([^\]]+)\]\(([^\)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+    // Line breaks
+    html = html.replace(/\n/g, "<br>");
+    return html;
+}
+function generateHtmlPage(serverUrl, config, mcpClientsArg, mcpPath = "/mcp") {
+    const mcpClientsToDisplay = mcpClientsArg || connectAIShowcase(config?.serverName || "mcp-server", mcpPath);
+    const serverTools = getServerTools(config?.middleware);
+    const mcpClientsHtml = Object.entries(mcpClientsToDisplay)
+        .map(([, mcpClient]) => `
+    <div class="mcp-client-card">
+      <h3>${mcpClient.name}</h3>
+      <p class="mcp-client-type">${mcpClient.type}</p>
+      <p class="mcp-client-description">${mcpClient.description}</p>
       <div class="connection-section">
         <label>Connection Code</label>
-        <pre class="code-block"><code>${escapeHtml(tool.connectionCode)}</code></pre>
-        <button class="copy-btn" onclick="copyToClipboard(\`${escapeForJs(tool.connectionCode)}\`)">
+        <pre class="code-block"><code>${escapeHtml(mcpClient.connectionCode)}</code></pre>
+        <button class="copy-btn" onclick="copyToClipboard(\`${escapeForJs(mcpClient.connectionCode)}\`)">
           Copy
         </button>
       </div>
     </div>
   `)
         .join("\n");
+    const serverToolsHtml = serverTools.length > 0
+        ? serverTools
+            .map((tool) => `
+    <div class="server-tool-card">
+      <h3>${tool.name}</h3>
+      ${tool.description ? `<div class="tool-description">${markdownToHtml(tool.description)}</div>` : ""}
+    </div>
+  `)
+            .join("\n")
+        : "";
     return `
 <!DOCTYPE html>
 <html lang="en">
@@ -277,7 +328,7 @@ function generateHtmlPage(serverUrl, config, tools, mcpPath = "/mcp") {
       gap: 2rem;
     }
 
-    .tool-card {
+    .mcp-client-card {
       border: 1px solid #e0e0e0;
       border-radius: 8px;
       padding: 1.5rem;
@@ -285,19 +336,96 @@ function generateHtmlPage(serverUrl, config, tools, mcpPath = "/mcp") {
       background: white;
     }
 
-    .tool-card:hover {
+    .mcp-client-card:hover {
       border-color: #667eea;
       box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
       transform: translateY(-2px);
     }
 
-    .tool-card h3 {
+    .mcp-client-card h3 {
       color: #333;
       margin-bottom: 0.5rem;
       font-size: 1.3rem;
     }
 
-    .tool-type {
+    .server-tool-card {
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+      padding: 1.5rem;
+      background: white;
+      border-left: 4px solid #764ba2;
+    }
+
+    .server-tool-card h3 {
+      color: #333;
+      margin-bottom: 0.5rem;
+      font-size: 1.1rem;
+    }
+
+    .tool-description {
+      color: #666;
+      font-size: 0.95rem;
+      line-height: 1.6;
+    }
+
+    .tool-description strong {
+      color: #333;
+      font-weight: 600;
+    }
+
+    .tool-description em {
+      font-style: italic;
+      color: #555;
+    }
+
+    .tool-description code {
+      background: #f5f5f5;
+      padding: 0.2rem 0.4rem;
+      border-radius: 3px;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-size: 0.85rem;
+      color: #d63384;
+      border: 1px solid #e0e0e0;
+    }
+
+    .tool-description a {
+      color: #667eea;
+      text-decoration: none;
+      border-bottom: 1px solid #667eea;
+    }
+
+    .tool-description a:hover {
+      color: #764ba2;
+      border-bottom-color: #764ba2;
+    }
+
+    .tool-description h1,
+    .tool-description h2,
+    .tool-description h3 {
+      color: #333;
+      margin: 0.5rem 0 0.25rem 0;
+      font-weight: 600;
+    }
+
+    .tool-description h1 {
+      font-size: 1.1rem;
+    }
+
+    .tool-description h2 {
+      font-size: 1rem;
+    }
+
+    .tool-description h3 {
+      font-size: 0.95rem;
+    }
+
+    .tool-description br {
+      content: "";
+      display: block;
+      margin: 0.25rem 0;
+    }
+
+    .mcp-client-type {
       display: inline-block;
       background: #667eea;
       color: white;
@@ -309,7 +437,7 @@ function generateHtmlPage(serverUrl, config, tools, mcpPath = "/mcp") {
       margin-bottom: 1rem;
     }
 
-    .tool-description {
+    .mcp-client-description {
       color: #666;
       margin-bottom: 1.5rem;
       line-height: 1.6;
@@ -440,9 +568,38 @@ function generateHtmlPage(serverUrl, config, tools, mcpPath = "/mcp") {
       <div class="tools-section">
         <h2>Connect your AI assistant</h2>
         <div class="tools-grid">
-          ${toolsHtml}
+          ${mcpClientsHtml}
         </div>
       </div>
+
+      ${serverToolsHtml
+        ? `<div class="tools-section">
+        <h2>Server Tools</h2>
+        <div class="tools-grid">
+          ${serverToolsHtml}
+        </div>
+      </div>`
+        : ""}
+
+      ${config?.customGroups && config.customGroups.length > 0
+        ? config.customGroups
+            .map((group) => `
+      <div class="tools-section">
+        <h2>${group.groupName}</h2>
+        <div class="tools-grid">
+          ${group.groupItems
+            .map((item) => `
+          <div class="server-tool-card">
+            <h3>${item.name}</h3>
+            ${item.description ? `<div class="tool-description">${markdownToHtml(item.description)}</div>` : ""}
+          </div>
+        `)
+            .join("\n")}
+        </div>
+      </div>
+    `)
+            .join("\n")
+        : ""}
     </div>
 
     <footer>

package/package.json

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