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

Author: Pederzh

packages/inspector/package.json

@@ -56,7 +56,7 @@
   "dependencies": {
     "@hono/node-server": "^1.19.5",
     "@mcp-ui/client": "^5.12.1",
-    "@modelcontextprotocol/sdk": "1.12.1",
+    "@modelcontextprotocol/sdk": "1.20.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",

packages/inspector/src/cli/inspect.ts

@@ -9,7 +9,6 @@ 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)
@@ -81,8 +80,6 @@ const app = new Hono()
 app.use('*', cors())
 app.use('*', logger())
 
-// Mount favicon proxy
-app.route('/api/favicon', faviconProxy)
 
 // Health check
 app.get('/health', (c) => {

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

@@ -1,25 +1,29 @@
 import type { CustomHeader } from './CustomHeadersEditor'
-import { CircleMinus, Cog, Copy, FileText, RotateCcw, Server, Shield } from 'lucide-react'
-import { useState } from 'react'
+import { CircleMinus, Cog, Copy, FileText, RotateCcw, Shield } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'sonner'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { NotFound } from '@/components/ui/not-found'
 import { RandomGradientBackground } from '@/components/ui/random-gradient-background'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useMcpContext } from '../context/McpContext'
 import { CustomHeadersEditor } from './CustomHeadersEditor'
 
 export function InspectorDashboard() {
-  const { connections, addConnection, removeConnection } = useMcpContext()
+  const mcpContext = useMcpContext()
+  const { connections, addConnection, removeConnection } = mcpContext
   const navigate = useNavigate()
 
+  // Log connections on every render to debug
+  console.warn('[InspectorDashboard] Render - connections:', connections.map(c => ({ id: c.id, state: c.state })))
+
   // Form state
   const [transportType, setTransportType] = useState('SSE')
   const [url, setUrl] = useState('')
@@ -28,35 +32,100 @@ export function InspectorDashboard() {
   const [requestTimeout, setRequestTimeout] = useState('10000')
   const [resetTimeoutOnProgress, setResetTimeoutOnProgress] = useState('True')
   const [maxTotalTimeout, setMaxTotalTimeout] = useState('60000')
-  const [proxyAddress, setProxyAddress] = useState('')
+  const [proxyAddress, setProxyAddress] = useState(`${window.location.origin}/inspector/api/proxy`)
   const [proxyToken, setProxyToken] = useState('c96aeb0c195aa9c7d3846b90aec9bc5fcdd5df97b3049aaede8f5dd1a15d2d87')
 
   // OAuth fields
   const [clientId, setClientId] = useState('')
   const [redirectUrl, setRedirectUrl] = useState(
     typeof window !== 'undefined'
       ? new URL('/oauth/callback', window.location.origin).toString()
-      : 'http://localhost:3000/oauth/callback',
+      : '/oauth/callback',
   )
   const [scope, setScope] = useState('')
 
   // UI state
   const [headersDialogOpen, setHeadersDialogOpen] = useState(false)
   const [authDialogOpen, setAuthDialogOpen] = useState(false)
   const [configDialogOpen, setConfigDialogOpen] = useState(false)
+  const [isConnecting, setIsConnecting] = useState(false)
+  const [pendingConnectionUrl, setPendingConnectionUrl] = useState<string | null>(null)
+  const hasShownToastRef = useRef(false)
+
+  // Monitor the pending connection state
+  useEffect(() => {
+    if (!pendingConnectionUrl)
+      return
+
+    const connection = connections.find(c => c.id === pendingConnectionUrl)
+    if (!connection) {
+      console.warn('[InspectorDashboard] Pending connection not found yet:', pendingConnectionUrl)
+      return
+    }
+
+    console.warn('[InspectorDashboard] Connection state:', connection.state, 'for', pendingConnectionUrl)
+
+    // Skip if we've already shown a toast for this connection
+    if (hasShownToastRef.current)
+      return
+
+    // Connection succeeded
+    if (connection.state === 'ready') {
+      console.warn('[InspectorDashboard] Connection ready!')
+      hasShownToastRef.current = true
+      setIsConnecting(false)
+      setPendingConnectionUrl(null)
+      toast.success('Connection established successfully')
+
+      // Reset form
+      setUrl('')
+      setCustomHeaders([])
+      setClientId('')
+      setScope('')
+    }
+    // Connection failed
+    else if (connection.state === 'failed' || connection.error) {
+      console.warn('[InspectorDashboard] Connection failed:', connection.error)
+      hasShownToastRef.current = true
+      setIsConnecting(false)
+      setPendingConnectionUrl(null)
+      const errorMessage = connection.error || 'Failed to connect to server'
+      toast.error(errorMessage)
+      // Don't remove the connection - let user see it in the list and manually remove if needed
+    }
+  }, [connections, pendingConnectionUrl])
 
   const handleAddConnection = () => {
     if (!url.trim())
       return
 
-    // For now, use URL as both ID and name - this will need proper implementation
-    addConnection(url, url)
+    setIsConnecting(true)
+    hasShownToastRef.current = false
+    setPendingConnectionUrl(url)
+
+    // Prepare proxy configuration if "Via Proxy" is selected
+    const proxyConfig = connectionType === 'Via Proxy' && proxyAddress.trim()
+      ? {
+          proxyAddress: proxyAddress.trim(),
+          proxyToken: proxyToken.trim(),
+          customHeaders: customHeaders.reduce((acc, header) => {
+            if (header.name && header.value) {
+              acc[header.name] = header.value
+            }
+            return acc
+          }, {} as Record<string, string>),
+        }
+      : {
+          customHeaders: customHeaders.reduce((acc, header) => {
+            if (header.name && header.value) {
+              acc[header.name] = header.value
+            }
+            return acc
+          }, {} as Record<string, string>),
+        }
 
-    // Reset form
-    setUrl('')
-    setCustomHeaders([])
-    setClientId('')
-    setScope('')
+    // For now, use URL as both ID and name - this will need proper implementation
+    addConnection(url, url, proxyConfig)
   }
 
   const handleClearAllConnections = () => {
@@ -184,15 +253,7 @@ export function InspectorDashboard() {
           </div>
           {connections.length === 0
             ? (
-                <Card>
-                  <CardContent className="flex flex-col items-center justify-center py-8">
-                    <Server className="h-12 w-12 text-muted-foreground mb-4" />
-                    <p className="text-muted-foreground">No servers connected yet</p>
-                    <p className="text-sm text-muted-foreground">
-                      Add a server above to get started
-                    </p>
-                  </CardContent>
-                </Card>
+                <NotFound message="No servers connected yet. Add a server above to get started." />
               )
             : (
                 <div className="grid gap-3">
@@ -584,20 +645,28 @@ export function InspectorDashboard() {
           {/* Connect Button */}
           <Button
             onClick={handleAddConnection}
-            disabled={!url.trim()}
+            disabled={!url.trim() || isConnecting}
             className="w-full bg-white text-black hover:bg-white/90 font-semibold mt-4"
           >
-            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-            Connect
+            {isConnecting
+              ? (
+                  <>
+                    <svg className="w-4 h-4 mr-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                    Connecting...
+                  </>
+                )
+              : (
+                  <>
+                    <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                    </svg>
+                    Connect
+                  </>
+                )}
           </Button>
 
-          {/* Status */}
-          <div className="flex items-center justify-center gap-2 text-white/60 text-sm">
-            <div className="w-2 h-2 rounded-full bg-red-500 animate-status-pulse-red"></div>
-            Disconnected
-          </div>
         </div>
         <RandomGradientBackground className="absolute inset-0" />
       </div>

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

@@ -355,7 +355,7 @@ export function Layout({ children }: LayoutProps) {
     <TooltipProvider>
       <div className="h-screen bg-[#f3f3f3] dark:bg-zinc-900 flex flex-col px-4 py-4 gap-4">
         {/* Header */}
-        <header className="max-w-screen-2xl w-full mx-auto">
+        <header className=" w-full mx-auto">
           <div className="flex items-center justify-between">
             {/* Left side: Server dropdown + Tabs */}
             <div className="flex items-center space-x-6">
@@ -588,7 +588,7 @@ export function Layout({ children }: LayoutProps) {
         </header>
 
         {/* Main Content */}
-        <main className="flex-1 max-w-screen-2xl w-full mx-auto bg-white dark:bg-zinc-800 rounded-2xl border border-zinc-200 dark:border-zinc-700 p-0 overflow-auto">
+        <main className="flex-1 w-full mx-auto bg-white dark:bg-zinc-800 rounded-2xl border border-zinc-200 dark:border-zinc-700 p-0 overflow-auto">
           {selectedServer && activeTab === 'tools'
             ? (
                 <ToolsTab

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

@@ -36,17 +36,73 @@ export function ServerIcon({
       setFaviconError(false)
 
       try {
-        const encodedUrl = encodeURIComponent(serverUrl)
-        const proxyUrl = `/inspector/api/favicon/${encodedUrl}`
-
-        // Test if favicon exists
-        const response = await fetch(proxyUrl)
-        if (response.ok) {
-          setFaviconUrl(proxyUrl)
+        // Extract domain from serverUrl
+        let domain = serverUrl
+        if (serverUrl.startsWith('http://') || serverUrl.startsWith('https://')) {
+          domain = new URL(serverUrl).hostname
+        }
+        else if (serverUrl.includes('://')) {
+          domain = serverUrl.split('://')[1].split('/')[0]
         }
         else {
+          domain = serverUrl.split('/')[0]
+        }
+
+        // Check if this is a local server - skip remote favicon services
+        const isLocalServer = domain === 'localhost'
+          || domain === '127.0.0.1'
+          || domain.startsWith('127.')
+          || domain.startsWith('192.168.')
+          || domain.startsWith('10.')
+          || domain.startsWith('172.')
+
+        if (isLocalServer) {
+          // For local servers, skip favicon fetching and go straight to fallback
           setFaviconError(true)
+          return
+        }
+
+        // Try full domain first, then base domain with 1s timeout
+        const baseDomain = domain.split('.').slice(-2).join('.')
+        const domainsToTry = domain !== baseDomain ? [domain, baseDomain] : [domain]
+
+        const faviconServices = [
+          // list of providers, google and duckduckgo are not working due to CORS
+          // `https://www.google.com/s2/favicons?domain={domain}&sz=128`,
+          `https://icon.horse/icon/{domain}`,
+          // `https://icons.duckduckgo.com/ip3/{domain}.ico`,
+        ]
+
+        for (const currentDomain of domainsToTry) {
+          for (const serviceTemplate of faviconServices) {
+            try {
+              const faviconUrl = serviceTemplate.replace('{domain}', currentDomain)
+
+              // Create a timeout promise
+              const timeoutPromise = new Promise<never>((_, reject) => {
+                setTimeout(() => reject(new Error('Timeout')), 1000)
+              })
+
+              // Race between fetch and timeout
+              const response = await Promise.race([
+                fetch(faviconUrl),
+                timeoutPromise,
+              ])
+
+              if (response.ok) {
+                setFaviconUrl(faviconUrl)
+                return
+              }
+            }
+            catch {
+              // Continue to next service
+              continue
+            }
+          }
         }
+
+        // If all services fail
+        setFaviconError(true)
       }
       catch {
         setFaviconError(true)