Function useMCPClient

core/http/react-ui/src/hooks/useMCPClient.js:15–228

()

}

export function useMCPClient() {
  const connectionsRef = useRef(new Map())
  const toolIndexRef = useRef(new Map())
  const [connectionStatuses, setConnectionStatuses] = useState({})

  const updateStatus = useCallback((serverId, status, error = null) => {
    setConnectionStatuses(prev => ({ ...prev, [serverId]: { status, error } }))
  }, [])

  const connect = useCallback(async (serverConfig) => {
    const { id, url, headers = {}, useProxy = true } = serverConfig
    if (connectionsRef.current.has(id)) return

    updateStatus(id, 'connecting')

    const proxyUrl = buildProxyUrl(url, useProxy)
    const transportHeaders = { ...headers }

    let client = null
    let transport = null

    // Try StreamableHTTP first, then SSE fallback
    for (const TransportClass of [StreamableHTTPClientTransport, SSEClientTransport]) {
      try {
        transport = new TransportClass(proxyUrl, { requestInit: { headers: transportHeaders } })
        client = new Client({ name: 'LocalAI-WebUI', version: '1.0.0' })
        await client.connect(transport)
        break
      } catch (err) {
        client = null
        transport = null
        if (TransportClass === SSEClientTransport) {
          updateStatus(id, 'error', err.message)
          return
        }
      }
    }

    if (!client) {
      updateStatus(id, 'error', 'Failed to connect with any transport')
      return
    }

    try {
      const { tools = [] } = await client.listTools()

      // Remove old tool index entries for this server
      for (const [toolName, sId] of toolIndexRef.current) {
        if (sId === id) toolIndexRef.current.delete(toolName)
      }

      for (const tool of tools) {
        toolIndexRef.current.set(tool.name, id)
      }

      connectionsRef.current.set(id, { client, transport, tools, serverConfig })
      updateStatus(id, 'connected')
    } catch (err) {