📚 docs: Enhance MCP server management documentation (#365)

- Updated changelog for version 1.2.8 to include enhancements in MCP server management, such as connection status tracking and OAuth support.
- Added detailed documentation on connection status indicators, server initialization processes, and user interface improvements for managing MCP servers.
- Introduced new images and videos to illustrate the updated features and functionalities.

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

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
+
+
+     <video
+       muted
+       controls
+     >
+       <source src="/videos/mcp_one_click_init.mp4" />
+     </video>
+
+**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
+
+     <video
+       muted
+       controls
+     >
+       <source src="/videos/mcp_config_dialog_auth.mp4" />
+     </video>
+**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
+
+     <video
+       muted
+       controls
+     >
+       <source src="/videos/mcp_settings_init.mp4" />
+     </video>
 ## 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