Add front end logic for MCP connectors

This commit is contained in:
Manoj Aggarwal 2026-01-13 21:10:03 -08:00
parent 792548b379
commit c78ea98a68
8 changed files with 71 additions and 65 deletions

View file

@ -164,20 +164,19 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
isSubmittingRef.current = true;
try {
// Submit all servers
for (const config of configs) {
await onSubmit({
name: config.name,
connector_type: EnumConnectorName.MCP_CONNECTOR,
config: { server_config: config },
is_indexable: false,
is_active: true,
last_indexed_at: null,
periodic_indexing_enabled: false,
indexing_frequency_minutes: null,
next_scheduled_at: null,
});
}
// Submit all servers as a single connector with server_configs array
// This creates one connector instead of N connectors (one toast instead of N toasts)
await onSubmit({
name: configs.length === 1 ? configs[0].name : "MCPs",
connector_type: EnumConnectorName.MCP_CONNECTOR,
config: { server_configs: configs },
is_indexable: false,
is_active: true,
last_indexed_at: null,
periodic_indexing_enabled: false,
indexing_frequency_minutes: null,
next_scheduled_at: null,
});
} finally {
isSubmittingRef.current = false;
}

View file

@ -56,12 +56,6 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
const serverConfigs = mcpConn.config?.server_configs as MCPServerConfig[] | undefined;
if (serverConfigs && Array.isArray(serverConfigs)) {
allServerConfigs.push(...serverConfigs);
} else {
// Fallback to single server_config
const serverConfig = mcpConn.config?.server_config as MCPServerConfig | undefined;
if (serverConfig) {
allServerConfigs.push(serverConfig);
}
}
}

View file

@ -99,7 +99,7 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
</div>
<div>
<h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
Connect {getConnectorTypeDisplay(connectorType)}
Connect {connectorType === "MCP_CONNECTOR" ? "MCP(s)" : getConnectorTypeDisplay(connectorType)}
</h2>
<p className="text-xs sm:text-base text-muted-foreground mt-1">
Enter your connection details
@ -139,7 +139,7 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
Connecting...
</>
) : (
<>Connect {getConnectorTypeDisplay(connectorType)}</>
<>Connect {connectorType === "MCP_CONNECTOR" ? "MCP(s)" : getConnectorTypeDisplay(connectorType)}</>
)}
</Button>
</div>

View file

@ -130,6 +130,12 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
(c) => !oauthConnectorTypes.has(c.connector_type) && c.connector_type !== "MCP_CONNECTOR"
);
// Calculate total number of MCP servers across all MCP connectors
const totalMCPServers = mcpConnectors.reduce((total, connector) => {
const serverConfigs = connector.config?.server_configs;
return total + (Array.isArray(serverConfigs) ? serverConfigs.length : 0);
}, 0);
// Group OAuth connectors by type
const oauthConnectorsByType = oauthConnectors.reduce(
(acc, connector) => {
@ -305,7 +311,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
Active
</p>
<p className="text-[10px] text-muted-foreground mt-0.5">
{mcpConnectors.length} {mcpConnectors.length === 1 ? "Server" : "Servers"}
{totalMCPServers} {totalMCPServers === 1 ? "Server" : "Servers"}
</p>
</div>
<Button