From 5f328a4c13f78be1e8073058cd2903f3939c2535 Mon Sep 17 00:00:00 2001 From: M Zubair Date: Sun, 28 Dec 2025 00:51:50 +0100 Subject: [PATCH 1/9] feat: add MCP server support for AI agents Add Model Context Protocol (MCP) server integration to extend AI agent capabilities with external tools. This allows users to configure MCP servers (stdio, SSE, HTTP) in global settings and have agents use them. Note: MCP servers are currently configured globally. Per-project MCP server configuration is planned for a future update. Features: - New MCP Servers settings section with full CRUD operations - Import/Export JSON configs (Claude Code format compatible) - Configurable permission settings: - Auto-approve MCP tools (bypass permission prompts) - Unrestricted tools (allow all tools when MCP enabled) - Refresh button to reload from settings file Implementation: - Added MCPServerConfig and MCPToolInfo types - Added store actions for MCP server management - Updated claude-provider to use configurable MCP permissions - Updated sdk-options factory functions for MCP support - Added settings helpers for loading MCP configs --- apps/server/package.json | 1 + apps/server/src/lib/sdk-options.ts | 99 ++- apps/server/src/lib/settings-helpers.ts | 118 ++++ apps/server/src/providers/claude-provider.ts | 24 +- apps/server/src/providers/types.ts | 46 +- apps/server/src/services/agent-service.ts | 14 + apps/server/src/services/auto-mode-service.ts | 23 + apps/ui/src/components/views/context-view.tsx | 7 + .../ui/src/components/views/settings-view.tsx | 3 + .../views/settings-view/config/navigation.ts | 2 + .../settings-view/hooks/use-settings-view.ts | 1 + .../views/settings-view/mcp-servers/index.ts | 1 + .../mcp-servers/mcp-servers-section.tsx | 647 ++++++++++++++++++ apps/ui/src/hooks/use-settings-migration.ts | 43 ++ apps/ui/src/lib/http-api-client.ts | 14 + apps/ui/src/store/app-store.ts | 56 ++ libs/types/src/index.ts | 6 + libs/types/src/provider.ts | 36 +- libs/types/src/settings.ts | 58 ++ package-lock.json | 219 +++++- 20 files changed, 1375 insertions(+), 43 deletions(-) create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/index.ts create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/mcp-servers-section.tsx diff --git a/apps/server/package.json b/apps/server/package.json index 081c7f23e..9f27c2a3c 100644 --- a/apps/server/package.json +++ b/apps/server/package.json @@ -28,6 +28,7 @@ "@automaker/prompts": "^1.0.0", "@automaker/types": "^1.0.0", "@automaker/utils": "^1.0.0", + "@modelcontextprotocol/sdk": "^1.25.1", "cors": "^2.8.5", "dotenv": "^17.2.3", "express": "^5.2.1", diff --git a/apps/server/src/lib/sdk-options.ts b/apps/server/src/lib/sdk-options.ts index 80433f5b0..269f78ac9 100644 --- a/apps/server/src/lib/sdk-options.ts +++ b/apps/server/src/lib/sdk-options.ts @@ -18,7 +18,7 @@ import type { Options } from '@anthropic-ai/claude-agent-sdk'; import path from 'path'; import { resolveModelString } from '@automaker/model-resolver'; -import { DEFAULT_MODELS, CLAUDE_MODEL_MAP } from '@automaker/types'; +import { DEFAULT_MODELS, CLAUDE_MODEL_MAP, type McpServerConfig } from '@automaker/types'; import { isPathAllowed, PathNotAllowedError, getAllowedRootDirectory } from '@automaker/platform'; /** @@ -136,6 +136,53 @@ function getBaseOptions(): Partial { }; } +/** + * MCP permission options result + */ +interface McpPermissionOptions { + /** Whether tools should be restricted to a preset */ + shouldRestrictTools: boolean; + /** Options to spread when MCP bypass is enabled */ + bypassOptions: Partial; + /** Options to spread for MCP servers */ + mcpServerOptions: Partial; +} + +/** + * Build MCP-related options based on configuration. + * Centralizes the logic for determining permission modes and tool restrictions + * when MCP servers are configured. + * + * @param config - The SDK options config + * @returns Object with MCP permission settings to spread into final options + */ +function buildMcpOptions(config: CreateSdkOptionsConfig): McpPermissionOptions { + const hasMcpServers = config.mcpServers && Object.keys(config.mcpServers).length > 0; + // Default to true - this is a deliberate design choice for ease of use with MCP servers. + // Users can disable these in settings for stricter security. + const mcpAutoApprove = config.mcpAutoApproveTools ?? true; + const mcpUnrestricted = config.mcpUnrestrictedTools ?? true; + + // Determine if we should bypass permissions based on settings + const shouldBypassPermissions = hasMcpServers && mcpAutoApprove; + // Determine if we should restrict tools (only when no MCP or unrestricted is disabled) + const shouldRestrictTools = !hasMcpServers || !mcpUnrestricted; + + return { + shouldRestrictTools, + // Only include bypass options when MCP is configured and auto-approve is enabled + bypassOptions: shouldBypassPermissions + ? { + permissionMode: 'bypassPermissions' as const, + // Required flag when using bypassPermissions mode + allowDangerouslySkipPermissions: true, + } + : {}, + // Include MCP servers if configured + mcpServerOptions: config.mcpServers ? { mcpServers: config.mcpServers } : {}, + }; +} + /** * Build system prompt configuration based on autoLoadClaudeMd setting. * When autoLoadClaudeMd is true: @@ -219,8 +266,25 @@ export interface CreateSdkOptionsConfig { /** Enable sandbox mode for bash command isolation */ enableSandboxMode?: boolean; + + /** MCP servers to make available to the agent */ + mcpServers?: Record; + + /** Auto-approve MCP tool calls without permission prompts */ + mcpAutoApproveTools?: boolean; + + /** Allow unrestricted tools when MCP servers are enabled */ + mcpUnrestrictedTools?: boolean; } +// Re-export MCP types from @automaker/types for convenience +export type { + McpServerConfig, + McpStdioServerConfig, + McpSSEServerConfig, + McpHttpServerConfig, +} from '@automaker/types'; + /** * Create SDK options for spec generation * @@ -330,12 +394,18 @@ export function createChatOptions(config: CreateSdkOptionsConfig): Options { // Build CLAUDE.md auto-loading options if enabled const claudeMdOptions = buildClaudeMdOptions(config); + // Build MCP-related options + const mcpOptions = buildMcpOptions(config); + return { ...getBaseOptions(), model: getModelForUseCase('chat', effectiveModel), maxTurns: MAX_TURNS.standard, cwd: config.cwd, - allowedTools: [...TOOL_PRESETS.chat], + // Only restrict tools if no MCP servers configured or unrestricted is disabled + ...(mcpOptions.shouldRestrictTools && { allowedTools: [...TOOL_PRESETS.chat] }), + // Apply MCP bypass options if configured + ...mcpOptions.bypassOptions, ...(config.enableSandboxMode && { sandbox: { enabled: true, @@ -344,6 +414,7 @@ export function createChatOptions(config: CreateSdkOptionsConfig): Options { }), ...claudeMdOptions, ...(config.abortController && { abortController: config.abortController }), + ...mcpOptions.mcpServerOptions, }; } @@ -364,12 +435,18 @@ export function createAutoModeOptions(config: CreateSdkOptionsConfig): Options { // Build CLAUDE.md auto-loading options if enabled const claudeMdOptions = buildClaudeMdOptions(config); + // Build MCP-related options + const mcpOptions = buildMcpOptions(config); + return { ...getBaseOptions(), model: getModelForUseCase('auto', config.model), maxTurns: MAX_TURNS.maximum, cwd: config.cwd, - allowedTools: [...TOOL_PRESETS.fullAccess], + // Only restrict tools if no MCP servers configured or unrestricted is disabled + ...(mcpOptions.shouldRestrictTools && { allowedTools: [...TOOL_PRESETS.fullAccess] }), + // Apply MCP bypass options if configured + ...mcpOptions.bypassOptions, ...(config.enableSandboxMode && { sandbox: { enabled: true, @@ -378,6 +455,7 @@ export function createAutoModeOptions(config: CreateSdkOptionsConfig): Options { }), ...claudeMdOptions, ...(config.abortController && { abortController: config.abortController }), + ...mcpOptions.mcpServerOptions, }; } @@ -400,14 +478,27 @@ export function createCustomOptions( // Build CLAUDE.md auto-loading options if enabled const claudeMdOptions = buildClaudeMdOptions(config); + // Build MCP-related options + const mcpOptions = buildMcpOptions(config); + + // For custom options: use explicit allowedTools if provided, otherwise use preset based on MCP settings + const effectiveAllowedTools = config.allowedTools + ? [...config.allowedTools] + : mcpOptions.shouldRestrictTools + ? [...TOOL_PRESETS.readOnly] + : undefined; + return { ...getBaseOptions(), model: getModelForUseCase('default', config.model), maxTurns: config.maxTurns ?? MAX_TURNS.maximum, cwd: config.cwd, - allowedTools: config.allowedTools ? [...config.allowedTools] : [...TOOL_PRESETS.readOnly], + ...(effectiveAllowedTools && { allowedTools: effectiveAllowedTools }), ...(config.sandbox && { sandbox: config.sandbox }), + // Apply MCP bypass options if configured + ...mcpOptions.bypassOptions, ...claudeMdOptions, ...(config.abortController && { abortController: config.abortController }), + ...mcpOptions.mcpServerOptions, }; } diff --git a/apps/server/src/lib/settings-helpers.ts b/apps/server/src/lib/settings-helpers.ts index dc0578735..21211b333 100644 --- a/apps/server/src/lib/settings-helpers.ts +++ b/apps/server/src/lib/settings-helpers.ts @@ -4,6 +4,7 @@ import type { SettingsService } from '../services/settings-service.js'; import type { ContextFilesResult, ContextFileInfo } from '@automaker/utils'; +import type { MCPServerConfig, McpServerConfig } from '@automaker/types'; /** * Get the autoLoadClaudeMd setting, with project settings taking precedence over global. @@ -136,3 +137,120 @@ function formatContextFileEntry(file: ContextFileInfo): string { const descriptionInfo = file.description ? `\n**Purpose:** ${file.description}` : ''; return `${header}\n${pathInfo}${descriptionInfo}\n\n${file.content}`; } + +/** + * Get enabled MCP servers from global settings, converted to SDK format. + * Returns an empty object if settings service is not available or no servers are configured. + * + * @param settingsService - Optional settings service instance + * @param logPrefix - Prefix for log messages (e.g., '[AgentService]') + * @returns Promise resolving to MCP servers in SDK format (keyed by name) + */ +export async function getMCPServersFromSettings( + settingsService?: SettingsService | null, + logPrefix = '[SettingsHelper]' +): Promise> { + if (!settingsService) { + return {}; + } + + try { + const globalSettings = await settingsService.getGlobalSettings(); + const mcpServers = globalSettings.mcpServers || []; + + // Filter to only enabled servers and convert to SDK format + const enabledServers = mcpServers.filter((s) => s.enabled !== false); + + if (enabledServers.length === 0) { + return {}; + } + + // Convert settings format to SDK format (keyed by name) + const sdkServers: Record = {}; + for (const server of enabledServers) { + sdkServers[server.name] = convertToSdkFormat(server); + } + + console.log( + `${logPrefix} Loaded ${enabledServers.length} MCP server(s): ${enabledServers.map((s) => s.name).join(', ')}` + ); + + return sdkServers; + } catch (error) { + console.error(`${logPrefix} Failed to load MCP servers setting:`, error); + return {}; + } +} + +/** + * Get MCP permission settings from global settings. + * + * @param settingsService - Optional settings service instance + * @param logPrefix - Prefix for log messages (e.g., '[AgentService]') + * @returns Promise resolving to MCP permission settings + */ +export async function getMCPPermissionSettings( + settingsService?: SettingsService | null, + logPrefix = '[SettingsHelper]' +): Promise<{ mcpAutoApproveTools: boolean; mcpUnrestrictedTools: boolean }> { + // Default values (both enabled for backwards compatibility) + const defaults = { mcpAutoApproveTools: true, mcpUnrestrictedTools: true }; + + if (!settingsService) { + return defaults; + } + + try { + const globalSettings = await settingsService.getGlobalSettings(); + const result = { + mcpAutoApproveTools: globalSettings.mcpAutoApproveTools ?? true, + mcpUnrestrictedTools: globalSettings.mcpUnrestrictedTools ?? true, + }; + console.log( + `${logPrefix} MCP permission settings: autoApprove=${result.mcpAutoApproveTools}, unrestricted=${result.mcpUnrestrictedTools}` + ); + return result; + } catch (error) { + console.error(`${logPrefix} Failed to load MCP permission settings:`, error); + return defaults; + } +} + +/** + * Convert a settings MCPServerConfig to SDK McpServerConfig format. + * Validates required fields and throws informative errors if missing. + */ +function convertToSdkFormat(server: MCPServerConfig): McpServerConfig { + if (server.type === 'sse') { + if (!server.url) { + throw new Error(`SSE MCP server "${server.name}" is missing a URL.`); + } + return { + type: 'sse', + url: server.url, + headers: server.headers, + }; + } + + if (server.type === 'http') { + if (!server.url) { + throw new Error(`HTTP MCP server "${server.name}" is missing a URL.`); + } + return { + type: 'http', + url: server.url, + headers: server.headers, + }; + } + + // Default to stdio + if (!server.command) { + throw new Error(`Stdio MCP server "${server.name}" is missing a command.`); + } + return { + type: 'stdio', + command: server.command, + args: server.args, + env: server.env, + }; +} diff --git a/apps/server/src/providers/claude-provider.ts b/apps/server/src/providers/claude-provider.ts index 716e94ca0..3c765304b 100644 --- a/apps/server/src/providers/claude-provider.ts +++ b/apps/server/src/providers/claude-provider.ts @@ -36,16 +36,32 @@ export class ClaudeProvider extends BaseProvider { } = options; // Build Claude SDK options + // MCP permission logic - determines how to handle tool permissions when MCP servers are configured. + // This logic mirrors buildMcpOptions() in sdk-options.ts but is applied here since + // the provider is the final point where SDK options are constructed. + const hasMcpServers = options.mcpServers && Object.keys(options.mcpServers).length > 0; + // Default to true - deliberate design choice for ease of use. Users can disable in settings. + const mcpAutoApprove = options.mcpAutoApproveTools ?? true; + const mcpUnrestricted = options.mcpUnrestrictedTools ?? true; const defaultTools = ['Read', 'Write', 'Edit', 'Glob', 'Grep', 'Bash', 'WebSearch', 'WebFetch']; - const toolsToUse = allowedTools || defaultTools; + + // Determine permission mode based on settings + const shouldBypassPermissions = hasMcpServers && mcpAutoApprove; + // Determine if we should restrict tools (only when no MCP or unrestricted is disabled) + const shouldRestrictTools = !hasMcpServers || !mcpUnrestricted; const sdkOptions: Options = { model, systemPrompt, maxTurns, cwd, - allowedTools: toolsToUse, - permissionMode: 'default', + // Only restrict tools if explicitly set OR (no MCP / unrestricted disabled) + ...(allowedTools && shouldRestrictTools && { allowedTools }), + ...(!allowedTools && shouldRestrictTools && { allowedTools: defaultTools }), + // When MCP servers are configured and auto-approve is enabled, use bypassPermissions + permissionMode: shouldBypassPermissions ? 'bypassPermissions' : 'default', + // Required when using bypassPermissions mode + ...(shouldBypassPermissions && { allowDangerouslySkipPermissions: true }), abortController, // Resume existing SDK session if we have a session ID ...(sdkSessionId && conversationHistory && conversationHistory.length > 0 @@ -55,6 +71,8 @@ export class ClaudeProvider extends BaseProvider { ...(options.settingSources && { settingSources: options.settingSources }), // Forward sandbox configuration ...(options.sandbox && { sandbox: options.sandbox }), + // Forward MCP servers configuration + ...(options.mcpServers && { mcpServers: options.mcpServers }), }; // Build prompt payload diff --git a/apps/server/src/providers/types.ts b/apps/server/src/providers/types.ts index 17b450666..a3dcf58cd 100644 --- a/apps/server/src/providers/types.ts +++ b/apps/server/src/providers/types.ts @@ -1,41 +1,19 @@ /** * Shared types for AI model providers + * + * Re-exports types from @automaker/types for consistency across the codebase. */ -/** - * Configuration for a provider instance - */ -export interface ProviderConfig { - apiKey?: string; - cliPath?: string; - env?: Record; -} - -/** - * Message in conversation history - */ -export interface ConversationMessage { - role: 'user' | 'assistant'; - content: string | Array<{ type: string; text?: string; source?: object }>; -} - -/** - * Options for executing a query via a provider - */ -export interface ExecuteOptions { - prompt: string | Array<{ type: string; text?: string; source?: object }>; - model: string; - cwd: string; - systemPrompt?: string | { type: 'preset'; preset: 'claude_code'; append?: string }; - maxTurns?: number; - allowedTools?: string[]; - mcpServers?: Record; - abortController?: AbortController; - conversationHistory?: ConversationMessage[]; // Previous messages for context - sdkSessionId?: string; // Claude SDK session ID for resuming conversations - settingSources?: Array<'user' | 'project' | 'local'>; // Claude filesystem settings to load - sandbox?: { enabled: boolean; autoAllowBashIfSandboxed?: boolean }; // Sandbox configuration -} +// Re-export all provider types from @automaker/types +export type { + ProviderConfig, + ConversationMessage, + ExecuteOptions, + McpServerConfig, + McpStdioServerConfig, + McpSSEServerConfig, + McpHttpServerConfig, +} from '@automaker/types'; /** * Content block in a provider message (matches Claude SDK format) diff --git a/apps/server/src/services/agent-service.ts b/apps/server/src/services/agent-service.ts index dc6d45948..63c220dbc 100644 --- a/apps/server/src/services/agent-service.ts +++ b/apps/server/src/services/agent-service.ts @@ -21,6 +21,8 @@ import { getAutoLoadClaudeMdSetting, getEnableSandboxModeSetting, filterClaudeMdFromContext, + getMCPServersFromSettings, + getMCPPermissionSettings, } from '../lib/settings-helpers.js'; interface Message { @@ -227,6 +229,12 @@ export class AgentService { '[AgentService]' ); + // Load MCP servers from settings (global setting only) + const mcpServers = await getMCPServersFromSettings(this.settingsService, '[AgentService]'); + + // Load MCP permission settings (global setting only) + const mcpPermissions = await getMCPPermissionSettings(this.settingsService, '[AgentService]'); + // Load project context files (CLAUDE.md, CODE_QUALITY.md, etc.) const contextResult = await loadContextFiles({ projectPath: effectiveWorkDir, @@ -252,6 +260,9 @@ export class AgentService { abortController: session.abortController!, autoLoadClaudeMd, enableSandboxMode, + mcpServers: Object.keys(mcpServers).length > 0 ? mcpServers : undefined, + mcpAutoApproveTools: mcpPermissions.mcpAutoApproveTools, + mcpUnrestrictedTools: mcpPermissions.mcpUnrestrictedTools, }); // Extract model, maxTurns, and allowedTools from SDK options @@ -275,6 +286,9 @@ export class AgentService { settingSources: sdkOptions.settingSources, sandbox: sdkOptions.sandbox, // Pass sandbox configuration sdkSessionId: session.sdkSessionId, // Pass SDK session ID for resuming + mcpServers: Object.keys(mcpServers).length > 0 ? mcpServers : undefined, // Pass MCP servers configuration + mcpAutoApproveTools: mcpPermissions.mcpAutoApproveTools, // Pass MCP auto-approve setting + mcpUnrestrictedTools: mcpPermissions.mcpUnrestrictedTools, // Pass MCP unrestricted tools setting }; // Build prompt content with images diff --git a/apps/server/src/services/auto-mode-service.ts b/apps/server/src/services/auto-mode-service.ts index 987554f24..da9afcd1c 100644 --- a/apps/server/src/services/auto-mode-service.ts +++ b/apps/server/src/services/auto-mode-service.ts @@ -36,6 +36,8 @@ import { getAutoLoadClaudeMdSetting, getEnableSandboxModeSetting, filterClaudeMdFromContext, + getMCPServersFromSettings, + getMCPPermissionSettings, } from '../lib/settings-helpers.js'; const execAsync = promisify(exec); @@ -1841,6 +1843,12 @@ This mock response was generated because AUTOMAKER_MOCK_AGENT=true was set. // Load enableSandboxMode setting (global setting only) const enableSandboxMode = await getEnableSandboxModeSetting(this.settingsService, '[AutoMode]'); + // Load MCP servers from settings (global setting only) + const mcpServers = await getMCPServersFromSettings(this.settingsService, '[AutoMode]'); + + // Load MCP permission settings (global setting only) + const mcpPermissions = await getMCPPermissionSettings(this.settingsService, '[AutoMode]'); + // Build SDK options using centralized configuration for feature implementation const sdkOptions = createAutoModeOptions({ cwd: workDir, @@ -1848,6 +1856,9 @@ This mock response was generated because AUTOMAKER_MOCK_AGENT=true was set. abortController, autoLoadClaudeMd, enableSandboxMode, + mcpServers: Object.keys(mcpServers).length > 0 ? mcpServers : undefined, + mcpAutoApproveTools: mcpPermissions.mcpAutoApproveTools, + mcpUnrestrictedTools: mcpPermissions.mcpUnrestrictedTools, }); // Extract model, maxTurns, and allowedTools from SDK options @@ -1889,6 +1900,9 @@ This mock response was generated because AUTOMAKER_MOCK_AGENT=true was set. systemPrompt: sdkOptions.systemPrompt, settingSources: sdkOptions.settingSources, sandbox: sdkOptions.sandbox, // Pass sandbox configuration + mcpServers: Object.keys(mcpServers).length > 0 ? mcpServers : undefined, // Pass MCP servers configuration + mcpAutoApproveTools: mcpPermissions.mcpAutoApproveTools, // Pass MCP auto-approve setting + mcpUnrestrictedTools: mcpPermissions.mcpUnrestrictedTools, // Pass MCP unrestricted tools setting }; // Execute via provider @@ -2116,6 +2130,9 @@ After generating the revised spec, output: cwd: workDir, allowedTools: allowedTools, abortController, + mcpServers: Object.keys(mcpServers).length > 0 ? mcpServers : undefined, + mcpAutoApproveTools: mcpPermissions.mcpAutoApproveTools, + mcpUnrestrictedTools: mcpPermissions.mcpUnrestrictedTools, }); let revisionText = ''; @@ -2253,6 +2270,9 @@ After generating the revised spec, output: cwd: workDir, allowedTools: allowedTools, abortController, + mcpServers: Object.keys(mcpServers).length > 0 ? mcpServers : undefined, + mcpAutoApproveTools: mcpPermissions.mcpAutoApproveTools, + mcpUnrestrictedTools: mcpPermissions.mcpUnrestrictedTools, }); let taskOutput = ''; @@ -2342,6 +2362,9 @@ Implement all the changes described in the plan above.`; cwd: workDir, allowedTools: allowedTools, abortController, + mcpServers: Object.keys(mcpServers).length > 0 ? mcpServers : undefined, + mcpAutoApproveTools: mcpPermissions.mcpAutoApproveTools, + mcpUnrestrictedTools: mcpPermissions.mcpUnrestrictedTools, }); for await (const msg of continuationStream) { diff --git a/apps/ui/src/components/views/context-view.tsx b/apps/ui/src/components/views/context-view.tsx index 1ea9c06e2..d81d6210d 100644 --- a/apps/ui/src/components/views/context-view.tsx +++ b/apps/ui/src/components/views/context-view.tsx @@ -178,6 +178,13 @@ export function ContextView() { // Ensure context directory exists await api.mkdir(contextPath); + // Ensure metadata file exists (create empty one if not) + const metadataPath = `${contextPath}/context-metadata.json`; + const metadataExists = await api.exists(metadataPath); + if (!metadataExists) { + await api.writeFile(metadataPath, JSON.stringify({ files: {} }, null, 2)); + } + // Load metadata for descriptions const metadata = await loadMetadata(); diff --git a/apps/ui/src/components/views/settings-view.tsx b/apps/ui/src/components/views/settings-view.tsx index 6ea52add6..70d19e5f8 100644 --- a/apps/ui/src/components/views/settings-view.tsx +++ b/apps/ui/src/components/views/settings-view.tsx @@ -18,6 +18,7 @@ import { AudioSection } from './settings-view/audio/audio-section'; import { KeyboardShortcutsSection } from './settings-view/keyboard-shortcuts/keyboard-shortcuts-section'; import { FeatureDefaultsSection } from './settings-view/feature-defaults/feature-defaults-section'; import { DangerZoneSection } from './settings-view/danger-zone/danger-zone-section'; +import { MCPServersSection } from './settings-view/mcp-servers'; import type { Project as SettingsProject, Theme } from './settings-view/shared/types'; import type { Project as ElectronProject } from '@/lib/electron'; @@ -116,6 +117,8 @@ export function SettingsView() { {showUsageTracking && } ); + case 'mcp-servers': + return ; case 'ai-enhancement': return ; case 'appearance': diff --git a/apps/ui/src/components/views/settings-view/config/navigation.ts b/apps/ui/src/components/views/settings-view/config/navigation.ts index e32c2223a..d478bb4d3 100644 --- a/apps/ui/src/components/views/settings-view/config/navigation.ts +++ b/apps/ui/src/components/views/settings-view/config/navigation.ts @@ -9,6 +9,7 @@ import { FlaskConical, Trash2, Sparkles, + Plug, } from 'lucide-react'; import type { SettingsViewId } from '../hooks/use-settings-view'; @@ -22,6 +23,7 @@ export interface NavigationItem { export const NAV_ITEMS: NavigationItem[] = [ { id: 'api-keys', label: 'API Keys', icon: Key }, { id: 'claude', label: 'Claude', icon: Terminal }, + { id: 'mcp-servers', label: 'MCP Servers', icon: Plug }, { id: 'ai-enhancement', label: 'AI Enhancement', icon: Sparkles }, { id: 'appearance', label: 'Appearance', icon: Palette }, { id: 'terminal', label: 'Terminal', icon: SquareTerminal }, diff --git a/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts b/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts index 2e3f784f9..48c406b2b 100644 --- a/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts +++ b/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts @@ -3,6 +3,7 @@ import { useState, useCallback } from 'react'; export type SettingsViewId = | 'api-keys' | 'claude' + | 'mcp-servers' | 'ai-enhancement' | 'appearance' | 'terminal' diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/index.ts b/apps/ui/src/components/views/settings-view/mcp-servers/index.ts new file mode 100644 index 000000000..bd267fe25 --- /dev/null +++ b/apps/ui/src/components/views/settings-view/mcp-servers/index.ts @@ -0,0 +1 @@ +export { MCPServersSection } from './mcp-servers-section'; diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/mcp-servers-section.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/mcp-servers-section.tsx new file mode 100644 index 000000000..70863dd16 --- /dev/null +++ b/apps/ui/src/components/views/settings-view/mcp-servers/mcp-servers-section.tsx @@ -0,0 +1,647 @@ +import { useState, useEffect } from 'react'; +import { useAppStore } from '@/store/app-store'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Switch } from '@/components/ui/switch'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from '@/components/ui/dialog'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { + Plug, + Plus, + Pencil, + Trash2, + Terminal, + Globe, + FileJson, + Download, + RefreshCw, +} from 'lucide-react'; +import { Textarea } from '@/components/ui/textarea'; +import { cn } from '@/lib/utils'; +import { toast } from 'sonner'; +import type { MCPServerConfig } from '@automaker/types'; +import { syncSettingsToServer, loadMCPServersFromServer } from '@/hooks/use-settings-migration'; + +type ServerType = 'stdio' | 'sse' | 'http'; + +interface ServerFormData { + name: string; + description: string; + type: ServerType; + command: string; + args: string; + url: string; +} + +const defaultFormData: ServerFormData = { + name: '', + description: '', + type: 'stdio', + command: '', + args: '', + url: '', +}; + +export function MCPServersSection() { + const { + mcpServers, + addMCPServer, + updateMCPServer, + removeMCPServer, + mcpAutoApproveTools, + mcpUnrestrictedTools, + setMcpAutoApproveTools, + setMcpUnrestrictedTools, + } = useAppStore(); + const [isAddDialogOpen, setIsAddDialogOpen] = useState(false); + const [editingServer, setEditingServer] = useState(null); + const [formData, setFormData] = useState(defaultFormData); + const [deleteConfirmId, setDeleteConfirmId] = useState(null); + const [isImportDialogOpen, setIsImportDialogOpen] = useState(false); + const [importJson, setImportJson] = useState(''); + const [isRefreshing, setIsRefreshing] = useState(false); + + // Auto-load MCP servers from settings file on mount + useEffect(() => { + loadMCPServersFromServer().catch((error) => { + console.error('Failed to load MCP servers on mount:', error); + }); + }, []); + + const handleRefresh = async () => { + setIsRefreshing(true); + try { + const success = await loadMCPServersFromServer(); + if (success) { + toast.success('MCP servers refreshed from settings'); + } else { + toast.error('Failed to refresh MCP servers'); + } + } catch (error) { + toast.error('Error refreshing MCP servers'); + } finally { + setIsRefreshing(false); + } + }; + + const handleOpenAddDialog = () => { + setFormData(defaultFormData); + setEditingServer(null); + setIsAddDialogOpen(true); + }; + + const handleOpenEditDialog = (server: MCPServerConfig) => { + setFormData({ + name: server.name, + description: server.description || '', + type: server.type || 'stdio', + command: server.command || '', + args: server.args?.join(' ') || '', + url: server.url || '', + }); + setEditingServer(server); + setIsAddDialogOpen(true); + }; + + const handleCloseDialog = () => { + setIsAddDialogOpen(false); + setEditingServer(null); + setFormData(defaultFormData); + }; + + const handleSave = async () => { + if (!formData.name.trim()) { + toast.error('Server name is required'); + return; + } + + if (formData.type === 'stdio' && !formData.command.trim()) { + toast.error('Command is required for stdio servers'); + return; + } + + if ((formData.type === 'sse' || formData.type === 'http') && !formData.url.trim()) { + toast.error('URL is required for SSE/HTTP servers'); + return; + } + + const serverData: Omit = { + name: formData.name.trim(), + description: formData.description.trim() || undefined, + type: formData.type, + enabled: editingServer?.enabled ?? true, + }; + + if (formData.type === 'stdio') { + serverData.command = formData.command.trim(); + if (formData.args.trim()) { + serverData.args = formData.args.trim().split(/\s+/); + } + } else { + serverData.url = formData.url.trim(); + } + + if (editingServer) { + updateMCPServer(editingServer.id, serverData); + toast.success('MCP server updated'); + } else { + addMCPServer(serverData); + toast.success('MCP server added'); + } + + await syncSettingsToServer(); + handleCloseDialog(); + }; + + const handleToggleEnabled = async (server: MCPServerConfig) => { + updateMCPServer(server.id, { enabled: !server.enabled }); + await syncSettingsToServer(); + toast.success(server.enabled ? 'Server disabled' : 'Server enabled'); + }; + + const handleDelete = async (id: string) => { + removeMCPServer(id); + await syncSettingsToServer(); + setDeleteConfirmId(null); + toast.success('MCP server removed'); + }; + + const getServerIcon = (type: ServerType = 'stdio') => { + if (type === 'stdio') return Terminal; + return Globe; + }; + + const handleImportJson = async () => { + try { + const parsed = JSON.parse(importJson); + + // Support both formats: + // 1. Claude Code format: { "mcpServers": { "name": { command, args, ... } } } + // 2. Direct format: { "name": { command, args, ... } } + const servers = parsed.mcpServers || parsed; + + if (typeof servers !== 'object' || Array.isArray(servers)) { + toast.error('Invalid format: expected object with server configurations'); + return; + } + + let addedCount = 0; + let skippedCount = 0; + + for (const [name, config] of Object.entries(servers)) { + if (typeof config !== 'object' || config === null) continue; + + const serverConfig = config as Record; + + // Check if server with this name already exists + if (mcpServers.some((s) => s.name === name)) { + skippedCount++; + continue; + } + + const serverData: Omit = { + name, + type: (serverConfig.type as ServerType) || 'stdio', + enabled: true, + }; + + if (serverData.type === 'stdio') { + if (!serverConfig.command) { + console.warn(`Skipping ${name}: no command specified`); + skippedCount++; + continue; + } + serverData.command = serverConfig.command as string; + if (Array.isArray(serverConfig.args)) { + serverData.args = serverConfig.args as string[]; + } + if (typeof serverConfig.env === 'object' && serverConfig.env !== null) { + serverData.env = serverConfig.env as Record; + } + } else { + if (!serverConfig.url) { + console.warn(`Skipping ${name}: no url specified`); + skippedCount++; + continue; + } + serverData.url = serverConfig.url as string; + if (typeof serverConfig.headers === 'object' && serverConfig.headers !== null) { + serverData.headers = serverConfig.headers as Record; + } + } + + addMCPServer(serverData); + addedCount++; + } + + await syncSettingsToServer(); + + if (addedCount > 0) { + toast.success(`Imported ${addedCount} MCP server${addedCount > 1 ? 's' : ''}`); + } + if (skippedCount > 0) { + toast.info( + `Skipped ${skippedCount} server${skippedCount > 1 ? 's' : ''} (already exist or invalid)` + ); + } + if (addedCount === 0 && skippedCount === 0) { + toast.warning('No servers found in JSON'); + } + + setIsImportDialogOpen(false); + setImportJson(''); + } catch (error) { + toast.error('Invalid JSON: ' + (error instanceof Error ? error.message : 'Parse error')); + } + }; + + const handleExportJson = () => { + const exportData: Record> = {}; + + for (const server of mcpServers) { + const serverConfig: Record = { + type: server.type || 'stdio', + }; + + if (server.type === 'stdio' || !server.type) { + serverConfig.command = server.command; + if (server.args?.length) serverConfig.args = server.args; + if (server.env && Object.keys(server.env).length > 0) serverConfig.env = server.env; + } else { + serverConfig.url = server.url; + if (server.headers && Object.keys(server.headers).length > 0) + serverConfig.headers = server.headers; + } + + exportData[server.name] = serverConfig; + } + + const json = JSON.stringify({ mcpServers: exportData }, null, 2); + navigator.clipboard.writeText(json); + toast.success('Copied to clipboard'); + }; + + return ( +
+ {/* Header */} +
+
+
+
+
+ +
+

MCP Servers

+
+

+ Configure Model Context Protocol servers to extend agent capabilities. +

+
+
+ + {mcpServers.length > 0 && ( + + )} + + +
+
+
+ + {/* Permission Settings */} + {mcpServers.length > 0 && ( +
+
+
+
+ +

+ Allow MCP tool calls without permission prompts (recommended) +

+
+ { + setMcpAutoApproveTools(checked); + await syncSettingsToServer(); + }} + data-testid="mcp-auto-approve-toggle" + /> +
+
+
+ +

+ Allow all tools when MCP is enabled (don't filter to default set) +

+
+ { + setMcpUnrestrictedTools(checked); + await syncSettingsToServer(); + }} + data-testid="mcp-unrestricted-toggle" + /> +
+
+
+ )} + + {/* Server List */} +
+ {mcpServers.length === 0 ? ( +
+ +

No MCP servers configured

+

Add a server to extend agent capabilities

+
+ ) : ( +
+ {mcpServers.map((server) => { + const Icon = getServerIcon(server.type); + return ( +
+
+
+ +
+
+
{server.name}
+ {server.description && ( +
{server.description}
+ )} +
+ {server.type === 'stdio' + ? `${server.command}${server.args?.length ? ' ' + server.args.join(' ') : ''}` + : server.url} +
+
+
+
+ handleToggleEnabled(server)} + data-testid={`mcp-server-toggle-${server.id}`} + /> + + +
+
+ ); + })} +
+ )} +
+ + {/* Add/Edit Dialog */} + + + + {editingServer ? 'Edit MCP Server' : 'Add MCP Server'} + + Configure an MCP server to extend agent capabilities with custom tools. + + +
+
+ + setFormData({ ...formData, name: e.target.value })} + placeholder="my-mcp-server" + data-testid="mcp-server-name-input" + /> +
+
+ + setFormData({ ...formData, description: e.target.value })} + placeholder="What this server provides..." + data-testid="mcp-server-description-input" + /> +
+
+ + +
+ {formData.type === 'stdio' ? ( + <> +
+ + setFormData({ ...formData, command: e.target.value })} + placeholder="npx, node, python, etc." + data-testid="mcp-server-command-input" + /> +
+
+ + setFormData({ ...formData, args: e.target.value })} + placeholder="-y @modelcontextprotocol/server-filesystem" + data-testid="mcp-server-args-input" + /> +
+ + ) : ( +
+ + setFormData({ ...formData, url: e.target.value })} + placeholder="https://example.com/mcp" + data-testid="mcp-server-url-input" + /> +
+ )} +
+ + + + + + + + {/* Delete Confirmation Dialog */} + setDeleteConfirmId(null)}> + + + Delete MCP Server + + Are you sure you want to delete this MCP server? This action cannot be undone. + + + + + + + + + + {/* Import JSON Dialog */} + + + + Import MCP Servers + + Paste JSON configuration in Claude Code format. Servers with duplicate names will be + skipped. + + +
+