@mcp-use/inspector 0.3.10 → 0.3.11

package/README.md

@@ -25,29 +25,29 @@
 
 ## 📦 Related Packages
 
-| Package | Description | Version |
-|---------|-------------|---------|
-| [mcp-use](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/mcp-use) | Core MCP framework | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use) |
-| [@mcp-use/cli](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/cli) | Build tool for MCP apps | [![npm](https://img.shields.io/npm/v/@mcp-use/cli.svg)](https://www.npmjs.com/package/@mcp-use/cli) |
-| [create-mcp-use-app](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/create-mcp-use-app) | Create MCP apps | [![npm](https://img.shields.io/npm/v/create-mcp-use-app.svg)](https://www.npmjs.com/package/create-mcp-use-app) |
+| Package                                                                                           | Description             | Version                                                                                                         |
+| ------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------- |
+| [mcp-use](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/mcp-use)                       | Core MCP framework      | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use)                       |
+| [@mcp-use/cli](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/cli)                      | Build tool for MCP apps | [![npm](https://img.shields.io/npm/v/@mcp-use/cli.svg)](https://www.npmjs.com/package/@mcp-use/cli)             |
+| [create-mcp-use-app](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/create-mcp-use-app) | Create MCP apps         | [![npm](https://img.shields.io/npm/v/create-mcp-use-app.svg)](https://www.npmjs.com/package/create-mcp-use-app) |
 
 ---
 
 ## ✨ Key Features
 
-| Feature | Description |
-|---------|-------------|
-| **🚀 Auto-Mount** | Automatically available at `/inspector` for all MCP-Use servers |
-| **🔌 Multi-Connection** | Connect to and manage multiple MCP servers simultaneously |
-| **🎯 Interactive Testing** | Test tools with live execution and real-time results |
-| **📊 Real-time Status** | Monitor connection states, errors, and server health |
-| **🔐 OAuth Support** | Built-in OAuth flow handling with popup authentication |
-| **💾 Persistent Sessions** | Connections saved to localStorage and auto-reconnect |
-| **🎨 Beautiful UI** | Modern, responsive interface built with React and Tailwind |
-| **🔍 Tool Explorer** | Browse and execute all available tools with schema validation |
-| **📁 Resource Browser** | View and copy resource URIs with syntax highlighting |
-| **💬 Prompt Manager** | Test and manage prompts with argument templates |
-| **🌐 Universal Support** | Works with HTTP/SSE and WebSocket connections |
+| Feature                    | Description                                                     |
+| -------------------------- | --------------------------------------------------------------- |
+| **🚀 Auto-Mount**          | Automatically available at `/inspector` for all MCP-Use servers |
+| **🔌 Multi-Connection**    | Connect to and manage multiple MCP servers simultaneously       |
+| **🎯 Interactive Testing** | Test tools with live execution and real-time results            |
+| **📊 Real-time Status**    | Monitor connection states, errors, and server health            |
+| **🔐 OAuth Support**       | Built-in OAuth flow handling with popup authentication          |
+| **💾 Persistent Sessions** | Connections saved to localStorage and auto-reconnect            |
+| **🎨 Beautiful UI**        | Modern, responsive interface built with React and Tailwind      |
+| **🔍 Tool Explorer**       | Browse and execute all available tools with schema validation   |
+| **📁 Resource Browser**    | View and copy resource URIs with syntax highlighting            |
+| **💬 Prompt Manager**      | Test and manage prompts with argument templates                 |
+| **🌐 Universal Support**   | Works with HTTP/SSE and WebSocket connections                   |
 
 ---
 
@@ -61,7 +61,7 @@ When you create an MCP server with `mcp-use`, the inspector is automatically ava
 import { createMCPServer } from 'mcp-use/server'
 
 const server = createMCPServer('my-server', {
-  version: '1.0.0'
+  version: '1.0.0',
 })
 
 // Add your tools, resources, prompts...
@@ -72,6 +72,7 @@ server.listen(3000)
 ```
 
 **That's it!** No additional configuration needed. The inspector:
+
 - Automatically mounts at `/inspector`
 - Auto-connects to your local MCP server
 - Provides instant debugging capabilities
@@ -83,13 +84,13 @@ Use the inspector with any MCP server (local or remote):
 
 ```bash
 # Inspect a remote server
-npx mcp-inspect --url https://mcp.linear.app/sse
+npx @mcp-use/inspector --url https://mcp.linear.app/sse
 
 # Custom port
-npx mcp-inspect --url http://localhost:3000/mcp --port 8080
+npx @mcp-use/inspector --url http://localhost:3000/mcp --port 8080
 
 # Open inspector without auto-connect
-npx mcp-inspect
+npx @mcp-use/inspector
 ```
 
 ### Method 3: Custom Integration
@@ -116,6 +117,7 @@ app.listen(3000)
 ### Dashboard Overview
 
 The main dashboard shows:
+
 - **Connection Overview**: Total servers, active connections, available tools
 - **Server List**: All configured servers with their current status
 - **Quick Actions**: Add new server, refresh all, clear sessions
@@ -123,10 +125,12 @@ The main dashboard shows:
 ### Adding Servers
 
 Click "Add New MCP Server" and provide:
+
 - **Server Name** (optional): Friendly name for identification
 - **Server URL**: The MCP endpoint URL
 
 Example URLs:
+
 - Local: `http://localhost:3000/mcp`
 - Linear: `https://mcp.linear.app/sse`
 - WebSocket: `ws://localhost:8080`
@@ -135,15 +139,15 @@ Example URLs:
 
 The inspector displays real-time connection states:
 
-| State | Description | Action |
-|-------|-------------|---------|
-| 🔍 **discovering** | Finding the server | Wait |
-| 🔄 **connecting** | Establishing connection | Wait |
-| 🔐 **authenticating** | OAuth flow in progress | Complete auth |
-| 📥 **loading** | Loading tools & resources | Wait |
-| ✅ **ready** | Connected and operational | Use tools |
-| ❌ **failed** | Connection failed | Retry |
-| ⏳ **pending_auth** | Waiting for authentication | Click Authenticate |
+| State                 | Description                | Action             |
+| --------------------- | -------------------------- | ------------------ |
+| 🔍 **discovering**    | Finding the server         | Wait               |
+| 🔄 **connecting**     | Establishing connection    | Wait               |
+| 🔐 **authenticating** | OAuth flow in progress     | Complete auth      |
+| 📥 **loading**        | Loading tools & resources  | Wait               |
+| ✅ **ready**          | Connected and operational  | Use tools          |
+| ❌ **failed**         | Connection failed          | Retry              |
+| ⏳ **pending_auth**   | Waiting for authentication | Click Authenticate |
 
 ### Testing Tools
 
@@ -183,6 +187,7 @@ For servers requiring OAuth (like Linear):
 4. Connection automatically completes
 
 If popup is blocked:
+
 - Click "open auth page" link
 - Complete authentication manually
 - Return to inspector
@@ -190,6 +195,7 @@ If popup is blocked:
 ### Resource Management
 
 Browse available resources:
+
 - View resource descriptions
 - Copy resource URIs
 - Check MIME types
@@ -198,6 +204,7 @@ Browse available resources:
 ### Prompt Testing
 
 Test prompts with the inspector:
+
 1. Navigate to **Prompts** tab
 2. Select a prompt
 3. Fill in required arguments
@@ -211,6 +218,7 @@ Test prompts with the inspector:
 ### Server Card
 
 Each server displays:
+
 - Connection status indicator
 - Server name and URL
 - Available tools count
@@ -220,6 +228,7 @@ Each server displays:
 ### Tool Explorer
 
 The tool explorer shows:
+
 - Tool name and description
 - Input schema with types
 - Output schema
@@ -229,6 +238,7 @@ The tool explorer shows:
 ### Chat Interface
 
 Interactive chat for testing conversational flows:
+
 - Send messages to test prompts
 - View tool calls in real-time
 - See formatted responses
@@ -251,6 +261,7 @@ Manage multiple servers efficiently:
 ### Session Management
 
 Sessions are automatically saved to localStorage:
+
 - Preserves server configurations
 - Maintains connection preferences
 - Restores on page reload
@@ -259,18 +270,19 @@ Sessions are automatically saved to localStorage:
 ### Custom Themes
 
 The inspector respects system theme preferences:
+
 - Light mode for better readability
 - Dark mode for reduced eye strain
 - Automatic switching based on OS settings
 
 ### Keyboard Shortcuts
 
-| Shortcut | Action |
-|----------|--------|
-| `Cmd/Ctrl + K` | Quick server search |
-| `Cmd/Ctrl + N` | Add new server |
+| Shortcut       | Action                  |
+| -------------- | ----------------------- |
+| `Cmd/Ctrl + K` | Quick server search     |
+| `Cmd/Ctrl + N` | Add new server          |
 | `Cmd/Ctrl + R` | Refresh all connections |
-| `Esc` | Close modals |
+| `Esc`          | Close modals            |
 
 ---
 
@@ -284,18 +296,18 @@ import { createMCPServer } from 'mcp-use/server'
 
 const server = createMCPServer('dev-server', {
   version: '1.0.0',
-  description: 'Development MCP Server'
+  description: 'Development MCP Server',
 })
 
 server.tool('debug_tool', {
   description: 'Debug tool for testing',
   parameters: z.object({
-    message: z.string()
+    message: z.string(),
   }),
   execute: async ({ message }) => {
     console.log('Debug:', message)
     return { received: message, timestamp: Date.now() }
-  }
+  },
 })
 
 server.listen(3000)
@@ -311,8 +323,8 @@ const server = createMCPServer('production-server', {
     clientId: process.env.OAUTH_CLIENT_ID,
     clientSecret: process.env.OAUTH_CLIENT_SECRET,
     authorizationUrl: 'https://api.example.com/oauth/authorize',
-    tokenUrl: 'https://api.example.com/oauth/token'
-  }
+    tokenUrl: 'https://api.example.com/oauth/token',
+  },
 })
 
 // Inspector handles OAuth flow automatically
@@ -341,6 +353,7 @@ URL: https://api.example.com/mcp
 The inspector is built with modern web technologies:
 
 ### Frontend Stack
+
 - **React 19**: UI framework
 - **React Router**: Navigation
 - **Tailwind CSS**: Styling
@@ -368,6 +381,7 @@ src/client/
 ### Connection Management
 
 The `useMcp` hook handles:
+
 - WebSocket/SSE connections
 - Automatic reconnection
 - OAuth flow management
@@ -381,6 +395,7 @@ The `useMcp` hook handles:
 ### Common Issues and Solutions
 
 **Inspector not loading:**
+
 ```bash
 # Check server is running
 curl http://localhost:3000/inspector
@@ -390,23 +405,27 @@ curl http://localhost:3000/inspector
 ```
 
 **Connection fails immediately:**
+
 - Check CORS configuration
 - Verify server URL is correct
 - Ensure server supports SSE/WebSocket
 - Check network/firewall settings
 
 **OAuth popup blocked:**
+
 - Allow popups for the inspector domain
 - Use the manual auth link provided
 - Check browser console for errors
 
 **Tools not executing:**
+
 - Verify tool schemas are valid
 - Check server logs for errors
 - Ensure proper authentication
 - Validate input parameters
 
 **Session not persisting:**
+
 - Check localStorage is enabled
 - Clear browser cache
 - Try incognito/private mode
@@ -422,7 +441,7 @@ curl http://localhost:3000/inspector
 // Use pagination for many tools
 server.configurePagination({
   toolsPerPage: 50,
-  enableSearch: true
+  enableSearch: true,
 })
 ```
 
@@ -433,7 +452,7 @@ server.configurePagination({
 const inspector = {
   maxConnections: 5,
   connectionTimeout: 30000,
-  keepAlive: true
+  keepAlive: true,
 }
 ```
 
@@ -443,7 +462,7 @@ const inspector = {
 // Cache tool results
 server.enableCache({
   ttl: 300, // 5 minutes
-  maxSize: 100 // MB
+  maxSize: 100, // MB
 })
 ```
 
@@ -457,7 +476,7 @@ server.enableCache({
 // Configure CORS for inspector access
 server.configureCORS({
   origin: ['http://localhost:3000'],
-  credentials: true
+  credentials: true,
 })
 ```
 
@@ -474,7 +493,7 @@ server.use(authMiddleware)
 // Prevent abuse
 server.configureRateLimit({
   windowMs: 60000, // 1 minute
-  max: 100 // requests
+  max: 100, // requests
 })
 ```
 
@@ -499,9 +518,9 @@ configureInspector(options: InspectorOptions): void
 
 ```typescript
 interface InspectorOptions {
-  autoConnect?: boolean      // Auto-connect to local server
+  autoConnect?: boolean // Auto-connect to local server
   theme?: 'light' | 'dark' | 'auto'
-  persistence?: boolean       // Save sessions
+  persistence?: boolean // Save sessions
   maxConnections?: number
   connectionTimeout?: number
 }
@@ -512,6 +531,7 @@ interface InspectorOptions {
 ## 🤝 Contributing
 
 We welcome contributions! Areas for improvement:
+
 - Additional UI themes
 - More keyboard shortcuts
 - Enhanced tool testing features
@@ -534,4 +554,4 @@ See our [contributing guide](https://github.com/mcp-use/mcp-use-ts/blob/main/CON
 
 ## 📜 License
 
-MIT © [MCP-Use](https://github.com/mcp-use)
+MIT © [MCP-Use](https://github.com/mcp-use)

package/dist/cli/cli/inspect.js

@@ -0,0 +1,262 @@
+#!/usr/bin/env node
+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 { 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) {
+    const net = await import('node:net');
+    for (let port = startPort; port < startPort + 100; port++) {
+        try {
+            await new Promise((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;
+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) {
+        startPort = parseInt(args[i + 1], 10);
+        i++;
+    }
+    else if (args[i] === '--help' || args[i] === '-h') {
+        console.log(`
+MCP Inspector - Inspect and debug MCP servers
+
+Usage:
+  npx @mcp-use/inspect [options]
+
+Options:
+  --url <url>    MCP server URL to auto-connect to (e.g., http://localhost:3000/mcp)
+  --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 starting from custom port
+  npx @mcp-use/inspect --url http://localhost:3000/mcp --port 9000
+
+  # Run without auto-connect
+  npx @mcp-use/inspect
+`);
+        process.exit(0);
+    }
+}
+const app = new Hono();
+// Middleware
+app.use('*', cors());
+app.use('*', logger());
+// 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);
+    }
+});
+// 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();

package/dist/cli/inspect.js

@@ -0,0 +1,382 @@
+#!/usr/bin/env node
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/cli/inspect.ts
+import { serve } from "@hono/node-server";
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import { logger } from "hono/logger";
+import { existsSync, readFileSync } from "fs";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+import open from "open";
+
+// src/server/mcp-inspector.ts
+import { MCPClient } from "mcp-use";
+var MCPInspector = class {
+  constructor() {
+    __publicField(this, "servers", /* @__PURE__ */ new Map());
+    __publicField(this, "client");
+    this.client = new MCPClient();
+  }
+  async listServers() {
+    return Array.from(this.servers.values());
+  }
+  async connectToServer(url, command) {
+    const id = Date.now().toString();
+    const name = url || command || "Unknown Server";
+    try {
+      const serverName = `server_${id}`;
+      const serverConfig = url ? { url } : { command };
+      this.client.addServer(serverName, serverConfig);
+      const session = await this.client.createSession(serverName, true);
+      const tools = [
+        {
+          name: "get_weather",
+          description: "Get current weather for a location",
+          inputSchema: {
+            type: "object",
+            properties: {
+              location: { type: "string", description: "City name" }
+            },
+            required: ["location"]
+          }
+        }
+      ];
+      const resources = [
+        {
+          uri: "file:///home/user/documents",
+          name: "Documents",
+          description: "User documents directory",
+          mimeType: "application/x-directory"
+        }
+      ];
+      const server = {
+        id,
+        name,
+        url,
+        command,
+        status: "connected",
+        session,
+        tools,
+        resources,
+        lastActivity: /* @__PURE__ */ new Date()
+      };
+      this.servers.set(id, server);
+      return server;
+    } catch (error) {
+      const server = {
+        id,
+        name,
+        url,
+        command,
+        status: "error",
+        tools: [],
+        resources: [],
+        lastActivity: /* @__PURE__ */ new Date()
+      };
+      this.servers.set(id, server);
+      throw error;
+    }
+  }
+  async getServer(id) {
+    return this.servers.get(id) || null;
+  }
+  async executeTool(serverId, toolName, input) {
+    const server = this.servers.get(serverId);
+    if (!server || !server.session) {
+      throw new Error("Server not found or not connected");
+    }
+    try {
+      const result = {
+        tool: toolName,
+        input,
+        result: `Mock result for ${toolName} with input: ${JSON.stringify(input)}`,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      server.lastActivity = /* @__PURE__ */ new Date();
+      return result;
+    } catch (error) {
+      server.status = "error";
+      throw error;
+    }
+  }
+  async getServerTools(serverId) {
+    const server = this.servers.get(serverId);
+    if (!server) {
+      throw new Error("Server not found");
+    }
+    return server.tools;
+  }
+  async getServerResources(serverId) {
+    const server = this.servers.get(serverId);
+    if (!server) {
+      throw new Error("Server not found");
+    }
+    return server.resources;
+  }
+  async disconnectServer(serverId) {
+    const server = this.servers.get(serverId);
+    if (server && server.session) {
+      try {
+        await server.session.disconnect();
+      } catch (error) {
+        console.error("Error disconnecting from server:", error);
+      }
+    }
+    this.servers.delete(serverId);
+  }
+};
+
+// src/cli/inspect.ts
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = dirname(__filename);
+function isValidUrl(urlString) {
+  try {
+    const url = new URL(urlString);
+    return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "ws:" || url.protocol === "wss:";
+  } catch {
+    return false;
+  }
+}
+async function findAvailablePort(startPort2 = 8080, maxAttempts = 100) {
+  const net = await import("net");
+  for (let port = startPort2; port < startPort2 + maxAttempts; port++) {
+    try {
+      await new Promise((resolve, reject) => {
+        const server = net.createServer();
+        server.listen(port, () => {
+          server.close(() => resolve());
+        });
+        server.on("error", (err) => reject(err));
+      });
+      return port;
+    } catch (error) {
+      continue;
+    }
+  }
+  throw new Error(`No available port found after trying ${maxAttempts} ports starting from ${startPort2}`);
+}
+var args = process.argv.slice(2);
+var mcpUrl;
+var startPort = 8080;
+for (let i = 0; i < args.length; i++) {
+  if (args[i] === "--url" && i + 1 < args.length) {
+    const url = args[i + 1];
+    if (!isValidUrl(url)) {
+      console.error(`Error: Invalid URL format: ${url}`);
+      console.error("URL must start with http://, https://, ws://, or wss://");
+      process.exit(1);
+    }
+    mcpUrl = url;
+    i++;
+  } else if (args[i] === "--port" && i + 1 < args.length) {
+    const parsedPort = Number.parseInt(args[i + 1], 10);
+    if (Number.isNaN(parsedPort) || parsedPort < 1 || parsedPort > 65535) {
+      console.error(`Error: Port must be a number between 1 and 65535, got: ${args[i + 1]}`);
+      process.exit(1);
+    }
+    startPort = parsedPort;
+    i++;
+  } else if (args[i] === "--help" || args[i] === "-h") {
+    console.log(`
+MCP Inspector - Inspect and debug MCP servers
+
+Usage:
+  npx @mcp-use/inspector [options]
+
+Options:
+  --url <url>    MCP server URL to auto-connect to (e.g., http://localhost:3000/mcp)
+  --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/inspector --url http://localhost:3000/mcp
+
+  # Run starting from custom port
+  npx @mcp-use/inspector --url http://localhost:3000/mcp --port 9000
+
+  # Run without auto-connect
+  npx @mcp-use/inspector
+`);
+    process.exit(0);
+  }
+}
+var app = new Hono();
+app.use("*", cors());
+app.use("*", logger());
+app.get("/health", (c) => {
+  return c.json({ status: "ok", timestamp: (/* @__PURE__ */ new Date()).toISOString() });
+});
+var mcpInspector = new MCPInspector();
+app.get("/api/servers", async (c) => {
+  try {
+    const servers = await mcpInspector.listServers();
+    return c.json({ servers });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    console.error("Failed to list servers:", message, error);
+    return c.json({ error: "Failed to list servers", details: message }, 500);
+  }
+});
+app.post("/api/servers/connect", async (c) => {
+  try {
+    const { url, command } = await c.req.json();
+    if (url && !isValidUrl(url)) {
+      return c.json({ error: "Invalid URL format. Must start with http://, https://, ws://, or wss://" }, 400);
+    }
+    const server = await mcpInspector.connectToServer(url, command);
+    return c.json({ server });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    console.error("Failed to connect to server:", message, error);
+    return c.json({ error: "Failed to connect to server", details: message }, 500);
+  }
+});
+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 (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    console.error("Failed to get server details:", message, error);
+    return c.json({ error: "Failed to get server details", details: message }, 500);
+  }
+});
+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 (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    console.error("Failed to execute tool:", message, error);
+    return c.json({ error: "Failed to execute tool", details: message }, 500);
+  }
+});
+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 (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    console.error("Failed to get server tools:", message, error);
+    return c.json({ error: "Failed to get server tools", details: message }, 500);
+  }
+});
+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 (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    console.error("Failed to get server resources:", message, error);
+    return c.json({ error: "Failed to get server resources", details: message }, 500);
+  }
+});
+app.delete("/api/servers/:id", async (c) => {
+  try {
+    const id = c.req.param("id");
+    await mcpInspector.disconnectServer(id);
+    return c.json({ success: true });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    console.error("Failed to disconnect server:", message, error);
+    return c.json({ error: "Failed to disconnect server", details: message }, 500);
+  }
+});
+var clientDistPath = join(__dirname, "../../dist/client");
+if (existsSync(clientDistPath)) {
+  app.get("/inspector/assets/*", (c) => {
+    const path = c.req.path.replace("/inspector/assets/", "assets/");
+    const fullPath = join(clientDistPath, path);
+    if (existsSync(fullPath)) {
+      const content = readFileSync(fullPath);
+      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();
+  });
+  app.get("/", (c) => {
+    return c.redirect("/inspector");
+  });
+  app.get("*", (c) => {
+    const indexPath = join(clientDistPath, "index.html");
+    if (existsSync(indexPath)) {
+      const content = 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(`\u26A0\uFE0F  MCP Inspector client files not found at ${clientDistPath}`);
+  console.warn(`   Run 'yarn build' in the inspector package to build the UI`);
+  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>
+    `);
+  });
+}
+async function startServer() {
+  try {
+    const port = await findAvailablePort(startPort);
+    serve({
+      fetch: app.fetch,
+      port
+    });
+    console.log(`\u{1F680} MCP Inspector running on http://localhost:${port}`);
+    if (mcpUrl) {
+      console.log(`\u{1F4E1} Auto-connecting to: ${mcpUrl}`);
+    }
+    try {
+      await open(`http://localhost:${port}`);
+      console.log(`\u{1F310} Browser opened automatically`);
+    } catch {
+      console.log(`\u{1F310} 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);
+  }
+}
+startServer();

package/dist/cli/server/mcp-inspector.js

@@ -0,0 +1,121 @@
+import { MCPClient } from 'mcp-use';
+export class MCPInspector {
+    constructor() {
+        this.servers = new Map();
+        this.client = new MCPClient();
+    }
+    async listServers() {
+        return Array.from(this.servers.values());
+    }
+    async connectToServer(url, command) {
+        const id = Date.now().toString();
+        const name = url || command || 'Unknown Server';
+        try {
+            // Configure server in MCP client
+            const serverName = `server_${id}`;
+            const serverConfig = url ? { url } : { command };
+            this.client.addServer(serverName, serverConfig);
+            // Create session
+            const session = await this.client.createSession(serverName, true);
+            // Mock tools and resources for now
+            const tools = [
+                {
+                    name: 'get_weather',
+                    description: 'Get current weather for a location',
+                    inputSchema: {
+                        type: 'object',
+                        properties: {
+                            location: { type: 'string', description: 'City name' },
+                        },
+                        required: ['location'],
+                    },
+                },
+            ];
+            const resources = [
+                {
+                    uri: 'file:///home/user/documents',
+                    name: 'Documents',
+                    description: 'User documents directory',
+                    mimeType: 'application/x-directory',
+                },
+            ];
+            const server = {
+                id,
+                name,
+                url,
+                command,
+                status: 'connected',
+                session,
+                tools,
+                resources,
+                lastActivity: new Date(),
+            };
+            this.servers.set(id, server);
+            return server;
+        }
+        catch (error) {
+            const server = {
+                id,
+                name,
+                url,
+                command,
+                status: 'error',
+                tools: [],
+                resources: [],
+                lastActivity: new Date(),
+            };
+            this.servers.set(id, server);
+            throw error;
+        }
+    }
+    async getServer(id) {
+        return this.servers.get(id) || null;
+    }
+    async executeTool(serverId, toolName, input) {
+        const server = this.servers.get(serverId);
+        if (!server || !server.session) {
+            throw new Error('Server not found or not connected');
+        }
+        try {
+            // Mock tool execution for now
+            const result = {
+                tool: toolName,
+                input,
+                result: `Mock result for ${toolName} with input: ${JSON.stringify(input)}`,
+                timestamp: new Date().toISOString(),
+            };
+            server.lastActivity = new Date();
+            return result;
+        }
+        catch (error) {
+            server.status = 'error';
+            throw error;
+        }
+    }
+    async getServerTools(serverId) {
+        const server = this.servers.get(serverId);
+        if (!server) {
+            throw new Error('Server not found');
+        }
+        return server.tools;
+    }
+    async getServerResources(serverId) {
+        const server = this.servers.get(serverId);
+        if (!server) {
+            throw new Error('Server not found');
+        }
+        return server.resources;
+    }
+    async disconnectServer(serverId) {
+        const server = this.servers.get(serverId);
+        if (server && server.session) {
+            try {
+                await server.session.disconnect();
+            }
+            catch (error) {
+                console.error('Error disconnecting from server:', error);
+            }
+        }
+        this.servers.delete(serverId);
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mcp-use/inspector",
   "type": "module",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "description": "MCP Inspector - A tool for inspecting and debugging MCP servers",
   "author": "",
   "license": "MIT",
@@ -53,6 +53,7 @@
     "lucide-react": "^0.545.0",
     "motion": "^12.23.22",
     "next-themes": "^0.4.6",
+    "open": "^10.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-resizable-panels": "^3.0.6",
@@ -61,7 +62,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "vite-express": "^0.21.1",
-    "mcp-use": "1.0.6"
+    "mcp-use": "1.0.7"
   },
   "publishConfig": {
     "access": "public"
@@ -98,7 +99,7 @@
     "build": "npm run build:client && npm run build:server && npm run build:cli",
     "build:client": "vite build",
     "build:server": "tsup src/server/*.ts --format esm --out-dir dist/server && tsc -p tsconfig.server.json --emitDeclarationOnly --declaration",
-    "build:cli": "tsup src/cli/inspect.ts --format cjs --out-dir dist/cli",
+    "build:cli": "tsup src/cli/inspect.ts --format esm --out-dir dist/cli",
     "start": "node dist/server/server.js",
     "preview": "vite preview",
     "type-check": "tsc --noEmit",