@tpitre/story-ui 3.2.0 → 3.3.0

package/dist/mcp-server/routes/mcpRemote.js

@@ -1,16 +1,21 @@
 /**
  * MCP Remote HTTP Transport Routes
  *
- * Implements the SSE transport from the MCP SDK to enable
- * remote connections from Claude Desktop and other MCP clients.
+ * Implements both Streamable HTTP (modern) and SSE (legacy) transports
+ * from the MCP SDK to enable remote connections from Claude Desktop
+ * and other MCP clients.
+ *
+ * - Streamable HTTP: Single POST endpoint at /mcp (recommended for Claude Desktop)
+ * - SSE: GET /sse + POST /messages (legacy, kept for backwards compatibility)
  *
  * This allows Story UI to be accessed from Claude Desktop without requiring
  * a local process - useful for cloud deployments and shared Storybook instances.
  *
- * Uses the SSE transport available in MCP SDK v0.5.0
+ * Uses MCP SDK v1.23.0+ with Streamable HTTP transport
  */
 import { Router } from 'express';
 import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';
 import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
 import { CallToolRequestSchema, ListToolsRequestSchema, } from '@modelcontextprotocol/sdk/types.js';
 import fs from 'fs';
@@ -34,9 +39,9 @@ const HTTP_BASE_URL = `http://localhost:${HTTP_PORT}`;
 // Load configuration
 const config = loadUserConfig();
 export const router = Router();
-// Store SSE transports for session management
+// Store SSE transports for legacy session management
 const sseTransports = {};
-// Define available tools - same as the stdio server
+// Define available tools with JSON Schema (avoids Zod type recursion issues)
 const TOOLS = [
     {
         name: 'test-connection',
@@ -146,8 +151,264 @@ const TOOLS = [
         },
     },
 ];
+/**
+ * Handle tool execution
+ */
+async function handleToolCall(name, args) {
+    switch (name) {
+        case 'test-connection': {
+            return {
+                content: [{
+                        type: 'text',
+                        text: 'MCP remote connection is working! Story UI is connected via Streamable HTTP.',
+                    }],
+            };
+        }
+        case 'generate-story': {
+            const { prompt, chatId } = args;
+            const response = await fetch(`${HTTP_BASE_URL}/mcp/generate-story`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt, chatId }),
+            });
+            if (!response.ok) {
+                const error = await response.text();
+                throw new Error(`Failed to generate story: ${error}`);
+            }
+            const result = await response.json();
+            return {
+                content: [{
+                        type: 'text',
+                        text: `Story generated successfully!\n\nTitle: ${result.title || 'Untitled'}\nStory ID: ${result.storyId || 'Unknown'}\nFile Name: ${result.fileName || 'Unknown'}\n\nStory Code:\n\`\`\`tsx\n${result.story || 'Story code not available'}\n\`\`\`\n\nOpen your Storybook instance to see the generated story.\n\nTo update this story later, use the Story ID: ${result.storyId}`,
+                    }],
+            };
+        }
+        case 'list-components': {
+            const { category } = args;
+            const discovery = new EnhancedComponentDiscovery(config);
+            const components = await discovery.discoverAll();
+            let filteredComponents = components;
+            if (category) {
+                filteredComponents = components.filter(comp => comp.category?.toLowerCase() === category.toLowerCase());
+            }
+            const maxComponents = 50;
+            const displayComponents = filteredComponents.slice(0, maxComponents);
+            const componentList = displayComponents.map(comp => `- ${comp.name} (${comp.category || 'Uncategorized'})`).join('\n');
+            const responseText = filteredComponents.length > maxComponents
+                ? `Found ${filteredComponents.length} components (showing first ${maxComponents}):\n\n${componentList}\n\n...and ${filteredComponents.length - maxComponents} more components`
+                : `Found ${filteredComponents.length} components:\n\n${componentList}`;
+            return {
+                content: [{ type: 'text', text: responseText }],
+            };
+        }
+        case 'list-stories': {
+            let fileStories = [];
+            if (config.generatedStoriesPath && fs.existsSync(config.generatedStoriesPath)) {
+                const files = fs.readdirSync(config.generatedStoriesPath);
+                fileStories = files
+                    .filter(file => file.endsWith('.stories.tsx'))
+                    .map(file => {
+                    const hash = file.match(/-([a-f0-9]{8})\.stories\.tsx$/)?.[1] || '';
+                    const storyId = hash ? `story-${hash}` : file.replace('.stories.tsx', '');
+                    let title = file.replace('.stories.tsx', '').replace(/-/g, ' ');
+                    try {
+                        const filePath = path.join(config.generatedStoriesPath, file);
+                        const content = fs.readFileSync(filePath, 'utf-8');
+                        const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
+                        if (titleMatch) {
+                            title = titleMatch[1].replace('Generated/', '');
+                        }
+                    }
+                    catch {
+                        // Use filename as fallback
+                    }
+                    return { id: storyId, fileName: file, title };
+                });
+            }
+            if (fileStories.length === 0) {
+                return {
+                    content: [{
+                            type: 'text',
+                            text: 'No stories have been generated yet.\n\nGenerate your first story by describing what UI component you\'d like to create!',
+                        }],
+                };
+            }
+            let responseText = `**Available stories (${fileStories.length}):**\n`;
+            fileStories.forEach(story => {
+                responseText += `\n- ${story.title}\n  ID: ${story.id}\n  File: ${story.fileName}\n`;
+            });
+            return { content: [{ type: 'text', text: responseText }] };
+        }
+        case 'get-story': {
+            const { storyId } = args;
+            if (config.generatedStoriesPath && fs.existsSync(config.generatedStoriesPath)) {
+                const files = fs.readdirSync(config.generatedStoriesPath);
+                const hashMatch = storyId.match(/^story-([a-f0-9]{8})$/);
+                const hash = hashMatch ? hashMatch[1] : null;
+                const matchingFile = files.find(file => {
+                    if (hash && file.includes(`-${hash}.stories.tsx`))
+                        return true;
+                    if (file === `${storyId}.stories.tsx`)
+                        return true;
+                    if (file === storyId)
+                        return true;
+                    return false;
+                });
+                if (matchingFile) {
+                    const filePath = path.join(config.generatedStoriesPath, matchingFile);
+                    const content = fs.readFileSync(filePath, 'utf-8');
+                    const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
+                    const title = titleMatch ? titleMatch[1] : 'Untitled';
+                    return {
+                        content: [{
+                                type: 'text',
+                                text: `# ${title}\n\nID: ${storyId}\nFile: ${matchingFile}\n\n## Story Code:\n\`\`\`tsx\n${content}\n\`\`\``,
+                            }],
+                    };
+                }
+            }
+            throw new Error(`Story with ID ${storyId} not found`);
+        }
+        case 'delete-story': {
+            const { storyId } = args;
+            if (config.generatedStoriesPath && fs.existsSync(config.generatedStoriesPath)) {
+                const files = fs.readdirSync(config.generatedStoriesPath);
+                const hashMatch = storyId.match(/^story-([a-f0-9]{8})$/);
+                const hash = hashMatch ? hashMatch[1] : null;
+                const matchingFile = files.find(file => {
+                    if (hash && file.includes(`-${hash}.stories.tsx`))
+                        return true;
+                    if (file === `${storyId}.stories.tsx`)
+                        return true;
+                    if (file === storyId)
+                        return true;
+                    return false;
+                });
+                if (matchingFile) {
+                    const filePath = path.join(config.generatedStoriesPath, matchingFile);
+                    fs.unlinkSync(filePath);
+                    return {
+                        content: [{
+                                type: 'text',
+                                text: `Story "${matchingFile}" has been deleted successfully.`,
+                            }],
+                    };
+                }
+            }
+            throw new Error(`Story not found in file system`);
+        }
+        case 'get-component-props': {
+            const { componentName } = args;
+            const response = await fetch(`${HTTP_BASE_URL}/mcp/props?component=${encodeURIComponent(componentName)}`);
+            if (!response.ok) {
+                throw new Error(`Failed to get component props: ${response.statusText}`);
+            }
+            const props = await response.json();
+            if (!props || Object.keys(props).length === 0) {
+                return {
+                    content: [{
+                            type: 'text',
+                            text: `No prop information found for component ${componentName}.`,
+                        }],
+                };
+            }
+            const propsList = Object.entries(props).map(([propName, info]) => `- ${propName}: ${info.type} ${info.required ? '(required)' : '(optional)'}${info.description ? ` - ${info.description}` : ''}`).join('\n');
+            return {
+                content: [{
+                        type: 'text',
+                        text: `Props for ${componentName}:\n\n${propsList}`,
+                    }],
+            };
+        }
+        case 'update-story': {
+            let { storyId, prompt } = args;
+            // Find the story to update if no ID provided
+            if (!storyId && config.generatedStoriesPath && fs.existsSync(config.generatedStoriesPath)) {
+                const files = fs.readdirSync(config.generatedStoriesPath)
+                    .filter(f => f.endsWith('.stories.tsx'))
+                    .sort((a, b) => {
+                    const statA = fs.statSync(path.join(config.generatedStoriesPath, a));
+                    const statB = fs.statSync(path.join(config.generatedStoriesPath, b));
+                    return statB.mtime.getTime() - statA.mtime.getTime();
+                });
+                if (files.length > 0) {
+                    const hash = files[0].match(/-([a-f0-9]{8})\.stories\.tsx$/)?.[1];
+                    storyId = hash ? `story-${hash}` : files[0].replace('.stories.tsx', '');
+                }
+            }
+            if (!storyId) {
+                return {
+                    content: [{
+                            type: 'text',
+                            text: 'No story found to update. Please generate a story first or specify which story you\'d like to update.',
+                        }],
+                    isError: true,
+                };
+            }
+            // Get existing story content
+            let existingCode = '';
+            let storyMetadata = {};
+            if (config.generatedStoriesPath && fs.existsSync(config.generatedStoriesPath)) {
+                const files = fs.readdirSync(config.generatedStoriesPath);
+                const hashMatch = storyId.match(/^story-([a-f0-9]{8})$/);
+                const hash = hashMatch ? hashMatch[1] : null;
+                const matchingFile = files.find(file => {
+                    if (hash && file.includes(`-${hash}.stories.tsx`))
+                        return true;
+                    return false;
+                });
+                if (matchingFile) {
+                    const filePath = path.join(config.generatedStoriesPath, matchingFile);
+                    existingCode = fs.readFileSync(filePath, 'utf-8');
+                    const titleMatch = existingCode.match(/title:\s*['"]([^'"]+)['"]/);
+                    storyMetadata = {
+                        fileName: matchingFile,
+                        title: titleMatch ? titleMatch[1] : 'Untitled',
+                    };
+                }
+            }
+            const conversation = [
+                { role: 'user', content: storyMetadata.prompt || 'Generate a story' },
+                { role: 'assistant', content: existingCode },
+                { role: 'user', content: prompt },
+            ];
+            const response = await fetch(`${HTTP_BASE_URL}/mcp/generate-story`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    prompt,
+                    fileName: storyMetadata.fileName || storyId,
+                    conversation,
+                    isUpdate: true,
+                    originalTitle: storyMetadata.title,
+                    storyId,
+                }),
+            });
+            if (!response.ok) {
+                const error = await response.text();
+                throw new Error(`Failed to update story: ${error}`);
+            }
+            const result = await response.json();
+            return {
+                content: [{
+                        type: 'text',
+                        text: `Story updated successfully!\n\nTitle: ${result.title || 'Untitled'}\nID: ${result.storyId || result.fileName || 'Unknown'}\n\nUpdated Story Code:\n\`\`\`tsx\n${result.story || 'Story code not available'}\n\`\`\`\n\nThe story has been updated in your Storybook instance.`,
+                    }],
+            };
+        }
+        default:
+            return {
+                content: [{
+                        type: 'text',
+                        text: `Unknown tool: ${name}`,
+                    }],
+                isError: true,
+            };
+    }
+}
 /**
  * Create a configured MCP server instance with Story UI tools
+ * Uses the low-level Server class with request handlers
  */
 function createMcpServer() {
     const server = new Server({
@@ -166,242 +427,7 @@ function createMcpServer() {
     server.setRequestHandler(CallToolRequestSchema, async (request) => {
         const { name, arguments: args } = request.params;
         try {
-            switch (name) {
-                case 'test-connection': {
-                    return {
-                        content: [{
-                                type: 'text',
-                                text: 'MCP remote connection is working! Story UI is connected via HTTP/SSE.',
-                            }],
-                    };
-                }
-                case 'generate-story': {
-                    const { prompt, chatId } = args;
-                    const response = await fetch(`${HTTP_BASE_URL}/mcp/generate-story`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ prompt, chatId }),
-                    });
-                    if (!response.ok) {
-                        const error = await response.text();
-                        throw new Error(`Failed to generate story: ${error}`);
-                    }
-                    const result = await response.json();
-                    return {
-                        content: [{
-                                type: 'text',
-                                text: `Story generated successfully!\n\nTitle: ${result.title || 'Untitled'}\nStory ID: ${result.storyId || 'Unknown'}\nFile Name: ${result.fileName || 'Unknown'}\n\nStory Code:\n\`\`\`tsx\n${result.story || 'Story code not available'}\n\`\`\`\n\nOpen your Storybook instance to see the generated story.\n\nTo update this story later, use the Story ID: ${result.storyId}`,
-                            }],
-                    };
-                }
-                case 'list-components': {
-                    const { category } = args;
-                    const discovery = new EnhancedComponentDiscovery(config);
-                    const components = await discovery.discoverAll();
-                    let filteredComponents = components;
-                    if (category) {
-                        filteredComponents = components.filter(comp => comp.category?.toLowerCase() === category.toLowerCase());
-                    }
-                    const maxComponents = 50;
-                    const displayComponents = filteredComponents.slice(0, maxComponents);
-                    const componentList = displayComponents.map(comp => `- ${comp.name} (${comp.category || 'Uncategorized'})`).join('\n');
-                    const responseText = filteredComponents.length > maxComponents
-                        ? `Found ${filteredComponents.length} components (showing first ${maxComponents}):\n\n${componentList}\n\n...and ${filteredComponents.length - maxComponents} more components`
-                        : `Found ${filteredComponents.length} components:\n\n${componentList}`;
-                    return {
-                        content: [{ type: 'text', text: responseText }],
-                    };
-                }
-                case 'list-stories': {
-                    let fileStories = [];
-                    if (config.generatedStoriesPath && fs.existsSync(config.generatedStoriesPath)) {
-                        const files = fs.readdirSync(config.generatedStoriesPath);
-                        fileStories = files
-                            .filter(file => file.endsWith('.stories.tsx'))
-                            .map(file => {
-                            const hash = file.match(/-([a-f0-9]{8})\.stories\.tsx$/)?.[1] || '';
-                            const storyId = hash ? `story-${hash}` : file.replace('.stories.tsx', '');
-                            let title = file.replace('.stories.tsx', '').replace(/-/g, ' ');
-                            try {
-                                const filePath = path.join(config.generatedStoriesPath, file);
-                                const content = fs.readFileSync(filePath, 'utf-8');
-                                const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
-                                if (titleMatch) {
-                                    title = titleMatch[1].replace('Generated/', '');
-                                }
-                            }
-                            catch {
-                                // Use filename as fallback
-                            }
-                            return { id: storyId, fileName: file, title };
-                        });
-                    }
-                    if (fileStories.length === 0) {
-                        return {
-                            content: [{
-                                    type: 'text',
-                                    text: 'No stories have been generated yet.\n\nGenerate your first story by describing what UI component you\'d like to create!',
-                                }],
-                        };
-                    }
-                    let responseText = `**Available stories (${fileStories.length}):**\n`;
-                    fileStories.forEach(story => {
-                        responseText += `\n- ${story.title}\n  ID: ${story.id}\n  File: ${story.fileName}\n`;
-                    });
-                    return { content: [{ type: 'text', text: responseText }] };
-                }
-                case 'get-story': {
-                    const { storyId } = args;
-                    const response = await fetch(`${HTTP_BASE_URL}/mcp/stories/${storyId}`);
-                    if (!response.ok) {
-                        throw new Error(`Story with ID ${storyId} not found`);
-                    }
-                    const story = await response.json();
-                    const contentResponse = await fetch(`${HTTP_BASE_URL}/mcp/stories/${storyId}/content`);
-                    const content = contentResponse.ok ? await contentResponse.text() : story.content || story.story || 'Content not available';
-                    return {
-                        content: [{
-                                type: 'text',
-                                text: `# ${story.title || story.fileName || 'Untitled'}\n\nID: ${story.id || story.storyId || storyId}\n\n## Story Code:\n\`\`\`tsx\n${content}\n\`\`\``,
-                            }],
-                    };
-                }
-                case 'delete-story': {
-                    const { storyId } = args;
-                    if (config.generatedStoriesPath && fs.existsSync(config.generatedStoriesPath)) {
-                        const files = fs.readdirSync(config.generatedStoriesPath);
-                        const hashMatch = storyId.match(/^story-([a-f0-9]{8})$/);
-                        const hash = hashMatch ? hashMatch[1] : null;
-                        const matchingFile = files.find(file => {
-                            if (hash && file.includes(`-${hash}.stories.tsx`))
-                                return true;
-                            if (file === `${storyId}.stories.tsx`)
-                                return true;
-                            if (file === storyId)
-                                return true;
-                            return false;
-                        });
-                        if (matchingFile) {
-                            const filePath = path.join(config.generatedStoriesPath, matchingFile);
-                            fs.unlinkSync(filePath);
-                            return {
-                                content: [{
-                                        type: 'text',
-                                        text: `Story "${matchingFile}" has been deleted successfully.`,
-                                    }],
-                            };
-                        }
-                    }
-                    throw new Error(`Story not found in file system`);
-                }
-                case 'get-component-props': {
-                    const { componentName } = args;
-                    const response = await fetch(`${HTTP_BASE_URL}/mcp/props?component=${encodeURIComponent(componentName)}`);
-                    if (!response.ok) {
-                        throw new Error(`Failed to get component props: ${response.statusText}`);
-                    }
-                    const props = await response.json();
-                    if (!props || Object.keys(props).length === 0) {
-                        return {
-                            content: [{
-                                    type: 'text',
-                                    text: `No prop information found for component ${componentName}.`,
-                                }],
-                        };
-                    }
-                    const propsList = Object.entries(props).map(([propName, info]) => `- ${propName}: ${info.type} ${info.required ? '(required)' : '(optional)'}${info.description ? ` - ${info.description}` : ''}`).join('\n');
-                    return {
-                        content: [{
-                                type: 'text',
-                                text: `Props for ${componentName}:\n\n${propsList}`,
-                            }],
-                    };
-                }
-                case 'update-story': {
-                    let { storyId, prompt } = args;
-                    // Find the story to update if no ID provided
-                    if (!storyId && config.generatedStoriesPath && fs.existsSync(config.generatedStoriesPath)) {
-                        const files = fs.readdirSync(config.generatedStoriesPath)
-                            .filter(f => f.endsWith('.stories.tsx'))
-                            .sort((a, b) => {
-                            const statA = fs.statSync(path.join(config.generatedStoriesPath, a));
-                            const statB = fs.statSync(path.join(config.generatedStoriesPath, b));
-                            return statB.mtime.getTime() - statA.mtime.getTime();
-                        });
-                        if (files.length > 0) {
-                            const hash = files[0].match(/-([a-f0-9]{8})\.stories\.tsx$/)?.[1];
-                            storyId = hash ? `story-${hash}` : files[0].replace('.stories.tsx', '');
-                        }
-                    }
-                    if (!storyId) {
-                        return {
-                            content: [{
-                                    type: 'text',
-                                    text: 'No story found to update. Please generate a story first or specify which story you\'d like to update.',
-                                }],
-                            isError: true,
-                        };
-                    }
-                    // Get existing story content
-                    let existingCode = '';
-                    let storyMetadata = {};
-                    if (config.generatedStoriesPath && fs.existsSync(config.generatedStoriesPath)) {
-                        const files = fs.readdirSync(config.generatedStoriesPath);
-                        const hashMatch = storyId.match(/^story-([a-f0-9]{8})$/);
-                        const hash = hashMatch ? hashMatch[1] : null;
-                        const matchingFile = files.find(file => {
-                            if (hash && file.includes(`-${hash}.stories.tsx`))
-                                return true;
-                            return false;
-                        });
-                        if (matchingFile) {
-                            const filePath = path.join(config.generatedStoriesPath, matchingFile);
-                            existingCode = fs.readFileSync(filePath, 'utf-8');
-                            const titleMatch = existingCode.match(/title:\s*['"]([^'"]+)['"]/);
-                            storyMetadata = {
-                                fileName: matchingFile,
-                                title: titleMatch ? titleMatch[1] : 'Untitled',
-                            };
-                        }
-                    }
-                    const conversation = [
-                        { role: 'user', content: storyMetadata.prompt || 'Generate a story' },
-                        { role: 'assistant', content: existingCode },
-                        { role: 'user', content: prompt },
-                    ];
-                    const response = await fetch(`${HTTP_BASE_URL}/mcp/generate-story`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({
-                            prompt,
-                            fileName: storyMetadata.fileName || storyId,
-                            conversation,
-                            isUpdate: true,
-                            originalTitle: storyMetadata.title,
-                            storyId,
-                        }),
-                    });
-                    if (!response.ok) {
-                        const error = await response.text();
-                        throw new Error(`Failed to update story: ${error}`);
-                    }
-                    const result = await response.json();
-                    return {
-                        content: [{
-                                type: 'text',
-                                text: `Story updated successfully!\n\nTitle: ${result.title || 'Untitled'}\nID: ${result.storyId || result.fileName || 'Unknown'}\n\nUpdated Story Code:\n\`\`\`tsx\n${result.story || 'Story code not available'}\n\`\`\`\n\nThe story has been updated in your Storybook instance.`,
-                            }],
-                    };
-                }
-                default:
-                    return {
-                        content: [{
-                                type: 'text',
-                                text: `Unknown tool: ${name}`,
-                            }],
-                        isError: true,
-                    };
-            }
+            return await handleToolCall(name, args);
         }
         catch (error) {
             return {
@@ -416,12 +442,69 @@ function createMcpServer() {
     return server;
 }
 /**
- * SSE endpoint for establishing the MCP connection
+ * Streamable HTTP endpoint for MCP (modern transport for Claude Desktop)
+ * POST /mcp-remote/mcp
+ *
+ * This is the recommended endpoint for Claude Desktop connections.
+ * Uses stateless mode - each request gets a fresh server and transport
+ * to prevent JSON-RPC request ID collisions between different clients.
+ */
+router.post('/mcp', async (req, res) => {
+    console.log('[MCP Remote] Streamable HTTP request received');
+    try {
+        // Create new server and transport for each request (stateless mode)
+        const server = createMcpServer();
+        const transport = new StreamableHTTPServerTransport({
+            sessionIdGenerator: undefined, // Stateless mode
+        });
+        // Clean up transport when response closes
+        res.on('close', () => {
+            transport.close();
+        });
+        // Connect server to this transport and handle the request
+        await server.connect(transport);
+        await transport.handleRequest(req, res, req.body);
+    }
+    catch (error) {
+        console.error('[MCP Remote] Error handling Streamable HTTP request:', error);
+        if (!res.headersSent) {
+            res.status(500).json({
+                jsonrpc: '2.0',
+                error: {
+                    code: -32603,
+                    message: 'Internal server error',
+                },
+                id: null,
+            });
+        }
+    }
+});
+/**
+ * Also handle GET and DELETE for the /mcp endpoint
+ * Some MCP clients may probe with GET first
+ */
+router.get('/mcp', (req, res) => {
+    res.json({
+        jsonrpc: '2.0',
+        result: {
+            name: 'story-ui-remote',
+            version: PACKAGE_VERSION,
+            transport: 'streamable-http',
+            description: 'Story UI MCP Server - Use POST for MCP requests',
+        },
+        id: null,
+    });
+});
+/**
+ * Legacy SSE endpoint for establishing the MCP connection
  * GET /mcp-remote/sse
+ *
+ * Kept for backwards compatibility with older clients.
+ * New clients should use the Streamable HTTP endpoint at /mcp-remote/mcp
  */
 router.get('/sse', async (req, res) => {
     try {
-        console.log('[MCP Remote] New SSE connection request');
+        console.log('[MCP Remote] New SSE connection request (legacy)');
         // Create SSE transport
         const transport = new SSEServerTransport('/mcp-remote/messages', res);
         sseTransports[transport.sessionId] = transport;
@@ -431,10 +514,9 @@ router.get('/sse', async (req, res) => {
             delete sseTransports[transport.sessionId];
             console.log(`[MCP Remote] SSE session closed: ${transport.sessionId}`);
         });
-        // Create and connect the MCP server
-        // Note: server.connect() calls transport.start() internally
-        const server = createMcpServer();
-        await server.connect(transport);
+        // Create a new server for this SSE session and connect
+        const legacyServer = createMcpServer();
+        await legacyServer.connect(transport);
     }
     catch (error) {
         console.error('[MCP Remote] Error creating SSE session:', error);
@@ -444,7 +526,7 @@ router.get('/sse', async (req, res) => {
     }
 });
 /**
- * Message endpoint for SSE transport
+ * Legacy message endpoint for SSE transport
  * POST /mcp-remote/messages
  */
 router.post('/messages', async (req, res) => {
@@ -459,7 +541,6 @@ router.post('/messages', async (req, res) => {
         return;
     }
     try {
-        // Use the raw node request/response for handlePostMessage
         await transport.handlePostMessage(req, res);
     }
     catch (error) {
@@ -478,12 +559,30 @@ router.get('/health', (req, res) => {
         status: 'ok',
         service: 'story-ui-mcp-remote',
         version: PACKAGE_VERSION,
-        transport: 'SSE',
-        activeSessions: Object.keys(sseTransports).length,
-        endpoints: {
-            sse: '/mcp-remote/sse',
-            messages: '/mcp-remote/messages',
+        transports: {
+            streamableHttp: {
+                enabled: true,
+                endpoint: '/mcp-remote/mcp',
+                description: 'Modern transport for Claude Desktop (recommended)',
+            },
+            sse: {
+                enabled: true,
+                endpoint: '/mcp-remote/sse',
+                messagesEndpoint: '/mcp-remote/messages',
+                description: 'Legacy transport (deprecated)',
+                activeSessions: Object.keys(sseTransports).length,
+            },
         },
+        tools: [
+            'test-connection',
+            'generate-story',
+            'list-components',
+            'list-stories',
+            'get-story',
+            'delete-story',
+            'get-component-props',
+            'update-story',
+        ],
     });
 });
 export default router;