mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-06-03 11:05:35 +08:00
feat(mcp): add global MCP server creation flow
Add a separate global MCP add path in the settings MCP module so users can create one shared MCP server configuration across Claude, Cursor, Codex, and Gemini from the same screen. The provider-specific add flow is still kept next to it because these two actions have different intent. A global MCP server must be constrained to the subset of configuration that every provider can accept, while a provider-specific server can still use that provider's own supported scopes, transports, and fields. Naming the buttons as "Add Global MCP Server" and "Add <Provider> MCP Server" makes that distinction explicit without forcing users to infer it from the selected tab. This also moves the explanatory copy to button hover text to keep the MCP toolbar compact while still documenting the difference between global and provider-only adds at the point of action. Implementation details: - Add global MCP form mode with shared user/project scopes and stdio/http transports. - Submit global creates through `/api/providers/mcp/servers/global`. - Reuse the existing MCP form modal with configurable scopes, transports, labels, and descriptions instead of duplicating form logic. - Disable provider-only fields for the global flow because those fields cannot be safely written to every provider. - Clear the MCP server cache globally after a global add because every provider tab may have changed. - Surface partial global add failures with provider-specific error messages. Validation: - npx eslint src/components/mcp/view/McpServers.tsx - npm run typecheck - npm run build:client
This commit is contained in:
Haileyesus
@@ -9,50 +9,77 @@ import {
|
||||
MCP_SUPPORTS_WORKING_DIRECTORY,
|
||||
} from '../../constants';
|
||||
import { useMcpServerForm } from '../../hooks/useMcpServerForm';
|
||||
import type { McpFormState, McpProject, McpProvider, McpScope, ProviderMcpServer } from '../../types';
|
||||
import type {
|
||||
McpFormMode,
|
||||
McpFormState,
|
||||
McpProject,
|
||||
McpProvider,
|
||||
McpScope,
|
||||
McpTransport,
|
||||
ProviderMcpServer,
|
||||
} from '../../types';
|
||||
|
||||
type McpServerFormModalProps = {
|
||||
provider: McpProvider;
|
||||
mode?: McpFormMode;
|
||||
isOpen: boolean;
|
||||
editingServer: ProviderMcpServer | null;
|
||||
currentProjects: McpProject[];
|
||||
title?: string;
|
||||
description?: string;
|
||||
submitLabel?: string;
|
||||
supportedScopes?: McpScope[];
|
||||
supportedTransports?: McpTransport[];
|
||||
onClose: () => void;
|
||||
onSubmit: (formData: McpFormState, editingServer: ProviderMcpServer | null) => Promise<void>;
|
||||
};
|
||||
|
||||
const getScopeLabel = (scope: McpScope): string => {
|
||||
const getScopeLabel = (scope: McpScope, mode: McpFormMode): string => {
|
||||
if (scope === 'user') {
|
||||
return 'User (Global)';
|
||||
return mode === 'global' ? 'User (All Providers)' : 'User (Global)';
|
||||
}
|
||||
|
||||
if (scope === 'local') {
|
||||
return 'Claude Local';
|
||||
}
|
||||
|
||||
return 'Project';
|
||||
return mode === 'global' ? 'Project (All Providers)' : 'Project';
|
||||
};
|
||||
|
||||
const getScopeDescription = (scope: McpScope): string => {
|
||||
const getScopeDescription = (scope: McpScope, mode: McpFormMode): string => {
|
||||
if (scope === 'user') {
|
||||
return 'Available across all projects on your machine';
|
||||
return mode === 'global'
|
||||
? 'Writes to each provider user config and is available across projects on this machine'
|
||||
: 'Available across all projects on your machine';
|
||||
}
|
||||
|
||||
if (scope === 'local') {
|
||||
return 'Stored in Claude user settings for the selected project';
|
||||
}
|
||||
|
||||
return 'Stored in the selected project workspace';
|
||||
return mode === 'global'
|
||||
? 'Writes to the selected project workspace for every provider'
|
||||
: 'Stored in the selected project workspace';
|
||||
};
|
||||
|
||||
export default function McpServerFormModal({
|
||||
provider,
|
||||
mode = 'provider',
|
||||
isOpen,
|
||||
editingServer,
|
||||
currentProjects,
|
||||
title,
|
||||
description,
|
||||
submitLabel,
|
||||
supportedScopes,
|
||||
supportedTransports,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: McpServerFormModalProps) {
|
||||
const { t } = useTranslation('settings');
|
||||
const isGlobalMode = mode === 'global';
|
||||
const availableScopes = supportedScopes ?? MCP_SUPPORTED_SCOPES[provider];
|
||||
const availableTransports = supportedTransports ?? MCP_SUPPORTED_TRANSPORTS[provider];
|
||||
const {
|
||||
formData,
|
||||
multilineText,
|
||||
@@ -72,6 +99,11 @@ export default function McpServerFormModal({
|
||||
isOpen,
|
||||
editingServer,
|
||||
currentProjects,
|
||||
supportedScopes: availableScopes,
|
||||
supportedTransports: availableTransports,
|
||||
unsupportedTransportMessage: isGlobalMode
|
||||
? (transport) => `Add MCP Server supports only stdio and http across all providers, not ${transport}.`
|
||||
: undefined,
|
||||
onSubmit,
|
||||
});
|
||||
|
||||
@@ -80,23 +112,30 @@ export default function McpServerFormModal({
|
||||
}
|
||||
|
||||
const providerName = MCP_PROVIDER_NAMES[provider];
|
||||
const modalTitle = title ?? (isEditing ? t('mcpForm.title.edit') : t('mcpForm.title.add'));
|
||||
const addButtonLabel = submitLabel ?? `${t('mcpForm.actions.addServer')} to ${providerName}`;
|
||||
const showProjectSelector = formData.scope !== 'user';
|
||||
const supportsHttpHeaders = formData.transport === 'http' || formData.transport === 'sse';
|
||||
const supportsWorkingDirectory = MCP_SUPPORTS_WORKING_DIRECTORY[provider];
|
||||
const supportsWorkingDirectory = !isGlobalMode && MCP_SUPPORTS_WORKING_DIRECTORY[provider];
|
||||
const showCodexOnlyFields = provider === 'codex' && !isGlobalMode;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-lg border border-border bg-background">
|
||||
<div className="flex items-center justify-between border-b border-border p-4">
|
||||
<h3 className="text-lg font-medium text-foreground">
|
||||
{isEditing ? t('mcpForm.title.edit') : t('mcpForm.title.add')}
|
||||
</h3>
|
||||
<h3 className="text-lg font-medium text-foreground">{modalTitle}</h3>
|
||||
<Button variant="ghost" size="sm" onClick={onClose}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4 p-4">
|
||||
{description && (
|
||||
<div className="rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
|
||||
{description}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isEditing && (
|
||||
<div className="mb-4 flex gap-2">
|
||||
<button
|
||||
@@ -131,7 +170,7 @@ export default function McpServerFormModal({
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
{formData.scope === 'user' ? <Globe className="h-4 w-4" /> : <FolderOpen className="h-4 w-4" />}
|
||||
<span className="text-sm">{getScopeLabel(formData.scope)}</span>
|
||||
<span className="text-sm">{getScopeLabel(formData.scope, mode)}</span>
|
||||
{formData.workspacePath && (
|
||||
<span className="truncate text-xs text-muted-foreground">- {formData.workspacePath}</span>
|
||||
)}
|
||||
@@ -147,7 +186,7 @@ export default function McpServerFormModal({
|
||||
{t('mcpForm.scope.label')} *
|
||||
</label>
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
{MCP_SUPPORTED_SCOPES[provider].map((scope) => (
|
||||
{availableScopes.map((scope) => (
|
||||
<button
|
||||
key={scope}
|
||||
type="button"
|
||||
@@ -160,12 +199,12 @@ export default function McpServerFormModal({
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{scope === 'user' ? <Globe className="h-4 w-4" /> : <FolderOpen className="h-4 w-4" />}
|
||||
<span>{getScopeLabel(scope)}</span>
|
||||
<span>{getScopeLabel(scope, mode)}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-muted-foreground">{getScopeDescription(formData.scope)}</p>
|
||||
<p className="mt-2 text-xs text-muted-foreground">{getScopeDescription(formData.scope, mode)}</p>
|
||||
</div>
|
||||
|
||||
{showProjectSelector && (
|
||||
@@ -219,7 +258,7 @@ export default function McpServerFormModal({
|
||||
onChange={(event) => updateTransport(event.target.value as McpFormState['transport'])}
|
||||
className="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
|
||||
>
|
||||
{MCP_SUPPORTED_TRANSPORTS[provider].map((transport) => (
|
||||
{availableTransports.map((transport) => (
|
||||
<option key={transport} value={transport}>
|
||||
{transport === 'sse' ? 'SSE' : transport.toUpperCase()}
|
||||
</option>
|
||||
@@ -344,7 +383,7 @@ export default function McpServerFormModal({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{provider === 'codex' && formData.importMode === 'form' && formData.transport === 'stdio' && (
|
||||
{showCodexOnlyFields && formData.importMode === 'form' && formData.transport === 'stdio' && (
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-foreground">
|
||||
Environment Variable Names
|
||||
@@ -359,7 +398,7 @@ export default function McpServerFormModal({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{provider === 'codex' && formData.importMode === 'form' && formData.transport === 'http' && (
|
||||
{showCodexOnlyFields && formData.importMode === 'form' && formData.transport === 'http' && (
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-foreground">
|
||||
Bearer Token Environment Variable
|
||||
@@ -385,7 +424,7 @@ export default function McpServerFormModal({
|
||||
? t('mcpForm.actions.saving')
|
||||
: isEditing
|
||||
? t('mcpForm.actions.updateServer')
|
||||
: `${t('mcpForm.actions.addServer')} to ${providerName}`}
|
||||
: addButtonLabel}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user