mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-18 09:20:15 +01:00
🔌 feat: MCP OAuth Integration in Chat UI
- **Real-Time Connection Status**: New backend APIs and React Query hooks provide live MCP server connection monitoring with automatic UI updates - **OAuth Flow Components**: Complete MCPConfigDialog, ServerInitializationSection, and CustomUserVarsSection with OAuth URL handling and polling-based completion - **Enhanced Server Selection**: MCPSelect component with connection-aware filtering, visual status indicators, and better credential management UX (still needs a lot of refinement since there is bloat/unused vars and functions leftover from the ideation phase on how to approach OAuth and connection statuses)
This commit is contained in:
Dustin Healy
parent
b39b60c012
commit
63140237a6
27 changed files with 1760 additions and 286 deletions
|
|
@ -4,7 +4,7 @@ const { MCPOAuthHandler } = require('@librechat/api');
|
|||
const { CacheKeys, Constants } = require('librechat-data-provider');
|
||||
const { findToken, updateToken, createToken, deleteTokens } = require('~/models');
|
||||
const { setCachedTools, getCachedTools, loadCustomConfig } = require('~/server/services/Config');
|
||||
const { getUserPluginAuthValue } = require('~/server/services/PluginService');
|
||||
const { getUserPluginAuthValueByPlugin } = require('~/server/services/PluginService');
|
||||
const { getMCPManager, getFlowStateManager } = require('~/config');
|
||||
const { requireJwtAuth } = require('~/server/middleware');
|
||||
const { getLogStores } = require('~/cache');
|
||||
|
|
@ -206,10 +206,89 @@ router.get('/oauth/status/:flowId', async (req, res) => {
|
|||
});
|
||||
|
||||
/**
|
||||
* Reinitialize MCP server
|
||||
* This endpoint allows reinitializing a specific MCP server
|
||||
* Get connection status for all MCP servers
|
||||
* This endpoint returns the actual connection status from MCPManager
|
||||
*/
|
||||
router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
|
||||
router.get('/connection/status', requireJwtAuth, async (req, res) => {
|
||||
try {
|
||||
const user = req.user;
|
||||
|
||||
if (!user?.id) {
|
||||
return res.status(401).json({ error: 'User not authenticated' });
|
||||
}
|
||||
|
||||
const mcpManager = getMCPManager();
|
||||
const connectionStatus = {};
|
||||
|
||||
// Get all MCP server names from custom config
|
||||
const config = await loadCustomConfig();
|
||||
const mcpConfig = config?.mcpServers;
|
||||
|
||||
if (mcpConfig) {
|
||||
for (const [serverName, config] of Object.entries(mcpConfig)) {
|
||||
try {
|
||||
// Check if this is an app-level connection (exists in mcpManager.connections)
|
||||
const appConnection = mcpManager.getConnection(serverName);
|
||||
const hasAppConnection = !!appConnection;
|
||||
|
||||
// Check if this is a user-level connection (exists in mcpManager.userConnections)
|
||||
const userConnection = mcpManager.getUserConnectionIfExists(user.id, serverName);
|
||||
const hasUserConnection = !!userConnection;
|
||||
|
||||
// Determine if connected based on actual connection state
|
||||
let connected = false;
|
||||
if (hasAppConnection) {
|
||||
connected = await appConnection.isConnected();
|
||||
} else if (hasUserConnection) {
|
||||
connected = await userConnection.isConnected();
|
||||
}
|
||||
|
||||
// Determine if this server requires user authentication
|
||||
const hasAuthConfig =
|
||||
config.customUserVars && Object.keys(config.customUserVars).length > 0;
|
||||
const requiresOAuth = req.app.locals.mcpOAuthRequirements?.[serverName] || false;
|
||||
|
||||
connectionStatus[serverName] = {
|
||||
connected,
|
||||
hasAuthConfig,
|
||||
hasConnection: hasAppConnection || hasUserConnection,
|
||||
isAppLevel: hasAppConnection,
|
||||
isUserLevel: hasUserConnection,
|
||||
requiresOAuth,
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
`[MCP Connection Status] Error checking connection for ${serverName}:`,
|
||||
error,
|
||||
);
|
||||
connectionStatus[serverName] = {
|
||||
connected: false,
|
||||
hasAuthConfig: config.customUserVars && Object.keys(config.customUserVars).length > 0,
|
||||
hasConnection: false,
|
||||
isAppLevel: false,
|
||||
isUserLevel: false,
|
||||
requiresOAuth: req.app.locals.mcpOAuthRequirements?.[serverName] || false,
|
||||
error: error.message,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
connectionStatus,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('[MCP Connection Status] Failed to get connection status', error);
|
||||
res.status(500).json({ error: 'Failed to get connection status' });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Check which authentication values exist for a specific MCP server
|
||||
* This endpoint returns only boolean flags indicating if values are set, not the actual values
|
||||
*/
|
||||
router.get('/:serverName/auth-values', requireJwtAuth, async (req, res) => {
|
||||
try {
|
||||
const { serverName } = req.params;
|
||||
const user = req.user;
|
||||
|
|
@ -218,10 +297,206 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
|
|||
return res.status(401).json({ error: 'User not authenticated' });
|
||||
}
|
||||
|
||||
const config = await loadCustomConfig();
|
||||
if (!config || !config.mcpServers || !config.mcpServers[serverName]) {
|
||||
return res.status(404).json({
|
||||
error: `MCP server '${serverName}' not found in configuration`,
|
||||
});
|
||||
}
|
||||
|
||||
const serverConfig = config.mcpServers[serverName];
|
||||
const pluginKey = `${Constants.mcp_prefix}${serverName}`;
|
||||
const authValueFlags = {};
|
||||
|
||||
// Check existence of saved values for each custom user variable (don't fetch actual values)
|
||||
if (serverConfig.customUserVars && typeof serverConfig.customUserVars === 'object') {
|
||||
for (const varName of Object.keys(serverConfig.customUserVars)) {
|
||||
try {
|
||||
const value = await getUserPluginAuthValueByPlugin(user.id, varName, pluginKey, false);
|
||||
// Only store boolean flag indicating if value exists
|
||||
authValueFlags[varName] = !!(value && value.length > 0);
|
||||
} catch (err) {
|
||||
logger.error(
|
||||
`[MCP Auth Value Flags] Error checking ${varName} for user ${user.id}:`,
|
||||
err,
|
||||
);
|
||||
// Default to false if we can't check
|
||||
authValueFlags[varName] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
serverName,
|
||||
authValueFlags,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
`[MCP Auth Value Flags] Failed to check auth value flags for ${req.params.serverName}`,
|
||||
error,
|
||||
);
|
||||
res.status(500).json({ error: 'Failed to check auth value flags' });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Check if a specific MCP server requires OAuth
|
||||
* This endpoint checks if a specific MCP server requires OAuth authentication
|
||||
*/
|
||||
router.get('/:serverName/oauth/required', requireJwtAuth, async (req, res) => {
|
||||
try {
|
||||
const { serverName } = req.params;
|
||||
const user = req.user;
|
||||
|
||||
if (!user?.id) {
|
||||
return res.status(401).json({ error: 'User not authenticated' });
|
||||
}
|
||||
|
||||
const mcpManager = getMCPManager();
|
||||
const requiresOAuth = await mcpManager.isOAuthRequired(serverName);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
serverName,
|
||||
requiresOAuth,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
`[MCP OAuth Required] Failed to check OAuth requirement for ${req.params.serverName}`,
|
||||
error,
|
||||
);
|
||||
res.status(500).json({ error: 'Failed to check OAuth requirement' });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Complete MCP server reinitialization after OAuth
|
||||
* This endpoint completes the reinitialization process after OAuth authentication
|
||||
*/
|
||||
router.post('/:serverName/reinitialize/complete', requireJwtAuth, async (req, res) => {
|
||||
let responseSent = false;
|
||||
|
||||
try {
|
||||
const { serverName } = req.params;
|
||||
const user = req.user;
|
||||
|
||||
if (!user?.id) {
|
||||
responseSent = true;
|
||||
return res.status(401).json({ error: 'User not authenticated' });
|
||||
}
|
||||
|
||||
logger.info(`[MCP Complete Reinitialize] Starting completion for ${serverName}`);
|
||||
|
||||
const mcpManager = getMCPManager();
|
||||
|
||||
// Wait for connection to be established via event-driven approach
|
||||
const userConnection = await new Promise((resolve, reject) => {
|
||||
// Set a reasonable timeout (10 seconds)
|
||||
const timeout = setTimeout(() => {
|
||||
mcpManager.removeListener('connectionEstablished', connectionHandler);
|
||||
reject(new Error('Timeout waiting for connection establishment'));
|
||||
}, 10000);
|
||||
|
||||
const connectionHandler = ({
|
||||
userId: eventUserId,
|
||||
serverName: eventServerName,
|
||||
connection,
|
||||
}) => {
|
||||
if (eventUserId === user.id && eventServerName === serverName) {
|
||||
clearTimeout(timeout);
|
||||
mcpManager.removeListener('connectionEstablished', connectionHandler);
|
||||
resolve(connection);
|
||||
}
|
||||
};
|
||||
|
||||
// Check if connection already exists
|
||||
const existingConnection = mcpManager.getUserConnectionIfExists(user.id, serverName);
|
||||
if (existingConnection) {
|
||||
clearTimeout(timeout);
|
||||
resolve(existingConnection);
|
||||
return;
|
||||
}
|
||||
|
||||
// Listen for the connection establishment event
|
||||
mcpManager.on('connectionEstablished', connectionHandler);
|
||||
});
|
||||
|
||||
if (!userConnection) {
|
||||
responseSent = true;
|
||||
return res.status(404).json({ error: 'User connection not found' });
|
||||
}
|
||||
|
||||
const userTools = (await getCachedTools({ userId: user.id })) || {};
|
||||
|
||||
// Remove any old tools from this server in the user's cache
|
||||
const mcpDelimiter = Constants.mcp_delimiter;
|
||||
for (const key of Object.keys(userTools)) {
|
||||
if (key.endsWith(`${mcpDelimiter}${serverName}`)) {
|
||||
delete userTools[key];
|
||||
}
|
||||
}
|
||||
|
||||
// Add the new tools from this server
|
||||
const tools = await userConnection.fetchTools();
|
||||
for (const tool of tools) {
|
||||
const name = `${tool.name}${Constants.mcp_delimiter}${serverName}`;
|
||||
userTools[name] = {
|
||||
type: 'function',
|
||||
['function']: {
|
||||
name,
|
||||
description: tool.description,
|
||||
parameters: tool.inputSchema,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// Save the updated user tool cache
|
||||
await setCachedTools(userTools, { userId: user.id });
|
||||
|
||||
responseSent = true;
|
||||
res.json({
|
||||
success: true,
|
||||
message: `MCP server '${serverName}' reinitialized successfully`,
|
||||
serverName,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
`[MCP Complete Reinitialize] Error completing reinitialization for ${req.params.serverName}:`,
|
||||
error,
|
||||
);
|
||||
|
||||
if (!responseSent) {
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to complete MCP server reinitialization',
|
||||
serverName: req.params.serverName,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Reinitialize MCP server
|
||||
* This endpoint allows reinitializing a specific MCP server
|
||||
*/
|
||||
router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
|
||||
let responseSent = false;
|
||||
|
||||
try {
|
||||
const { serverName } = req.params;
|
||||
const user = req.user;
|
||||
|
||||
if (!user?.id) {
|
||||
responseSent = true;
|
||||
return res.status(401).json({ error: 'User not authenticated' });
|
||||
}
|
||||
|
||||
logger.info(`[MCP Reinitialize] Reinitializing server: ${serverName}`);
|
||||
|
||||
const config = await loadCustomConfig();
|
||||
if (!config || !config.mcpServers || !config.mcpServers[serverName]) {
|
||||
responseSent = true;
|
||||
return res.status(404).json({
|
||||
error: `MCP server '${serverName}' not found in configuration`,
|
||||
});
|
||||
|
|
@ -231,6 +506,21 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
|
|||
const flowManager = getFlowStateManager(flowsCache);
|
||||
const mcpManager = getMCPManager();
|
||||
|
||||
// Clean up any stale OAuth flows for this server
|
||||
try {
|
||||
const flowId = MCPOAuthHandler.generateFlowId(user.id, serverName);
|
||||
const existingFlow = await flowManager.getFlowState(flowId, 'mcp_oauth');
|
||||
if (existingFlow && existingFlow.status === 'PENDING') {
|
||||
logger.info(`[MCP Reinitialize] Cleaning up stale OAuth flow for ${serverName}`);
|
||||
await flowManager.failFlow(flowId, 'mcp_oauth', new Error('OAuth flow interrupted'));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.warn(
|
||||
`[MCP Reinitialize] Error cleaning up stale OAuth flow for ${serverName}:`,
|
||||
error,
|
||||
);
|
||||
}
|
||||
|
||||
await mcpManager.disconnectServer(serverName);
|
||||
logger.info(`[MCP Reinitialize] Disconnected existing server: ${serverName}`);
|
||||
|
||||
|
|
@ -240,7 +530,8 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
|
|||
if (serverConfig.customUserVars && typeof serverConfig.customUserVars === 'object') {
|
||||
for (const varName of Object.keys(serverConfig.customUserVars)) {
|
||||
try {
|
||||
const value = await getUserPluginAuthValue(user.id, varName, false);
|
||||
const pluginKey = `${Constants.mcp_prefix}${serverName}`;
|
||||
const value = await getUserPluginAuthValueByPlugin(user.id, varName, pluginKey, false);
|
||||
if (value) {
|
||||
customUserVars[varName] = value;
|
||||
}
|
||||
|
|
@ -251,6 +542,8 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
|
|||
}
|
||||
|
||||
let userConnection = null;
|
||||
let oauthRequired = false;
|
||||
|
||||
try {
|
||||
userConnection = await mcpManager.getUserConnection({
|
||||
user,
|
||||
|
|
@ -263,9 +556,79 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
|
|||
createToken,
|
||||
deleteTokens,
|
||||
},
|
||||
oauthStart: (authURL) => {
|
||||
// This will be called if OAuth is required
|
||||
oauthRequired = true;
|
||||
responseSent = true;
|
||||
logger.info(`[MCP Reinitialize] OAuth required for ${serverName}, auth URL: ${authURL}`);
|
||||
|
||||
// Get the flow ID for polling
|
||||
const flowId = MCPOAuthHandler.generateFlowId(user.id, serverName);
|
||||
|
||||
// Return the OAuth response immediately - client will poll for completion
|
||||
res.json({
|
||||
success: false,
|
||||
oauthRequired: true,
|
||||
authURL,
|
||||
flowId,
|
||||
message: `OAuth authentication required for MCP server '${serverName}'`,
|
||||
serverName,
|
||||
});
|
||||
},
|
||||
oauthEnd: () => {
|
||||
// This will be called when OAuth flow completes
|
||||
logger.info(`[MCP Reinitialize] OAuth flow completed for ${serverName}`);
|
||||
},
|
||||
});
|
||||
|
||||
// If response was already sent for OAuth, don't continue
|
||||
if (responseSent) {
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
logger.error(`[MCP Reinitialize] Error initializing MCP server ${serverName} for user:`, err);
|
||||
|
||||
// Check if this is an OAuth error
|
||||
if (err.message && err.message.includes('OAuth required')) {
|
||||
// Try to get the OAuth URL from the flow manager
|
||||
try {
|
||||
const flowId = MCPOAuthHandler.generateFlowId(user.id, serverName);
|
||||
const existingFlow = await flowManager.getFlowState(flowId, 'mcp_oauth');
|
||||
|
||||
if (existingFlow && existingFlow.metadata) {
|
||||
const { serverUrl, oauth: oauthConfig } = existingFlow.metadata;
|
||||
if (serverUrl && oauthConfig) {
|
||||
const { authorizationUrl: authUrl } = await MCPOAuthHandler.initiateOAuthFlow(
|
||||
serverName,
|
||||
serverUrl,
|
||||
user.id,
|
||||
oauthConfig,
|
||||
);
|
||||
|
||||
return res.json({
|
||||
success: false,
|
||||
oauthRequired: true,
|
||||
authURL: authUrl,
|
||||
flowId,
|
||||
message: `OAuth authentication required for MCP server '${serverName}'`,
|
||||
serverName,
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (oauthErr) {
|
||||
logger.error(`[MCP Reinitialize] Error getting OAuth URL for ${serverName}:`, oauthErr);
|
||||
}
|
||||
|
||||
responseSent = true;
|
||||
return res.status(401).json({
|
||||
success: false,
|
||||
oauthRequired: true,
|
||||
message: `OAuth authentication required for MCP server '${serverName}'`,
|
||||
serverName,
|
||||
});
|
||||
}
|
||||
|
||||
responseSent = true;
|
||||
return res.status(500).json({ error: 'Failed to reinitialize MCP server for user' });
|
||||
}
|
||||
|
||||
|
|
@ -296,6 +659,7 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
|
|||
// Save the updated user tool cache
|
||||
await setCachedTools(userTools, { userId: user.id });
|
||||
|
||||
responseSent = true;
|
||||
res.json({
|
||||
success: true,
|
||||
message: `MCP server '${serverName}' reinitialized successfully`,
|
||||
|
|
@ -303,7 +667,9 @@ router.post('/:serverName/reinitialize', requireJwtAuth, async (req, res) => {
|
|||
});
|
||||
} catch (error) {
|
||||
logger.error('[MCP Reinitialize] Unexpected error', error);
|
||||
res.status(500).json({ error: 'Internal server error' });
|
||||
if (!responseSent) {
|
||||
res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue