diff --git a/components/changelog/content/config_v1.2.8.mdx b/components/changelog/content/config_v1.2.8.mdx index d02fab5..188a11e 100644 --- a/components/changelog/content/config_v1.2.8.mdx +++ b/components/changelog/content/config_v1.2.8.mdx @@ -24,3 +24,9 @@ - Users can now use `{{LIBRECHAT_USER_ID}}`, `{{LIBRECHAT_USER_EMAIL}}`, and other user field placeholders in custom endpoint headers - See: [Custom Endpoint Object Structure - Headers](/docs/configuration/librechat_yaml/object_structure/custom_endpoint#headers) for details - Improved [Model Specs documentation](/docs/configuration/librechat_yaml/object_structure/model_specs) with parameter support updates (disableStreaming, thinking, thinkingBudget, web_search, etc...) +- Enhanced MCP (Model Context Protocol) server management with connection status tracking and OAuth support + - Added dynamic status icons showing server state (connected, disconnected, OAuth required, error, initializing) + - Implemented server (re)initialization with OAuth flow support through dropdown and settings panel + - Added set/unset state tracking for customUserVars + - Unified server listing across MCPSelect and MCPPanel with consistent status display + - See [MCP Servers Configuration](/docs/configuration/librechat_yaml/object_structure/mcp_servers) for details diff --git a/pages/docs/features/mcp.mdx b/pages/docs/features/mcp.mdx index 2851860..bd26e78 100644 --- a/pages/docs/features/mcp.mdx +++ b/pages/docs/features/mcp.mdx @@ -127,6 +127,59 @@ For detailed configuration options and examples, see: - [Agent Configuration](/docs/configuration/librechat_yaml/object_structure/agents) - [Advanced Agent Features](/docs/features/agents#model-context-protocol-mcp) +## MCP Server Management + +LibreChat provides comprehensive tools for managing MCP server connections with connection status tracking and OAuth authentication and initialization support in the UI. + +### Connection Status Indicators + +LibreChat displays dynamic status icons showing the current state of each MCP server in the chat dropdown and settings panel: + +![MCP Server Status Icons](/images/mcp/mcp_server_status_icons.png) + +**Status Types:** +- **Connected** (green gear): Server is connected and has configurable customUserVars +- **OAuth Required** (amber key): Server requires OAuth authentication +- **Disconnected** (orange plug): Server connection failed or lost +- **Initializing** (blue loader): Server is starting up or reconnecting +- **Error** (red triangle): Server encountered an error +- **Cancelling** (red x): OAuth flow is being cancelled + +### Server Initialization + +You can initialize or re-initialize MCP servers directly from the interface: + +**One click:** +- One-click initialization from the MCP server selection dropdown + + + + +**From MCPConfigDialog:** +- Click the status icon next to an MCP server in the Chat Dropdown to open the MCPConfigDialog +- Configure custom user variables and click the Authenticate/Initialize button depending on the server authentication type + + +**From MCP Settings Panel:** +- Click any server in the server list section of MCP Settings Panel to access configuration and initialization controls +- Configure custom user variables and click the Authenticate/Initialize button depending on the server authentication type + + ## LibreChat-Specific Features LibreChat's MCP implementation is designed for highly configurable, real-world, multi-user environments. @@ -252,22 +305,13 @@ mcpServers: When you first configure an OAuth-enabled MCP server: 1. **Initial Connection**: LibreChat attempts to connect to the MCP server -2. **Authentication Required**: If no valid token exists, you'll see an authentication URL in the console -3. **Browser Authentication**: Copy the URL and authenticate in your browser -4. **Token Storage**: LibreChat securely stores the tokens for future use -5. **Automatic Refresh**: If refresh tokens are supported, LibreChat handles renewal automatically - -Example authentication prompt: -```bash -═══════════════════════════════════════════════════════════════════════ -Please visit the following URL to authenticate: - -https://mcp-server.example.com/authorize?response_type=code&client_id=... - -═══════════════════════════════════════════════════════════════════════ -``` - -Soon, you will be able to add MCP Servers and configure OAuth authentication directly from the LibreChat interface. +2. **Authentication Required**: If no valid token exists, you'll see an OAuth authentication indicator in the chat dropdown for that server +3. **Button Interface**: Click the authentication indicator button to open the MCPConfigDialog and begin the OAuth flow +4. **Config Dialog**: Click the Authenticate button in the MCPConfigDialog to open the OAuth authentication page in your browser +5. **Browser Redirect**: LibreChat opens the OAuth provider in your browser +6. **Return Handling**: LibreChat automatically processes the OAuth callback once you've authenticated +7. **Token Storage**: LibreChat securely stores the tokens for future use +8. **Connection Established**: Once you've authenticated, the MCP server will be connected and you can use it in your chat #### Token Management diff --git a/public/images/mcp/mcp_server_status_icons.png b/public/images/mcp/mcp_server_status_icons.png new file mode 100644 index 0000000..2304fe7 Binary files /dev/null and b/public/images/mcp/mcp_server_status_icons.png differ diff --git a/public/videos/mcp_config_dialog_auth.mp4 b/public/videos/mcp_config_dialog_auth.mp4 new file mode 100644 index 0000000..ca0b427 Binary files /dev/null and b/public/videos/mcp_config_dialog_auth.mp4 differ diff --git a/public/videos/mcp_one_click_init.mp4 b/public/videos/mcp_one_click_init.mp4 new file mode 100644 index 0000000..c50963b Binary files /dev/null and b/public/videos/mcp_one_click_init.mp4 differ diff --git a/public/videos/mcp_settings_init.mp4 b/public/videos/mcp_settings_init.mp4 new file mode 100644 index 0000000..13885aa Binary files /dev/null and b/public/videos/mcp_settings_init.mp4 differ