feat(inspector): enhance routing and server connection handling

- Update Router in App component to use basename for inspector path
- Modify InspectorDashboard to simplify server URL input placeholder
- Improve error display for connection issues with clearer formatting
- Ensure server IDs are properly encoded in links across components
- Add URL decoding for server IDs in Layout and ServerDetail components
- Implement favicon proxy endpoint in middleware for improved asset handling
- Clean up invalid connections from localStorage in McpProvider
- Remove outdated React example files and configurations from mcp-use

Author: tonxxd

packages/inspector/src/client/App.tsx

@@ -8,7 +8,7 @@ import { McpProvider } from './context/McpContext'
 function App() {
   return (
     <McpProvider>
-      <Router>
+      <Router basename="/inspector">
         <Layout>
           <Routes>
             <Route path="/" element={<InspectorDashboard />} />

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

@@ -130,7 +130,7 @@ export function InspectorDashboard() {
             />
             <div className="flex space-x-2">
               <Input
-                placeholder="Enter server URL (e.g., https://mcp.linear.app/sse)"
+                placeholder="Enter server URL"
                 value={newServerUrl}
                 onChange={e => setNewServerUrl(e.target.value)}
                 onKeyPress={e => e.key === 'Enter' && handleAddConnection()}
@@ -199,7 +199,9 @@ export function InspectorDashboard() {
                           </div>
                           {connection.error && (
                             <div className="text-sm text-red-600 mt-2">
-                              Error: {connection.error}
+                              Error:
+                              {' '}
+                              {connection.error}
                             </div>
                           )}
                           {connection.state === 'pending_auth' && connection.authUrl && (
@@ -236,7 +238,7 @@ export function InspectorDashboard() {
                           )}
                         </div>
                         <Button asChild variant="outline" size="sm">
-                          <Link to={`/servers/${connection.id}`}>
+                          <Link to={`/servers/${encodeURIComponent(connection.id)}`}>
                             Inspect
                           </Link>
                         </Button>

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

@@ -97,7 +97,7 @@ export function Layout({ children }: LayoutProps) {
 
   const handleServerSelect = (serverId: string) => {
     setSelectedServerId(serverId)
-    navigate(`/servers/${serverId}`)
+    navigate(`/servers/${encodeURIComponent(serverId)}`)
   }
 
   const selectedServer = connections.find(c => c.id === selectedServerId)
@@ -116,10 +116,7 @@ export function Layout({ children }: LayoutProps) {
           const existing = connections.find(c => c.url === config.autoConnectUrl)
           if (!existing) {
             // Auto-connect to the local server
-            addConnection({
-              name: 'Local MCP Server',
-              url: config.autoConnectUrl,
-            })
+            addConnection(config.autoConnectUrl, 'Local MCP Server')
           }
         }
       })
@@ -134,8 +131,9 @@ export function Layout({ children }: LayoutProps) {
     const serverIdFromRoute = location.pathname.split('/servers/')[1]
 
     if (isServerRoute && serverIdFromRoute) {
-      // If we're on a server route, set the selected server
-      setSelectedServerId(serverIdFromRoute)
+      // Decode the server ID from the route
+      const decodedServerId = decodeURIComponent(serverIdFromRoute)
+      setSelectedServerId(decodedServerId)
     }
     else if (!isServerRoute) {
       // If we're not on a server route, clear the selected server

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

@@ -9,7 +9,8 @@ import { useMcpContext } from '../context/McpContext'
 export function ServerDetail() {
   const { serverId } = useParams()
   const { getConnection } = useMcpContext()
-  const connection = getConnection(serverId || '')
+  const decodedServerId = serverId ? decodeURIComponent(serverId) : ''
+  const connection = getConnection(decodedServerId)
 
   const [selectedTool, setSelectedTool] = useState<string | null>(null)
   const [toolInput, setToolInput] = useState('{}')

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

@@ -37,7 +37,7 @@ export function ServerIcon({
 
       try {
         const encodedUrl = encodeURIComponent(serverUrl)
-        const proxyUrl = `/api/favicon/${encodedUrl}`
+        const proxyUrl = `/inspector/api/favicon/${encodedUrl}`
 
         // Test if favicon exists
         const response = await fetch(proxyUrl)

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

@@ -124,7 +124,7 @@ export function ServerList() {
                       </div>
                       <div className="flex items-center space-x-2">
                         <Button asChild variant="outline" size="sm">
-                          <Link to={`/servers/${connection.id}`}>Inspect</Link>
+                          <Link to={`/servers/${encodeURIComponent(connection.id)}`}>Inspect</Link>
                         </Button>
                         <Button
                           variant="outline"

packages/inspector/src/client/context/McpContext.tsx

@@ -104,10 +104,30 @@ export function McpProvider({ children }: { children: ReactNode }) {
     if (saved) {
       try {
         const parsed = JSON.parse(saved)
-        setSavedConnections(parsed)
+        // Validate and filter out invalid connections
+        const validConnections = Array.isArray(parsed) 
+          ? parsed.filter((conn: any) => {
+              // Ensure connection has valid structure with string url and id
+              return conn 
+                && typeof conn === 'object'
+                && typeof conn.id === 'string' 
+                && typeof conn.url === 'string'
+                && typeof conn.name === 'string'
+            })
+          : []
+        
+        // If we filtered out any invalid connections, update localStorage
+        if (validConnections.length !== parsed.length) {
+          console.warn('Cleaned up invalid connections from localStorage')
+          localStorage.setItem('mcp-inspector-connections', JSON.stringify(validConnections))
+        }
+        
+        setSavedConnections(validConnections)
       }
       catch (error) {
         console.error('Failed to parse saved connections:', error)
+        // Clear corrupted localStorage
+        localStorage.removeItem('mcp-inspector-connections')
       }
     }
   }, [])

packages/inspector/src/server/middleware.ts

@@ -43,6 +43,69 @@ export function mountInspector(app: Express, path: string = '/inspector', mcpSer
     })
   })
 
+  // Favicon proxy endpoint
+  app.get(`${basePath}/api/favicon/:url`, async (req: Request, res: Response) => {
+    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: Request, res: Response) => {
     const assetPath = join(clientDistPath, 'assets', _req.path)