diff --git a/examples/inspector/src/components/McpServers.tsx b/examples/inspector/src/components/McpServers.tsx index e210e34..b99160d 100644 --- a/examples/inspector/src/components/McpServers.tsx +++ b/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({ @@ -293,6 +304,20 @@ export function McpServers({ onToolsUpdate }: { onToolsUpdate?: (tools: Tool[]) }} disabled={isActive && state !== 'failed'} /> + {state === 'ready' || (isActive && state !== 'not-connected' && state !== 'failed') ? (