Add transport type selector to inspector UI and comprehensive transport testing

- Add transport type dropdown to inspector UI (auto, HTTP, SSE) with session storage persistence
- Update test framework to support transport type selection in test scenarios
- Add comprehensive test cases covering:
  * Working /mcp endpoints with auto and HTTP transports
  * SSE endpoint with SSE transport (expected to pass)
  * SSE endpoint with auto transport (expected to fail - demonstrates current fallback issue)
- Test structure now provides clear visibility into transport-specific behavior
- All tests properly named and categorized for easy identification of failing scenarios

Author: geelen

examples/inspector/src/components/McpServers.tsx

@@ -3,14 +3,22 @@ import { useMcp, type Tool } from 'use-mcp/react'
 import { Info, X, ChevronRight, ChevronDown } from 'lucide-react'
 
 // MCP Connection wrapper that only renders when active
-function McpConnection({ serverUrl, onConnectionUpdate }: { serverUrl: string; onConnectionUpdate: (data: any) => void }) {
+function McpConnection({
+  serverUrl,
+  transportType,
+  onConnectionUpdate,
+}: {
+  serverUrl: string
+  transportType: 'auto' | 'http' | 'sse'
+  onConnectionUpdate: (data: any) => void
+}) {
   // Use the MCP hook with the server URL
   const connection = useMcp({
     url: serverUrl,
     debug: true,
     autoRetry: false,
     popupFeatures: 'width=500,height=600,resizable=yes,scrollbars=yes',
-    transportType: 'auto',
+    transportType,
   })
 
   // Update parent component with connection data
@@ -26,6 +34,9 @@ export function McpServers({ onToolsUpdate }: { onToolsUpdate?: (tools: Tool[])
   const [serverUrl, setServerUrl] = useState(() => {
     return sessionStorage.getItem('mcpServerUrl') || ''
   })
+  const [transportType, setTransportType] = useState<'auto' | 'http' | 'sse'>(() => {
+    return (sessionStorage.getItem('mcpTransportType') as 'auto' | 'http' | 'sse') || 'auto'
+  })
   const [isActive, setIsActive] = useState(false)
 
   const [connectionData, setConnectionData] = useState<any>({
@@ -293,6 +304,20 @@ export function McpServers({ onToolsUpdate }: { onToolsUpdate?: (tools: Tool[])
             }}
             disabled={isActive && state !== 'failed'}
           />
+          <select
+            className="p-2 border border-gray-200 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-300"
+            value={transportType}
+            onChange={(e) => {
+              const newValue = e.target.value as 'auto' | 'http' | 'sse'
+              setTransportType(newValue)
+              sessionStorage.setItem('mcpTransportType', newValue)
+            }}
+            disabled={isActive && state !== 'failed'}
+          >
+            <option value="auto">Auto</option>
+            <option value="http">HTTP</option>
+            <option value="sse">SSE</option>
+          </select>
 
           {state === 'ready' || (isActive && state !== 'not-connected' && state !== 'failed') ? (
             <button
@@ -477,7 +502,7 @@ export function McpServers({ onToolsUpdate }: { onToolsUpdate?: (tools: Tool[])
       </div>
 
       {/* Only render the actual MCP connection when active */}
-      {isActive && <McpConnection serverUrl={serverUrl} onConnectionUpdate={setConnectionData} />}
+      {isActive && <McpConnection serverUrl={serverUrl} transportType={transportType} onConnectionUpdate={setConnectionData} />}
     </section>
   )
 }

test/integration/mcp-connection.test.ts

@@ -44,7 +44,11 @@ function getMCPServers() {
   }
 }
 
-async function connectToMCPServer(page: Page, serverUrl: string): Promise<{ success: boolean; tools: string[]; debugLog: string }> {
+async function connectToMCPServer(
+  page: Page,
+  serverUrl: string,
+  transportType: 'auto' | 'http' | 'sse' = 'auto',
+): Promise<{ success: boolean; tools: string[]; debugLog: string }> {
   // Navigate to the inspector
   const stateData = readFileSync(testStateFile, 'utf-8')
   const state = JSON.parse(stateData)
@@ -63,6 +67,10 @@ async function connectToMCPServer(page: Page, serverUrl: string): Promise<{ succ
   const urlInput = page.locator('input[placeholder="Enter MCP server URL"]')
   await urlInput.fill(serverUrl)
 
+  // Set transport type
+  const transportSelect = page.locator('select')
+  await transportSelect.selectOption(transportType)
+
   // Click connect button
   const connectButton = page.locator('button:has-text("Connect")')
   await connectButton.click()
@@ -207,34 +215,70 @@ describe('MCP Connection Integration Tests', () => {
     }
   })
 
-  test('should connect to all MCP servers and retrieve tools', async () => {
-    const servers = getMCPServers()
+  const testScenarios = [
+    // Working examples with auto transport (should pass)
+    { serverName: 'hono-mcp', transportType: 'auto' as const, shouldPass: true },
+    { serverName: 'cf-agents', transportType: 'auto' as const, shouldPass: true },
+
+    // SSE endpoint with SSE transport (should pass)
+    { serverName: 'cf-agents-sse', transportType: 'sse' as const, shouldPass: true },
 
-    for (const server of servers) {
-      console.log(`\n🔗 Testing connection to ${server.name} at ${server.url}`)
+    // Additional test cases for HTTP transport
+    { serverName: 'hono-mcp', transportType: 'http' as const, shouldPass: true },
+    { serverName: 'cf-agents', transportType: 'http' as const, shouldPass: true },
 
-      const result = await connectToMCPServer(page, server.url)
+    // Failing case: SSE endpoint with auto transport (should fail)
+    { serverName: 'cf-agents-sse', transportType: 'auto' as const, shouldPass: false },
+  ]
 
-      if (result.success) {
-        console.log(`✅ Successfully connected to ${server.name}`)
-        console.log(`📋 Available tools (${result.tools.length}):`)
-        result.tools.forEach((tool, index) => {
-          console.log(`   ${index + 1}. ${tool}`)
-        })
+  test.each(testScenarios)(
+    'should connect to $serverName with $transportType transport (expect: $shouldPass)',
+    async ({ serverName, transportType, shouldPass }) => {
+      const servers = getMCPServers()
+      const server = servers.find((s) => s.name === serverName)
 
-        // Verify connection success
-        expect(result.success).toBe(true)
-        expect(result.tools.length).toBeGreaterThanOrEqual(server.expectedTools)
+      if (!server) {
+        throw new Error(`Server ${serverName} not found. Available servers: ${servers.map((s) => s.name).join(', ')}`)
+      }
+
+      console.log(`\n🔗 Testing connection to ${server.name} at ${server.url} with ${transportType} transport`)
+
+      const result = await connectToMCPServer(page, server.url, transportType)
+
+      if (shouldPass) {
+        if (result.success) {
+          console.log(`✅ Successfully connected to ${server.name}`)
+          console.log(`📋 Available tools (${result.tools.length}):`)
+          result.tools.forEach((tool, index) => {
+            console.log(`   ${index + 1}. ${tool}`)
+          })
+
+          // Verify connection success
+          expect(result.success).toBe(true)
+          expect(result.tools.length).toBeGreaterThanOrEqual(server.expectedTools)
+        } else {
+          console.log(`❌ Failed to connect to ${server.name}`)
+          if (result.debugLog) {
+            console.log(`🐛 Debug log:`)
+            console.log(result.debugLog)
+          }
+
+          // Fail the test with detailed information
+          throw new Error(`Expected to connect to ${server.name} with ${transportType} transport but failed. Debug log: ${result.debugLog}`)
+        }
       } else {
-        console.log(`❌ Failed to connect to ${server.name}`)
-        if (result.debugLog) {
-          console.log(`🐛 Debug log:`)
-          console.log(result.debugLog)
+        // Expect failure
+        if (result.success) {
+          console.log(`❌ Unexpectedly connected to ${server.name}`)
+          throw new Error(`Expected connection to ${server.name} with ${transportType} transport to fail, but it succeeded`)
+        } else {
+          console.log(`✅ Connection to ${server.name} failed as expected`)
+          console.log(`🐛 Debug log: ${result.debugLog}`)
+          // Verify it's actually a failure
+          expect(result.success).toBe(false)
         }
-
-        // Fail the test with detailed information
-        throw new Error(`Failed to connect to ${server.name}. Debug log: ${result.debugLog}`)
       }
-    }
-  }, 45000)
+    },
+    45000,
+  )
 })