npm - @mcp-use/inspector - Versions diffs - 0.2.1 → 0.2.2 - Mend

@mcp-use/inspector 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/cli/inspect.js +265 -0
package/dist/client/assets/{index-Risbd_Le.js → index-DZm4vi0J.js} +1 -1
package/dist/client/index.html +1 -1
package/dist/server/favicon-proxy.js +123 -0
package/dist/server/index.js +7 -0
package/dist/server/mcp-inspector.js +132 -0
package/dist/server/middleware.js +145 -0
package/dist/server/server.js +294 -0
package/dist/server/standalone.d.ts +9 -0
package/dist/server/standalone.d.ts.map +1 -0
package/dist/server/standalone.js +228 -0
package/dist/server/unified.js +294 -0
package/package.json +2 -2

package/dist/client/index.html CHANGED Viewed

@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">
     <title>MCP Inspector</title>
-    <script type="module" crossorigin src="/inspector/assets/index-Risbd_Le.js"></script>
+    <script type="module" crossorigin src="/inspector/assets/index-DZm4vi0J.js"></script>
     <link rel="stylesheet" crossorigin href="/inspector/assets/index-BOon65c9.css">
   </head>
   <body>

package/dist/server/favicon-proxy.js ADDED Viewed

@@ -0,0 +1,123 @@
+import { Hono } from 'hono';
+import { cors } from 'hono/cors';
+const app = new Hono();
+// Enable CORS for all routes
+app.use('*', cors());
+const faviconCache = new Map();
+const CACHE_TTL = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
+const MAX_CACHE_SIZE = 1000; // Maximum number of cached favicons
+// Clean up expired cache entries
+function cleanupCache() {
+    const now = Date.now();
+    for (const [key, entry] of faviconCache.entries()) {
+        if (now - entry.timestamp > entry.ttl) {
+            faviconCache.delete(key);
+        }
+    }
+}
+// Run cleanup every hour
+setInterval(cleanupCache, 60 * 60 * 1000);
+// Get cache key for a URL
+function getCacheKey(url) {
+    try {
+        const urlObj = new URL(url);
+        return urlObj.hostname.toLowerCase();
+    }
+    catch {
+        return url.toLowerCase();
+    }
+}
+// Favicon proxy endpoint
+app.get('/:url', async (c) => {
+    const url = c.req.param('url');
+    if (!url) {
+        return c.json({ error: 'URL parameter is required' }, 400);
+    }
+    try {
+        // Decode the URL
+        const decodedUrl = decodeURIComponent(url);
+        // Add protocol if missing
+        let fullUrl = decodedUrl;
+        if (!decodedUrl.startsWith('http://') && !decodedUrl.startsWith('https://')) {
+            fullUrl = `https://${decodedUrl}`;
+        }
+        // Validate URL
+        const urlObj = new URL(fullUrl);
+        const cacheKey = getCacheKey(fullUrl);
+        // Check cache first
+        const cachedEntry = faviconCache.get(cacheKey);
+        if (cachedEntry && (Date.now() - cachedEntry.timestamp) < cachedEntry.ttl) {
+            return new Response(cachedEntry.data, {
+                headers: {
+                    'Content-Type': cachedEntry.contentType,
+                    'Cache-Control': 'public, max-age=86400, immutable', // Cache for 24 hours
+                    'Access-Control-Allow-Origin': '*',
+                    'X-Cache': 'HIT',
+                },
+            });
+        }
+        const protocol = urlObj.protocol;
+        const baseDomain = `${protocol}//${urlObj.origin.split('.').slice(-2).join('.')}`;
+        // Try to fetch favicon from common locations
+        const faviconUrls = [
+            `${urlObj.origin}/favicon.ico`,
+            `${urlObj.origin}/favicon.png`,
+            `${urlObj.origin}/apple-touch-icon.png`,
+            `${urlObj.origin}/icon.png`,
+            `${baseDomain}/favicon.ico`,
+            `${baseDomain}/favicon.png`,
+            `${baseDomain}/apple-touch-icon.png`,
+            `${baseDomain}/icon.png`,
+        ];
+        for (const faviconUrl of faviconUrls) {
+            try {
+                const response = await fetch(faviconUrl, {
+                    headers: {
+                        'User-Agent': 'Mozilla/5.0 (compatible; MCP-Inspector/1.0)',
+                    },
+                });
+                if (response.ok) {
+                    const contentType = response.headers.get('content-type') || 'image/x-icon';
+                    const buffer = await response.arrayBuffer();
+                    // Cache the result
+                    if (faviconCache.size >= MAX_CACHE_SIZE) {
+                        // Remove oldest entries if cache is full
+                        const entries = Array.from(faviconCache.entries());
+                        entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
+                        const toRemove = entries.slice(0, Math.floor(MAX_CACHE_SIZE / 4));
+                        toRemove.forEach(([key]) => faviconCache.delete(key));
+                    }
+                    faviconCache.set(cacheKey, {
+                        data: buffer,
+                        contentType,
+                        timestamp: Date.now(),
+                        ttl: CACHE_TTL,
+                    });
+                    return new Response(buffer, {
+                        headers: {
+                            'Content-Type': contentType,
+                            'Cache-Control': 'public, max-age=86400, immutable', // Cache for 24 hours
+                            'Access-Control-Allow-Origin': '*',
+                            'X-Cache': 'MISS',
+                        },
+                    });
+                }
+            }
+            catch {
+                // Continue to next URL
+                continue;
+            }
+        }
+        // If no favicon found, return a default icon
+        return c.json({ error: 'No favicon found' }, 404);
+    }
+    catch (error) {
+        console.error('Favicon proxy error:', error);
+        return c.json({ error: 'Invalid URL or fetch failed' }, 400);
+    }
+});
+// Health check endpoint
+app.get('/health', (c) => {
+    return c.json({ status: 'ok', service: 'favicon-proxy' });
+});
+export default app;

package/dist/server/index.js ADDED Viewed

@@ -0,0 +1,7 @@
+/**
+ * MCP Inspector - Middleware for mounting inspector UI on Express apps
+ *
+ * This is the main entry point for importing the inspector as a library.
+ * For standalone server usage, see standalone.ts
+ */
+export { mountInspector } from './middleware.js';

package/dist/server/mcp-inspector.js ADDED Viewed

@@ -0,0 +1,132 @@
+import { MCPClient } from 'mcp-use';
+export class MCPInspector {
+    constructor() {
+        Object.defineProperty(this, "servers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "client", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        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/dist/server/middleware.js ADDED Viewed

@@ -0,0 +1,145 @@
+import { Buffer } from 'node:buffer';
+import { existsSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+/**
+ * Mount the MCP Inspector UI at a specified path on an Express app
+ * Similar to how FastAPI mounts Swagger UI at /docs
+ *
+ * @param app - Express application instance
+ * @param path - Mount path (default: '/inspector')
+ * @param mcpServerUrl - Optional MCP server URL to auto-connect to
+ *
+ * @example
+ * ```typescript
+ * import { createMCPServer } from 'mcp-use'
+ * import { mountInspector } from '@mcp-use/inspector'
+ *
+ * const server = createMCPServer('my-server')
+ * mountInspector(server) // Mounts at /inspector
+ * ```
+ */
+export function mountInspector(app, path = '/inspector', mcpServerUrl) {
+    // Ensure path starts with /
+    const basePath = path.startsWith('/') ? path : `/${path}`;
+    // Find the built client files
+    const clientDistPath = join(__dirname, '../../dist/client');
+    if (!existsSync(clientDistPath)) {
+        console.warn(`⚠️  MCP Inspector client files not found at ${clientDistPath}`);
+        console.warn(`   Run 'yarn build' in the inspector package to build the UI`);
+        return;
+    }
+    // Serve inspector config endpoint
+    app.get(`${basePath}/config.json`, (_req, res) => {
+        res.json({
+            autoConnectUrl: mcpServerUrl || null,
+        });
+    });
+    // Favicon proxy endpoint
+    app.get(`${basePath}/api/favicon/:url`, async (req, res) => {
+        const url = req.params.url;
+        if (!url) {
+            res.status(400).json({ error: 'URL parameter is required' });
+            return;
+        }
+        try {
+            // Decode the URL
+            const decodedUrl = decodeURIComponent(url);
+            // Add protocol if missing
+            let fullUrl = decodedUrl;
+            if (!decodedUrl.startsWith('http://') && !decodedUrl.startsWith('https://')) {
+                fullUrl = `https://${decodedUrl}`;
+            }
+            // Validate URL
+            const urlObj = new URL(fullUrl);
+            // Try to fetch favicon from common locations
+            const faviconUrls = [
+                `${urlObj.origin}/favicon.ico`,
+                `${urlObj.origin}/favicon.png`,
+                `${urlObj.origin}/apple-touch-icon.png`,
+            ];
+            for (const faviconUrl of faviconUrls) {
+                try {
+                    const response = await fetch(faviconUrl, {
+                        headers: {
+                            'User-Agent': 'Mozilla/5.0 (compatible; MCP-Inspector/1.0)',
+                        },
+                    });
+                    if (response.ok) {
+                        const contentType = response.headers.get('content-type') || 'image/x-icon';
+                        const buffer = await response.arrayBuffer();
+                        res.setHeader('Content-Type', contentType);
+                        res.setHeader('Cache-Control', 'public, max-age=86400');
+                        res.setHeader('Access-Control-Allow-Origin', '*');
+                        res.send(Buffer.from(buffer));
+                        return;
+                    }
+                }
+                catch {
+                    // Continue to next URL
+                    continue;
+                }
+            }
+            // If no favicon found, return 404
+            res.status(404).json({ error: 'No favicon found' });
+        }
+        catch (error) {
+            console.error('Favicon proxy error:', error);
+            res.status(400).json({ error: 'Invalid URL or fetch failed' });
+        }
+    });
+    // Serve static assets
+    app.use(`${basePath}/assets`, (_req, res) => {
+        const assetPath = join(clientDistPath, 'assets', _req.path);
+        if (existsSync(assetPath)) {
+            // Set appropriate content type
+            if (assetPath.endsWith('.js')) {
+                res.setHeader('Content-Type', 'application/javascript');
+            }
+            else if (assetPath.endsWith('.css')) {
+                res.setHeader('Content-Type', 'text/css');
+            }
+            res.sendFile(assetPath);
+        }
+        else {
+            res.status(404).send('Asset not found');
+        }
+    });
+    // Handle OAuth callback redirects - redirect /oauth/callback to /inspector/oauth/callback
+    // This helps when OAuth providers are configured with the wrong redirect URL
+    if (basePath !== '') {
+        app.get('/oauth/callback', (req, res) => {
+            const queryString = req.url.split('?')[1] || '';
+            const redirectUrl = queryString
+                ? `${basePath}/oauth/callback?${queryString}`
+                : `${basePath}/oauth/callback`;
+            res.redirect(302, redirectUrl);
+        });
+    }
+    // Serve the main HTML file for the root inspector path (exact match)
+    app.get(basePath, (_req, res) => {
+        const indexPath = join(clientDistPath, 'index.html');
+        if (!existsSync(indexPath)) {
+            res.status(500).send('Inspector UI not found. Please build the inspector package.');
+            return;
+        }
+        // Serve the HTML file (Vite built with base: '/inspector')
+        res.sendFile(indexPath);
+    });
+    // Redirect /inspector/ to /inspector (remove trailing slash)
+    app.get(`${basePath}/`, (_req, res) => {
+        res.redirect(301, basePath);
+    });
+    // Serve the main HTML file for all other inspector routes (SPA routing)
+    app.get(`${basePath}/*`, (_req, res) => {
+        const indexPath = join(clientDistPath, 'index.html');
+        if (!existsSync(indexPath)) {
+            res.status(500).send('Inspector UI not found. Please build the inspector package.');
+            return;
+        }
+        // Serve the HTML file (Vite built with base: '/inspector')
+        res.sendFile(indexPath);
+    });
+}