🏹 feat: Concurrent MCP Initialization Support

[dustinhealy]

Summary

This PR enhances MCP initializations to handle multiple server connections and OAuth flows concurrently. It refactors existing single-server initialization processes to work in parallel, creating a smoother experience when managing server connections for users. Key changes include the extraction of reusable utility functions for MCP server status management, the replacement of the previous initialization hook with a centralized server manager, and the addition of a new per-server connection status endpoint.

Core Features

Frontend Changes: MCP Panel and Server Initialization

• Replaced the useMCPServerInitialization hook with a new useMCPServerManager hook to centralize server management logic, enabling support for multiple OAuth flows and improving initialization handling. [1] [2]
• Updated the ServerInitializationSection component to use the new useMCPServerManager hook, simplifying state management and aligning with the updated backend logic. [1] [2] [3] [4] [5]

Backend Changes: MCP Server Status Management

• Refactored the /connection/status endpoint to use new utility functions (getMCPSetupData, checkOAuthFlowStatus, getServerConnectionStatus) for modular handling of MCP server connection statuses. These functions centralize logic for retrieving configuration, checking OAuth flows, and determining connection states.
• Added a new /connection/status/:serverName endpoint to fetch the connection status of a specific MCP server, improving granularity and user-specific responses.

Change Type

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Translation update

Details & Change Breakdown

1. Server-Side Refactor (mcp.js)

• Added new helper functions: getMCPSetupData, checkOAuthFlowStatus, and getServerConnectionStatus for improved modularity and clarity.
• Added /connection/status/:serverName endpoins for per-server reporting of server connection status.

2. Client-Side Refactor

• MCPPanel.tsx: Refactored to use centralized logic for handling multiple server connections and states.
• ServerInitializationSection.tsx: Updated to handle OAuth flows and connection status using the shared initialization hook (useMCPServerManager).

3. React Queries and Hooks

• useMCPServerManager Hook: Refactored useMCPServerInitialization into the new shared useMCPServerManager hook to manage concurrent server initializations and connection states.
• New Query: Added useMCPServerConnectionStatusQuery for server-specific connection status checks in react-query-service.ts.

4. Localization and Data Provider Improvements

• Localization Updates:

  • translation.json: Minor adjustments for connection status and server initialization strings.

• Data Provider Updates:

  • Added new endpoints for server-specific connection status (api-endpoints.ts).
  • Introduced new types for MCP server connection status response (packages/data-provider/src/types/queries.ts).

Testing

• Confirmed UI components reflect real-time server connection status and MCP selection at all times across MCPSelect, MCPSubMenu, and MCPPanel - especially during initialization, OAuth flows, and post cancellation.
• Tested simultaneous OAuth flow handling, initialization, and cancellation for github-mcp, filesystem, playwright, atlassian, and spotify servers to ensure resilient and consistent status reporting, UI updates, and initalization / OAuth flow management.

Checklist

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• I have commented in any complex areas of my code
• I have made pertinent documentation changes
• My changes do not introduce new warnings
• Local unit tests pass with my changes