refactor(inspector): streamline development setup and enhance server functionality

- Simplify development script by removing concurrent execution of client and server
- Update Vite configuration to remove unnecessary proxy settings
- Refactor inspector CLI to use Hono framework, adding automatic port selection and improved health checks
- Enhance resource handling in UI components, including automatic resource reading and improved loading states
- Update ToolsTab to conditionally display MCP UI resources and JSON content based on user selection

Author: tonxxd

packages/inspector/package.json

@@ -26,9 +26,7 @@
     "dist"
   ],
   "scripts": {
-    "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
-    "dev:client": "vite",
-    "dev:server": "tsx watch src/server/standalone.ts",
+    "dev": "tsx watch src/server/standalone.ts",
     "build": "npm run build:client && npm run build:server",
     "build:client": "vite build",
     "build:server": "tsc -p tsconfig.server.json",

packages/inspector/src/cli/inspect.ts

@@ -1,19 +1,53 @@
 #!/usr/bin/env node
 
-import express from 'express'
-import { mountInspector } from '../server/middleware.js'
+import { serve } from '@hono/node-server'
+import { Hono } from 'hono'
+import { cors } from 'hono/cors'
+import { logger } from 'hono/logger'
+import { existsSync } from 'node:fs'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { exec } from 'node:child_process'
+import { promisify } from 'node:util'
+import faviconProxy from '../server/favicon-proxy.js'
+import { MCPInspector } from '../server/mcp-inspector.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const execAsync = promisify(exec)
+
+// Find available port starting from 8080
+async function findAvailablePort(startPort = 8080): Promise<number> {
+  const net = await import('node:net')
+  
+  for (let port = startPort; port < startPort + 100; port++) {
+    try {
+      await new Promise<void>((resolve, reject) => {
+        const server = net.createServer()
+        server.listen(port, () => {
+          server.close(() => resolve())
+        })
+        server.on('error', () => reject(new Error(`Port ${port} is in use`)))
+      })
+      return port
+    } catch {
+      continue
+    }
+  }
+  throw new Error(`No available port found starting from ${startPort}`)
+}
 
 // Parse command line arguments
 const args = process.argv.slice(2)
 let mcpUrl: string | undefined
-let port = 3100
+let startPort = 8080
 
 for (let i = 0; i < args.length; i++) {
   if (args[i] === '--url' && i + 1 < args.length) {
     mcpUrl = args[i + 1]
     i++
   } else if (args[i] === '--port' && i + 1 < args.length) {
-    port = parseInt(args[i + 1], 10)
+    startPort = parseInt(args[i + 1], 10)
     i++
   } else if (args[i] === '--help' || args[i] === '-h') {
     console.log(`
@@ -24,15 +58,15 @@ Usage:
 
 Options:
   --url <url>    MCP server URL to auto-connect to (e.g., http://localhost:3000/mcp)
-  --port <port>  Port to run the inspector on (default: 3100)
+  --port <port>  Starting port to try (default: 8080, will find next available)
   --help, -h     Show this help message
 
 Examples:
   # Run inspector with auto-connect
   npx @mcp-use/inspect --url http://localhost:3000/mcp
 
-  # Run on custom port
-  npx @mcp-use/inspect --url http://localhost:3000/mcp --port 8080
+  # Run starting from custom port
+  npx @mcp-use/inspect --url http://localhost:3000/mcp --port 9000
 
   # Run without auto-connect
   npx @mcp-use/inspect
@@ -41,17 +75,219 @@ Examples:
   }
 }
 
-const app = express()
+const app = new Hono()
 
-// Mount the inspector
-mountInspector(app, '/', mcpUrl)
+// Middleware
+app.use('*', cors())
+app.use('*', logger())
 
-// Start the server
-app.listen(port, () => {
-  console.log(`MCP Inspector running at http://localhost:${port}`)
-  if (mcpUrl) {
-    console.log(`📡 Auto-connecting to: ${mcpUrl}`)
+// Mount favicon proxy
+app.route('/api/favicon', faviconProxy)
+
+// Health check
+app.get('/health', (c) => {
+  return c.json({ status: 'ok', timestamp: new Date().toISOString() })
+})
+
+// MCP Inspector routes
+const mcpInspector = new MCPInspector()
+
+// List available MCP servers
+app.get('/api/servers', async (c) => {
+  try {
+    const servers = await mcpInspector.listServers()
+    return c.json({ servers })
+  }
+  catch {
+    return c.json({ error: 'Failed to list servers' }, 500)
+  }
+})
+
+// Connect to an MCP server
+app.post('/api/servers/connect', async (c) => {
+  try {
+    const { url, command } = await c.req.json()
+    const server = await mcpInspector.connectToServer(url, command)
+    return c.json({ server })
+  }
+  catch {
+    return c.json({ error: 'Failed to connect to server' }, 500)
+  }
+})
+
+// Get server details
+app.get('/api/servers/:id', async (c) => {
+  try {
+    const id = c.req.param('id')
+    const server = await mcpInspector.getServer(id)
+    if (!server) {
+      return c.json({ error: 'Server not found' }, 404)
+    }
+    return c.json({ server })
+  }
+  catch {
+    return c.json({ error: 'Failed to get server details' }, 500)
+  }
+})
+
+// Execute a tool on a server
+app.post('/api/servers/:id/tools/:toolName/execute', async (c) => {
+  try {
+    const id = c.req.param('id')
+    const toolName = c.req.param('toolName')
+    const input = await c.req.json()
+
+    const result = await mcpInspector.executeTool(id, toolName, input)
+    return c.json({ result })
+  }
+  catch {
+    return c.json({ error: 'Failed to execute tool' }, 500)
+  }
+})
+
+// Get server tools
+app.get('/api/servers/:id/tools', async (c) => {
+  try {
+    const id = c.req.param('id')
+    const tools = await mcpInspector.getServerTools(id)
+    return c.json({ tools })
+  }
+  catch {
+    return c.json({ error: 'Failed to get server tools' }, 500)
+  }
+})
+
+// Get server resources
+app.get('/api/servers/:id/resources', async (c) => {
+  try {
+    const id = c.req.param('id')
+    const resources = await mcpInspector.getServerResources(id)
+    return c.json({ resources })
+  }
+  catch {
+    return c.json({ error: 'Failed to get server resources' }, 500)
+  }
+})
+
+// Disconnect from a server
+app.delete('/api/servers/:id', async (c) => {
+  try {
+    const id = c.req.param('id')
+    await mcpInspector.disconnectServer(id)
+    return c.json({ success: true })
+  }
+  catch {
+    return c.json({ error: 'Failed to disconnect server' }, 500)
   }
-  console.log(`\nOpen http://localhost:${port} in your browser to inspect MCP servers`)
 })
 
+// Serve static assets from the built client
+const clientDistPath = join(__dirname, '../../dist/client')
+
+if (existsSync(clientDistPath)) {
+  // Serve static assets from /inspector/assets/* (matching Vite's base path)
+  app.get('/inspector/assets/*', async (c) => {
+    const path = c.req.path.replace('/inspector/assets/', 'assets/')
+    const fullPath = join(clientDistPath, path)
+    
+    if (existsSync(fullPath)) {
+      const content = await import('node:fs').then(fs => fs.readFileSync(fullPath))
+      
+      // Set appropriate content type based on file extension
+      if (path.endsWith('.js')) {
+        c.header('Content-Type', 'application/javascript')
+      } else if (path.endsWith('.css')) {
+        c.header('Content-Type', 'text/css')
+      } else if (path.endsWith('.svg')) {
+        c.header('Content-Type', 'image/svg+xml')
+      }
+      
+      return c.body(content)
+    }
+    
+    return c.notFound()
+  })
+  
+  // Redirect root path to /inspector
+  app.get('/', (c) => {
+    return c.redirect('/inspector')
+  })
+
+  // Serve the main HTML file for /inspector and all other routes (SPA routing)
+  app.get('*', (c) => {
+    const indexPath = join(clientDistPath, 'index.html')
+    if (existsSync(indexPath)) {
+      const content = import('node:fs').then(fs => fs.readFileSync(indexPath, 'utf-8'))
+      return c.html(content)
+    }
+    return c.html(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>MCP Inspector</title>
+        </head>
+        <body>
+          <h1>MCP Inspector</h1>
+          <p>Client files not found. Please run 'yarn build' to build the UI.</p>
+          <p>API is available at <a href="/api/servers">/api/servers</a></p>
+        </body>
+      </html>
+    `)
+  })
+} else {
+  console.warn(`⚠️  MCP Inspector client files not found at ${clientDistPath}`)
+  console.warn(`   Run 'yarn build' in the inspector package to build the UI`)
+  
+  // Fallback for when client is not built
+  app.get('*', (c) => {
+    return c.html(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>MCP Inspector</title>
+        </head>
+        <body>
+          <h1>MCP Inspector</h1>
+          <p>Client files not found. Please run 'yarn build' to build the UI.</p>
+          <p>API is available at <a href="/api/servers">/api/servers</a></p>
+        </body>
+      </html>
+    `)
+  })
+}
+
+// Start the server with automatic port selection
+async function startServer() {
+  try {
+    const port = await findAvailablePort(startPort)
+    
+    serve({
+      fetch: app.fetch,
+      port,
+    })
+    
+    console.log(`🚀 MCP Inspector running on http://localhost:${port}`)
+    
+    if (mcpUrl) {
+      console.log(`📡 Auto-connecting to: ${mcpUrl}`)
+    }
+    
+    // Auto-open browser
+    try {
+      const command = process.platform === 'win32' ? 'start' : process.platform === 'darwin' ? 'open' : 'xdg-open'
+      await execAsync(`${command} http://localhost:${port}`)
+      console.log(`🌐 Browser opened automatically`)
+    } catch (error) {
+      console.log(`🌐 Please open http://localhost:${port} in your browser`)
+    }
+    
+    return { port, fetch: app.fetch }
+  } catch (error) {
+    console.error('Failed to start server:', error)
+    process.exit(1)
+  }
+}
+
+// Start the server
+startServer()
+

packages/inspector/src/client/components/Layout.tsx

@@ -188,16 +188,46 @@ export function Layout({ children }: LayoutProps) {
   }, [location.pathname])
 
   // If no server is selected and we're on a server route, navigate to root
+  // But only after we've given connections time to load and establish
   useEffect(() => {
     const serverIdFromRoute = location.pathname.split('/servers/')[1]
     const decodedServerId = serverIdFromRoute ? decodeURIComponent(serverIdFromRoute) : null
 
-    // Only navigate away if we've already set selectedServerId from the route
-    // and the server still wasn't found in connections
-    if (!selectedServer && location.pathname.startsWith('/servers/') && selectedServerId === decodedServerId) {
-      navigate('/')
+    const isServerRoute = location.pathname.startsWith('/servers/')
+    const hasServerId = selectedServerId === decodedServerId
+
+    if (!isServerRoute || !hasServerId || !configLoaded) {
+      return
     }
-  }, [selectedServer, location.pathname, navigate, selectedServerId])
+
+    // Check if any connection exists for this server
+    const serverConnection = connections.find(conn => conn.id === decodedServerId)
+
+    if (serverConnection) {
+      // Server connection exists - check its state
+      if (serverConnection.state === 'failed') {
+        // Server failed to connect, redirect after a short delay
+        const timeoutId = setTimeout(() => {
+          navigate('/')
+        }, 2000)
+        return () => clearTimeout(timeoutId)
+      }
+      // If server is connecting/loading/discovering, don't redirect yet
+      if (serverConnection.state === 'connecting' || serverConnection.state === 'loading' || serverConnection.state === 'discovering') {
+        return
+      }
+      // If server is ready, we're good - no redirect needed
+      return
+    }
+
+    // No connection found for this server
+    // Wait a bit for auto-connection to potentially kick in, then redirect
+    const timeoutId = setTimeout(() => {
+      navigate('/')
+    }, 3000)
+
+    return () => clearTimeout(timeoutId)
+  }, [selectedServer, location.pathname, navigate, selectedServerId, connections, configLoaded])
 
   // Handle keyboard shortcuts
   useEffect(() => {
@@ -393,7 +423,7 @@ export function Layout({ children }: LayoutProps) {
                 ? (
                     <ResourcesTab
                       resources={selectedServer.resources}
-                      readResource={(uri: string) => selectedServer.callTool('read_resource', { uri })} // Using callTool for now, should be readResource when available
+                      readResource={selectedServer.readResource}
                       isConnected={selectedServer.state === 'ready'}
                     />
                   )