Merge branch 'feat/mcp-ui-apps' of https://github.com/mcp-use/mcp-use-ts into feat/mcp-ui-apps

Author: Pederzh

examples/kanban-app/package.json

@@ -17,7 +17,7 @@
   "main": "dist/server.js",
   "scripts": {
     "build": "tsc && mcp-use build",
-    "dev": "concurrently \"tsx src/server.ts\" \"tsx mcp-use build --watch\"",
+    "dev": "concurrently \"tsx src/server.ts\" \"mcp-use build --watch\"",
     "start": "node dist/server.js"
   },
   "dependencies": {

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)

package.json

@@ -12,18 +12,13 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "lint:strict": "eslint . --max-warnings 0",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "lint:strict": "eslint . --max-warnings 0",
     "dev": "pnpm run -r --parallel dev"
   },
   "devDependencies": {
-    "@eslint/js": "^9.28.0",
     "@types/node": "^20.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "eslint": "^9.28.0",
-    "@eslint/js": "^9.28.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "husky": "^9.1.7",

packages/create-mcp-use-app/package.json

@@ -1,16 +1,23 @@
 {
   "name": "create-mcp-use-app",
   "version": "0.1.0",
+  "type": "module",
   "description": "Create MCP-Use apps with one command",
   "bin": {
     "create-mcp-use-app": "./dist/index.js"
   },
   "scripts": {
-    "build": "tsc --build",
+    "build": "npm run clean && tsc --build && npm run copy-templates",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "copy-templates": "mkdir -p dist/templates && cp -r src/templates/* dist/templates/",
     "dev": "tsc --build --watch",
     "test": "vitest",
     "lint": "eslint ."
   },
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "dependencies": {
     "commander": "^11.0.0",
     "prompts": "^2.4.2",