feat: move static file serving to server implementaiton

Author: pietrozullo

examples/kanban-app/src/server.ts

@@ -1,68 +1,15 @@
-import { existsSync, readdirSync } from 'node:fs'
-import { join } from 'node:path'
-import cors from 'cors'
-import express from 'express'
 import { createMCPServer } from 'mcp-use'
 
-// Create an MCP server with UI support
-const mcp = createMCPServer('ui-mcp-server', {
+// Create an MCP server (which is also an Express app)
+const server = createMCPServer('ui-mcp-server', {
   version: '1.0.0',
   description: 'An MCP server with React UI widgets',
 })
 
-// Express server for serving UI resources
-const app = express()
-app.use(cors())
-app.use(express.json())
-
-// Serve UI widgets using file-based routing
-// Serve static assets (JS, CSS) from the assets directory
-app.get('/mcp-use/widgets/:widget/assets/*', (req, res, next) => {
-  const widget = req.params.widget
-  const assetFile = (req.params as any)[0]
-  const assetPath = join(process.cwd(), 'dist', 'resources', 'mcp-use', 'widgets', widget, 'assets', assetFile)
-  res.sendFile(assetPath, err => (err ? next() : undefined))
-})
-
-// Handle assets served from the wrong path (browser resolves ./assets/ relative to /mcp-use/widgets/)
-app.get('/mcp-use/widgets/assets/*', (req, res, next) => {
-  const assetFile = (req.params as any)[0]
-  // Try to find which widget this asset belongs to by checking all widget directories
-  const widgetsDir = join(process.cwd(), 'dist', 'resources', 'mcp-use', 'widgets')
-
-  try {
-    const widgets = readdirSync(widgetsDir)
-    for (const widget of widgets) {
-      const assetPath = join(widgetsDir, widget, 'assets', assetFile)
-      if (existsSync(assetPath)) {
-        return res.sendFile(assetPath)
-      }
-    }
-    next()
-  }
-  catch {
-    next()
-  }
-})
-
-// Serve each widget's index.html at its route
-// e.g. GET /mcp-use/widgets/kanban-board -> dist/resources/mcp-use/widgets/kanban-board/index.html
-app.get('/mcp-use/widgets/:widget', (req, res, next) => {
-  const filePath = join(process.cwd(), 'dist', 'resources', 'mcp-use', 'widgets', req.params.widget, 'index.html')
-  res.sendFile(filePath, err => (err ? next() : undefined))
-})
-
-// Pass the Express app to MCP for SSE transport
-mcp.setExpressApp(app)
-
-// Start Express server
 const PORT = process.env.PORT || 3000
-app.listen(PORT, () => {
-  console.log(`🌐 UI server running on http://localhost:${PORT}`)
-})
 
 // MCP Resource for server status
-mcp.resource({
+server.resource({
   uri: 'ui://status',
   name: 'UI Server Status',
   description: 'Status of the UI MCP server',
@@ -82,7 +29,7 @@ mcp.resource({
 })
 
 // MCP Resource for Kanban Board widget
-mcp.resource({
+server.resource({
   uri: 'ui://widget/kanban-board',
   name: 'Kanban Board Widget',
   description: 'Interactive Kanban board widget',
@@ -97,7 +44,7 @@ mcp.resource({
 })
 
 // MCP Resource for Todo List widget
-mcp.resource({
+server.resource({
   uri: 'ui://widget/todo-list',
   name: 'Todo List Widget',
   description: 'Interactive todo list widget',
@@ -112,7 +59,7 @@ mcp.resource({
 })
 
 // MCP Resource for Data Visualization widget
-mcp.resource({
+server.resource({
   uri: 'ui://widget/data-visualization',
   name: 'Data Visualization Widget',
   description: 'Interactive data visualization widget',
@@ -127,7 +74,7 @@ mcp.resource({
 })
 
 // Tool for showing Kanban Board
-mcp.tool({
+server.tool({
   name: 'show-kanban',
   description: 'Display an interactive Kanban board',
   inputs: [
@@ -151,7 +98,7 @@ mcp.tool({
 })
 
 // Tool for showing Todo List
-mcp.tool({
+server.tool({
   name: 'show-todo-list',
   description: 'Display an interactive todo list',
   inputs: [
@@ -175,7 +122,7 @@ mcp.tool({
 })
 
 // Tool for showing Data Visualization
-mcp.tool({
+server.tool({
   name: 'show-data-viz',
   description: 'Display an interactive data visualization',
   inputs: [
@@ -205,7 +152,7 @@ mcp.tool({
 })
 
 // Prompt for UI development
-mcp.prompt({
+server.prompt({
   name: 'ui-development',
   description: 'Generate UI development prompts',
   args: [
@@ -251,24 +198,9 @@ mcp.prompt({
 
 console.log('🚀 Starting UI MCP Server...')
 console.log('📋 Server: ui-mcp-server v1.0.0')
-console.log(`🌐 UI Server: http://localhost:${PORT}`)
 console.log('📦 Resources: ui://status, ui://widget/kanban-board, ui://widget/todo-list, ui://widget/data-visualization')
 console.log('🛠️  Tools: show-kanban, show-todo-list, show-data-viz')
 console.log('💬 Prompts: ui-development')
 
-// Start the MCP server with HTTP by default (use MCP_TRANSPORT=stdio env var for stdio)
-console.log('📡 Setting up MCP server...')
-mcp.serve({
-  transport: (process.env.MCP_TRANSPORT as 'http' | 'stdio') || 'http',
-  endpoint: '/mcp'
-}).then(() => {
-  const transport = process.env.MCP_TRANSPORT || 'http'
-  if (transport === 'http') {
-    console.log(`📡 MCP server accessible at: http://localhost:${PORT}/mcp`)
-    console.log('✅ Server ready! Connect with MCP clients via HTTP (StreamableHTTP transport)')
-  } else {
-    console.log('✅ Server ready! Connect with MCP clients via stdio')
-  }
-}).catch((error) => {
-  console.error('❌ Failed to start MCP server:', error)
-})
+// Start the server (MCP endpoints auto-mounted at /mcp)
+server.listen(PORT)

packages/mcp-use/src/server/mcp-server.ts

@@ -8,6 +8,8 @@ import type {
 import { McpServer as OfficialMcpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
 import { z } from 'zod'
 import express, { type Express } from 'express'
+import { existsSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
 
 export class McpServer {
   private server: OfficialMcpServer
@@ -31,6 +33,9 @@ export class McpServer {
       next()
     })
 
+    // Setup default widget serving routes
+    this.setupWidgetRoutes()
+
     // Proxy all Express methods to the underlying app
     return new Proxy(this, {
       get(target, prop) {
@@ -200,6 +205,47 @@ export class McpServer {
     })
   }
 
+  /**
+   * Setup default widget serving routes
+   */
+  private setupWidgetRoutes(): void {
+    // Serve static assets (JS, CSS) from the assets directory
+    this.app.get('/mcp-use/widgets/:widget/assets/*', (req, res, next) => {
+      const widget = req.params.widget
+      const assetFile = (req.params as any)[0]
+      const assetPath = join(process.cwd(), 'dist', 'resources', 'mcp-use', 'widgets', widget, 'assets', assetFile)
+      res.sendFile(assetPath, err => (err ? next() : undefined))
+    })
+
+    // Handle assets served from the wrong path (browser resolves ./assets/ relative to /mcp-use/widgets/)
+    this.app.get('/mcp-use/widgets/assets/*', (req, res, next) => {
+      const assetFile = (req.params as any)[0]
+      // Try to find which widget this asset belongs to by checking all widget directories
+      const widgetsDir = join(process.cwd(), 'dist', 'resources', 'mcp-use', 'widgets')
+
+      try {
+        const widgets = readdirSync(widgetsDir)
+        for (const widget of widgets) {
+          const assetPath = join(widgetsDir, widget, 'assets', assetFile)
+          if (existsSync(assetPath)) {
+            return res.sendFile(assetPath)
+          }
+        }
+        next()
+      }
+      catch {
+        next()
+      }
+    })
+
+    // Serve each widget's index.html at its route
+    // e.g. GET /mcp-use/widgets/kanban-board -> dist/resources/mcp-use/widgets/kanban-board/index.html
+    this.app.get('/mcp-use/widgets/:widget', (req, res, next) => {
+      const filePath = join(process.cwd(), 'dist', 'resources', 'mcp-use', 'widgets', req.params.widget, 'index.html')
+      res.sendFile(filePath, err => (err ? next() : undefined))
+    })
+  }
+
   /**
    * Create input schema for resource templates
    */